@electerm/electerm-react 3.15.153 → 3.15.155

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

@@ -16,6 +16,15 @@
 .number-input
   min-width 210px
 
+// On mobile, stack loginScriptDelay and loginScript vertically instead of
+// horizontally (the antd Space renders them side by side by default).
+.is-mobile
+  .run-scripts-space.ant-space
+    flex-direction column
+    align-items stretch
+    .ant-space-item
+      width 100%
+
 .tree-select-wrapper
   display flex
   flex-direction column

package/client/components/bookmark-form/common/run-scripts.jsx

@@ -18,7 +18,7 @@ export default function renderRunScripts () {
       <>
         <Space
           align='baseline'
-          className='width-100'
+          className='width-100 run-scripts-space'
           key={field.key}
         >
           <FormItem

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

@@ -78,4 +78,27 @@
     max-width none
     width 100%
   .qm-label-select
-    width 100%
+    width 100%
+
+// On mobile, stack the quick-command row (name / delay / command / remove)
+// vertically instead of side by side — the horizontal Space.Compact layout
+// is too cramped on narrow screens.
+.is-mobile
+  .qm-cmd-row.ant-space-compact
+    display flex
+    flex-direction column
+    align-items stretch
+    gap 8px
+    .ant-space-compact-item
+      width 100%
+    // reset the constrained widths so inputs fill the row when stacked
+    .qm-name-input
+      max-width none
+      width 100%
+    .ant-input-number
+      width 100% !important
+    // keep the drag handle + remove button on a tidy line of their own
+    > .drag
+      align-self flex-start
+    > button:last-child
+      align-self flex-end

package/client/components/quick-commands/quick-commands-list-form.jsx

@@ -67,7 +67,7 @@ export default function renderQm (form) {
     return (
       <Space.Compact
         align='center'
-        className='width-100 mg2b'
+        className='width-100 mg2b qm-cmd-row'
         key={field.key}
         draggable
         onDragStart={(e) => handleDragStart(e, i)}

package/client/components/session/session.jsx

@@ -656,7 +656,8 @@ export default class SessionWrapper extends Component {
     const simpleMapper = {
       [paneMap.terminal]: 'T',
       [paneMap.fileManager]: 'F',
-      [paneMap.ssh]: 'T'
+      [paneMap.ssh]: 'T',
+      [paneMap.sftp]: 'S'
     }
     return (
       <div className='term-sftp-tabs fleft'>

package/client/components/setting-panel/deep-link-control.jsx

@@ -110,7 +110,7 @@ export default function DeepLinkControl () {
       <Tooltip
         title={renderTooltipContent()}
       >
-        <Space>
+        <div className='deep-link-btns'>
           {
             !isAllRegistered && (
               <Button
@@ -134,7 +134,7 @@ export default function DeepLinkControl () {
               </Button>
             )
           }
-        </Space>
+        </div>
       </Tooltip>
     </div>
   )

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

@@ -11,9 +11,9 @@ import {
 } from '@ant-design/icons'
 import {
   Button,
+  Pagination,
   Modal,
   Space,
-  Table,
   Tag,
   Tooltip,
   Typography,
@@ -126,8 +126,10 @@ export default class SettingPasswords extends Component {
     })
   }
 
-  handleTableChange = (pagination) => {
-    this.setState({ pagination })
+  handlePageChange = (page, pageSize) => {
+    this.setState({
+      pagination: { current: page, pageSize }
+    })
   }
 
   getFilteredData = () => {
@@ -143,88 +145,48 @@ export default class SettingPasswords extends Component {
     })
   }
 
-  getColumns = () => {
-    const columns = [
-      {
-        title: e('password'),
-        dataIndex: 'password',
-        key: 'password',
-        render: () => {
-          const props0 = {
-            children: [
-              <KeyOutlined key='icon' />,
-              <TextAnt keyboard key='text'>********</TextAnt>
-            ]
-          }
-          return <Space>{props0.children}</Space>
-        }
-      },
-      {
-        title: e('count'),
-        dataIndex: 'count',
-        key: 'count',
-        width: 80,
-        render: (count) => {
-          const props0 = {
-            color: 'blue',
-            children: count
-          }
-          return <Tag {...props0} />
-        }
-      },
-      {
-        title: e('host'),
-        dataIndex: 'titles',
-        key: 'host',
-        render: (titles) => {
-          const display = titles.length > 2
-            ? `${titles.slice(0, 2).join(', ')}... (+${titles.length - 2})`
-            : titles.join(', ')
-          const props0 = {
-            title: titles.join('\n'),
-            children: <span>{display}</span>
-          }
-          return <Tooltip {...props0} />
-        }
-      },
-      {
-        title: e('actions'),
-        key: 'actions',
-        width: 80,
-        render: (_, record) => {
-          const copyProps0 = {
-            type: 'text',
-            icon: <CopyOutlined />,
-            onClick: () => this.handleCopyPassword(record.password)
-          }
-          const editProps0 = {
-            type: 'text',
-            icon: <EditOutlined />,
-            onClick: () => this.showEditModal(record)
-          }
-          const copyTooltipProps = {
-            title: e('copy'),
-            children: <Button {...copyProps0} />
-          }
-          const editTooltipProps = {
-            title: e('changePassword'),
-            children: <Button {...editProps0} />
-          }
-          const spaceProps0 = {
-            children: [
-              <Tooltip key='copy' {...copyTooltipProps} />,
-              <Tooltip key='edit' {...editTooltipProps} />
-            ]
-          }
-          return <Space>{spaceProps0.children}</Space>
-        }
-      }
-    ]
-    return columns
+  renderItem = (record) => {
+    const { password, count, titles } = record
+    const display = titles.length > 2
+      ? `${titles.slice(0, 2).join(', ')}... (+${titles.length - 2})`
+      : titles.join(', ')
+    const copyProps = {
+      type: 'text',
+      icon: <CopyOutlined />,
+      onClick: () => this.handleCopyPassword(password)
+    }
+    const editProps = {
+      type: 'text',
+      icon: <EditOutlined />,
+      onClick: () => this.showEditModal(record)
+    }
+    return (
+      <div className='setting-passwords-item' key={password}>
+        <div className='setting-passwords-item-inner'>
+          <Space className='setting-passwords-pwd-cell'>
+            <KeyOutlined />
+            <TextAnt keyboard>********</TextAnt>
+          </Space>
+          <Tag color='blue' className='setting-passwords-count-cell'>{count}</Tag>
+          <Tooltip title={titles.join('\n')}>
+            <span className='setting-passwords-host-cell'>{display}</span>
+          </Tooltip>
+          <Space className='setting-passwords-actions-cell'>
+            <Tooltip title={e('copy')}>
+              <Button {...copyProps} />
+            </Tooltip>
+            <Tooltip title={e('changePassword')}>
+              <Button {...editProps} />
+            </Tooltip>
+          </Space>
+        </div>
+      </div>
+    )
   }
 
   renderContent () {
     const { search, pagination } = this.state
+    const { current, pageSize } = pagination
     const data = this.getFilteredData()
 
     if (data.length === 0) {
@@ -241,19 +203,29 @@ export default class SettingPasswords extends Component {
       onChange: this.handleSearchChange,
       placeholder: e('search')
     }
-    const tableProps0 = {
-      dataSource: data,
-      columns: this.getColumns(),
-      rowKey: 'password',
-      pagination: { ...pagination, showSizeChanger: true },
-      onChange: this.handleTableChange,
+
+    // clamp current page when filtering shrinks the data set
+    const pageCount = Math.ceil(data.length / pageSize)
+    const safePage = Math.min(current, Math.max(pageCount, 1))
+    const pagedData = data.slice((safePage - 1) * pageSize, safePage * pageSize)
+
+    const paginationProps0 = {
+      total: data.length,
+      current: safePage,
+      pageSize,
+      showSizeChanger: true,
+      onChange: this.handlePageChange,
+      onShowSizeChange: this.handlePageChange,
       size: 'small'
     }
 
     return (
       <div>
         <Search {...searchProps0} />
-        <Table {...tableProps0} />
+        <div className='setting-passwords-list'>
+          {pagedData.map(item => this.renderItem(item))}
+        </div>
+        <Pagination {...paginationProps0} />
       </div>
     )
   }

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

@@ -10,4 +10,40 @@
   left 43px
   height 60px
   right 0
-  z-index 888
+  z-index 888
+.deep-link-btns
+  display flex
+  flex-wrap wrap
+  gap 8px
+
+// passwords list — replaces the old table so content wraps
+// instead of forcing horizontal scroll on narrow/mobile screens
+.setting-passwords-list
+  border 1px solid var(--main-light)
+  border-radius 6px
+  overflow hidden
+  margin 8px 0
+  .setting-passwords-item
+    padding 8px 12px
+    &:not(:last-child)
+      border-bottom 1px solid var(--main-light)
+.setting-passwords-item
+  .setting-passwords-item-inner
+    display flex
+    flex-wrap wrap
+    align-items center
+    gap 8px
+    width 100%
+  .setting-passwords-pwd-cell
+    flex-shrink 0
+  .setting-passwords-count-cell
+    flex-shrink 0
+    margin 0
+  .setting-passwords-host-cell
+    flex 1 1 120px
+    min-width 120px
+    word-break break-all
+    line-height 1.5
+  .setting-passwords-actions-cell
+    flex-shrink 0
+    margin-left auto

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

@@ -65,7 +65,7 @@ export default function DataTransport (props) {
   }
 
   return (
-    <div className='pd2 fix'>
+    <div className='pd2 fix sync-data-transport'>
       <div className='fleft'>
         <Button
           icon={<ExportOutlined />}

package/client/components/sidebar/sidebar-panel.jsx

@@ -9,6 +9,7 @@ import { Tabs, Tooltip } from 'antd'
 import MultiSelectModal from '../common/multi-select-modal'
 import {
   ArrowsAltOutlined,
+  CloseOutlined,
   EditOutlined,
   PlusCircleOutlined,
   ShrinkOutlined,
@@ -105,6 +106,10 @@ export default memo(function SidebarPanel (props) {
               onClick={store.handlePin}
             />
           </Tooltip>
+          <CloseOutlined
+            {...prps}
+            onClick={store.handleCloseSidebar}
+          />
         </div>
         <div className='pd1y pd2x'>
           <Tabs {...tabsProps} />

package/client/css/mobile.styl

@@ -100,3 +100,35 @@
     margin-top 0
     min-height 100vh
     border-radius 0
+
+  // ---- 5. Sync panel data transport: stack export/import and auto-sync
+  //        vertically with a gap. On narrow screens the right-floated
+  //        auto-sync block wraps under the import button with no vertical
+  //        gap — left-align it and add breathing room.
+  .sync-data-transport
+    .fleft,
+    .fright
+      float none
+    .fright
+      margin-top 8px
+      // the switch carries mg3l (32px left margin) to separate it from the
+      // import button on desktop — reset it when stacked so it left-aligns
+      .ant-switch
+        margin-left 0
+
+  // ---- 6. Solid Radio.Button groups (e.g. SSH auth type selector, session
+  //        type selector): on narrow screens the connected button row wraps,
+  //        but antd styles it as a single horizontal strip — adjacent buttons
+  //        share borders via -1px margin and border-radius is only applied to
+  //        the first/last child. When the row wraps, radius/borders break and
+  //        the UI looks messed up. Convert each button to a standalone pill so
+  //        wrapping stays tidy.
+  .ant-radio-group.ant-radio-group-solid
+    display flex
+    flex-wrap wrap
+    gap 6px
+    .ant-radio-button-wrapper
+      border-radius 3px
+      margin-inline-end 0
+      &::before
+        display none

package/client/store/sidebar.js

@@ -29,6 +29,15 @@ export default Store => {
     }
   }
 
+  Store.prototype.handleCloseSidebar = function () {
+    const { store } = window
+    if (store.pinned) {
+      ls.setItem(sidebarPinnedKey, 'false')
+      store.pinned = false
+    }
+    store.setOpenedSideBar('')
+  }
+
   Store.prototype.handleSidebarPanelTab = function (tab) {
     window.store.sidebarPanelTab = tab
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "3.15.153",
+  "version": "3.15.155",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",