@electerm/electerm-react 2.3.6 → 2.3.18

package/client/components/tabs/tabs.styl

@@ -1,9 +1,9 @@
-@require '../../css/includes/theme-default'
+
 .tabs
   position relative
   height 36px
   overflow hidden
-  background main-dark
+  background var(--main-dark)
   z-index 12
   ::-webkit-scrollbar
     width 0
@@ -41,17 +41,17 @@
   line-height 36px
   margin 0 1px 0 0
   border-radius 3px 3px 0 0
-  background main-dark
+  background var(--main-darker)
   text-align center
-  color text-dark
+  color var(--text-dark)
   &.tab-last
     margin-right 5px
   .tab-reload
   .tab-close
     display none
   &.active
-    color text
-    background main
+    color var(--text)
+    background var(--main)
     .tab-count
       opacity 1
   &:hover
@@ -63,12 +63,12 @@
     left -2px
     top 0
     width 1px
-    border 1px dashed text-dark
+    border 1px dashed var(--text-dark)
     height 36px
   &.error
     .tab-reload
       display inline-block
-      color text-light
+      color var(--text-light)
 @keyframes blink
   0%
     background-color #e0e0e0
@@ -86,13 +86,13 @@
   width 5px
   height 5px
   border-radius 5px
-  background-color text-dark
+  background-color var(--text-dark)
   &.success
-    background-color success
+    background-color var(--success)
   &.error
-    background-color error
+    background-color var(--error)
   &.processing
-    background-color primary
+    background-color var(--primary)
 .is-transporting .tab-traffic
   display block
   animation blink 2s infinite
@@ -102,7 +102,7 @@
   left 10px
   width 5px
   border-radius 0
-  background-color success
+  background-color var(--success)
 .is-terminal-active .tab-terminal-feed
   display block
   animation blink 2s infinite
@@ -111,7 +111,7 @@
   display none
   left 20px
   border-radius 0
-  color success
+  color var(--success)
   background none
   font-size 8px
   left 2px
@@ -122,28 +122,27 @@
   cursor pointer
   top 50%
   margin-top -8px
-  background text-dark
+  background var(--text-dark)
   border-radius 100%
-  color text
+  color var(--text)
   height 16px
   width 16px
   text-align center
   line-height 16px
   font-size 10px
   &:hover
-    color text-light
+    color var(--text-light)
 
 .tabs-add-btn
   display inline-block
   vertical-align middle
   margin 0 3px 0 3px
-  color text
   &.empty
     font-size 20px
     margin-left 20px
     margin-top 10px
   &:hover
-    color text-light
+    color var(--text-light)
 .tabs-extra
   position absolute
   height 40px
@@ -153,7 +152,6 @@
   z-index 20
 
   .tabs-dd-icon
-    color text
     font-size 12px
   .tabs-add-btn
     margin-top 0
@@ -165,21 +163,21 @@
   z-index 900
   border-radius 0 0 3px 3px
   padding 0
-  background main-light
+  background var(--main-lighter)
 
 .window-control-box
   display inline-block
   padding 5px 10px
-  color text
+  color var(--text)
   &:hover
-    color primary
+    color var(--primary)
     cursor pointer
     .icon-maximize
-      border-color primary
+      border-color var(--primary)
 .icon-maximize
   width 10px
   height 7px
-  border 1px solid text
+  border 1px solid var(--text)
   cursor pointer
   &.is-max
     height 6px
@@ -196,11 +194,11 @@
       border-right none
 
 .control-icon:hover
-  color text-light
+  color var(--text-light)
 .tab-scroll-icon
-  color text-dark
+  color var(--text-dark)
   &:hover
-    color text
+    color var(--text)
 
 .add-menu-wrap
   overflow-y scroll
@@ -208,9 +206,9 @@
   .window-control-minimize
   .window-control-maximize
     &:hover
-      background main-dark
+      background var(--main-darker)
   .window-control-close:hover
-    background error
+    background var(--error)
 
 .system-ui
   .window-controls
@@ -219,7 +217,7 @@
   margin-right 5px
   font-size 14px
 .no-sessions
