@electerm/electerm-react 2.3.36 → 2.3.48

package/client/common/constants.js

@@ -1,12 +1,9 @@
 /**
  * constants
  */
-import { getUiThemeConfig } from './ui-theme'
 import logoPath1Ref from '@electerm/electerm-resource/res/imgs/electerm-round-128x128.png'
 import logoPath2Ref from '@electerm/electerm-resource/res/imgs/electerm.png'
 import logoPath3Ref from '@electerm/electerm-resource/res/imgs/electerm-watermark.png'
-import dbDefaults from './db-defaults'
-import { get as _get } from 'lodash-es'
 export const packInfo = typeof window.et.packInfo === 'undefined' ? window.pre.packInfo : window.et.packInfo
 const buildConst = (props) => {
   return props.reduce((prev, key) => {
@@ -150,35 +147,6 @@ export const leftSidebarWidthKey = 'left-sidebar-width'
 export const rightSidebarWidthKey = 'right-sidebar-width'
 export const sftpDefaultSortSettingKey = 'sftp-default-sort'
 export const qmSortByFrequencyKey = 'qm-sort-by-frequency'
-// https://github.com/tinkertrain/panda-syntax-vscode/blob/master/themes/workbench.yaml
-export const defaultTheme = {
-  id: 'default',
-  name: 'default',
-  themeConfig: {
-    foreground: '#bbbbbb',
-    background: '#141314',
-    cursor: '#b5bd68',
-    cursorAccent: '#1d1f21',
-    selectionBackground: 'rgba(255, 255, 255, 0.3)',
-    black: '#575757',
-    red: '#FF2C6D',
-    green: '#19f9d8',
-    yellow: '#FFB86C',
-    blue: '#45A9F9',
-    magenta: '#FF75B5',
-    cyan: '#B084EB',
-    white: '#CDCDCD',
-    brightBlack: '#757575',
-    brightRed: '#FF2C6D',
-    brightGreen: '#19f9d8',
-    brightYellow: '#FFCC95',
-    brightBlue: '#6FC1FF',
-    brightMagenta: '#FF9AC1',
-    brightCyan: '#BCAAFE',
-    brightWhite: '#E6E6E6'
-  },
-  uiThemeConfig: getUiThemeConfig()
-}
 
 export const commonBaudRates = [
   110,
@@ -230,11 +198,6 @@ export const settingShortcutsId = 'setting-shortcuts'
 export const settingAiId = 'setting-ai'
 export const settingCommonId = 'setting-common'
 export const defaultEnvLang = 'en_US.UTF-8'
-const defaultThemeLightConf = _get(
-  dbDefaults, '[0].data[1]'
-)
-defaultThemeLightConf.id = defaultThemeLightConf._id
-export const defaultThemeLight = defaultThemeLightConf
 export const fileActions = {
   cancel: 'cancel',
   skip: 'skip',

package/client/common/terminal-theme.js

@@ -2,9 +2,12 @@
  * theme control
  */
 
-import { defaultTheme, settingMap } from '../common/constants'
+import { settingMap } from '../common/constants'
 import download from '../common/download'
-import copy from 'json-deep-copy'
+import {
+  defaultTheme
+} from './theme-defaults'
+
 const e = window.translate
 const terminalPrefix = 'terminal:'
 export const requiredThemeProps = [
@@ -46,21 +49,13 @@ export const validThemeProps = [
   ...requiredThemeProps,
   'name'
 ]
-/**
- * build default themes
- */
-export const buildDefaultThemes = () => {
-  return {
-    [defaultTheme.id]: defaultTheme
-  }
-}
 
 /**
  * build new theme
  */
-export const buildNewTheme = (theme = defaultTheme) => {
+export const buildNewTheme = (theme = defaultTheme()) => {
   return Object.assign(
-    copy(theme),
+    theme,
     {
       id: '',
       name: e('newTheme')
@@ -132,7 +127,7 @@ export const convertTheme = (themeTxt) => {
  * @return {array} extra keys
  */
 export const verifyTheme = (themeConfig) => {
-  const keysRight = Object.keys(defaultTheme.themeConfig)
+  const keysRight = Object.keys(defaultTheme().themeConfig)
   const keys = Object.keys(themeConfig)
   const extraKeys = keys.filter(k => !keysRight.includes(k))
   return extraKeys

package/client/common/theme-defaults.js

@@ -0,0 +1,120 @@
+/**
+ * database default should init
+ */
+
+function parsor (themeTxt) {
+  return themeTxt.split('\n').reduce((prev, line) => {
+    let [key = '', value = ''] = line.split('=')
+    key = key.trim()
+    value = value.trim()
+    if (!key || !value) {
+      return prev
+    }
+    prev[key] = value
+    return prev
+  }, {})
+}
+
+const defaultThemeDark = () => {
+  return parsor(`
+    main = #20111b
+    main-dark = #000
+    main-light = #2E3338
+    text = #ddd
+    text-light = #fff
+    text-dark = #888
+    text-disabled = #777
+    primary = #08c
+    info = #FFD166
+    success = #06D6A0
+    error = #EF476F
+    warn = #E55934
+  `)
+}
+const defaultThemeLightFunc = () => {
+  return parsor(`
+      main=#ededed
+      main-dark=#cccccc
+      main-light=#fefefe
+      text=#555
+      text-light=#777
+      text-dark=#444
+      text-disabled=#888
+      primary=#08c
+      info=#FFD166
+      success=#06D6A0
+      error=#EF476F
+      warn=#E55934
+    `)
+}
+
+const defaultThemeLightTerminal = () => {
+  return parsor(`
+    foreground=#333333
+    background=#ededed
+    cursor=#b5bd68
+    cursorAccent=#1d1f21
+    selectionBackground=rgba(0, 0, 0, 0.3)
+    black=#575757
+    red=#FF2C6D
+    green=#19f9d8
+    yellow=#FFB86C
+    blue=#45A9F9
+    magenta=#FF75B5
+    cyan=#B084EB
+      white=#CDCDCD
+    brightBlack=#757575
+    brightRed=#FF2C6D
+    brightGreen=#19f9d8
+    brightYellow=#FFCC95
+    brightBlue=#6FC1FF
+    brightMagenta=#FF9AC1
+    brightCyan=#BCAAFE
+    brightWhite=#E6E6E6
+    `
+  )
+}
+
+const defaultThemeDarkTerminal = () => {
+  return {
+    foreground: '#bbbbbb',
+    background: '#20111b',
+    cursor: '#b5bd68',
+    cursorAccent: '#1d1f21',
+    selectionBackground: 'rgba(255, 255, 255, 0.3)',
+    black: '#575757',
+    red: '#FF2C6D',
+    green: '#19f9d8',
+    yellow: '#FFB86C',
+    blue: '#45A9F9',
+    magenta: '#FF75B5',
+    cyan: '#B084EB',
+    white: '#CDCDCD',
+    brightBlack: '#757575',
+    brightRed: '#FF2C6D',
+    brightGreen: '#19f9d8',
+    brightYellow: '#FFCC95',
+    brightBlue: '#6FC1FF',
+    brightMagenta: '#FF9AC1',
+    brightCyan: '#BCAAFE',
+    brightWhite: '#E6E6E6'
+  }
+}
+
+export function defaultTheme () {
+  return {
+    id: 'default',
+    name: 'default',
+    themeConfig: defaultThemeDarkTerminal(),
+    uiThemeConfig: defaultThemeDark()
+  }
+}
+
+export function defaultThemeLight () {
+  return {
+    id: 'defaultLight',
+    name: 'default light',
+    themeConfig: defaultThemeLightTerminal(),
+    uiThemeConfig: defaultThemeLightFunc()
+  }
+}

package/client/components/common/ref.js

@@ -2,6 +2,7 @@
 window.refs = new Map()
 window.refsStatic = new Map()
 window.refsTransfers = new Map()
+window.refsTabs = new Map()
 
 class Ref {
   constructor (key) {
@@ -21,6 +22,40 @@ class Ref {
   }
 }
 
+class TabsRef extends Ref {
+  constructor (key) {
+    super(key)
+    // Map to track add count for each key: key -> number
+    this.addCounts = new Map()
+  }
+
+  add (key, inst) {
+    // Increment add count
+    const currentCount = this.addCounts.get(key) || 0
+    this.addCounts.set(key, currentCount + 1)
+
+    // Add/update the ref
+    window[this.key].set(key, inst)
+  }
+
+  remove (key) {
+    const currentCount = this.addCounts.get(key) || 0
+
+    if (currentCount <= 0) {
+      return
+    }
+
+    const newCount = currentCount - 1
+    if (newCount === 0) {
+      window[this.key].delete(key)
+      this.addCounts.delete(key)
+    } else {
+      this.addCounts.set(key, newCount)
+    }
+  }
+}
+
 export const refs = new Ref('refs')
 export const refsTransfers = new Ref('refsTransfers')
 export const refsStatic = new Ref('refsStatic')
+export const refsTabs = new TabsRef('refsTabs')

package/client/components/file-transfer/transfer.styl

@@ -33,10 +33,15 @@
   display flex
   padding 8px 5px
   &:hover
-    background var(--primary)
-    color var(--primary-contrast)
-.sftp-transport .transfer-control-icon:hover
-  color var(--primary)
+    font-weight bold
+  .transfer-control-icon
+    padding-right 5px
+    padding-left 5px
+    margin-top -2px
+    &:hover
+      color var(--primary-contrast)
+      background var(--primary)
+      border-radius 20px
 
 .flex-child + .flex-child
   margin-left 5px

package/client/components/tabs/tab.jsx

@@ -4,7 +4,7 @@
 
 import { createRef } from 'react'
 import { Component } from 'manate/react/class-components'
-import { refs } from '../common/ref'
+import { refsTabs } from '../common/ref'
 import {
   CloseOutlined,
   Loading3QuartersOutlined,
@@ -36,22 +36,13 @@ class Tab extends Component {
       terminalOnData: false
     }
     this.id = 'tab-' + this.props.tab.id
-    refs.add(this.id, this)
+    refsTabs.add(this.id, this)
   }
 
   tabRef = createRef()
 
-  componentDidUpdate (prevProps) {
-    if (this.props.openContextMenu && !prevProps.openContextMenu) {
-      this.handleContextMenu()
-    }
-    if (this.props.contextFunc && !prevProps.contextFunc) {
-      this[this.props.contextFunc](...this.props.contextArgs)
-    }
-  }
-
   componentWillUnmount () {
-    refs.remove(this.id)
+    refsTabs.remove(this.id)
     clearTimeout(this.timer)
     this.timer = null
   }

package/client/components/tabs/tabs.styl

@@ -106,16 +106,17 @@
 .is-terminal-active .tab-terminal-feed
   display block
   animation blink 2s infinite
+  background-color transparent !important
   /* Remove opacity animation, use background-color */
 .tab-terminal-feed
   display none
   left 20px
   border-radius 0
   color var(--success)
-  background none
   font-size 8px
   left 2px
   top 24px
+  background none
 .tab-close
   position absolute
   right 5px
@@ -131,8 +132,7 @@
   line-height 16px
   font-size 10px
   &:hover
-    background var(--primary)
-    color var(--primary-contast)
+    background var(--error)
 
 .tabs-add-btn
   display inline-block

package/client/components/theme/theme-form.jsx

@@ -1,7 +1,13 @@
 import { useRef, useState } from 'react'
 import { Button, Input, message, Upload, Form, Space } from 'antd'
-import { convertTheme, convertThemeToText, exportTheme, validThemeProps, requiredThemeProps } from '../../common/terminal-theme'
-import { defaultTheme, defaultThemeLight } from '../../common/constants'
+import {
+  convertTheme,
+  convertThemeToText,
+  exportTheme,
+  validThemeProps,
+  requiredThemeProps
+} from '../../common/terminal-theme'
+import { defaultTheme, defaultThemeLight } from '../../common/theme-defaults'
 import generate from '../../common/uid'
 import Link from '../common/external-link'
 import InputAutoFocus from '../common/input-auto-focus'
@@ -229,7 +235,7 @@ export default function ThemeForm (props) {
     themeName,
     themeText: convertThemeToText(props.formData)
   }
-  const isDefaultTheme = id === defaultTheme.id || id === defaultThemeLight.id
+  const isDefaultTheme = id === defaultTheme().id || id === defaultThemeLight().id
   const disabled = readonly || isDefaultTheme
   const switchTxt = editor === 'theme-editor-txt' ? e('editWithColorPicker') : e('editWithTextEditor')
   const pickerProps = {

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

@@ -12,7 +12,7 @@ import {
 } from '@ant-design/icons'
 import { Tag, Tooltip, Button, Space } from 'antd'
 import classnames from 'classnames'
-import { defaultTheme } from '../../common/constants'
+import { defaultTheme } from '../../common/theme-defaults'
 import highlight from '../common/highlight'
 import isColorDark from '../../common/is-color-dark'
 
@@ -138,7 +138,7 @@ export default function ThemeListItem (props) {
       active: activeItemId === id
     }
   )
-  let title = id === defaultTheme.id
+  let title = id === defaultTheme().id
     ? e(id)
     : name
   title = highlight(
@@ -160,7 +160,7 @@ export default function ThemeListItem (props) {
         {renderTag()}{title}
       </div>
       {
-        id === defaultTheme.id || type === 'iterm'
+        id === defaultTheme().id || type === 'iterm'
           ? null
           : props.renderDelBtn(item)
       }

package/client/components/theme/theme-list.jsx

@@ -7,7 +7,8 @@ import { LoadingOutlined, CheckCircleOutlined } from '@ant-design/icons'
 import { pick } from 'lodash-es'
 import { Pagination } from 'antd'
 import ThemeListItem from './theme-list-item'
-import { defaultTheme, settingMap } from '../../common/constants'
+import { settingMap } from '../../common/constants'
+import { defaultTheme } from '../../common/theme-defaults'
 import getInitItem from '../../common/init-setting-item'
 import './terminal-theme-list.styl'
 
@@ -48,7 +49,7 @@ export default class ThemeList extends List {
       return null
     }
     const { name, id } = item
-    const title = id === defaultTheme.id
+    const title = id === defaultTheme().id
       ? e(id)
       : name
     return (

package/client/store/init-state.js

@@ -24,7 +24,6 @@ import {
   splitMap,
   cmdHistoryKey
 } from '../common/constants'
-import { buildDefaultThemes } from '../common/terminal-theme'
 import * as ls from '../common/safe-local-storage'
 import { exclude } from 'manate'
 import initSettingItem from '../common/init-setting-item'
@@ -61,9 +60,7 @@ export default () => {
     profiles: [],
     bookmarkGroups: getDefaultBookmarkGroups([]),
     _config: {},
-    terminalThemes: [
-      buildDefaultThemes()
-    ],
+    terminalThemes: [],
     itermThemes: exclude([]),
     currentBookmarkGroupId: defaultBookmarkGroupId,
     expandedKeys: ls.getItemJSON(expandedKeysLsKey, [

package/client/store/load-data.js

@@ -181,7 +181,6 @@ export default (Store) => {
       })
     ext.lastDataUpdateTime = await getData('lastDataUpdateTime') || 0
     Object.assign(store, ext)
-    store.checkDefaultTheme()
     store.loadFontList()
     store.fetchItermThemes()
     store.openInitSessions()

package/client/store/store.js

@@ -40,7 +40,7 @@ import createTitle from '../common/create-title'
 import {
   theme
 } from 'antd'
-import { refs } from '../components/common/ref'
+import { refsTabs } from '../components/common/ref'
 
 class Store {
   constructor () {
@@ -79,7 +79,7 @@ class Store {
     const {
       activeTabId
     } = this
-    const tab = refs.get('tab-' + activeTabId)
+    const tab = refsTabs.get('tab-' + activeTabId)
     if (!tab) {
       return null
     }
@@ -106,18 +106,23 @@ class Store {
   get inActiveTerminal () {
     const { store } = window
     if (store.showModal) {
+      console.log('inActiveTerminal because showModal')
       return false
     }
     const { currentTab } = store
     if (!currentTab) {
+      console.log('inActiveTerminal because no currentTab')
       return false
     }
     const {
       type
     } = currentTab
     if (type === 'web' || type === 'rdp' || type === 'vnc') {
+      console.log('inActiveTerminal because type', type)
       return false
     }
+    console.log('currentTab.sshSftpSplitView', currentTab.sshSftpSplitView)
+    console.log('currentTab.pane', currentTab.pane)
     return currentTab.sshSftpSplitView ||
       currentTab.pane === paneMap.terminal
   }

package/client/store/tab.js

@@ -9,7 +9,7 @@ import {
   paneMap,
   maxHistory
 } from '../common/constants'
-import { refs } from '../components/common/ref'
+import { refs, refsTabs } from '../components/common/ref'
 import { message } from 'antd'
 import * as ls from '../common/safe-local-storage'
 import deepCopy from 'json-deep-copy'
@@ -571,7 +571,7 @@ export default Store => {
   })
 
   Store.prototype.notifyTabOnData = function (tabId) {
-    const tab = refs.get('tab-' + tabId)
+    const tab = refsTabs.get('tab-' + tabId)
     if (tab) {
       tab.notifyOnData()
     }

package/client/store/terminal-theme.js

@@ -2,21 +2,26 @@
  * theme related functions
  */
 
-import { message } from 'antd'
-import { isEqual } from 'lodash-es'
 import {
-  defaultTheme,
-  settingMap,
-  defaultThemeLight
+  settingMap
 } from '../common/constants'
-import copy from 'json-deep-copy'
 import { convertTheme } from '../common/terminal-theme'
-
-const e = window.translate
+import {
+  defaultTheme,
+  defaultThemeLight
+} from '../common/theme-defaults'
 
 export default Store => {
   Store.prototype.getTerminalThemes = function () {
-    return window.store.getItems(settingMap.terminalThemes)
+    const t1 = defaultTheme()
+    const t2 = defaultThemeLight()
+    return [
+      t1,
+      t2,
+      ...window.store.getItems(settingMap.terminalThemes).filter(d => {
+        return d && d.id !== t1.id && d.id !== t2.id
+      })
+    ]
   }
 
   Store.prototype.setTheme = function (id) {
@@ -47,14 +52,16 @@ export default Store => {
 
   Store.prototype.fixThemes = function (themes) {
     return themes.map(t => {
-      const isDefaultTheme = t.id === defaultTheme.id
-      const isDefaultThemeLight = t.id === defaultThemeLight.id
+      const d1 = defaultTheme()
+      const d2 = defaultThemeLight()
+      const isDefaultTheme = t.id === d1.id
+      const isDefaultThemeLight = t.id === d2.id
       if (isDefaultTheme) {
-        Object.assign(t, defaultTheme)
+        Object.assign(t, d1)
       } else if (isDefaultThemeLight) {
-        Object.assign(t, defaultThemeLight)
+        Object.assign(t, d2)
       } else if (!t.uiThemeConfig) {
-        t.uiThemeConfig = copy(defaultTheme.uiThemeConfig)
+        t.uiThemeConfig = d1.uiThemeConfig
       }
       return t
     })
@@ -78,33 +85,4 @@ export default Store => {
       })
     )
   }
-
-  Store.prototype.checkDefaultTheme = async function (terminalThemes) {
-    const { store } = window
-    const themeId = defaultTheme.id
-    const currentDefaultTheme = store.terminalThemes.find(d => d.id === themeId)
-    if (
-      currentDefaultTheme &&
-      (
-        !isEqual(currentDefaultTheme.themeConfig, defaultTheme.themeConfig) || !isEqual(currentDefaultTheme.uiThemeConfig, defaultTheme.uiThemeConfig) ||
-        currentDefaultTheme.name !== defaultTheme.name
-      )
-    ) {
-      store.editTheme(
-        themeId,
-        {
-          name: defaultTheme.name,
-          themeConfig: defaultTheme.themeConfig,
-          uiThemeConfig: defaultTheme.uiThemeConfig
-        }
-      )
-      message.info(
-        `${e('default')} ${e('themeConfig')} ${e('updated')}`
-      )
-    }
-    const hasLightTheme = store.getTerminalThemes().find(d => d.id === defaultThemeLight.id)
-    if (!hasLightTheme) {
-      store.addTheme(defaultThemeLight)
-    }
-  }
 }

package/client/store/ui-theme.js

@@ -3,9 +3,12 @@
  */
 
 import {
-  defaultTheme,
   settingMap
 } from '../common/constants'
+import {
+  defaultTheme
+} from '../common/theme-defaults'
+
 import copy from 'json-deep-copy'
 
 export default Store => {
@@ -15,6 +18,6 @@ export default Store => {
       .find(d => d.id === store.config.theme)
     return theme && theme.uiThemeConfig
       ? copy(theme.uiThemeConfig)
-      : defaultTheme.uiThemeConfig
+      : defaultTheme().uiThemeConfig
   }
 }

package/package.json

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

package/client/common/db-defaults.js

@@ -1,123 +0,0 @@
-/**
- * database default should init
- */
-
-function parsor (themeTxt) {
-  return themeTxt.split('\n').reduce((prev, line) => {
-    let [key = '', value = ''] = line.split('=')
-    key = key.trim()
-    value = value.trim()
-    if (!key || !value) {
-      return prev
-    }
-    prev[key] = value
-    return prev
-  }, {})
-}
-
-const defaultTheme = parsor(`
-  main = #141314
-  main-dark = #000
-  main-light = #2E3338
-  text = #ddd
-  text-light = #fff
-  text-dark = #888
-  text-disabled = #777
-  primary = #08c
-  info = #FFD166
-  success = #06D6A0
-  error = #EF476F
-  warn = #E55934
-`)
-const defaultThemeLight = parsor(`
-  main=#ededed
-  main-dark=#cccccc
-  main-light=#fefefe
-  text=#555
-  text-light=#777
-  text-dark=#444
-  text-disabled=#888
-  primary=#08c
-  info=#FFD166
-  success=#06D6A0
-  error=#EF476F
-  warn=#E55934
-`)
-const defaultThemeLightTerminal = parsor(`
-foreground=#333333
-background=#ededed
-cursor=#b5bd68
-cursorAccent=#1d1f21
-selectionBackground=rgba(0, 0, 0, 0.3)
-black=#575757
-red=#FF2C6D
-green=#19f9d8
-yellow=#FFB86C
-blue=#45A9F9
-magenta=#FF75B5
-cyan=#B084EB
-white=#CDCDCD
-brightBlack=#757575
-brightRed=#FF2C6D
-brightGreen=#19f9d8
-brightYellow=#FFCC95
-brightBlue=#6FC1FF
-brightMagenta=#FF9AC1
-brightCyan=#BCAAFE
-brightWhite=#E6E6E6
-`)
-
-const defaultThemeTerminal = {
-  foreground: '#bbbbbb',
-  background: '#141314',
-  cursor: '#b5bd68',
-  cursorAccent: '#1d1f21',
-  selectionBackground: 'rgba(255, 255, 255, 0.3)',
-  black: '#575757',
-  red: '#FF2C6D',
-  green: '#19f9d8',
-  yellow: '#FFB86C',
-  blue: '#45A9F9',
-  magenta: '#FF75B5',
-  cyan: '#B084EB',
-  white: '#CDCDCD',
-  brightBlack: '#757575',
-  brightRed: '#FF2C6D',
-  brightGreen: '#19f9d8',
-  brightYellow: '#FFCC95',
-  brightBlue: '#6FC1FF',
-  brightMagenta: '#FF9AC1',
-  brightCyan: '#BCAAFE',
-  brightWhite: '#E6E6E6'
-}
-
-export default [
-  {
-    db: 'terminalThemes',
-    data: [
-      {
-        _id: 'default',
-        name: 'default',
-        themeConfig: defaultThemeTerminal,
-        uiThemeConfig: defaultTheme
-      },
-      {
-        _id: 'defaultLight',
-        name: 'default light',
-        themeConfig: defaultThemeLightTerminal,
-        uiThemeConfig: defaultThemeLight
-      }
-    ]
-  },
-  {
-    db: 'bookmarkGroups',
-    data: [
-      {
-        _id: 'default',
-        title: 'default',
-        bookmarkIds: [],
-        bookmarkGroupIds: []
-      }
-    ]
-  }
-]