@electerm/electerm-react 1.37.126 → 1.38.6

package/client/common/constants.js

@@ -35,7 +35,7 @@ export const filePropMinWidth = 1
 export const contextMenuHeight = 28
 export const contextMenuWidth = 280
 export const contextMenuPaddingTop = 10
-export const sftpControlHeight = 28 + 42 + 33 + 46
+export const sftpControlHeight = 28 + 42 + 33 + 36
 export const sidebarWidth = 43
 export const maxHistory = 50
 export const maxTransport = 5
@@ -339,3 +339,4 @@ export const instSftpKeys = [
   'writeFile'
 ]
 export const cwdId = '=__+__'
+export const zmodemTransferPackSize = 1024 * 1024 * 2

package/client/common/default-setting.js

@@ -31,7 +31,7 @@ export default {
   checkUpdateOnStart: true,
   cursorBlink: false,
   cursorStyle: 'block',
-  useSystemTitleBar: false,
+  useSystemTitleBar: window.pre.isLinux || window.et.isLinux || false,
   opacity: 1,
   defaultEditor: '',
   terminalWordSeparator: './\\()"\'-:,.;<>~!@#$%^&*|+=[]{}`~ ?',

package/client/common/pre.js

@@ -104,7 +104,7 @@ const fs = {
     const cb = args.pop()
     window.fs.readCustom(
       p1,
-      encodeUint8Array(arr),
+      arr.length,
       ...args
     )
       .then((data) => {

package/client/components/batch-op/batch-op.jsx

@@ -540,6 +540,11 @@ export default class BatchOp extends Component {
 
   renderTab = (tab) => {
     const data = this.state[tab]
+    const keeps = [
+      'index',
+      'host',
+      'state'
+    ]
     const columns = [
       'index',
       'host',
@@ -556,7 +561,8 @@ export default class BatchOp extends Component {
         title: this.translate(k),
         dataIndex: k,
         key: k,
-        render: (k) => k || ''
+        render: (k) => k || '',
+        responsive: keeps.includes(k) ? undefined : ['md', 'lg', 'xl', 'xxl']
       }
     })
     if (tab === 'tasks') {

package/client/components/common/logo-elem.jsx

@@ -5,16 +5,17 @@ import {
   packInfo
 } from '../../common/constants'
 import { Tag } from 'antd'
+import './logo.styl'
 
 export default function LogoElem () {
   return (
     <h1 className='mg3y font50'>
       <span className='iblock pd3 morph-shape mg1l mg1r'>
-        <img src={logoPath2} height={80} className='iblock mwm-100 mg1l mg1r logo-filter' />
+        <img src={logoPath2} className='iblock mwm-100 mg1l mg1r logo-filter logo-img' />
       </span>
-      <img src={logoPath3} height={80} className='hide' />
+      <img src={logoPath3} className='hide logo-img' />
       <sup>
-        <img src={logoPath1} height={28} className='iblock mwm-100 mg1r' />
+        <img src={logoPath1} className='iblock mwm-100 mg1r logo-img-small' />
       </sup>
       <Tag color='#08c'>{packInfo.version}</Tag>
     </h1>

package/client/components/common/logo.styl

@@ -0,0 +1,9 @@
+.logo-img
+  height 80px
+.logo-img-small
+  height 28px
+@media (max-width: 500px)
+  .logo-img
+    height 40px
+  .logo-img-small
+    height 20px

package/client/components/footer/footer-entry.jsx

@@ -80,7 +80,7 @@ export default class SystemMenu extends Component {
       <div className='terminal-footer-unit terminal-footer-info'>
         <div className='fleft relative'>
           <Select
-            style={{ minWidth: 100 }}
+            style={{ minWidth: 30 }}
             placeholder={f('encode')}
             defaultValue={this.props.currentTab?.encode}
             onSelect={this.handleSwitchEncoding}

package/client/components/footer/footer.styl

@@ -21,7 +21,7 @@
     line-height 24px
 .terminal-footer-unit
   margin-left 10px
-  line-height 34px
+  line-height 39px
   textarea.ant-input
     min-height 26px
     height 26px
@@ -44,4 +44,13 @@
     .bi-compact
       display none
 .batch-input-holder
-  width 100px
+  width 100px
+@media (max-width: 500px)
+  .batch-input-outer
+    &.bi-show
+      position fixed
+      left 100px
+      right 0
+      bottom 0
+      z-index 100
+      background main

package/client/components/main/main.jsx

@@ -73,6 +73,7 @@ export default class Index extends Component {
     const cls = classnames({
       loaded: configLoaded,
       'system-ui': store.config.useSystemTitleBar,
+      'not-system-ui': !store.config.useSystemTitleBar,
       'is-mac': isMac,
       'is-win': isWin,
       pinned,

package/client/components/main/wrapper.styl

@@ -1,6 +1,4 @@
 @require '../../css/includes/theme-default'
-#container
-  min-width 600px
 .common-err-desc
   &:hover
     text-overflow clip

package/client/components/quick-commands/qm.styl

@@ -27,3 +27,6 @@
     &.label-match
       font-weight bold
       opacity 1
+@media (max-width: 500px)
+  .qm-search-input
+    width 100px

package/client/components/quick-commands/quick-commands-box.jsx

@@ -193,7 +193,7 @@ export default class QuickCommandsFooterBox extends Component {
                 value={this.state.keyword}
                 onChange={this.handleChange}
                 placeholder=''
-                className='iblock'
+                className='iblock qm-search-input'
               />
             </span>
             <span className='fleft mg1l'>

package/client/components/quick-commands/quick-commands-select.jsx

@@ -29,8 +29,10 @@ export default class QuickCommandsFooter extends PureComponent {
           size='small'
           onMouseEnter={this.handleOpen}
           onMouseLeave={this.handleMouseLeave}
+          type='ghost'
         >
-          {e('quickCommands')}
+          <span className='w500'>{e('quickCommands')}</span>
+          <span className='l500'>Q</span>
         </Button>
       </div>
     )

package/client/components/session/session.jsx

@@ -506,6 +506,11 @@ export default class SessionWrapper extends Component {
         }
       )
     }
+    const simpleMapper = {
+      [paneMap.terminal]: 'T',
+      [paneMap.fileManager]: 'F',
+      [paneMap.ssh]: 'T'
+    }
     return (
       <div
         className='terminal-control fix'
@@ -527,7 +532,8 @@ export default class SessionWrapper extends Component {
                   onClick={() => this.onChangePane(types[i])}
                 >
                   <span className='type-tab-txt'>
-                    {e(type)}
+                    <span className='w500'>{e(type)}</span>
+                    <span className='l500'>{simpleMapper[type]}</span>
                     <span className='type-tab-line' />
                   </span>
                 </span>

package/client/components/session/sessions.jsx

@@ -49,6 +49,13 @@ class Sessions extends Component {
     )
   }
 
+  reloadCurrentTabShortcut = (e) => {
+    e.stopPropagation()
+    this.reloadTab(
+      this.getCurrentTab()
+    )
+  }
+
   watch = () => {
     window.addEventListener('message', this.onEvent)
   }

package/client/components/setting-panel/setting-common.jsx

@@ -251,7 +251,7 @@ export default class SettingCommon extends Component {
     )
   }
 
-  renderNumber = (name, options, title = '', width = 136) => {
+  renderNumber = (name, options, title = '', width = '100%') => {
     let value = this.props.config[name]
     if (options.valueParser) {
       value = options.valueParser(value)
@@ -286,7 +286,7 @@ export default class SettingCommon extends Component {
         return vv
       }
       opts.style = {
-        width: width + 'px'
+        width
       }
     }
     return (
@@ -554,7 +554,7 @@ export default class SettingCommon extends Component {
             step: 200,
             min: 100,
             cls: 'timeout-desc'
-          }, e('timeoutDesc'), 400)
+          }, e('timeoutDesc'))
         }
         {
           this.renderNumber('keepaliveInterval', {
@@ -563,7 +563,7 @@ export default class SettingCommon extends Component {
             max: 20000000,
             cls: 'keepalive-interval-desc',
             extraDesc: '(ms)'
-          }, e('keepaliveIntervalDesc'), 400)
+          }, e('keepaliveIntervalDesc'))
         }
         {
           this.renderNumber('opacity', {
@@ -571,7 +571,7 @@ export default class SettingCommon extends Component {
             min: 0,
             max: 1,
             cls: 'opacity'
-          }, e('opacity'), 400)
+          }, e('opacity'))
         }
 
         <div className='pd2b'>

package/client/components/setting-panel/setting-modal.jsx

@@ -144,7 +144,8 @@ export default class SettingModalWrap extends Component {
     const {
       showModal,
       hideSettingModal,
-      innerWidth
+      innerWidth,
+      useSystemTitleBar
     } = this.props.store
     const show = showModal === modals.setting
     if (!show) {
@@ -154,6 +155,7 @@ export default class SettingModalWrap extends Component {
       <SettingModal
         onCancel={hideSettingModal}
         visible={show}
+        useSystemTitleBar={useSystemTitleBar}
         innerWidth={innerWidth}
       >
         {this.renderTabs()}

package/client/components/setting-panel/setting-wrap.jsx

@@ -6,9 +6,16 @@ import { Component } from 'react'
 import { Drawer } from 'antd'
 import { CloseCircleOutlined } from '@ant-design/icons'
 import { sidebarWidth } from '../../common/constants'
+import AppDrag from '../tabs/app-drag'
 import './setting-wrap.styl'
 
 export default class SettingWrap extends Component {
+  renderDrag () {
+    return (
+      <AppDrag />
+    )
+  }
+
   render () {
     const pops = {
       open: this.props.visible,
@@ -32,6 +39,9 @@ export default class SettingWrap extends Component {
           className='close-setting-wrap'
           onClick={this.props.onCancel}
         />
+        {
+          this.props.useSystemTitleBar ? null : <AppDrag />
+        }
         {this.props.visible ? this.props.children : null}
       </Drawer>
     )

package/client/components/setting-panel/setting-wrap.styl

@@ -47,4 +47,31 @@ body .ant-drawer .ant-drawer-content-wrapper
   padding 55px 20px 0 50px
 .setting-col
   ::-webkit-scrollbar
-    width 0
+    width 0
+@media (max-width: 1100px)
+  .setting-col
+    position fixed
+    top 128px
+    bottom 0
+    left 43px
+    right 0
+    overflow-y scroll
+  .setting-row
+    position static
+    top auto
+  .setting-row-left
+    left auto
+    width auto
+    bottom auto
+    padding 138px 10px 10px 10px
+  .setting-row-right
+    left auto
+    right auto
+    bottom auto
+    top auto
+    padding 10px
+  .setting-tabs-bookmarks
+    .setting-row-left
+      width auto
+    .setting-row-right
+      left auto

package/client/components/setting-panel/setting.styl

@@ -3,4 +3,11 @@
   padding 0
   margin 5px 5px 0 0
 .font-sel
-  min-width 200px
+  min-width 200px
+.setting-wrap .app-drag
+  position fixed
+  top 0
+  left 43px
+  height 60px
+  right 0
+  z-index 888

package/client/components/shortcuts/shortcut-handler.js

@@ -75,6 +75,17 @@ export function shortcutExtend (Cls) {
     ) {
       return true
     }
+    if (
+      this.term &&
+      key === 'c' &&
+      type === 'keydown' &&
+      !altKey &&
+      !shiftKey &&
+      ctrlKey &&
+      this.onZmodem
+    ) {
+      this.onZmodemEnd()
+    }
     const codeName = event instanceof window.WheelEvent
       ? (wheelDeltaY > 0 ? 'mouseWheelUp' : 'mouseWheelDown')
       : code

package/client/components/shortcuts/shortcuts-defaults.js

@@ -5,6 +5,11 @@ export default () => {
       shortcut: 'alt+w',
       shortcutMac: 'alt+w'
     },
+    {
+      name: 'app_reloadCurrentTab',
+      shortcut: 'alt+r',
+      shortcutMac: 'alt+r'
+    },
     {
       name: 'app_newBookmark',
       shortcut: 'ctrl+n',

package/client/components/sidebar/sidebar.styl

@@ -26,6 +26,9 @@
   box-shadow 0px 0px 3px 3px alpha(main, .1)
   .item-list
     padding-right 0
+.not-system-ui.is-mac
+  .sidebar-bar
+    margin-top 20px
 .type-bookmarks
   .bookmarks-panel
     width 100%
@@ -50,7 +53,7 @@
 .sidebar-list
   position absolute
   left 43px
-  top 45px
+  top 36px
   bottom 0
   z-index 200
   width 0

package/client/components/tabs/index.jsx

@@ -18,7 +18,13 @@ import {
 import { Dropdown, Menu, Popover } from 'antd'
 import Tab from './tab'
 import './tabs.styl'
-import { tabWidth, tabMargin, extraTabWidth, windowControlWidth } from '../../common/constants'
+import {
+  tabWidth,
+  tabMargin,
+  extraTabWidth,
+  windowControlWidth,
+  isMacJs
+} from '../../common/constants'
 import findParentBySel from '../../common/find-parent'
 import WindowControl from './window-control'
 import BookmarksList from '../sidebar/bookmark-select'
@@ -239,8 +245,9 @@ export default class Tabs extends React.Component {
     const left = overflow
       ? '100%'
       : tabsWidthAll
+    const w1 = isMacJs ? 30 : windowControlWidth
     const style = {
-      width: width - windowControlWidth - 136
+      width: width - w1 - 136
     }
     return (
       <div

package/client/components/tabs/tab.jsx

@@ -2,7 +2,7 @@
  * file section
  */
 
-import React from 'react'
+import { Component } from 'react'
 import runIdle from '../../common/run-idle'
 import {
   CloseOutlined,
@@ -21,7 +21,7 @@ import {
   terminalSshConfigType,
   commonActions
 } from '../../common/constants'
-import TabTitle from './tab-title'
+import { shortcutDescExtend } from '../shortcuts/shortcut-handler.js'
 
 const { prefix } = window
 const e = prefix('tabs')
@@ -29,7 +29,7 @@ const m = prefix('menu')
 const onDragCls = 'ondrag-tab'
 const onDragOverCls = 'dragover-tab'
 
-export default class Tab extends React.Component {
+class Tab extends Component {
   constructor (props) {
     super(props)
     this.state = {
@@ -245,13 +245,14 @@ export default class Tab extends React.Component {
     setTabs(tabs)
   }
 
-  renderContext () {
+  renderContext = () => {
     const { tabs, tab } = this.props
     const len = tabs.length
     const index = findIndex(tabs, t => t.id === tab.id)
     const noRight = index >= len - 1
     const isSshConfig = tab.type === terminalSshConfigType
     const res = []
+    const reloadShortcut = this.getShortcut('app_reloadCurrentTab')
     res.push({
       func: 'handleClose',
       icon: 'CloseOutlined',
@@ -288,7 +289,8 @@ export default class Tab extends React.Component {
     res.push({
       func: 'handleReloadTab',
       icon: 'Loading3QuartersOutlined',
-      text: m('reload')
+      text: m('reload'),
+      subText: reloadShortcut
     })
     return res
   }
@@ -379,6 +381,10 @@ export default class Tab extends React.Component {
     if (isEditting) {
       return this.renderEditting(tab, cls)
     }
+    const { tabCount, color } = tab
+    const styleTag = color
+      ? { borderTop: `1px solid ${color}` }
+      : {}
     return (
       <Tooltip
         title={title}
@@ -404,6 +410,7 @@ export default class Tab extends React.Component {
             className='tab-title elli pd1x'
             onClick={this.handleClick}
             onDoubleClick={this.handleDup}
+            style={styleTag}
             onContextMenu={this.handleContextMenu}
           >
             <Loading3QuartersOutlined
@@ -411,7 +418,9 @@ export default class Tab extends React.Component {
               onClick={this.handleReloadTab}
               title={m('reload')}
             />
-            <TabTitle tab={tab} />
+            <span className='tab-title'>
+              {tabCount}. {title}
+            </span>
           </div>
           <div className={'tab-status ' + status} />
           <div className='tab-traffic' />
@@ -424,3 +433,5 @@ export default class Tab extends React.Component {
     )
   }
 }
+
+export default shortcutDescExtend(Tab)

package/client/components/tabs/tabs.styl

@@ -1,17 +1,24 @@
 @require '../../css/includes/theme-default'
 .tabs
   position relative
-  height 45px
+  height 36px
   overflow hidden
   background main-dark
-
+  ::-webkit-scrollbar
+    width 0
+    display none
+.not-system-ui.is-mac
+  .tabs-inner
+    margin-left 72px
+  .tabs-extra
+    right 0
 .tabs-inner
   position relative
   z-index 2
   padding 0
   margin-top 0
   display inline-block
-  height 63px
+  height 36px
   overflow-x scroll
   overflow-y hidden
   margin-left 42px
@@ -25,7 +32,7 @@
   min-width 100px
   max-width 200px
   line-height 36px
-  margin 10px 1px 0 0
+  margin 0 1px 0 0
   border-radius 3px 3px 0 0
   background main-dark
   text-align center
@@ -118,13 +125,13 @@
 .tabs-add-btn
   display inline-block
   vertical-align middle
-  margin 10px 3px 0 3px
+  margin 0 3px 0 3px
   -webkit-app-region no-drag
   color text
   &.empty
     font-size 20px
     margin-left 20px
-    margin-top 20px
+    margin-top 10px
   &:hover
     color text-light
 .tabs-extra

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

@@ -4,6 +4,9 @@
 
 import { CloseOutlined, MinusOutlined } from '@ant-design/icons'
 import { Component } from '../common/react-subx'
+import {
+  isMacJs
+} from '../../common/constants'
 
 const { prefix } = window
 const m = prefix('menu')
@@ -14,7 +17,7 @@ export default class WindowControl extends Component {
       isMaximized,
       config
     } = this.props.store
-    if (config.useSystemTitleBar) {
+    if (config.useSystemTitleBar || isMacJs) {
       return null
     }
     const minimize = () => {

package/client/components/terminal/attach-addon-custom.js

@@ -7,12 +7,16 @@ import strip from '@electerm/strip-ansi'
 export default class AttachAddonCustom extends AttachAddon {
   constructor (term, options, encode, isWindowsShell) {
     super(term, options)
+    this.term = term
     this.decoder = new TextDecoder(encode)
     this.isWindowsShell = isWindowsShell
   }
 
-  activate (terminal) {
+  activate (terminal = this.term) {
     const writeToTerminal = (data) => {
+      if (terminal.parent?.onZmodem) {
+        return
+      }
       if (typeof data === 'string') {
         return terminal.write(data)
       }
@@ -79,6 +83,12 @@ export default class AttachAddonCustom extends AttachAddon {
     this._disposables.push(addSocketListener(this._socket, 'close', () => this.dispose()))
     this._disposables.push(addSocketListener(this._socket, 'error', () => this.dispose()))
   }
+
+  dispose () {
+    this.term = null
+    this._disposables.forEach(d => d.dispose())
+    this._disposables.length = 0
+  }
 }
 
 function addSocketListener (socket, type, handler) {
@@ -86,7 +96,6 @@ function addSocketListener (socket, type, handler) {
   return {
     dispose: () => {
       if (!handler) {
-        // Already disposed
         return
       }
       socket.removeEventListener(type, handler)