@electerm/electerm-react 1.39.88 → 1.39.103

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

@@ -22,12 +22,7 @@ import {
 } 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')
+const e = window.translate
 
 export default class InfoModal extends Component {
   handleChangeTab = key => {
@@ -103,14 +98,14 @@ export default class InfoModal extends Component {
     }
     const title = (
       <div className='ant-modal-confirm-title font16'>
-        <InfoCircleOutlined className='font20 mg1r' /> {m('about')} {name}
+        <InfoCircleOutlined className='font20 mg1r' /> {e('about')} {name}
       </div>
     )
     const attrs = {
       title,
       width: window.innerWidth - 100,
       maskClosable: true,
-      okText: c('ok'),
+      okText: e('ok'),
       onCancel: onCloseAbout,
       footer: null,
       open: true,
@@ -119,11 +114,11 @@ export default class InfoModal extends Component {
     const items = [
       {
         key: infoTabs.info,
-        label: m('about'),
+        label: e('about'),
         children: (
           <div>
             <LogoElem />
-            <p className='mg2b'>{a('desc')}</p>
+            <p className='mg2b'>{e('desc')}</p>
             <p className='mg1b'>
               <UserOutlined /> <b className='mg1r'>{e('author')} ➾</b>
               <Link to={authorUrl} className='mg1l'>
@@ -143,7 +138,7 @@ export default class InfoModal extends Component {
               </Link>
             </p>
             <p className='mg1b'>
-              <GlobalOutlined /> <b className='mg1r'>{s('language')} repo ➾</b>
+              <GlobalOutlined /> <b className='mg1r'>{e('language')} repo ➾</b>
               <Link to={langugeRepo} className='mg1l'>
                 {langugeRepo}
               </Link>
@@ -155,25 +150,25 @@ export default class InfoModal extends Component {
               </Link>
             </p>
             <p className='mg1b'>
-              <HighlightOutlined /> <b className='mg1r'>{a('changeLog')} ➾</b>
+              <HighlightOutlined /> <b className='mg1r'>{e('changeLog')} ➾</b>
               <Link to={releaseLink} className='mg1l'>
                 {releaseLink}
               </Link>
             </p>
             <p className='mg1b'>
-              <AlignLeftOutlined /> <b className='mg1r'>{a('knownIssues')} ➾</b>
+              <AlignLeftOutlined /> <b className='mg1r'>{e('knownIssues')} ➾</b>
               <Link to={knownIssuesLink} className='mg1l'>
                 {knownIssuesLink}
               </Link>
             </p>
             <p className='mg1b'>
-              <WarningOutlined /> <b className='mg1r'>{a('privacyNotice')} ➾</b>
+              <WarningOutlined /> <b className='mg1r'>{e('privacyNotice')} ➾</b>
               <Link to={privacyNoticeLink} className='mg1l'>
                 {privacyNoticeLink}
               </Link>
             </p>
             <p className='mg1b'>
-              <HeartOutlined /> <b className='mg1r'>{a('sponsorElecterm')} ➾</b>
+              <HeartOutlined /> <b className='mg1r'>{e('sponsorElecterm')} ➾</b>
               <Link to={sponsorLink} className='mg1l'>
                 {sponsorLink}
               </Link>

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

@@ -11,10 +11,7 @@ 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 e = window.translate
 const timeRender = t => time(t)
 const sorterFactory = prop => {
   return (a, b) => {
@@ -59,7 +56,7 @@ export default class TransferHistoryModal extends Component {
         )
       }
     }, {
-      title: m('host'),
+      title: e('host'),
       dataIndex: 'host',
       key: 'host',
       sorter: sorterFactory('host')
@@ -80,7 +77,7 @@ export default class TransferHistoryModal extends Component {
       },
       sorter: sorterFactory('toPath')
     }, {
-      title: f('size'),
+      title: e('size'),
       dataIndex: 'size',
       key: 'size',
       sorter: sorterFactory('size'),

package/client/components/sidebar/transfer-list-control.jsx

@@ -11,8 +11,7 @@ import { get } from 'lodash-es'
 
 const { Option } = Select
 
-const { prefix } = window
-const e = prefix('sftp')
+const e = window.translate
 
 export default class TransferModalUI extends Component {
   state = {

package/client/components/sidebar/transfer-list.jsx

@@ -9,8 +9,7 @@ import {
 import TransferModal from './transfer-modal'
 import './transfer.styl'
 
-const { prefix } = window
-const e = prefix('sftp')
+const e = window.translate
 
 export default class TransferList extends Component {
   render () {

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

@@ -5,9 +5,7 @@ import {
 import Transports from './transfer-list-control'
 import TransportHistory from './transfer-history-modal'
 
-const { prefix } = window
-const e = prefix('sftp')
-const t = prefix('transferHistory')
+const e = window.translate
 
 export default class TransferModal extends Component {
   renderTransfer = () => {
@@ -46,7 +44,7 @@ export default class TransferModal extends Component {
     }
     if (transferHistory.length) {
       tabs.push({
-        title: t('transferHistory'),
+        title: e('transferHistory'),
         id: 'history',
         render: this.renderHistory
       })

package/client/components/sidebar/transport-ui.jsx

@@ -10,8 +10,7 @@ import {
 } from '@ant-design/icons'
 import './transfer.styl'
 
-const { prefix } = window
-const e = prefix('sftp')
+const e = window.translate
 
 export default function Transporter (props) {
   const {

package/client/components/tabs/index.jsx

@@ -31,16 +31,16 @@ import BookmarksList from '../sidebar/bookmark-select'
 import AppDrag from './app-drag'
 import classNames from 'classnames'
 
-const { prefix } = window
-const e = prefix('tabs')
-const c = prefix('control')
-const t = prefix('tabs')
+const e = window.translate
 const MenuItem = Menu.Item
 
 export default class Tabs extends React.Component {
   constructor (props) {
     super(props)
     this.tabsRef = React.createRef()
+    this.state = {
+      overflow: false
+    }
   }
 
   componentDidMount () {
@@ -53,11 +53,10 @@ export default class Tabs extends React.Component {
   }
 
   componentDidUpdate (prevProps) {
-    prevProps = prevProps || {}
     if (
       prevProps.currentTabId !== this.props.currentTabId ||
       prevProps.width !== this.props.width ||
-      prevProps.tabs.map(d => d.title).join('#') !== this.props.tabs.map(d => d.title).join('#')
+      prevProps.tabs.length !== this.props.tabs.length
     ) {
       this.adjustScroll()
     }
@@ -72,12 +71,17 @@ export default class Tabs extends React.Component {
   }
 
   isOverflow = () => {
-    const { tabs = [], width } = this.props
+    const { tabs = [] } = this.props
     const len = tabs.length
     const addBtnWidth = 22
-    const tabsWidth = this.tabsWidth()
-    const tabsWidthAll = tabMargin * len + 166 + tabsWidth
-    return width < (tabsWidthAll + addBtnWidth)
+    const tabsWidth = this.tabsWidth() + tabMargin * len + addBtnWidth
+    const tabsInnerWidth = this.getInnerWidth()
+    return tabsWidth > tabsInnerWidth
+  }
+
+  getInnerWidth = () => {
+    const inner = document.querySelector('.tabs-inner')
+    return inner ? inner.clientWidth : 0
   }
 
   handleClickEvent = (e) => {
@@ -98,7 +102,7 @@ export default class Tabs extends React.Component {
   }
 
   adjustScroll = () => {
-    const { width, tabs, currentTabId } = this.props
+    const { tabs, currentTabId } = this.props
     const index = findIndex(tabs, t => t.id === currentTabId)
     const tabsDomWith = Array.from(
       document.querySelectorAll('.tab')
@@ -106,10 +110,14 @@ export default class Tabs extends React.Component {
       return prev + c.clientWidth
     }, 0)
     const w = (index + 1) * tabMargin + 5 + tabsDomWith
-    const scrollLeft = w > width - extraTabWidth
-      ? w - width + extraTabWidth
+    const tabsInnerWidth = this.getInnerWidth()
+    const scrollLeft = w > tabsInnerWidth
+      ? w - tabsInnerWidth
       : 0
     this.dom.scrollLeft = scrollLeft
+    this.setState({
+      overflow: this.isOverflow()
+    })
   }
 
   handleScrollLeft = () => {
@@ -178,13 +186,13 @@ export default class Tabs extends React.Component {
           className={cls}
           onClick={onNewSsh}
         >
-          <CodeFilled /> {c('newBookmark')}
+          <CodeFilled /> {e('newBookmark')}
         </div>
         <div
           className={cls}
           onClick={() => addTab()}
         >
-          <RightSquareFilled /> {t('newTab')}
+          <RightSquareFilled /> {e('newTab')}
         </div>
         <BookmarksList
           store={window.store}
@@ -249,14 +257,16 @@ export default class Tabs extends React.Component {
   }
 
   renderContentInner () {
-    const { tabs = [], width } = this.props
+    const { tabs = [], width, config } = this.props
     const len = tabs.length
     const tabsWidthAll = tabMargin * len + 10 + this.tabsWidth()
-    const overflow = this.isOverflow()
+    const { overflow } = this.state
     const left = overflow
       ? '100%'
       : tabsWidthAll
-    const w1 = isMacJs && window.et.isWebApp ? 30 : windowControlWidth
+    const w1 = isMacJs && (config.useSystemTitleBar || window.et.isWebApp)
+      ? 30
+      : windowControlWidth
     const style = {
       width: width - w1 - 166
     }
@@ -291,9 +301,9 @@ export default class Tabs extends React.Component {
             })
           }
           {
-            !overflow
-              ? this.renderAddBtn()
-              : null
+            overflow
+              ? null
+              : this.renderAddBtn()
           }
         </div>
       </div>
@@ -301,7 +311,7 @@ export default class Tabs extends React.Component {
   }
 
   render () {
-    const overflow = this.isOverflow()
+    const { overflow } = this.state
     return (
       <div className='tabs' ref={this.tabsRef}>
         {this.renderContent()}

package/client/components/tabs/tab.jsx

@@ -23,10 +23,7 @@ import {
 } from '../../common/constants'
 import { shortcutDescExtend } from '../shortcuts/shortcut-handler.js'
 
-const { prefix } = window
-const e = prefix('tabs')
-const m = prefix('menu')
-const s = prefix('sftp')
+const e = window.translate
 const onDragCls = 'ondrag-tab'
 const onDragOverCls = 'dragover-tab'
 
@@ -40,7 +37,6 @@ class Tab extends Component {
   }
 
   componentDidMount () {
-    console.log(this.props)
     this.dom = document.getElementById('id' + this.state.tab.id)
     window.addEventListener('message', this.onEvent)
   }
@@ -316,7 +312,7 @@ class Tab extends Component {
     res.push({
       func: 'handleReloadTab',
       icon: 'Loading3QuartersOutlined',
-      text: m('reload'),
+      text: e('reload'),
       subText: reloadShortcut
     })
     return res
@@ -389,8 +385,8 @@ class Tab extends Component {
         tunnel = `sock5://${sshTunnelLocalHost}:${sshTunnelLocalPort}`
       } else {
         tunnel = sshTunnel === 'forwardRemoteToLocal'
-          ? `-> ${s('remote')}:${sshTunnelRemoteHost}:${sshTunnelRemotePort} -> ${sshTunnelLocalHost}:${sshTunnelLocalPort}`
-          : `-> ${s('local')}:${sshTunnelLocalHost}:${sshTunnelLocalPort} -> ${sshTunnelRemoteHost}:${sshTunnelRemotePort}`
+          ? `-> ${e('remote')}:${sshTunnelRemoteHost}:${sshTunnelRemotePort} -> ${sshTunnelLocalHost}:${sshTunnelLocalPort}`
+          : `-> ${e('local')}:${sshTunnelLocalHost}:${sshTunnelLocalPort} -> ${sshTunnelRemoteHost}:${sshTunnelRemotePort}`
       }
       if (error) {
         tunnel = `error: ${tunnel}`
@@ -488,7 +484,7 @@ class Tab extends Component {
             <Loading3QuartersOutlined
               className='pointer tab-reload mg1r'
               onClick={this.handleReloadTab}
-              title={m('reload')}
+              title={e('reload')}
             />
             <span className='tab-title'>
               {tabCount}. {title}

package/client/components/tabs/window-control.jsx

@@ -8,8 +8,7 @@ import {
   isMacJs
 } from '../../common/constants'
 
-const { prefix } = window
-const m = prefix('menu')
+const e = window.translate
 
 export default class WindowControl extends Component {
   render () {
@@ -35,7 +34,7 @@ export default class WindowControl extends Component {
     return (
       <div className='window-controls'>
         <div className='window-control-box window-control-minimize' onClick={minimize}>
-          <MinusOutlined title={m('minimize')} className='iblock font12 widnow-control-icon' />
+          <MinusOutlined title={e('minimize')} className='iblock font12 widnow-control-icon' />
         </div>
         <div
           className='window-control-box window-control-maximize'
@@ -45,7 +44,7 @@ export default class WindowControl extends Component {
         >
           <span
             title={
-              isMaximized ? m('unmaximize') : m('maximize')
+              isMaximized ? e('unmaximize') : e('maximize')
             }
             className={
               'iblock font12 icon-maximize widnow-control-icon ' +
@@ -54,7 +53,7 @@ export default class WindowControl extends Component {
           />
         </div>
         <div className='window-control-box window-control-close' onClick={closeApp}>
-          <CloseOutlined title={m('close')} className='iblock font12 widnow-control-icon' />
+          <CloseOutlined title={e('close')} className='iblock font12 widnow-control-icon' />
         </div>
       </div>
     )

package/client/components/terminal/index.jsx

@@ -53,9 +53,7 @@ import strip from '@electerm/strip-ansi'
 import { formatBytes } from '../../common/byte-format.js'
 import * as fs from './fs.js'
 
-const { prefix } = window
-const e = prefix('ssh')
-const m = prefix('menu')
+const e = window.translate
 
 const computePos = (e) => {
   return {
@@ -837,14 +835,14 @@ class Term extends Component {
       {
         func: 'onCopy',
         icon: 'CopyOutlined',
-        text: m('copy'),
+        text: e('copy'),
         disabled: !hasSlected,
         subText: copyShortcut
       },
       {
         func: 'onPaste',
         icon: 'SwitcherOutlined',
-        text: m('paste'),
+        text: e('paste'),
         disabled: !copyed,
         subText: pasteShortcut
       },
@@ -1256,7 +1254,7 @@ class Term extends Component {
               this.props.delSplit(this.state.id)
             }}
           >
-            {m('close')}
+            {e('close')}
           </Button>
           <Button
             icon={<ReloadOutlined />}
@@ -1267,7 +1265,7 @@ class Term extends Component {
               )
             }}
           >
-            {m('reload')}
+            {e('reload')}
           </Button>
         </div>
       )

package/client/components/terminal/term-search.jsx

@@ -18,8 +18,7 @@ import copy from 'json-deep-copy'
 import { shortcutExtend } from '../shortcuts/shortcut-handler.js'
 import './term-search.styl'
 
-const { prefix } = window
-const s = prefix('ssh')
+const e = window.translate
 
 class TermSearch extends Component {
   searchControls = [{
@@ -171,7 +170,7 @@ class TermSearch extends Component {
     return (
       <Tooltip
         key={id}
-        title={s(id)}
+        title={e(id)}
       >
         <Icon
           className={cls}

package/client/components/terminal/terminal-interactive.jsx

@@ -9,9 +9,7 @@ import { tabActions } from '../../common/constants'
 import wait from '../../common/wait'
 import postMsg from '../../common/post-msg'
 
-const { prefix } = window
-const e = prefix('sftp')
-const c = prefix('common')
+const e = window.translate
 const FormItem = Form.Item
 
 export default function TermInteractive () {
@@ -153,7 +151,7 @@ export default function TermInteractive () {
             className='mg1l'
             onClick={onIgnore}
           >
-            {c('ignore')}
+            {e('ignore')}
           </Button>
           <Button
             className='mg1l'

package/client/components/terminal-info/activity.jsx

@@ -7,8 +7,7 @@ import { isEmpty } from 'lodash-es'
 import { CloseCircleOutlined, BarsOutlined } from '@ant-design/icons'
 import colsParser from './data-cols-parser'
 
-const { prefix } = window
-const m = prefix('menu')
+const e = window.translate
 
 export default function TerminalInfoActivities (props) {
   const { activities, isRemote, terminalInfos } = props
@@ -19,14 +18,14 @@ export default function TerminalInfoActivities (props) {
   col.unshift({
     dataIndex: 'kill',
     key: 'kill',
-    title: m('close'),
+    title: e('close'),
     render: (txt, inst) => {
       return (
         <Tooltip
-          title={m('close')}
+          title={e('close')}
         >
           <Popconfirm
-            title={m('close') + ' pid:' + inst.pid + ' ?'}
+            title={e('close') + ' pid:' + inst.pid + ' ?'}
             onConfirm={() => props.killProcess(inst.pid)}
           >
             <CloseCircleOutlined

package/client/components/terminal-info/base.jsx

@@ -17,8 +17,7 @@ import postMsg from '../../common/post-msg'
 import { toggleTerminalLog, toggleTerminalLogTimestamp } from '../terminal/terminal-apis'
 import { ClockCircleOutlined, BorderlessTableOutlined, DatabaseOutlined, BarsOutlined, ApiOutlined, PartitionOutlined } from '@ant-design/icons'
 
-const { prefix } = window
-const st = prefix('setting')
+const e = window.translate
 
 const mapper = {
   uptime: <ClockCircleOutlined />,
@@ -136,7 +135,7 @@ export default class TerminalInfoBase extends Component {
     if (!saveTerminalLogToFile) {
       return null
     }
-    const name = st('addTimeStampToTermLog')
+    const name = e('addTimeStampToTermLog')
     return (
       <Switch
         checkedChildren={name}
@@ -186,7 +185,7 @@ export default class TerminalInfoBase extends Component {
       ? osResolve(appPath, 'electerm', 'session_logs')
       : window.et.sessionLogPath
     const path = osResolve(base, logName + '.log')
-    const name = st('saveTerminalLogToFile')
+    const name = e('saveTerminalLogToFile')
     const to = saveTerminalLogToFile
       ? <ShowItem disabled={!saveTerminalLogToFile} to={path}>{path}</ShowItem>
       : path

package/client/components/terminal-info/terminal-info.styl

@@ -31,6 +31,7 @@
 .activity-item
   max-height 1.6em
   line-height 1.6
+  overflow hidden
   &:hover
     max-height none
 .info-panel-wrap-pin

package/client/components/terminal-theme/index.jsx

@@ -8,10 +8,7 @@ import InputAutoFocus from '../common/input-auto-focus'
 
 const { TextArea } = Input
 const FormItem = Form.Item
-const { prefix } = window
-const e = prefix('form')
-const s = prefix('setting')
-const t = prefix('terminalThemes')
+const e = window.translate
 
 export default function ThemeForm (props) {
   const [form] = Form.useForm()
@@ -115,7 +112,7 @@ export default function ThemeForm (props) {
         formData.id || update1.id
       )
     }
-    message.success(s('saved'))
+    message.success(e('saved'))
     action.current = 'submit'
   }
 
@@ -157,7 +154,7 @@ export default function ThemeForm (props) {
           type='dashed'
           onClick={exporter}
         >
-          {t('export')}
+          {e('export')}
         </Button>
       </FormItem>
     )
@@ -187,7 +184,7 @@ export default function ThemeForm (props) {
     >
       {renderFuncs(id)}
       <FormItem
-        label={t('themeName')}
+        label={e('themeName')}
         hasFeedback
         name='themeName'
         rules={[{
@@ -203,7 +200,7 @@ export default function ThemeForm (props) {
         />
       </FormItem>
       <FormItem
-        label={t('themeConfig')}
+        label={e('themeConfig')}
       >
         <div className='pd1b'>
           <Upload
@@ -245,7 +242,7 @@ export default function ThemeForm (props) {
                   type='primary'
                   htmlType='submit'
                   className='mg1r mg1b'
-                >{t('saveAndApply')}
+                >{e('saveAndApply')}
                 </Button>
                 <Button
                   type='dashed'

package/client/components/terminal-theme/theme-list.jsx

@@ -10,8 +10,7 @@ import { defaultTheme } from '../../common/constants'
 import highlight from '../common/highlight'
 import './terminal-theme-list.styl'
 
-const { prefix } = window
-const e = prefix('terminalThemes')
+const e = window.translate
 
 export default class ThemeList extends List {
   del = (item, e) => {

package/client/components/text-editor/text-editor-form.jsx

@@ -6,11 +6,7 @@ import { useEffect } from 'react'
 import { Input, Form, Button } from 'antd'
 
 const FormItem = Form.Item
-
-const { prefix } = window
-const e = prefix('form')
-const c = prefix('common')
-const s = prefix('sftp')
+const e = window.translate
 
 export default function TextEditorForm (props) {
   const [form] = Form.useForm()
@@ -71,7 +67,7 @@ export default function TextEditorForm (props) {
       <div className='pd1t pd2b'>
         <Button
           {...popsEdit}
-        >{s('editWithSystemEditor')}
+        >{e('editWithSystemEditor')}
         </Button>
         <Button
           type='primary'
@@ -85,11 +81,11 @@ export default function TextEditorForm (props) {
           className='mg1r mg1b'
           disabled={loading}
           onClick={reset}
-        >{s('reset')}
+        >{e('reset')}
         </Button>
         <Button
           {...popsCancel}
-        >{c('cancel')}
+        >{e('cancel')}
         </Button>
       </div>
     </Form>

package/client/components/text-editor/text-editor.jsx

@@ -9,8 +9,7 @@ import resolve from '../../common/resolve'
 import { commonActions } from '../../common/constants'
 import postMsg from '../../common/post-msg'
 
-const { prefix } = window
-const s = prefix('sftp')
+const e = window.translate
 
 export default class TextEditor extends PureComponent {
   state = {
@@ -152,7 +151,7 @@ export default class TextEditor extends PureComponent {
     if (!file) {
       return null
     }
-    const title = `${s('edit')} ${s('remote')} ${s('file')}: ${path}`
+    const title = `${e('edit')} ${e('remote')} ${e('file')}: ${path}`
     const propsAll = {
       footer: null,
       title,