-  background main
+  background var(--main)
   text-align center
   padding 50px 0
   position absolute

package/client/components/terminal/term-search.styl

@@ -1,10 +1,10 @@
-@require '../../css/includes/theme-default'
+
 .term-search-opt-icon
   margin 0 3px
-  color text-light
+  color var(--text-light)
   font-size 15px
   &:hover
-    color text
+    color var(--text)
   &.term-search-on
     background #333
     color #aaa

package/client/components/terminal/terminal.jsx

@@ -1429,8 +1429,8 @@ class Term extends Component {
       ref: this.domRef,
       className: 'absolute term-wrap-2',
       style: {
-        left: '10px',
-        top: '10px',
+        left: 0,
+        top: 0,
         right: 0,
         bottom: 0
       }

package/client/components/terminal/terminal.styl

@@ -1,6 +1,6 @@
-@require '../../css/includes/theme-default'
+
 .terms-box
-  background main
+  background var(--main)
   position relative
 .loading-wrapper
   padding 30px
@@ -12,22 +12,22 @@
   z-index 30
 
 .terminal-control
-  background main
+  background var(--main)
   line-height 32px
   padding 0 10px
 
 .terms-box
   position relative
 .term-wrap
-  background main
+  background var(--main)
   position absolute
 
 .vertical
   .term-wrap.not-first-term
-    border-top 1px solid main-light
+    border-top 1px solid var(--main-lighter)
 .horizontal
   .term-wrap.not-first-term
-    border-left 1px solid main-light
+    border-left 1px solid var(--main-lighter)
 .term-sftp-tabs
   margin-left 5px
 
@@ -48,9 +48,9 @@
   left 0
   top 0
   width 100%
-  background main
-  color text
-  box-shadow 0px 3px 3px 0px lighten(main, 25%)
+  background var(--main)
+  color var(--text)
+  box-shadow 0px 3px 3px 0px var(--main-lighter)
   z-index 66
   padding-bottom 32px
 .terminal-normal-buffer-body
@@ -59,9 +59,9 @@
 .terminal-normal-buffer-close
   cursor pointer
   font-size 14px
-  color text
+  color var(--text)
   &:hover
-    color text-light
+    color var(--text-light)
 .terminal-normal-buffer-footer
   position absolute
   left 0
@@ -69,25 +69,24 @@
   width 100%
   height 32px
   line-height 32px
-  box-shadow 0px -3px 3px 0px lighten(main, 25%)
-  background main-light
+  box-shadow 0px -3px 3px 0px var(--main)
+  background var(--main-lighter)
 .batch-input-wrap
   width calc(100% - 80px)
 
 .terminal-suggestions-wrap
   position absolute
   z-index 100
-  color text
   max-height 300px
   max-width 300px
   min-width 200px
-  box-shadow 0px 0px 3px 3px main-light
+  box-shadow 0px 0px 3px 3px var(--main-lighter)
   display flex
   flex-direction column
-  background main
+  background var(--main)
   border-radius 4px
   &.reverse .terminal-suggestions-list
-    border-top 1px solid main-light
+    border-top 1px solid var(--main-lighter)
     border-bottom none
 
 .terminal-suggestions-list
@@ -96,7 +95,7 @@
   overflow-y auto
   max-height 268px
   max-width 300px
-  border-bottom 1px solid main-light
+  border-bottom 1px solid var(--main-lighter)
 
 .terminal-suggestions-sticky
   flex-shrink 0
@@ -109,9 +108,9 @@
   align-items center
   padding 5px 10px
   cursor pointer
-  color text
+  color var(--text)
   &:hover
-    background-color main-light
+    background-color var(--main-lighter)
     .suggestion-delete
       visibility visible
 
@@ -124,9 +123,9 @@
 .suggestion-type
   margin-left 5px
   font-size 0.8em
-  color lighten(text, 20%)
+  color var(--text)
   &:hover
-    color text
+    color var(--success)
 
 .suggestion-delete
   margin-left 5px

package/client/components/terminal-info/terminal-info.styl

@@ -1,19 +1,19 @@
-@require '../../css/includes/theme-default'
+
 .terminal-info-icon
-  color text-dark
+  color var(--text-dark)
   &:hover
-    color text
+    color var(--text)
 .info-panel-wrap
   position fixed
   right 0
   top 100px
   bottom 0
   width 500px
-  background main
-  border 1px solid darken(main, 30%)
+  background var(--main)
+  border 1px solid var(--main-darker)
   border-radius 5px 0 0 5px
   border-right none
-  color text
+  color var(--text)
   z-index 100
   overflow-y scroll
 
@@ -36,4 +36,4 @@
     max-height none
 .info-panel-wrap-pin
   .toggle-info-panel-wrap
-    color success
+    color var(--success)

package/client/components/theme/terminal-theme-list.styl

@@ -1,3 +1,3 @@
-@require '../../css/includes/theme-default'
+
 .theme-item.current
-  border-left 3px solid success
+  border-left 3px solid var(--success)

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

@@ -2,13 +2,15 @@
  * theme list render
  */
 
+import { useState } from 'react'
 import {
   CheckCircleOutlined,
   PlusOutlined,
   SunOutlined,
-  MoonOutlined
+  MoonOutlined,
+  EyeOutlined
 } from '@ant-design/icons'
-import { Tag } from 'antd'
+import { Tag, Tooltip, Button, Space } from 'antd'
 import classnames from 'classnames'
 import { defaultTheme } from '../../common/constants'
 import highlight from '../common/highlight'
@@ -25,25 +27,60 @@ export default function ThemeListItem (props) {
   } = props
   const { store } = window
 
+  const [tooltipVisible, setTooltipVisible] = useState(false)
+  const [isPreviewing, setIsPreviewing] = useState(false)
+
   function handleClickApply () {
+    setTooltipVisible(false)
+    setIsPreviewing(false)
     delete window.originalTheme
     store.setTheme(item.id)
   }
 
-  function handleMouseEnter () {
-    // Store current theme ID before changing
-    const currentTheme = window.store.config.theme
-    window.originalTheme = currentTheme
-    // Apply the hovered theme
-    store.setTheme(item.id)
+  function handleClickPreview () {
+    if (!isPreviewing) {
+      // Store current theme ID before changing
+      const currentTheme = window.store.config.theme
+      window.originalTheme = currentTheme
+      // Apply the preview theme
+      store.setTheme(item.id)
+      setIsPreviewing(true)
+    }
   }
 
-  function handleMouseLeave () {
-    if (!window.originalTheme) return
-    // Restore the original theme
-    store.setTheme(window.originalTheme)
-    // Clean up
-    delete window.originalTheme
+  function handleTooltipVisibleChange (visible) {
+    setTooltipVisible(visible)
+    if (!visible && isPreviewing) {
+      // Restore original theme when tooltip closes during preview
+      if (window.originalTheme) {
+        store.setTheme(window.originalTheme)
+        delete window.originalTheme
+      }
+      setIsPreviewing(false)
+    }
+  }
+
+  function renderTooltipContent () {
+    return (
+      <Space>
+        <Button
+          size='small'
+          icon={<EyeOutlined />}
+          onClick={handleClickPreview}
+          type={isPreviewing ? 'primary' : 'default'}
+        >
+          {e('preview')}
+        </Button>
+        <Button
+          size='small'
+          icon={<CheckCircleOutlined />}
+          onClick={handleClickApply}
+          type='primary'
+        >
+          {e('apply')}
+        </Button>
+      </Space>
+    )
   }
 
   function renderApplyBtn () {
@@ -51,12 +88,17 @@ export default function ThemeListItem (props) {
       return null
     }
     return (
-      <CheckCircleOutlined
-        className='pointer list-item-apply'
-        onClick={handleClickApply}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-      />
+      <Tooltip
+        title={renderTooltipContent()}
+        trigger='click'
+        open={tooltipVisible}
+        onOpenChange={handleTooltipVisibleChange}
+        placement='top'
+      >
+        <CheckCircleOutlined
+          className='pointer list-item-apply'
+        />
+      </Tooltip>
     )
   }
 

package/client/css/basic.styl

@@ -1,15 +1,14 @@
 @require './includes'
-@require './antd-overwrite'
-@require './includes/theme-default'
+@require './includes/theme'
 
 body
-  color text
   overflow hidden
   background main
   font-size 12px
   line-height 1.5715
   font-family -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
   font-variant: tabular-nums
+  color var(--text)
 
 ::-webkit-scrollbar
   background transparent
@@ -23,7 +22,7 @@ body
   -webkit-box-shadow none
 
 ::-webkit-scrollbar-thumb
-  background-color primary
+  background-color var(--primary)
   outline none
 
 .common-err
@@ -31,11 +30,9 @@ body
   overflow-y scroll
   overflow-x hidden
   word-break break-all
-.hide-resize-observer
-  display: none !important
 
 a
-  color primary
+  color var(--primary)
 
 .cap
   text-transform capitalize

package/client/css/includes/theme.styl

@@ -0,0 +1,16 @@
+:root
+  --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
+  --primary-contrast #fff
+  --main-darker #0e0d0e
+  --main-lighter #5b5a5b

package/client/store/ui-theme.js

@@ -2,7 +2,6 @@
  * ui theme functions
  */
 
-import { escapeRegExp } from 'lodash-es'
 import {
   defaultTheme,
   settingMap
@@ -10,40 +9,6 @@ import {
 import copy from 'json-deep-copy'
 
 export default Store => {
-  Store.prototype.getDefaultUiThemeConfig = function (stylus) {
-    const reg = /[^\n]+ = [^\n]+\n/g
-    const arr = stylus.match(reg)
-    const sep = ' = '
-    return arr.reduce((p, x) => {
-      if (!x.includes(sep)) {
-        return p
-      }
-      const [k, v] = x.split(sep)
-      return {
-        ...p,
-        [k.trim()]: v.trim()
-      }
-    }, {})
-  }
-
-  Store.prototype.buildTheme = function (config) {
-    let { stylus } = window.et
-    const keys = Object.keys(config)
-    for (const key of keys) {
-      const reg = new RegExp(escapeRegExp(key) + ' = [^\\n]+\\n')
-      const v = config[key]
-      stylus = stylus.replace(reg, `${key} = ${v}\n`)
-    }
-    return window.pre.runGlobalAsync('toCss', stylus)
-  }
-
-  // Store.prototype.sortTheme = function (a, b) {
-  //   const theme = window.originalTheme || window.store.config.theme
-  //   const ax = a.id === theme ? -1 : 1
-  //   const bx = b.id === theme ? -1 : 1
-  //   return ax > bx ? 1 : -1
-  // }
-
   Store.prototype.getUiThemeConfig = function () {
     const { store } = window
     const theme = store.getSidebarList(settingMap.terminalThemes)

package/package.json

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

package/client/components/common/native-input.styl

@@ -1,7 +0,0 @@
-@require '../../css/includes/theme-default'
-.native-input
-  color text
-  background-color main-light
-  border-color main-light
-  &:focus
-    border-color main-light

package/client/components/setting-sync/sync.styl

@@ -1,7 +0,0 @@
-@require '../../css/includes/theme-default'
-.sync-control
-  margin-bottom 0
-.sync-control-link
-  color primary
-  &:hover
-    color text-light

package/client/css/antd-overwrite.styl

@@ -1,10 +0,0 @@
-
-
-#container .ant-spin-blur
-  opacity 1 !important
-.ant-tree-indent-unit
-  width 5px
-.ant-tree .ant-tree-switcher.ant-tree-switcher-noop
-  width 0px
-td.ant-table-column-sort
-  background none

package/client/css/includes/theme-default.styl

@@ -1,20 +0,0 @@
-
-// Function to determine font color based on background color
-contrastColor(color)
-  if (luminance(color) > 0.5)
-    return #000000 // Black font for bright colors
-  else
-    return #ffffff // White font for dark colors
-
-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