@electerm/electerm-react 2.3.65 → 2.3.85

package/client/common/constants.js

@@ -239,6 +239,7 @@ export const regexHelpLink = 'https://github.com/electerm/electerm/wiki/Terminal
 export const connectionHoppingWikiLink = 'https://github.com/electerm/electerm/wiki/Connection-Hopping-Behavior-Change-in-electerm-since-v1.50.65'
 export const aiConfigWikiLink = 'https://github.com/electerm/electerm/wiki/AI-model-config-guide'
 export const rdpWikiLink = 'https://github.com/electerm/electerm/wiki/RDP-session-known-issues'
+export const vncWikiLink = 'https://github.com/electerm/electerm/wiki/VNC-session-known-issues'
 export const modals = {
   hide: 0,
   setting: 1,

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

@@ -20,7 +20,11 @@ import SshHostSelector from './ssh-host-selector.jsx'
 import SshAuthTypeSelector from './ssh-auth-type-selector.jsx'
 import SshAuthSelector from './ssh-auth-selector.jsx'
 import CategorySelect from './category-select.jsx'
-import RdpAlert from './rdp-alert.jsx'
+import WikiAlert from './wiki-alert.jsx'
+import {
+  rdpWikiLink,
+  vncWikiLink
+} from '../../../common/constants.js'
 
 const Fragment = React.Fragment
 const FormItem = Form.Item
@@ -122,7 +126,9 @@ export function renderFormItem (item, formItemLayout, form, ctxProps, index) {
     case 'warning':
       return <Alert key={name} type='warning' {...item.props} />
     case 'rdpWarning':
-      return <RdpAlert key={name} />
+      return <WikiAlert key={name} wikiUrl={rdpWikiLink} />
+    case 'vncWarning':
+      return <WikiAlert key={name} wikiUrl={vncWikiLink} />
     case 'categorySelect':
       return (
         <CategorySelect

package/client/components/bookmark-form/common/wiki-alert.jsx

@@ -0,0 +1,9 @@
+import Link from '../../common/external-link'
+
+export default function WikiAlert ({ wikiUrl }) {
+  return (
+    <div className='alignright bold pd2'>
+      <Link to={wikiUrl}>WIKI: {wikiUrl}</Link>
+    </div>
+  )
+}

package/client/components/bookmark-form/config/vnc.js

@@ -24,6 +24,7 @@ const vncConfig = {
       key: 'auth',
       label: e('auth'),
       fields: [
+        { type: 'vncWarning', name: 'vncWarning' },
         commonFields.category,
         commonFields.colorTitle,
         { type: 'input', name: 'host', label: e('host'), rules: [{ required: true, message: e('host') + ' required' }] },

package/client/components/bookmark-form/index.jsx

@@ -66,7 +66,11 @@ export default class BookmarkIndex2 extends PureComponent {
       >
         {keys.map(v => {
           const txt = v === 'ssh' ? 'Ssh/Sftp' : e(v)
-          return (<Radio.Button key={v} value={v}>{txt}</Radio.Button>)
+          let sup = null
+          if (v === connectionMap.vnc || v === connectionMap.rdp) {
+            sup = <sup className='color-red'>Beta</sup>
+          }
+          return (<Radio.Button key={v} value={v}>{txt}{sup}</Radio.Button>)
         })}
       </Radio.Group>
     )

package/client/components/sidebar/transfer-history-modal.jsx

@@ -61,7 +61,10 @@ export default memo(function TransferHistoryModal (props) {
     dataIndex: 'fromPath',
     key: 'fromPath',
     render: (txt, inst) => {
-      return inst.fromPathReal || txt
+      const t = inst.fromPathReal || txt
+      return (
+        <div className='sftp-file history-file' title={t}>{t}</div>
+      )
     },
     sorter: sorterFactory('fromPath')
   }, {
@@ -69,7 +72,10 @@ export default memo(function TransferHistoryModal (props) {
     dataIndex: 'toPath',
     key: 'toPath',
     render: (txt, inst) => {
-      return inst.toPathReal || txt
+      const t = inst.toPathReal || txt
+      return (
+        <div className='sftp-file history-file' title={t}>{t}</div>
+      )
     },
     sorter: sorterFactory('toPath')
   }, {

package/client/components/sidebar/transfer.styl

@@ -4,4 +4,11 @@
   .ant-badge-multiple-words
     padding 0 3px
 .transfer-list-card
-  width calc(100% - 48px)
+  width calc(100vw - 48px)
+.sftp-file
+  max-width calc(50vw - 250px)
+  overflow hidden
+  text-overflow ellipsis
+  white-space nowrap
+  &.history-file
+    max-width calc(50vw - 440px)

package/client/components/tabs/app-drag.jsx

@@ -1,6 +1,8 @@
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 
 export default function AppDrag (props) {
+  const isDraggingRef = useRef(false)
+
   function canOperate (e) {
     const {
       target
@@ -20,12 +22,16 @@ export default function AppDrag (props) {
   function onMouseDown (e) {
     // e.stopPropagation()
     if (canOperate(e)) {
+      isDraggingRef.current = true
       window.pre.runSync('windowMove', true)
     }
   }
 
   function onMouseUp (e) {
-    window.pre.runSync('windowMove', false)
+    if (isDraggingRef.current) {
+      isDraggingRef.current = false
+      window.pre.runSync('windowMove', false)
+    }
   }
 
   function onDoubleClick (e) {
@@ -44,7 +50,14 @@ export default function AppDrag (props) {
   }
 
   useEffect(() => {
+    // Listen for mouseup at document level to catch mouseup outside window
+    document.addEventListener('mouseup', onMouseUp)
     window.addEventListener('contextmenu', onMouseUp)
+
+    return () => {
+      document.removeEventListener('mouseup', onMouseUp)
+      window.removeEventListener('contextmenu', onMouseUp)
+    }
   }, [])
   return (
     <div

package/client/components/tabs/tab.jsx

@@ -367,12 +367,14 @@ class Tab extends Component {
       if (name) {
         tunnel = `[${name}] ${tunnel}`
       }
-      return <div key={tunnel}>{tunnel}</div>
+      return <div key={tunnel + '-' + i} className='ssh-tunnel-item'>{tunnel}</div>
     })
     return (
       <>
         <div>{title}</div>
-        {list}
+        <div className='ssh-tunnel-list-wrapper'>
+          {list}
+        </div>
       </>
     )
   }

package/client/components/tabs/tabs.styl

@@ -241,3 +241,8 @@
   .sidebar-panel-history .pd2x
     width 400px
     margin 0 auto
+
+.ssh-tunnel-list-wrapper
+  max-height 300px
+  overflow-y auto
+

package/client/components/tree-list/tree-list-item.jsx

@@ -188,7 +188,7 @@ export default function TreeListItem (props) {
     {
       selected: selectedItemId === item.id
     },
-    'tree-item elli',
+    'tree-item',
     {
       'is-category': isGroup,
       level2: item.level === 2
@@ -232,10 +232,7 @@ export default function TreeListItem (props) {
     onClick: onSelect,
     'data-item-id': item.id,
     'data-is-group': isGroup ? 'true' : 'false',
-    'data-parent-id': props.parentId,
-    style: props.staticList
-      ? { maxWidth: (props.leftSidebarWidth - 110) + 'px' }
-      : undefined
+    'data-parent-id': props.parentId
   }
   const key = item.id || uid()
   return (

package/client/components/tree-list/tree-list.styl

@@ -11,6 +11,9 @@
   line-height 26px
   padding-left 5px
   border-radius 3px
+  overflow hidden
+  white-space nowrap
+  text-overflow ellipsis
   &.is-category
     .tree-item-title
       font-weight bold
@@ -30,13 +33,12 @@
 .tree-item-title
   flex-grow 1
   line-height 26px
-  max-width 300px
   overflow hidden
   white-space nowrap
   text-overflow ellipsis
 
 .sidebar-panel .tree-item-title
-  max-width 180px
+   max-width calc(100% - 40px)
 .with-plus
   &:after
     content '+'

package/client/css/includes/box.styl

@@ -67,45 +67,7 @@ for $i, $index in 5 16 32
   display inline-block
   vertical-align middle
 
-.ibblock
-  display inline-block
-  vertical-align baseline
-  
-.itblock
-  display inline-block
-  vertical-align top
-
-.border
-  border 1px solid #e4e4e4
-
-.borderl
-  border-left 1px solid #e4e4e4
-
-.borderr
-  border-right 1px solid #e4e4e4
-
-.borderb
-  border-bottom 1px solid #e4e4e4
-  &.dashed
-    border-bottom 1px dashed #e4e4e4
-
-.bordert
-  border-top 1px solid #e4e4e4
-
-.borderr
-  border-right 1px solid #e4e4e4
-
-.borderl
-  border-left 1px solid #e4e4e4
-
-.border-dashed
-  border-style dashed
-.border-dotted
-  border-style dotted
-
-.hide,
-.hide1, 
-.hide2
+.hide
   display none
 
 .hidden
@@ -128,7 +90,7 @@ for $i, $index in 5 16 32
 .fix
   &:after
     clear both
-    
+
 .overhide
   overflow hidden
 

package/package.json

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

package/client/components/bookmark-form/common/rdp-alert.jsx

@@ -1,13 +0,0 @@
-import { Alert } from 'antd'
-import { rdpWikiLink } from '../../../common/constants'
-import Link from '../../common/external-link'
-
-export default function RdpAlert () {
-  return (
-    <Alert
-      message={<Link to={rdpWikiLink}>WIKI: {rdpWikiLink}</Link>}
-      type='warning'
-      className='mg2y'
-    />
-  )
-}