@electerm/electerm-react 2.3.6 → 2.3.30

package/client/components/session/session.styl

@@ -1,4 +1,3 @@
-@require '../../css/includes/theme-default'
 @keyframes rotate
   from
     background-position -3000px
@@ -10,7 +9,7 @@
   left 0
   width 100%
   height 1px
-  background text-dark
+  background var(--text-dark)
   display none
 .type-tab-txt
   position relative
@@ -20,14 +19,13 @@
   display inline-block
   vertical-align middle
   line-height 30px
-  color text-dark
   padding 0 20px 0 0
   margin-right 0px
   font-size 14px
   cursor pointer
   &:hover
   &.active
-    color text
+    color var(--text-light)
   &.active
     .type-tab-line
       display inline-block
@@ -36,34 +34,34 @@
   .type-tab.sftp
     .type-tab-line
       display inline-block
-      background linear-gradient(to right, success 0%, main 25%, error 50%, primary 75%, success 100%)
+      background linear-gradient(to right, var(--success) 0%, var(--main) 25%, var(--error) 50%, var(--primary) 75%, var(--success) 100%)
       animation: rotate 60s infinite linear
 .disable-ssh
   .type-tab.ssh
     display none
 .spliter
-  color text
+  color var(--text)
   &:hover
-    color text-light
+    color var(--text-light)
 
 .sessions
   position absolute
-  background main
+  background var(--main)
 .session-wrap
   display none
   position absolute
   overflow hidden
   z-index 3
   padding-top 36px
-  box-shadow 0px 0px 1px 1px lighten(main, 20%)
+  box-shadow 0px 0px 1px 1px var(--main-darker)
   &.session-batch-active
     display block
 
 .web-session-wrap
   height 100vh
-  background main
+  background var(--main)
 .session-v-wrap
-  background main
+  background var(--main)
   overflow scroll
   z-index 99
 .vnc-session-wrap > div
@@ -76,8 +74,8 @@
 .sess-icon
   margin-right 10px
   &.active
-    color warn
+    color var(--warn)
 
 .split-view-toggle
   &.active
-    color success
+    color var(--success)

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

@@ -1,4 +1,4 @@
-@require '../../css/includes/theme-default'
+
 .item-list-wrap
   overflow-y scroll
   &::-webkit-scrollbar
@@ -22,13 +22,13 @@
   cursor pointer
   line-height 1.8
   &.active
-    background primary
-    color contrastColor(primary)
+    background var(--primary)
+    color var(--primary-contrast)
   &.current
     font-weight bold
   &:hover
-    background darken(primary, 30%)
-    color contrastColor(darken(primary, 30%))
+    background var(--primary)
+    color var(--primary-contrast)
     .list-item-apply
     .list-item-edit
     .list-item-remove

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

@@ -1,7 +1,3 @@
-@require '../../css/includes/theme-default'
-
-.setting-wrap
-  color text
 
 body .ant-drawer .ant-drawer-content-wrapper
   left 43px
@@ -9,11 +5,10 @@ body .ant-drawer .ant-drawer-content-wrapper
   position absolute
   top 70px
   font-size 16px
-  color text
   cursor pointer
   z-index 889
   &:hover
-    color text
+    color var(--success)
 .alt-close-setting-wrap
   right 20px
 .close-setting-wrap

package/client/components/setting-panel/terminal-bg-config.jsx

