@electerm/electerm-react 1.34.68 → 1.35.6

package/client/common/constants.js

@@ -80,7 +80,8 @@ export const footerHeight = 36
 export const quickCommandBoxHeight = 180
 export const isWin = typeof window.et.isWin === 'undefined' ? window.pre.isWin : window.et.isWin
 export const isMac = typeof window.et.isMac === 'undefined' ? window.pre.isMac : window.et.isMac
-export const ctrlOrCmd = isMac ? 'cmd' : 'ctrl'
+export const isMacJs = /Macintosh|Mac|Mac OS|MacIntel|MacPPC|Mac68K/gi.test(window.navigator.userAgent)
+export const ctrlOrCmd = isMacJs ? 'cmd' : 'ctrl'
 export const typeMap = buildConst([
   'remote',
   'local'
@@ -215,6 +216,7 @@ export const syncTokenCreateUrls = {
   custom: 'https://github.com/electerm/electerm/wiki/Custom-sync-server'
 }
 export const settingSyncId = 'setting-sync'
+export const settingShortcutsId = 'setting-shortcuts'
 export const settingCommonId = 'setting-common'
 export const defaultEnvLang = 'en_US.UTF-8'
 const defaultThemeLightConf = _get(

package/client/common/key-pressed.js

@@ -4,7 +4,7 @@
 
 export default (e, key, type) => {
   const keyPressed = 'key' in e
-    ? e.key.toLowerCase() === key.toLowerCase()
+    ? e.code.toLowerCase() === key.toLowerCase()
     : false
   const typeMatch = type
     ? e.type === type

package/client/common/rand-hex-color.js

@@ -0,0 +1,28 @@
+export function getRandomHexColor () {
+  let color = '#'
+  const hexValues = '0123456789ABCDEF'
+
+  for (let i = 0; i < 6; i++) {
+    const index = Math.floor(Math.random() * 16)
+    color += hexValues[index]
+  }
+
+  return color
+}
+
+export const defaultColors = [
+  '#0366d6',
+  '#28a745',
+  '#d73a49',
+  '#ffab4a',
+  '#ffd33d',
+  '#6f42c1',
+  '#e99695',
+  '#24292e',
+  '#6a737d'
+]
+
+export const getRandomDefaultColor = () => {
+  const index = Math.floor(Math.random() * defaultColors.length)
+  return defaultColors[index]
+}

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

@@ -182,6 +182,8 @@ export default class BatchOp extends Component {
         toPath: resolveFilePath(isDown ? conf.localPath : conf.remotePath, name),
         typeFrom: isDown ? 'remote' : 'local',
         typeTo: isDown ? 'local' : 'remote',
+        skipExpand: true,
+        zip: true,
         skipConfirm: true
       }
       postMsg({
@@ -195,7 +197,9 @@ export default class BatchOp extends Component {
       }, 1000 * 60 * 60)
       this.ref1 = autoRun(store, () => {
         const { transferHistory } = store
-        const first = transferHistory.find(t => t.id === obj.id)
+        const first = transferHistory.find(t => {
+          return (t.id === obj.id || t.originalId === obj.id) && t.unzip
+        })
         if (first && first.sessionId === tab.sessionId) {
           this.ref1 && this.ref1.stop()
           delete this.ref1
@@ -315,7 +319,7 @@ export default class BatchOp extends Component {
         }
         const res = {
           host,
-          port,
+          port: Number(port),
           username,
           password
         }

package/client/components/bookmark-form/color-picker-item.jsx

@@ -0,0 +1,14 @@
+import {
+  Form
+} from 'antd'
+import { ColorPicker } from './color-picker.jsx'
+
+const FormItem = Form.Item
+
+export function ColorPickerItem () {
+  return (
+    <FormItem name='color' noStyle>
+      <ColorPicker />
+    </FormItem>
+  )
+}

package/client/components/bookmark-form/color-picker.jsx

@@ -0,0 +1,90 @@
+import React, { useState } from 'react'
+import { Popover } from 'antd'
+import { HexColorPicker } from 'react-colorful'
+import { defaultColors, getRandomHexColor } from '../../common/rand-hex-color.js'
+import { HexInput } from './hex-input.jsx'
+
+// Your Custom Color Picker component
+export const ColorPicker = React.forwardRef((props, ref) => {
+  const { value, onChange } = props
+  const [visible, setVisible] = useState(false)
+
+  const handleChange = (color) => {
+    onChange(color)
+    setVisible(false)
+  }
+
+  const handleVisibleChange = (vis) => {
+    setVisible(vis)
+  }
+
+  function renderContent () {
+    return (
+      <div className='color-picker-box'>
+        <div className='fix'>
+          <div className='fleft color-picker-defaults'>
+            {
+              [...defaultColors, 'random'].map((color) => {
+                const style = color === 'random'
+                  ? {
+                      color: '#000'
+                    }
+                  : {
+                      color
+                    }
+                const props = {
+                  className: 'color-picker-unit',
+                  style,
+                  onClick: () => {
+                    if (color === 'random') {
+                      return handleChange(getRandomHexColor())
+                    }
+                    handleChange(color)
+                  }
+                }
+                return (
+                  <div
+                    {...props}
+                    key={color}
+                  >
+                    ♦ {color}
+                  </div>
+                )
+              })
+            }
+          </div>
+          <div className='fright'>
+            <HexColorPicker
+              color={value}
+              onChange={handleChange}
+            />
+          </div>
+        </div>
+        <div className='pd1y'>
+          <HexInput
+            value={value}
+            onChange={handleChange}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <Popover
+      content={renderContent()}
+      trigger='click'
+      visible={visible}
+      placement='bottomLeft'
+      onVisibleChange={handleVisibleChange}
+    >
+      <div
+        ref={ref}
+        className='color-picker-choose'
+        style={{
+          backgroundColor: value
+        }}
+      />
+    </Popover>
+  )
+})

package/client/components/bookmark-form/color-picker.styl

@@ -0,0 +1,20 @@
+.color-picker-unit
+  display inline-block
+  padding 5px
+  margin-right 5px
+  margin-bottom 5px
+  border 1px solid #ccc
+  border-radius 5px
+  cursor pointer
+  background #fff
+  width 92px
+.color-picker-box
+  width 420px
+  .react-colorful
+    height 200px
+.color-picker-defaults
+  width 200px
+.color-picker-choose
+  width 18px
+  height 18px
+  cursor pointer

package/client/components/bookmark-form/form-ssh-common.jsx

@@ -17,6 +17,8 @@ import InputAutoFocus from '../common/input-auto-focus'
 import encodes from './encodes'
 import formatBookmarkGroups from './bookmark-group-tree-format'
 import renderRunScripts from './render-delayed-scripts.jsx'
+import { ColorPickerItem } from './color-picker-item.jsx'
+
 import './bookmark-form.styl'
 
 const authTypes = Object.keys(authTypeMap).map(k => {
@@ -76,8 +78,10 @@ export default function renderCommon (props) {
           <InputAutoFocus
             autofocustrigger={autofocustrigger}
             selectall='yes'
+            name='host'
             onBlur={props.onBlur}
             onPaste={e => props.onPaste(e, form)}
+            addonBefore={<ColorPickerItem />}
           />
         </FormItem>
       </FormItem>

package/client/components/bookmark-form/hex-input.jsx

@@ -0,0 +1,39 @@
+import { Input } from 'antd'
+import { useState } from 'react'
+import {
+  CheckOutlined
+} from '@ant-design/icons'
+
+export const HexInput = (props) => {
+  const [v, setV] = useState(props.value.replace('#', ''))
+  const handleChange = (event) => {
+    const vv = event.target.value
+    const hexRegex = /^[0-9a-fA-F]{0,6}$/
+    if (hexRegex.test(vv)) {
+      setV(vv)
+    }
+  }
+  function submit () {
+    props.onChange('#' + v)
+  }
+  function renderAfter () {
+    if (!/^[0-9a-fA-F]{6}$/.test(v)) {
+      return null
+    }
+    return (
+      <CheckOutlined
+        className='pointer'
+        onClick={submit}
+      />
+    )
+  }
+  return (
+    <Input
+      addonBefore='#'
+      {...props}
+      value={v}
+      onChange={handleChange}
+      addonAfter={renderAfter()}
+    />
+  )
+}

package/client/components/bookmark-form/local-form-ui.jsx

@@ -58,6 +58,7 @@ export default function LocalFormUi (props) {
   const defaultValues = {
     category: initBookmarkGroupId,
     term: props.store.config.terminalType,
+    displayRaw: false,
     type: terminalLocalType,
     runScripts: [{}],
     enableSsh: true

package/client/components/bookmark-form/serial-form-ui.jsx

@@ -32,6 +32,8 @@ import useUI from './use-ui'
 import useQm from './use-quick-commands'
 import copy from 'json-deep-copy'
 import { defaults } from 'lodash-es'
+import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
+import { ColorPickerItem } from './color-picker-item.jsx'
 
 const FormItem = Form.Item
 const { Option } = Select
@@ -68,6 +70,7 @@ export default function SerialFormUi (props) {
     : currentBookmarkGroupId
   let initialValues = copy(props.formData)
   const defaultValues = {
+    color: getRandomDefaultColor(),
     baudRate: 9600,
     dataBits: 8,
     lock: true,
@@ -79,6 +82,7 @@ export default function SerialFormUi (props) {
     xany: false,
     type: terminalSerialType,
     term: defaultSettings.terminalType,
+    displayRaw: false,
     category: initBookmarkGroupId,
     runScripts: [{}],
     ignoreKeyboardInteractive: false
@@ -93,6 +97,14 @@ export default function SerialFormUi (props) {
     const tree = formatBookmarkGroups(bookmarkGroups)
     return (
       <div className='pd1x'>
+        <FormItem
+          {...formItemLayout}
+          label={e('title')}
+          name='title'
+          hasFeedback
+        >
+          <Input addonBefore={<ColorPickerItem />} />
+        </FormItem>
         <FormItem
           {...formItemLayout}
           label='path'
@@ -232,14 +244,6 @@ export default function SerialFormUi (props) {
         >
           <Switch />
         </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label={e('title')}
-          name='title'
-          hasFeedback
-        >
-          <Input />
-        </FormItem>
         <FormItem
           {...formItemLayout}
           label={e('description')}

package/client/components/bookmark-form/ssh-form-ui.jsx

@@ -25,6 +25,7 @@ import renderX11 from './x11'
 import renderAuth from './render-auth-ssh'
 import renderSshTunnel from './render-ssh-tunnel'
 import renderConnectionHopping from './render-connection-hopping'
+import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
 import './bookmark-form.styl'
 
 export default function BookmarkFormUI (props) {
@@ -58,7 +59,9 @@ export default function BookmarkFormUI (props) {
     port: 22,
     authType: authTypeMap.password,
     id: '',
+    color: getRandomDefaultColor(),
     term: props.store.config.terminalType,
+    displayRaw: false,
     encode: encodes[0],
     envLang: defaultEnvLang,
     enableSsh: true,

package/client/components/bookmark-form/telnet-form-ui.jsx

@@ -61,6 +61,7 @@ export default function TelnetFormUI (props) {
     password: 'guest',
     runScripts: [{}],
     term: defaultSettings.terminalType,
+    displayRaw: false,
     type: terminalTelnetType,
     category: initBookmarkGroupId
   }

package/client/components/bookmark-form/use-ui.jsx

@@ -10,7 +10,8 @@ import {
   Input,
   InputNumber,
   AutoComplete,
-  Form
+  Form,
+  Switch
 } from 'antd'
 import { formItemLayout } from '../../common/form-layout'
 import defaultSettings from '../../common/default-setting'
@@ -54,6 +55,15 @@ export default function useBookmarkFormUI (props) {
         options={terminalTypes.map(mapper)}
       />
     </FormItem>,
+    <FormItem
+      {...formItemLayout}
+      label={e('displayRaw')}
+      name='displayRaw'
+      key='displayRaw'
+      valuePropName='checked'
+    >
+      <Switch />
+    </FormItem>,
     <FormItem
       {...formItemLayout}
       label={s('fontFamily')}

package/client/components/context-menu/context-menu.styl

@@ -33,7 +33,7 @@
 .context-sub-text
   position absolute
   right 16px
-  top 6px
+  top 0
   opacity .65
 
 .context-menu

package/client/components/context-menu/menu-btn.jsx

@@ -4,7 +4,8 @@
 
 import { Component } from '../common/react-subx'
 import logoRef from '@electerm/electerm-resource/res/imgs/electerm.svg'
-import { commonActions, ctrlOrCmd } from '../../common/constants'
+import { commonActions } from '../../common/constants'
+import { shortcutDescExtend } from '../shortcuts/shortcut-handler.js'
 import generate from '../../common/uid'
 
 const { prefix } = window
@@ -15,7 +16,7 @@ const t = prefix('tabs')
 const s = prefix('setting')
 const logo = logoRef.replace(/^\//, '')
 
-export default class MenuBtn extends Component {
+class MenuBtn extends Component {
   state = {
     opened: false
   }
@@ -109,7 +110,7 @@ export default class MenuBtn extends Component {
         func: 'onNewSsh',
         icon: 'CodeFilled',
         text: e('newBookmark'),
-        subText: `${ctrlOrCmd}+N`
+        subText: this.getShortcut('app_newBookmark')
       },
       {
         func: 'addTab',
@@ -222,3 +223,5 @@ export default class MenuBtn extends Component {
     )
   }
 }
+
+export default shortcutDescExtend(MenuBtn)

package/client/components/main/custom-css.jsx

@@ -0,0 +1,28 @@
+/**
+ * ui theme
+ */
+
+import { useEffect } from 'react'
+import { useDelta, useConditionalEffect } from 'react-delta'
+import eq from 'fast-deep-equal'
+
+const themeDomId = 'custom-css'
+
+export default function CustomCss (props) {
+  const { customCss } = props
+
+  const delta = useDelta(customCss)
+
+  async function applyTheme () {
+    const stylus = document.getElementById(themeDomId)
+    stylus.innerHTML = customCss
+  }
+
+  useEffect(() => {
+    applyTheme()
+  }, [])
+  useConditionalEffect(() => {
+    applyTheme()
+  }, delta && delta.prev && !eq(delta.prev, delta.curr))
+  return null
+}

package/client/components/main/main.jsx

@@ -10,8 +10,10 @@ import Sidebar from '../sidebar'
 import BatchOp from '../batch-op/batch-op'
 import CssOverwrite from './css-overwrite'
 import UiTheme from './ui-theme'
+import CustomCss from './custom-css.jsx'
 import TerminalInteractive from '../terminal/terminal-interactive'
 import classnames from 'classnames'
+import ShortcutControl from '../shortcuts/shortcut-control.jsx'
 import { isMac, isWin } from '../../common/constants'
 import TermFullscreenControl from './term-fullscreen-control'
 import { LoadingUI } from './loading'
@@ -50,7 +52,6 @@ export default class Index extends Component {
     })
     window.addEventListener('offline', store.setOffline)
     window.addEventListener('mousewheel', store.onMouseWheel)
-    window.addEventListener('keydown', store.onKeyDown)
     store.isSencondInstance = window.pre.runSync('isSencondInstance')
     store.initData()
     store.checkForDbUpgrade()
@@ -106,6 +107,7 @@ export default class Index extends Component {
         theme={uiThemeConfig}
       >
         <div {...ext1}>
+          <ShortcutControl config={config} />
           <LoadingUI
             wsInited={wsInited}
           />
@@ -121,7 +123,8 @@ export default class Index extends Component {
             {...themeProps}
             buildTheme={store.buildTheme}
           />
-          <TextEditor />
+          <CustomCss customCss={config.customCss} />
+          <TextEditor customCss={cpConf.customCss} />
           <UpdateCheck
             skipVersion={cpConf.skipVersion}
             upgradeInfo={upgradeInfo}

package/client/components/session/session.jsx

@@ -21,14 +21,11 @@ import {
   terminalSplitDirectionMap,
   termControlHeight,
   paneMap,
-  ctrlOrCmd,
   footerHeight,
   terminalActions,
   connectionMap
 } from '../../common/constants'
 import ResizeWrap from '../common/resize-wrap'
-import keyControlPressed from '../../common/key-control-pressed'
-import keyPressed from '../../common/key-pressed'
 import safeName from '../../common/safe-name'
 import TerminalInfoContent from '../terminal-info/content'
 import uid from '../../common/id-with-stamp'
@@ -88,38 +85,17 @@ export default class SessionWrapper extends Component {
 
   componentDidMount () {
     this.updateTab()
-    this.initEvent()
+    // this.initEvent()
   }
 
-  componentWillUnmount () {
-    this.destroyEvent()
-  }
-
-  initEvent () {
-    window.addEventListener('keydown', this.handleEvent)
-  }
-
-  destroyEvent () {
-    window.removeEventListener('keydown', this.handleEvent)
-  }
-
-  isActive () {
-    const {
-      tab,
-      currentTabId
-    } = this.props
-    return currentTabId === tab.id &&
-      tab.pane === paneMap.terminal
-  }
-
-  handleEvent = (e) => {
-    if (!this.isActive()) {
-      return
-    }
-    if (keyControlPressed(e) && keyPressed(e, '/')) {
-      this.handleSplit()
-    }
-  }
+  // isActive () {
+  //   const {
+  //     tab,
+  //     currentTabId
+  //   } = this.props
+  //   return currentTabId === tab.id &&
+  //     tab.pane === paneMap.terminal
+  // }
 
   handleShowInfo = (infoPanelProps) => {
     this.setState({
@@ -383,7 +359,7 @@ export default class SessionWrapper extends Component {
     return (
       <Tooltip title={title}>
         <FullscreenOutlined
-          className='mg1r icon-info font16 iblock pointer spliter'
+          className='mg1r icon-info font16 iblock pointer spliter term-fullscreen-control1'
           onClick={this.handleFullscreen}
         />
       </Tooltip>
@@ -464,7 +440,7 @@ export default class SessionWrapper extends Component {
                       )
                 }
                 <Tooltip
-                  title={`${e('split')}(${ctrlOrCmd} + /)`}
+                  title={`${e('split')}`}
                 >
                   <Icon1
                     className={cls1}

package/client/components/session/sessions.jsx

@@ -14,8 +14,6 @@ import {
   statusMap
 } from '../../common/constants'
 import newTerm, { updateCount } from '../../common/new-terminal'
-import keyControlPress from '../../common/key-control-pressed'
-import keyPressed from '../../common/key-pressed'
 import postMsg from '../../common/post-msg'
 import TermSearch from '../terminal/term-search'
 import Footer from '../footer/footer-entry'
@@ -23,12 +21,13 @@ import QuickCommandsFooterBox from '../quick-commands/quick-commands-box'
 import LogoElem from '../common/logo-elem'
 import { Button } from 'antd'
 import toSimpleObj from '../../common/to-simple-obj'
+import { shortcutExtend } from '../shortcuts/shortcut-handler.js'
 
 const { prefix } = window
 const e = prefix('tabs')
 const c = prefix('control')
 
-export default class Sessions extends Component {
+class Sessions extends Component {
   state = {
     tabs: [],
     currentTabId: ''
@@ -40,16 +39,14 @@ export default class Sessions extends Component {
   }
 
   initShortcuts () {
-    window.addEventListener('keydown', e => {
-      if (keyControlPress(e) && keyPressed(e, 'w')) {
-        e.stopPropagation()
-        if (this.state.tabs.length > 1) {
-          this.delTab(
-            this.state.currentTabId
-          )
-        }
-      }
-    })
+    window.addEventListener('keydown', this.handleKeyboardEvent.bind(this))
+  }
+
+  closeCurrentTabShortcut = (e) => {
+    e.stopPropagation()
+    this.delTab(
+      this.state.currentTabId
+    )
   }
 
   watch = () => {
@@ -418,11 +415,12 @@ export default class Sessions extends Component {
   }
 
   render () {
-    const { store } = this.props
+    const { store, config } = this.props
     const currentTab = this.getCurrentTab()
     const termProps = {
       currentTab,
-      store
+      store,
+      config
     }
     return [
       this.renderTabs(),
@@ -443,3 +441,5 @@ export default class Sessions extends Component {
     ]
   }
 }
+
+export default shortcutExtend(Sessions)