@electerm/electerm-react 1.34.30

package/client/components/sidebar/info-modal.jsx

@@ -0,0 +1,250 @@
+import {
+  GithubOutlined,
+  GlobalOutlined,
+  HighlightOutlined,
+  HomeOutlined,
+  UserOutlined,
+  WarningOutlined,
+  InfoCircleOutlined,
+  AlignLeftOutlined,
+  BugOutlined,
+  HeartOutlined
+} from '@ant-design/icons'
+import { Component } from '../common/react-subx'
+import { Modal, Tabs, Button } from 'antd'
+import Link from '../common/external-link'
+import LogoElem from '../common/logo-elem'
+
+import {
+  packInfo,
+  infoTabs,
+  srcsSkipUpgradeCheck
+} from '../../common/constants'
+import './info.styl'
+
+const { prefix } = window
+const e = prefix('control')
+const m = prefix('menu')
+const c = prefix('common')
+const a = prefix('app')
+const s = prefix('setting')
+
+export default class InfoModal extends Component {
+  handleChangeTab = key => {
+    this.props.store.infoModalTab = key
+  }
+
+  renderCheckUpdate = () => {
+    if (srcsSkipUpgradeCheck.includes(this.props.store.installSrc)) {
+      return null
+    }
+    const { store } = this.props
+    const {
+      onCheckUpdate
+    } = store
+    const onCheckUpdating = store.upgradeInfo.checkingRemoteVersion || store.upgradeInfo.upgrading
+    return (
+      <p className='mg1b mg2t'>
+        <Button
+          type='primary'
+          loading={onCheckUpdating}
+          onClick={() => onCheckUpdate(true)}
+        >
+          {e('checkForUpdate')}
+        </Button>
+      </p>
+    )
+  }
+
+  render () {
+    const { store } = this.props
+    const {
+      onCloseAbout,
+      showInfoModal,
+      commandLineHelp,
+      infoModalTab
+    } = store
+    if (!showInfoModal) {
+      return null
+    }
+    const {
+      name,
+      // description,
+      devDependencies,
+      dependencies,
+      langugeRepo,
+      author: {
+        name: authorName,
+        email,
+        url: authorUrl
+      },
+      homepage,
+      bugs: {
+        url: bugReportLink
+      },
+      releases: releaseLink,
+      privacyNoticeLink,
+      sponsorLink,
+      knownIssuesLink
+    } = packInfo
+    const link = releaseLink.replace('/releases', '')
+    const { env, versions } = window.pre
+    const deps = {
+      ...devDependencies,
+      ...dependencies
+    }
+    const envs = {
+      ...versions,
+      ...env
+    }
+    const title = (
+      <div className='ant-modal-confirm-title font16'>
+        <InfoCircleOutlined className='font20 mg1r' /> {m('about')} {name}
+      </div>
+    )
+    const attrs = {
+      title,
+      width: window.innerWidth - 100,
+      maskClosable: true,
+      okText: c('ok'),
+      onCancel: onCloseAbout,
+      footer: null,
+      open: true,
+      wrapClassName: 'info-modal'
+    }
+    const items = [
+      {
+        key: infoTabs.info,
+        label: m('about'),
+        children: (
+          <div>
+            <LogoElem />
+            <p className='mg2b'>{a('desc')}</p>
+            <p className='mg1b'>
+              <UserOutlined /> <b className='mg1r'>{e('author')} ➾</b>
+              <Link to={authorUrl} className='mg1l'>
+                {authorName} ({email})
+              </Link>
+            </p>
+            <p className='mg1b'>
+              <HomeOutlined /> <b>{e('homepage')}/{e('download')} ➾</b>
+              <Link to={homepage} className='mg1l'>
+                {homepage}
+              </Link>
+            </p>
+            <p className='mg1b'>
+              <GithubOutlined /> <b className='mg1r'>github ➾</b>
+              <Link to={link} className='mg1l'>
+                {link}
+              </Link>
+            </p>
+            <p className='mg1b'>
+              <GlobalOutlined /> <b className='mg1r'>{s('language')} repo ➾</b>
+              <Link to={langugeRepo} className='mg1l'>
+                {langugeRepo}
+              </Link>
+            </p>
+            <p className='mg1b'>
+              <BugOutlined /> <b className='mg1r'>{e('bugReport')} ➾</b>
+              <Link to={bugReportLink} className='mg1l'>
+                {bugReportLink}
+              </Link>
+            </p>
+            <p className='mg1b'>
+              <HighlightOutlined /> <b className='mg1r'>{a('changeLog')} ➾</b>
+              <Link to={releaseLink} className='mg1l'>
+                {releaseLink}
+              </Link>
+            </p>
+            <p className='mg1b'>
+              <AlignLeftOutlined /> <b className='mg1r'>{a('knownIssues')} ➾</b>
+              <Link to={knownIssuesLink} className='mg1l'>
+                {knownIssuesLink}
+              </Link>
+            </p>
+            <p className='mg1b'>
+              <WarningOutlined /> <b className='mg1r'>{a('privacyNotice')} ➾</b>
+              <Link to={privacyNoticeLink} className='mg1l'>
+                {privacyNoticeLink}
+              </Link>
+            </p>
+            <p className='mg1b'>
+              <HeartOutlined /> <b className='mg1r'>{a('sponsorElecterm')} ➾</b>
+              <Link to={sponsorLink} className='mg1l'>
+                {sponsorLink}
+              </Link>
+            </p>
+            {this.renderCheckUpdate()}
+          </div>
+        )
+      },
+      {
+        key: infoTabs.deps,
+        label: e('dependencies'),
+        children: Object.keys(deps).map((k, i) => {
+          const v = deps[k]
+          return (
+            <div className='pd1b' key={i + '_dp_' + k}>
+              <b className='bold'>{k}</b>:
+              <span className='mg1l'>
+                {v}
+              </span>
+            </div>
+          )
+        })
+      },
+      {
+        key: infoTabs.env,
+        label: e('env'),
+        children: Object.keys(envs).map((k, i) => {
+          const v = envs[k]
+          return (
+            <div className='pd1b' key={i + '_env_' + k}>
+              <b className='bold'>{k}</b>:
+              <span className='mg1l'>
+                {v}
+              </span>
+            </div>
+          )
+        })
+      },
+      {
+        key: infoTabs.os,
+        label: e('os'),
+        children: window.pre.osInfo().map(({ k, v }, i) => {
+          return (
+            <div className='pd1b' key={i + '_os_' + k}>
+              <b className='bold'>{k}</b>:
+              <span className='mg1l'>
+                {v}
+              </span>
+            </div>
+          )
+        })
+      },
+      {
+        key: infoTabs.cmd,
+        label: e('commandLineUsage'),
+        children: (
+          <pre>
+            <code>{commandLineHelp}</code>
+          </pre>
+        )
+      }
+    ]
+
+    return (
+      <Modal
+        {...attrs}
+      >
+        <div className='about-wrap'>
+          <Tabs
+            activeKey={infoModalTab}
+            onChange={this.handleChangeTab}
+            items={items}
+          />
+        </div>
+      </Modal>
+    )
+  }
+}