@@ -23,6 +23,9 @@ export default function TerminalBackgroundConfig ({
   isGlobal = false,
   batchUpdate
 }) {
+  if (!config) {
+    return null
+  }
   const [showTextModal, setShowTextModal] = useState(false)
   const value = config[name]
   const defaultValue = defaultSettings[name]

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

@@ -12,7 +12,6 @@ import Link from '../common/external-link'
 import dayjs from 'dayjs'
 import eq from 'fast-deep-equal'
 import { syncTokenCreateUrls, syncTypes } from '../../common/constants'
-import './sync.styl'
 import HelpIcon from '../common/help-icon'
 import ServerDataStatus from './server-data-status'
 import Password from '../common/password'

package/client/components/sftp/file-item.jsx

@@ -119,7 +119,7 @@ export default class FileSection extends React.Component {
 
   onCopy = (targetFiles, isCut) => {
     const { file } = this.state
-    const selected = this.isSelected(file)
+    const selected = this.isSelected(file.id)
     const files = targetFiles ||
       (
         selected
@@ -138,7 +138,7 @@ export default class FileSection extends React.Component {
 
   onCopyPath = (targetFiles) => {
     const { file } = this.state
-    const selected = this.isSelected(file)
+    const selected = this.isSelected(file.id)
     const files = targetFiles ||
       (
         selected
@@ -339,7 +339,7 @@ export default class FileSection extends React.Component {
   }
 
   transferDrop = (fromFiles, toFile, operation) => {
-    const files = this.isSelected(fromFiles[0])
+    const files = this.isSelected(fromFiles[0]?.id)
       ? this.props.getSelectedFiles()
       : fromFiles
     return this.doTransferSelected(
@@ -351,8 +351,8 @@ export default class FileSection extends React.Component {
     )
   }
 
-  isSelected = file => {
-    return this.props.selectedFiles.has(file.id)
+  isSelected = (fileId = '') => {
+    return this.props.selectedFiles.has(fileId)
   }
 
   doRename = () => {
@@ -872,6 +872,9 @@ export default class FileSection extends React.Component {
   }
 
   handleContextMenuCapture = (e) => {
+    if (!this.isSelected(this.state.file.id)) {
+      this.onClick(e)
+    }
     this.contextMenuPosition = {
       clientY: e.clientY
     }

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

@@ -27,7 +27,7 @@ import fs from '../../common/fs'
 import ListTable from './list-table-ui'
 import deepCopy from 'json-deep-copy'
 import isValidPath from '../../common/is-valid-path'
-
+import { LoadingOutlined } from '@ant-design/icons'
 import * as owner from './owner-list'
 import AddressBar from './address-bar'
 import getProxy from '../../common/get-proxy'
@@ -47,7 +47,8 @@ export default class Sftp extends Component {
       onEditFile: false,
       ...this.defaultState(),
       loadingSftp: false,
-      inited: false
+      inited: false,
+      ready: false
     }
     this.retryCount = 0
   }
@@ -58,6 +59,11 @@ export default class Sftp extends Component {
     if (this.props.isFtp) {
       this.initFtpData()
     }
+    this.timer = setTimeout(() => {
+      this.setState({
+        ready: true
+      })
+    }, 100)
   }
 
   componentDidUpdate (prevProps, prevState) {
@@ -1261,10 +1267,18 @@ export default class Sftp extends Component {
   }
 
   render () {
-    const { height } = this.props
     const {
-      id
+      id,
+      ready
     } = this.state
+    if (!ready) {
+      return (
+        <div className='pd3 aligncenter'>
+          <LoadingOutlined />
+        </div>
+      )
+    }
+    const { height } = this.props
     const all = {
       className: 'sftp-wrap overhide relative',
       id: `id-${id}`,

package/client/components/sftp/sftp.styl

@@ -1,5 +1,3 @@
-@require '../../css/includes/theme-default'
-
 .sftp-wrap
   display flex
   flex-direction row
@@ -17,15 +15,15 @@
   margin-bottom 4px
   &:nth-child(even)
     .sftp-file-prop
-      background main
+      background var(--main)
   &:hover
     .sftp-file-prop
-      background-color primary
-      color contrastColor(primary)
+      background-color var(--primary)
+      color var(--primary-contrast)
   &.selected
     .sftp-file-prop
-      background-color darken(primary, 30%)
-      color contrastColor(primary)
+      background-color var(--primary)
+      color var(--primary-contrast)
 .sftp-history
   position absolute
   left 0
@@ -35,20 +33,21 @@
   box-shadow none
   border none
   height 0
-  background main
+  background var(--main)
   overflow hidden
   border-radius 3px
   &.focused
     height auto
-    border 1px solid main-dark
-    box-shadow 0px 0px 3px 3px lighten(main, 5%)
+    border 1px solid var(--main-darker)
+    box-shadow 0px 0px 3px 3px var(--main-lighter)
 
 .sftp-history-item
   padding 5px 10px
   cursor pointer
-  border-bottom 1px solid primary
+  border-bottom 1px solid var(--main-darker)
   &:hover
-    background main-dark
+    background var(--primary)
+    color var(--primary-contrast)
 
 .sftp-item-title
   width 100%
@@ -57,11 +56,11 @@
 .sftp-item-size
   width 24%
 .sftp-status-success
-  color success
+  color var(--success)
 .sftp-status-exception
-  color error
+  color var(--error)
 .sftp-status-active
-  color primary
+  color var(--primary)
 
 .virtual-file
   .sftp-item
@@ -87,10 +86,9 @@
   margin-left 70px
 
 .sftp-sort-btn
-  color text
   &.active
     font-weight bold
-    color text-light
+    color var(--text-light)
 
 //list table
 .sftp-file-prop
@@ -98,13 +96,13 @@
   height 32px
   line-height 30px
   padding 0 5px
-  background main
+  background var(--main)
   overflow hidden
   white-space nowrap
   text-overflow ellipsis
   pointer-events none
   cursor default
-  color text
+  color var(--text)
 
 .file-bg
   position absolute
@@ -118,11 +116,10 @@
   height 28px
   line-height 25px
   padding 0 5px
-  background main
+  background var(--main)
   overflow hidden
   white-space nowrap
   text-overflow ellipsis
-  color text
 
 .sftp-file-table-header
   height 30px
@@ -134,8 +131,8 @@
 .sftp-item
   &.sftp-dragover
     .sftp-file-prop
-      background primary !important
-      color text-light !important
+      background var(--primary) !important
+      color var(--text) !important
   &.sftp-dragover-multi
     &:after
     &:before
@@ -144,7 +141,7 @@
       top 2px
       width 100%
       height 100%
-      background main-light
+      background var(--main-lighter)
       content ''
       z-index -1
     &:after
@@ -158,12 +155,11 @@
 
 //sftp
 .sftp-panel
-  background main
-  color text
+  background var(--main)
 
 .file-list
   ::-webkit-scrollbar-thumb
-    background-color primary !important
+    background-color var(--primary) !important
 
 .pager-wrap
   z-index 4
@@ -175,4 +171,4 @@
 .keyword-filter-icon
   &:hover
   &.active
-    color success
+    color var(--success)

package/client/components/sftp/transfer-tag.styl

@@ -1,11 +1,9 @@
-@require '../../css/includes/theme-default'
 .transfer-tag
-  color text
   border-radius 2px
   padding 0 2px
 .transfer-status-init
-  color primary
+  color var(--primary)
 .transfer-status-started
-  color success
+  color var(--success)
 .transfer-status-error
-  color error
+  color var(--error)

package/client/components/side-panel-r/right-side-panel.styl

@@ -1,14 +1,12 @@
-@require '../../css/includes/theme-default'
-
 .right-side-panel
   position absolute
   right 0
   top 36px
   bottom 0
   z-index 200
-  background main
-  color text-light
-  border-left 1px solid darken(main, 30%)
+  background var(--main)
+  color var(--text)
+  border-left 1px solid var(--main-darker)
   &.right-side-panel-pinned
     top 0
 
@@ -17,16 +15,16 @@
     right auto
     display block
 .right-panel-title
-  border-bottom 1px solid darken(main, 30%)
+  border-bottom 1px solid var(--main-darker)
 .right-side-panel-controls
-  color text-dark
+  color var(--text)
   font-size 16px
   &:hover
-    color text
+    color var(--success)
     cursor pointer
   &.right-side-panel-pin
     &.pinned
-      color success
+      color var(--success)
 .right-side-panel-content
   padding 10px
   overflow-y scroll

package/client/components/sidebar/index.jsx

@@ -20,6 +20,7 @@ import {
 } from '../../common/constants'
 import SideIcon from './side-icon'
 import SidePanel from './side-panel'
+import hasActiveInput from '../../common/has-active-input'
 import './sidebar.styl'
 
 const e = window.translate
@@ -50,6 +51,11 @@ export default memo(function Sidebar (props) {
     if (pinned) {
       return false
     }
+
+    if (hasActiveInput()) {
+      return false
+    }
+
     handler.current = setTimeout(
       () => store.setOpenedSideBar(''),
       400

package/client/components/sidebar/info.styl

@@ -1,4 +1,3 @@
-@require '../../css/includes/theme-default'
 
 // from https://freefrontend.com/css-border-animations/
 .morph-shape
@@ -7,17 +6,6 @@
   transition all 1s ease-in-out
   z-index 5
 
-// @keyframes morph
-//   0%
-//     border-radius 60% 40% 30% 70% / 60% 30% 70% 40%
-//     background linear-gradient(45deg, primary 0%, success 100%)
-//   50%
-//     border-radius  30% 60% 70% 40% / 50% 60% 30% 60%
-//     background linear-gradient(45deg, main 0%, success 100%)
-
-//   100%
-//     border-radius 60% 40% 30% 70% / 60% 30% 70% 40%
-//     background linear-gradient(45deg, primary 0%, success 100%)
 .info-modal
   .ant-modal-header
     border none

package/client/components/sidebar/sidebar.styl

@@ -1,4 +1,4 @@
-@require '../../css/includes/theme-default'
+
 .animate-fast
   animation-duration .2s
 .sidebar-panel
@@ -9,8 +9,7 @@
   z-index 200
   width 0
   overflow-y scroll
-  background main
-  color text
+  background var(--main)
   .item-list-unit:hover
     .list-item-remove
       display none !important
@@ -22,7 +21,7 @@
   width 36px
   z-index 100
   bottom 0
-  background main-dark
+  background var(--main-dark)
 
   .item-list
     padding-right 0
@@ -52,20 +51,20 @@
   .history-panel
     width 100%
 .control-icon-text
-  color text
+  color var(--text)
   &:hover
-    color text-light
+    color var(--success)
 .control-icon-wrap
   padding 14px 0
   text-align center
   &.active
     .control-icon
-      color text-light
+      color var(--text-light)
   .control-icon
-    color text-dark
+    color var(--text-dark)
     cursor pointer
     &:hover
-      color text-light
+      color var(--text-light)
 .sidebar-list
   position absolute
   left 43px
@@ -84,22 +83,22 @@
     display block
   .sidebar-panel
     .pinned
-      color success
+      color var(--success)
 //btns
 .btns
-  background main-dark
-  border-color primary
+  background var(--main-dark)
+  border-color var(--primary)
   .open-about-icon
-    color text-dark
+    color var(--text-dark)
     &:hover
-      color text-light
+      color var(--text-light)
 
 .btns .upgrade-icon
-  color success
+  color var(--success)
 .close-info-modal
   cursor pointer
   &:hover
-    color text-light
+    color var(--text-light)
 .logo-filter
   filter invert(80%)
 .sidebar-inner

package/client/components/sys-menu/sub-tab-menu.jsx

@@ -1,5 +1,5 @@
 import { PureComponent } from 'react'
-import { createTitleWithTag } from '../../common/create-title'
+import createTitle from '../../common/create-title'
 
 export default class TabsSubMenuChild extends PureComponent {
   handleClick = () => {
@@ -8,7 +8,7 @@ export default class TabsSubMenuChild extends PureComponent {
 
   render () {
     const { item } = this.props
-    const title = createTitleWithTag(item)
+    const title = createTitle(item)
     return (
       <div
         className='sub-context-menu-item'

package/client/components/sys-menu/sys-menu.styl

@@ -1,4 +1,3 @@
-@require '../../css/includes/theme-default'
 .context-menu
   position: relative
   width 280px
@@ -6,7 +5,6 @@
 .context-item
   -webkit-app-region no-drag
   position relative
-  color text
   height 28px
   line-height 28px
   padding 0 16px
@@ -15,7 +13,7 @@
     color #eee
     cursor pointer
   &.disabled
-    color lighten(text, 15%)
+    color var(--text-disabled)
     &:hover
       color #777
       background #333
@@ -30,30 +28,32 @@
   position absolute
   right 16px
   top 0
-  color lighten(text, 20%)
+  color var(--text-light)
 
 .context-menu
   hr
     margin 0
     border none
-    border-bottom 1px solid main-light
+    border-bottom 1px solid var(--main-darker)
 .sub-context-menu
   display none
   width 200px
   position absolute
   left 100%
   top 0
-  background main
-  box-shadow 0px 0px 3px 3px lighten(main, 35%)
+  background var(--main)
+  box-shadow 0px 0px 3px 3px var(--main-darker)
   max-height 300px
   overflow-y scroll
+  color var(--text)
 .with-sub-menu
   &:hover
     .sub-context-menu
       display block
+
 .sub-context-menu-item
   cursor pointer
-  padding 10px 16px
+  padding 5px 16px
   overflow hidden
   white-space nowrap
   text-overflow ellipsis
@@ -68,17 +68,17 @@
   width 28px
   height 28px
   border-radius 30px
-  color lighten(text, 20%)
+  color var(--text-light)
   font-size 16px
   text-align center
   display inline-block
   line-height 28px
   cursor pointer
   &:hover
-    color text
+    color var(--text)
 .is-main
   .menu-control
     img
-      border 1px solid text-dark
+      border 1px solid var(--text-dark)
       border-radius 28px
       background #000