@electerm/electerm-react 1.38.80 → 1.38.83

package/client/components/bookmark-form/render-ssh-tunnel.jsx

@@ -9,7 +9,7 @@ import {
   Table
 } from 'antd'
 import { useState } from 'react'
-import { PlusOutlined, QuestionCircleOutlined, MinusCircleFilled } from '@ant-design/icons'
+import { PlusOutlined, QuestionCircleOutlined, MinusCircleFilled, UserOutlined } from '@ant-design/icons'
 import { formItemLayout, tailFormItemLayout } from '../../common/form-layout'
 import uid from '../../common/uid'
 
@@ -135,6 +135,19 @@ export default function renderSshTunnels (props) {
     )
   }
 
+  // direction = localToRemote or remoteToLocal, should render user, remote port, local port visit directions connected with arrows accordingly
+  function renderSshTunnelFlow (direction) {
+    const localToRemote = direction === 'localToRemote'
+    const middle = localToRemote ? e('local') : e('remote')
+    const last = localToRemote ? e('remote') : e('local')
+    return (
+      <div>
+        <p>{e(direction)}</p>
+        <p><UserOutlined /> → {middle} → {last}</p>
+      </div>
+    )
+  }
+
   return (
     <div>
       <FormItem
@@ -159,14 +172,14 @@ export default function renderSshTunnels (props) {
             <RadioButton
               value='forwardRemoteToLocal'
             >
-              <Tooltip title={e('remoteToLocal')}>
+              <Tooltip title={renderSshTunnelFlow('remoteToLocal')}>
                 <span>R→L <QuestionCircleOutlined /></span>
               </Tooltip>
             </RadioButton>
             <RadioButton
               value='forwardLocalToRemote'
             >
-              <Tooltip title={e('localToRemote')}>
+              <Tooltip title={renderSshTunnelFlow('localToRemote')}>
                 <span>L→R <QuestionCircleOutlined /></span>
               </Tooltip>
             </RadioButton>

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

@@ -120,6 +120,7 @@ export default class Sftp extends Component {
   componentWillUnmount () {
     this.destroyEvent()
     this.sftp && this.sftp.destroy()
+    delete this.sftp
     clearTimeout(this.timer4)
   }
 

package/client/components/sidebar/index.jsx

@@ -119,14 +119,15 @@ export default class Sidebar extends Component {
       : {
           className: 'sidebar-list'
         }
+    const sidebarProps = {
+      className: `sidebar type-${openedSideBar}`,
+      style: {
+        width: sidebarWidth,
+        height
+      }
+    }
     return (
-      <div
-        className={`sidebar type-${openedSideBar}`}
-        style={{
-          width: sidebarWidth,
-          height
-        }}
-      >
+      <div {...sidebarProps}>
         <div className='sidebar-bar btns'>
           <div className='control-icon-wrap'>
             <MenuBtn store={store} config={store.config} />

package/client/components/sidebar/sidebar.styl

@@ -115,6 +115,11 @@
   animation-fill-mode forwards
   animation-direction normal, alternate
 
+.hvr-bob-fast
+  transform perspective(2px) translateZ(0)
+  animation-duration .15s, .3s
+  animation-delay 0s, .15s
+
 .btns .upgrade-icon
   color success
 .close-info-modal

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

@@ -19,12 +19,14 @@ export default class TransferList extends Component {
       fileTransfers,
       transferHistory
     } = store
-    if (!fileTransfers.length && !transferHistory.length) {
+    const len = fileTransfers.length
+    if (!len && !transferHistory.length) {
       return null
     }
     const color = fileTransfers.some(item => item.error) ? 'red' : 'green'
     const bdProps = {
-      count: fileTransfers.length,
+      className: len ? 'hvr-bob hvr-bob-fast' : '',
+      count: len,
       size: 'small',
       offset: [-10, -5],
       color,

package/package.json

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