package/client/components/sidebar/info.styl

@@ -0,0 +1,27 @@
+@require '../../css/includes/theme-default'
+
+// from https://freefrontend.com/css-border-animations/
+.morph-shape
+ 	background linear-gradient(45deg, primary 0%, success 100%)
+  animation morph 8s ease-in-out infinite
+  border-radius 60% 40% 30% 70% / 60% 30% 70% 40%
+  transition all 1s ease-in-out
+  z-index 5
+
+@keyframes morph
+  0%
+    border-radius 60% 40% 30% 70% / 60% 30% 70% 40%
+    background linear-gradient(45deg, primary 0%, success 100%)
+  50%
+    border-radius  30% 60% 70% 40% / 50% 60% 30% 60%
+    background linear-gradient(45deg, main 0%, success 100%)
+
+  100%
+    border-radius 60% 40% 30% 70% / 60% 30% 70% 40%
+    background linear-gradient(45deg, primary 0%, success 100%)
+.info-modal
+  .ant-modal-header
+    border none
+  .ant-modal-body
+    padding 52px
+    padding-top 0

package/client/components/sidebar/side-icon.jsx

@@ -0,0 +1,25 @@
+import classNames from 'classnames'
+
+export default function SideIcon (props) {
+  const {
+    show,
+    className,
+    title = '',
+    active,
+    children
+  } = props
+  if (show === false) {
+    return null
+  }
+  const cls = classNames(className, 'control-icon-wrap', {
+    active
+  })
+  return (
+    <div
+      className={cls}
+      title={title}
+    >
+      {children}
+    </div>
+  )
+}

