@electerm/electerm-react 3.15.160 → 3.15.161

package/client/components/sftp/address-bar.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react'
+import React, { useRef, useEffect, useState } from 'react'
 import {
   ArrowUpOutlined,
   EyeInvisibleFilled,
@@ -7,11 +7,13 @@ import {
   ArrowRightOutlined,
   LoadingOutlined,
   HomeOutlined,
-  PlusOutlined
+  PlusOutlined,
+  MenuOutlined
 } from '@ant-design/icons'
 import {
   Input,
-  Tooltip
+  Tooltip,
+  Popover
 } from 'antd'
 import {
   typeMap
@@ -22,10 +24,11 @@ import KeywordFilter from './keyword-filter'
 
 const e = window.translate
 
-function renderAddonBefore (props, realPath) {
+function AddressPrefixIcons (props) {
   const {
     type,
-    host
+    host,
+    realPath
   } = props
   const isShow = props[`${type}ShowHiddenFile`]
   const title = `${isShow ? e('hide') : e('show')} ${e('hfd')}`
@@ -75,6 +78,37 @@ function renderAddonBefore (props, realPath) {
   )
 }
 
+function MobileAddressPrefix (props) {
+  const [open, setOpen] = useState(false)
+  const content = (
+    <div className='sftp-addr-menu-content'>
+      <AddressPrefixIcons {...props} />
+    </div>
+  )
+  return (
+    <Popover
+      content={content}
+      trigger='click'
+      placement='bottomLeft'
+      open={open}
+      onOpenChange={setOpen}
+    >
+      <MenuOutlined className='sftp-addr-menu-icon' />
+    </Popover>
+  )
+}
+
+function renderAddonBefore (props, realPath) {
+  if (window.store.isMobile) {
+    return (
+      <MobileAddressPrefix {...props} realPath={realPath} />
+    )
+  }
+  return (
+    <AddressPrefixIcons {...props} realPath={realPath} />
+  )
+}
+
 function renderAddonAfter (isLoadingRemote, onGoto, GoIcon, type, handleUploadFromBrowser) {
   const handleClick = (e) => {
     e.stopPropagation()

package/client/components/sftp/list-table-ui.jsx

@@ -137,6 +137,23 @@ export default class FileListTable extends Component {
     ]
   }
 
+  /**
+   * In mobile mode, only show the file name to save horizontal space.
+   * Returns the effective properties used for rendering both the
+   * table header and individual file items.
+   */
+  getRenderProperties = () => {
+    if (window.store.isMobile) {
+      return [{
+        id: 'name',
+        max: 98,
+        min: 2,
+        size: 100
+      }]
+    }
+    return this.state.properties
+  }
+
   getPropsAll = () => {
     return [
       'name',
@@ -179,7 +196,7 @@ export default class FileListTable extends Component {
       onContextMenu: this.onContextMenu,
       onClickName: this.onClickName,
       onResize: this.onResize,
-      properties: this.state.properties,
+      properties: this.getRenderProperties(),
       sortDirection: this.props.sortDirection,
       sortProp: this.props.sortProp,
       maxWidth: this.props.width
@@ -274,7 +291,7 @@ export default class FileListTable extends Component {
     const fileProps = {
       ...this.props.getFileProps(item, type),
       cls,
-      properties: this.state.properties,
+      properties: this.getRenderProperties(),
       setClickFileId: this.setClickFileId
     }
     return (

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

@@ -1211,7 +1211,7 @@ export default class Sftp extends Component {
   renderSftpPanelTitle (type, username, host) {
     if (type === typeMap.remote) {
       return (
-        <div className='sftp-panel-title pd1t pd1b pd1x alignright'>
+        <div className='sftp-panel-title pd1t pd1b pd1x alignright elli'>
           <ReloadOutlined
             className='mg1r pointer'
             onClick={this.handleReloadRemoteSftp}

package/client/components/sftp/sftp.styl

@@ -185,3 +185,17 @@
   &:hover
   &.active
     color var(--success)
+
+.sftp-addr-menu-icon
+  cursor pointer
+  font-size 14px
+  color var(--text)
+  &:hover
+    color var(--text-light)
+
+.sftp-addr-menu-content
+  display flex
+  align-items center
+  padding 4px 0
+  flex-wrap wrap
+  gap 4px

package/client/css/mobile.styl

@@ -132,3 +132,22 @@
       margin-inline-end 0
       &::before
         display none
+
+  // ---- 7. Terminal info panel button group: on narrow screens the connected
+  //        button row in terminal info panel wraps, but antd styles it as a
+  //        single horizontal strip. When the row wraps, the UI looks broken.
+  //        Convert each button to a standalone pill so wrapping stays tidy.
+  .terminal-info-base
+    .ant-space-compact
+      display flex
+      flex-wrap wrap
+      gap 6px
+      .ant-btn
+        border-radius 3px
+        margin-right 0
+
+  // ---- 8. Upgrade panel: fixed 440px width overflows narrow mobile screens.
+  //        Constrain it to the viewport minus the right offset (10px) and a
+  //        matching left gap so it never extends past the screen edge.
+  .upgrade-panel
+    max-width calc(100vw - 20px)

package/package.json

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