@electerm/electerm-react 5.0.7 → 5.1.6

package/client/components/setting-sync/data-import.jsx

@@ -4,7 +4,6 @@
 
 import {
   Button,
-  Switch,
   Select,
   Space
 } from 'antd'
@@ -13,6 +12,7 @@ import {
   ExportOutlined
 } from '@ant-design/icons'
 import Upload from '../common/upload'
+import SwitchLabel from '../common/switch'
 import HelpIcon from '../common/help-icon'
 
 const e = window.translate
@@ -87,11 +87,10 @@ export default function DataTransport (props) {
         </Upload>
       </div>
       <div className='fright'>
-        <Switch
+        <SwitchLabel
           checked={autoSyncEnabled}
-          checkedChildren={txt}
+          label={txt}
           onChange={handleAutoSync}
-          unCheckedChildren={txt}
           className='mg3l mg1r'
         />
         {autoSyncEnabled && (

package/client/components/setting-sync/setting-sync-form.jsx

@@ -7,8 +7,9 @@
  */
 import { useEffect, useRef } from 'react'
 import { ArrowDownOutlined, ArrowUpOutlined, SaveOutlined, ClearOutlined } from '@ant-design/icons'
-import { Button, Input, Form, Alert, Switch } from 'antd'
+import { Button, Input, Form, Alert } from 'antd'
 import { notification } from '../common/notification'
+import SwitchLabel from '../common/switch'
 import Link from '../common/external-link'
 import dayjs from 'dayjs'
 import eq from 'fast-deep-equal'
@@ -253,7 +254,7 @@ export default function SyncForm (props) {
           name='skipVerify'
           valuePropName='checked'
         >
-          <Switch />
+          <SwitchLabel />
         </FormItem>
         <FormItem
           label={createLabel(e('password'))}

package/client/components/sftp/file-compare-modal.jsx

@@ -21,7 +21,7 @@ const formatTime = time
 const CodeCompare = lazy(() => import('./code-compare'))
 
 const Loading = () => (
-  <div style={{ padding: 40, textAlign: 'center' }}>
+  <div className='aligncenter pd3'>
     <Spin />
   </div>
 )

package/client/components/sidebar/history.jsx

@@ -4,8 +4,8 @@
 
 import React, { useState, useEffect } from 'react'
 import { auto } from 'manate/react'
-import { Switch } from 'antd'
 import { UnorderedListOutlined } from '@ant-design/icons'
+import SwitchLabel from '../common/switch'
 import HistoryItem from './history-item'
 import { getItemJSON, setItemJSON } from '../../common/safe-local-storage.js'
 import '../setting-panel/list.styl'
@@ -44,22 +44,20 @@ export default auto(function HistoryPanel (props) {
     }
     return (
       <div className='history-header pd2x pd2b'>
-        <Switch
-          {...switchProps}
-        />
+        <div className='history-sort'>
+          <SwitchLabel
+            checked={sortByFrequency}
+            onChange={handleSortByFrequencyChange}
+            size='small'
+            label={e('sortByFrequency')}
+          />
+        </div>
         <UnorderedListOutlined
           {...clearIconProps}
         />
       </div>
     )
   }
-  const switchProps = {
-    checkedChildren: e('sortByFrequency'),
-    unCheckedChildren: e('sortByFrequency'),
-    checked: sortByFrequency,
-    onChange: handleSortByFrequencyChange,
-    size: 'small'
-  }
   const clearIconProps = {
     className: 'history-clear-icon pointer clear-ai-icon icon-hover',
     title: window.translate('clear'),

package/client/components/sidebar/index.jsx

@@ -1,27 +1,20 @@
 import {
-  BookOutlined,
-  CloudSyncOutlined,
   InfoCircleOutlined,
-  PictureOutlined,
-  PlusCircleOutlined,
-  SettingOutlined,
   UpCircleOutlined,
-  AppstoreOutlined,
-  ThunderboltOutlined,
   AimOutlined,
   MenuFoldOutlined
 } from '@ant-design/icons'
-import { Tooltip, Popover } from 'antd'
+import { Tooltip } from 'antd'
 import SideBarPanel from './sidebar-panel'
-import TransferList from './transfer-list'
 import MenuBtn from '../sys-menu/menu-btn'
-import QuickConnect from '../tabs/quick-connect'
 import {
   settingMap,
   modals
 } from '../../common/constants'
 import SideIcon from './side-icon'
 import SidePanel from './side-panel'
+import LeftSidebarIcons from './left-sidebar-icons'
+import TransferList from './transfer-list'
 import hasActiveInput from '../../common/has-active-input'
 import './sidebar.styl'
 
@@ -47,7 +40,9 @@ export default function Sidebar (props) {
     showInfoModal,
     sidebarPanelTab,
     openWidgetsModal,
-    zoom
+    zoom,
+    leftSideBarIcons,
+    widgetInstancesLength
   } = props
 
   const { store } = window
@@ -146,67 +141,23 @@ export default function Sidebar (props) {
         <div className='control-icon-wrap'>
           <MenuBtn store={store} config={store.config} />
         </div>
-        <SideIcon
-          title={e('newBookmark')}
-        >
-          <PlusCircleOutlined
-            className='font22 iblock control-icon'
-            onClick={onNewSsh}
-          />
-        </SideIcon>
-        <Popover
-          content={<QuickConnect inputOnly />}
-          trigger='click'
-          placement='right'
-        >
-          <div className='control-icon-wrap' title={e('quickConnect')}>
-            <ThunderboltOutlined
-              className='font20 iblock control-icon'
-            />
-          </div>
-        </Popover>
-        <SideIcon
-          title={e(settingMap.bookmarks)}
-          active={bookmarksActive}
-        >
-          <BookOutlined
-            onClick={handleClickBookmark}
-            className='font20 iblock control-icon'
-          />
-        </SideIcon>
+        <LeftSidebarIcons
+          iconIds={leftSideBarIcons}
+          handleClickBookmark={handleClickBookmark}
+          onNewSsh={onNewSsh}
+          openSetting={openSetting}
+          openSettingSync={openSettingSync}
+          openTerminalThemes={openTerminalThemes}
+          openWidgetsModal={openWidgetsModal}
+          bookmarksActive={bookmarksActive}
+          themeActive={themeActive}
+          settingActive={settingActive}
+          syncActive={syncActive}
+          widgetsActive={widgetsActive}
+          isSyncingSetting={isSyncingSetting}
+          widgetInstancesLength={widgetInstancesLength}
+        />
         <TransferList {...transferProps} />
-        <SideIcon
-          title={e(settingMap.terminalThemes)}
-          active={themeActive}
-        >
-          <PictureOutlined
-            className='font20 iblock pointer control-icon'
-            onClick={openTerminalThemes}
-          />
-        </SideIcon>
-        <SideIcon
-          title={e(settingMap.setting)}
-          active={settingActive}
-        >
-          <SettingOutlined className='iblock font20 control-icon' onClick={openSetting} />
-        </SideIcon>
-        <SideIcon
-          title={e('settingSync')}
-          active={syncActive}
-        >
-          <CloudSyncOutlined
-            className='iblock font20 control-icon'
-            onClick={openSettingSync}
-            spin={isSyncingSetting}
-          />
-        </SideIcon>
-        <SideIcon
-          title={e('widgets')}
-          active={widgetsActive}
-        >
-          <AppstoreOutlined className='iblock font20 control-icon' onClick={openWidgetsModal} />
-        </SideIcon>
-
         <SideIcon
           title={e('about')}
           active={showInfoModal}

package/client/components/sidebar/left-sidebar-icons.jsx

@@ -0,0 +1,148 @@
+/**
+ * renders the customizable far-left sidebar icons.
+ *
+ * which icons appear, and in what order, is driven by `iconIds`
+ * (from config.leftSideBarIcons). The "about", "hide sidebar" and
+ * "file transfer" icons are not customizable — they are rendered
+ * directly by the parent (sidebar/index.jsx).
+ */
+
+import {
+  AppstoreOutlined,
+  BookOutlined,
+  CloudSyncOutlined,
+  PictureOutlined,
+  PlusCircleOutlined,
+  SettingOutlined,
+  ThunderboltOutlined
+} from '@ant-design/icons'
+import { Badge, Popover } from 'antd'
+import SideIcon from './side-icon'
+import QuickConnect from '../tabs/quick-connect'
+import { settingMap } from '../../common/constants'
+import { defaultLeftSideBarIcons } from '../../common/left-sidebar-icon-defs'
+
+const e = window.translate
+
+export default function LeftSidebarIcons (props) {
+  const {
+    iconIds,
+    handleClickBookmark,
+    onNewSsh,
+    openSetting,
+    openSettingSync,
+    openTerminalThemes,
+    openWidgetsModal,
+    bookmarksActive,
+    themeActive,
+    settingActive,
+    syncActive,
+    widgetsActive,
+    isSyncingSetting,
+    widgetInstancesLength
+  } = props
+
+  const ids = Array.isArray(iconIds) && iconIds.length
+    ? iconIds
+    : defaultLeftSideBarIcons
+
+  const registry = {
+    newBookmark: (
+      <SideIcon
+        key='newBookmark'
+        title={e('newBookmark')}
+      >
+        <PlusCircleOutlined
+          className='font22 iblock control-icon'
+          onClick={onNewSsh}
+        />
+      </SideIcon>
+    ),
+    quickConnect: (
+      <Popover
+        key='quickConnect'
+        content={<QuickConnect inputOnly />}
+        trigger='click'
+        placement='right'
+      >
+        <div
+          className='control-icon-wrap'
+          title={e('quickConnect')}
+        >
+          <ThunderboltOutlined className='font20 iblock control-icon' />
+        </div>
+      </Popover>
+    ),
+    bookmarks: (
+      <SideIcon
+        key='bookmarks'
+        title={e(settingMap.bookmarks)}
+        active={bookmarksActive}
+      >
+        <BookOutlined
+          onClick={handleClickBookmark}
+          className='font20 iblock control-icon'
+        />
+      </SideIcon>
+    ),
+    terminalThemes: (
+      <SideIcon
+        key='terminalThemes'
+        title={e(settingMap.terminalThemes)}
+        active={themeActive}
+      >
+        <PictureOutlined
+          className='font20 iblock pointer control-icon'
+          onClick={openTerminalThemes}
+        />
+      </SideIcon>
+    ),
+    setting: (
+      <SideIcon
+        key='setting'
+        title={e(settingMap.setting)}
+        active={settingActive}
+      >
+        <SettingOutlined
+          className='iblock font20 control-icon'
+          onClick={openSetting}
+        />
+      </SideIcon>
+    ),
+    settingSync: (
+      <SideIcon
+        key='settingSync'
+        title={e('settingSync')}
+        active={syncActive}
+      >
+        <CloudSyncOutlined
+          className='iblock font20 control-icon'
+          onClick={openSettingSync}
+          spin={isSyncingSetting}
+        />
+      </SideIcon>
+    ),
+    widgets: (
+      <SideIcon
+        key='widgets'
+        title={e('widgets')}
+        active={widgetsActive}
+      >
+        <Badge
+          count={widgetInstancesLength}
+          size='small'
+          offset={[0, 0]}
+          color='green'
+          overflowCount={99}
+        >
+          <AppstoreOutlined
+            className='iblock font20 control-icon'
+            onClick={openWidgetsModal}
+          />
+        </Badge>
+      </SideIcon>
+    )
+  }
+
+  return ids.map(id => registry[id] || null)
+}

package/client/components/sidebar/sidebar.styl

@@ -57,6 +57,12 @@
     top 0
     z-index 10
     background var(--main)
+    .history-sort
+      display flex
+      align-items center
+      gap 6px
+    .history-sort-label
+      user-select none
     .history-clear-icon
       margin-left auto
       margin-right 0

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

@@ -25,7 +25,7 @@ export default memo(function TransferList (props) {
   const bdProps = {
     count: len,
     size: 'small',
-    offset: [-10, -5],
+    offset: [0, 0],
     color,
     overflowCount: 99
   }

package/client/components/spice/spice-session.jsx

@@ -10,11 +10,11 @@ import {
   ReloadOutlined
 } from '@ant-design/icons'
 import {
-  Spin,
-  Switch
+  Spin
 } from 'antd'
 import * as ls from '../../common/safe-local-storage'
 import RemoteFloatControl from '../common/remote-float-control'
+import SwitchLabel from '../common/switch'
 import './spice.styl'
 
 async function loadSpiceModule () {
@@ -132,8 +132,7 @@ export default class SpiceSession extends PureComponent {
     const scaleProps = {
       checked: this.state.scaleViewport,
       onChange: this.handleScaleViewChange,
-      unCheckedChildren: window.translate('scaleViewport'),
-      checkedChildren: window.translate('scaleViewport'),
+      label: window.translate('scaleViewport'),
       className: 'mg1l'
     }
     return (
@@ -144,7 +143,7 @@ export default class SpiceSession extends PureComponent {
             className='mg2r mg1l pointer'
           />
           {this.renderInfo()}
-          <Switch
+          <SwitchLabel
             {...scaleProps}
           />
         </div>

package/client/components/tabs/no-session.jsx

@@ -51,7 +51,7 @@ export default function NoSessionPanel ({ height, onNewTab, onNewSsh, batch }) {
         )}
         <QuickConnect batch={batch} />
       </div>
-      <div className='pd3'>
+      <div className='no-session-logo'>
         <LogoElem />
       </div>
       <div className='no-session-history' onClick={handleClick}>

package/client/components/tabs/no-session.styl

@@ -1,28 +1,51 @@
 .no-sessions
   background var(--main)
   text-align center
-  padding 50px 0
+  // stack buttons / logo / history; the history flexes to fill the remaining
+  // height, so the layout adapts to logo size and button wrapping without any
+  // fixed pixel offsets.
+  display flex
+  flex-direction column
   position absolute
   top 36px
   left 0
   right 0
   bottom 0
+  padding 50px 0
   z-index 11
 .no-session-btns
+  flex-shrink 0
   display flex
   flex-wrap wrap
   justify-content center
   align-items center
   gap 8px
   padding-bottom 8px
+.no-session-logo
+  flex-shrink 0
+  padding 32px 0
 .no-session-history
-  position absolute
-  top 320px
-  bottom 80px
-  left 0
-  right 0
+  flex 1
+  min-height 0
+  display flex
+  flex-direction column
+  overflow hidden
   .sidebar-panel-history
-    overflow-y auto
+    // override the global sidebar absolute positioning (top:112px) so the
+    // history fills this flex item instead.
+    position static
+    flex 1
+    min-height 0
     .pd2x
       width 400px
-      margin 0 auto
+      margin 0 auto
+.is-mobile
+  .no-sessions
+    padding 20px 0
+  .no-session-logo
+    padding 8px 0
+  .no-session-history
+    .sidebar-panel-history
+      .pd2x
+        width auto
+        max-width 400px

package/client/components/terminal/shortcut-bar-defs.js

@@ -0,0 +1,131 @@
+/**
+ * shortcut-bar data: the candidate button library, the default selection, and
+ * localStorage persistence. Pure data (no React) so it can be shared by the
+ * bar (shortcut-bar.jsx) and the edit modal (shortcut-bar-edit.jsx).
+ */
+
+import * as ls from '../../common/safe-local-storage'
+import { shortcutBarLsKey } from '../../common/constants'
+
+// build control bytes at runtime — keeps source free of literal control chars
+const ESC = String.fromCharCode(0x1b)
+const DEL = String.fromCharCode(0x7f)
+
+// --- candidate library -----------------------------------------------------
+
+const ctrlChars = 'abcdefghijklmnopqrstuvwxyz'.split('')
+const ctrlButtons = ctrlChars.map(ch => ({
+  id: 'ctrl+' + ch,
+  label: 'Ctrl+' + ch.toUpperCase(),
+  data: String.fromCharCode(ch.charCodeAt(0) - 96)
+}))
+
+const fKeys = [
+  ['f1', 'F1', ESC + 'OP'],
+  ['f2', 'F2', ESC + 'OQ'],
+  ['f3', 'F3', ESC + 'OR'],
+  ['f4', 'F4', ESC + 'OS'],
+  ['f5', 'F5', ESC + '[15~'],
+  ['f6', 'F6', ESC + '[17~'],
+  ['f7', 'F7', ESC + '[18~'],
+  ['f8', 'F8', ESC + '[19~'],
+  ['f9', 'F9', ESC + '[20~'],
+  ['f10', 'F10', ESC + '[21~'],
+  ['f11', 'F11', ESC + '[23~'],
+  ['f12', 'F12', ESC + '[24~']
+].map(([id, label, data]) => ({ id, label, data }))
+
+const navButtons = [
+  { id: 'esc', label: 'Esc', data: ESC },
+  { id: 'tab', label: 'Tab', data: '\t' },
+  { id: 'enter', label: 'Enter', data: '\r' },
+  { id: 'space', label: 'Space', data: ' ' },
+  { id: 'backspace', label: 'Bksp', data: DEL },
+  { id: 'arrow-up', label: '↑', data: ESC + '[A' },
+  { id: 'arrow-down', label: '↓', data: ESC + '[B' },
+  { id: 'arrow-right', label: '→', data: ESC + '[C' },
+  { id: 'arrow-left', label: '←', data: ESC + '[D' },
+  { id: 'home', label: 'Home', data: ESC + '[H' },
+  { id: 'end', label: 'End', data: ESC + '[F' },
+  { id: 'pageup', label: 'PgUp', data: ESC + '[5~' },
+  { id: 'pagedown', label: 'PgDn', data: ESC + '[6~' },
+  { id: 'insert', label: 'Ins', data: ESC + '[2~' },
+  { id: 'delete', label: 'Del', data: ESC + '[3~' }
+]
+
+const punctChars = ':;/~|\\`\'".,(){}[]<>=+-_*&^%$#@!?'
+const punctButtons = punctChars.split('').map(ch => ({
+  id: 'char-' + ch.charCodeAt(0),
+  label: ch,
+  data: ch
+}))
+
+// full library, de-duplicated by id
+const candidates = []
+const seenIds = new Set()
+;[...navButtons, ...ctrlButtons, ...fKeys, ...punctButtons].forEach(b => {
+  if (!seenIds.has(b.id)) {
+    seenIds.add(b.id)
+    candidates.push(b)
+  }
+})
+
+// ids selected by default — mirrors the keys requested in the feature spec
+const DEFAULT_ACTIVE_IDS = [
+  'esc',
+  'tab',
+  'ctrl+c',
+  'ctrl+v',
+  'ctrl+z',
+  'ctrl+y',
+  'ctrl+a',
+  'ctrl+x',
+  'ctrl+s',
+  'ctrl+f',
+  'ctrl+r',
+  'ctrl+g',
+  'ctrl+h',
+  'ctrl+n',
+  'ctrl+p',
+  'ctrl+l',
+  'enter',
+  'char-58',
+  'arrow-up',
+  'arrow-down',
+  'arrow-left',
+  'arrow-right',
+  'f1',
+  'f2',
+  'f3',
+  'f4',
+  'f5',
+  'f6',
+  'f7',
+  'f8',
+  'f9',
+  'f10',
+  'f11',
+  'f12'
+]
+
+export function defaultActive () {
+  const byId = new Map(candidates.map(c => [c.id, c]))
+  return DEFAULT_ACTIVE_IDS
+    .map(id => byId.get(id))
+    .filter(Boolean)
+    .map(b => ({ ...b }))
+}
+
+export function loadActive () {
+  const saved = ls.getItemJSON(shortcutBarLsKey, null)
+  if (Array.isArray(saved) && saved.length) {
+    return saved
+  }
+  return defaultActive()
+}
+
+export function saveActive (arr) {
+  ls.setItemJSON(shortcutBarLsKey, arr)
+}
+
+export { candidates }