package/client/components/sidebar/sidebar.styl

@@ -0,0 +1,128 @@
+@require '../../css/includes/theme-default'
+.animate-fast
+  animation-duration .2s
+.sidebar-panel
+  position absolute
+  left 43px
+  top 56px
+  bottom 36px
+  z-index 200
+  width 0
+  overflow-y scroll
+  background main-light
+  color text
+  .item-list-unit:hover
+    .list-item-remove
+      display none !important
+.system-ui .sidebar-panel
+  top 45px
+.pinned .sidebar-panel
+  bottom 0
+.sidebar
+  position absolute
+  left 0
+  top 0
+  width 36px
+  z-index 100
+  bottom 0
+  background main-dark
+  box-shadow 0px 0px 3px 3px alpha(main, .1)
+  .item-list
+    padding-right 0
+.type-bookmarks
+  .bookmarks-panel
+    width 300px
+.type-history
+  .history-panel
+    width 300px
+.control-icon-text
+  color text
+  &:hover
+    color text-light
+.control-icon-wrap
+  padding 14px 0
+  text-align center
+  &.active
+    .control-icon
+      color text-light
+  .control-icon
+    color text-dark
+    cursor pointer
+    &:hover
+      color text-light
+.sidebar-list
+  .pinned
+    color success
+    &:hover
+      color success
+
+//btns
+.btns
+  background main-dark
+  border-color primary
+  // .ant-select-arrow
+  .open-about-icon
+    color text-dark
+    &:hover
+      color text-light
+  // .ant-btn
+  // .ant-select-selection
+  //   background transparent
+  //   color #aaa
+  //   border-color #555
+
+/*!
+ * Hover.css (http://ianlunn.github.io/Hover/)
+ * Version: 2.3.2
+ * Author: Ian Lunn @IanLunn
+ * Author URL: http://ianlunn.co.uk/
+ * Github: https://github.com/IanLunn/Hover
+
+ * Hover.css Copyright Ian Lunn 2017. Generated with Sass.
+ */
+/* Bob */
+@keyframes hvr-bob {
+  0% {
+    -webkit-transform: translateY(-8px);
+    transform: translateY(-8px);
+  }
+  50% {
+    -webkit-transform: translateY(-4px);
+    transform: translateY(-4px);
+  }
+  100% {
+    -webkit-transform: translateY(-8px);
+    transform: translateY(-8px);
+  }
+}
+@-webkit-keyframes hvr-bob-float {
+  100% {
+    -webkit-transform: translateY(-8px);
+    transform: translateY(-8px);
+  }
+}
+@keyframes hvr-bob-float {
+  100% {
+    -webkit-transform: translateY(-8px);
+    transform: translateY(-8px);
+  }
+}
+.hvr-bob {
+  transform perspective(1px) translateZ(0)
+  box-shadow 0 0 1px rgba(0, 0, 0, 0)
+  animation-name hvr-bob-float, hvr-bob
+  animation-duration .3s, 1.5s
+  animation-delay 0s, .3s
+  animation-timing-function ease-out, ease-in-out
+  animation-iteration-count 1, infinite
+  animation-fill-mode forwards
+  animation-direction normal, alternate
+}
+.btns .upgrade-icon
+  color success
+.close-info-modal
+  cursor pointer
+  &:hover
+    color text-light
+.logo-filter
+  filter invert(80%)

package/client/components/sidebar/transfer-history-modal.jsx

@@ -0,0 +1,110 @@
+/**
+ * transfer-history-modal
+ */
+
+import { Component } from '../common/react-subx'
+import { CloseOutlined } from '@ant-design/icons'
+import { Table } from 'antd'
+import time from '../../../app/common/time'
+import Tag from '../sftp/transfer-tag'
+import './transfer-history.styl'
+import { get as _get } from 'lodash-es'
+import { filesize } from 'filesize'
+
+const { prefix } = window
+const e = prefix('transferHistory')
+const f = prefix('sftp')
+const m = prefix('menu')
+const timeRender = t => time(t)
+const sorterFactory = prop => {
+  return (a, b) => {
+    return _get(a, prop) > _get(b, prop) ? 1 : -1
+  }
+}
+export default class TransferHistoryModal extends Component {
+  render () {
+    const {
+      getTransferHistory,
+      clearTransferHistory
+    } = this.props.store
+    const transferHistory = getTransferHistory()
+    const columns = [{
+      title: e('startTime'),
+      dataIndex: 'startTime',
+      key: 'startTime',
+      sorter: sorterFactory('startTime'),
+      render: timeRender
+    }, {
+      title: e('finishTime'),
+      dataIndex: 'finishTime',
+      key: 'finishTime',
+      sorter: sorterFactory('finishTime'),
+      render: timeRender
+    }, {
+      title: e('type'),
+      dataIndex: 'type',
+      key: 'typeFrom',
+      sorter: sorterFactory('typeFrom'),
+      render: (type, inst) => {
+        return (
+          <Tag transfer={inst} />
+        )
+      }
+    }, {
+      title: m('host'),
+      dataIndex: 'host',
+      key: 'host',
+      sorter: sorterFactory('host')
+    }, {
+      title: e('fromPath'),
+      dataIndex: 'fromPath',
+      key: 'fromPath',
+      render: (txt, inst) => {
+        return inst.fromPathReal || txt
+      },
+      sorter: sorterFactory('fromPath')
+    }, {
+      title: e('toPath'),
+      dataIndex: 'toPath',
+      key: 'toPath',
+      render: (txt, inst) => {
+        return inst.toPathReal || txt
+      },
+      sorter: sorterFactory('toPath')
+    }, {
+      title: f('size'),
+      dataIndex: 'fromFile.size',
+      key: 'fromFile.size',
+      sorter: sorterFactory('fromFile.size'),
+      render: (v) => filesize(v || 0)
+    }, {
+      title: e('speed'),
+      dataIndex: 'speed',
+      key: 'speed',
+      sorter: sorterFactory('speed')
+    }]
+    return (
+      <div className='pd2'>
+        <div>
+          <span
+            className='iblock pointer'
+            onClick={clearTransferHistory}
+          >
+            <CloseOutlined className='mg1r' />
+            {e('clear')}
+          </span>
+        </div>
+        <div className='table-scroll-wrap'>
+          <Table
+            dataSource={transferHistory}
+            columns={columns}
+            bordered
+            pagination={false}
+            size='small'
+            rowKey='id'
+          />
+        </div>
+      </div>
+    )
+  }
+}

package/client/components/sidebar/transfer-history.styl

@@ -0,0 +1,3 @@
+.table-scroll-wrap
+  width 100%
+  overflow-x scroll