@electerm/electerm-react 2.2.0 → 2.3.18

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 alpha(text, .85)
+    color var(--text-disabled)
     &:hover
       color #777
       background #333
@@ -30,21 +28,21 @@
   position absolute
   right 16px
   top 0
-  opacity .65
+  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 alpha(main, .35)
+  background var(--main)
+  box-shadow 0px 0px 3px 3px var(--main-lighter)
   max-height 300px
   overflow-y scroll
 .with-sub-menu
@@ -68,18 +66,17 @@
   width 28px
   height 28px
   border-radius 30px
-  color text
+  color var(--text-light)
   font-size 16px
   text-align center
   display inline-block
   line-height 28px
   cursor pointer
-  opacity .6
   &:hover
-    opacity 1
+    color var(--text)
 .is-main
   .menu-control
     img
-      border 1px solid text-dark
+      border 1px solid var(--text-dark)
       border-radius 28px
       background #000

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,19 +63,19 @@
     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%
-    opacity 0.3
+    background-color #e0e0e0
   50%
-    opacity 1
+    background-color #ffffff
   100%
-    opacity 0.3
+    background-color #e0e0e0
 
 .tab-terminal-feed
 .tab-traffic
@@ -86,30 +86,32 @@
   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
+  /* Remove opacity animation, use background-color */
 .tab-traffic
   display none
   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
+  /* Remove opacity animation, use background-color */
 .tab-terminal-feed
   display none
   left 20px
   border-radius 0
-  color success
+  color var(--success)
   background none
   font-size 8px
   left 2px
@@ -120,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
@@ -151,7 +152,6 @@
   z-index 20
 
   .tabs-dd-icon
-    color text
     font-size 12px
   .tabs-add-btn
     margin-top 0
@@ -163,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
@@ -194,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
@@ -206,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
@@ -217,7 +217,7 @@
   margin-right 5px
   font-size 14px
 .no-sessions
-  background main-dark
+  background var(--main)
   text-align center
   padding 50px 0
   position absolute
@@ -231,7 +231,6 @@
   padding 0 4px
   height 20px
   line-height 21px
-  opacity 0.8
 .no-session-history
   position absolute
   top 280px

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-search-bar.jsx

@@ -26,7 +26,7 @@ export default function SearchResultBar ({
     ctx.clearRect(0, 0, canvas.width, canvas.height)
     matches.forEach((match, index) => {
       const y = (match / totalLines) * containerHeight
-      ctx.fillStyle = index === matchIndex ? 'rgba(243, 67, 9, 0.5)' : 'rgba(243, 196, 9, 0.5)'
+      ctx.fillStyle = index === matchIndex ? '#f34309' : '#f3c409'
       ctx.fillRect(0, y, 16, 2)
     })
   }

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
 
@@ -41,20 +41,16 @@
     height 100%
     background-repeat no-repeat
     background-position center
-    background-color: transparent !important
-
-
-.terminal-not-active .xterm-text-layer
-  opacity .74
+    background-color transparent !important
 
 .terminal-normal-buffer
   position absolute
   left 0
   top 0
   width 100%
-  background main
-  color text
-  box-shadow 0px 3px 3px 0px alpha(text, .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
@@ -63,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
@@ -73,25 +69,24 @@
   width 100%
   height 32px
   line-height 32px
-  box-shadow 0px -3px 3px 0px alpha(text, .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
@@ -100,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
@@ -113,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
 
@@ -128,9 +123,9 @@
 .suggestion-type
   margin-left 5px
   font-size 0.8em
-  opacity .8
+  color var(--text)
   &:hover
-    opacity 1
+    color var(--success)
 
 .suggestion-delete
   margin-left 5px

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

@@ -1,22 +1,22 @@
-@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
-  opacity .9
+
   .drag-handle
     left 0
     right auto
@@ -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/components/tree-list/tree-list.styl

@@ -75,5 +75,5 @@
   height 12px
   margin-right 6px
   border-radius 2px
-  border 1px solid rgba(0,0,0,0.1)
+  border 1px solid #1a1a1a
   vertical-align middle

package/client/css/basic.styl

@@ -1,21 +1,17 @@
 @require './includes'
-@require './antd-overwrite'
-@require './includes/theme-default'
-
-html
-  background rgba(0,0,0,.01)
+@require './includes/theme'
 
 body
-  color text
   overflow hidden
-  background alpha(main, .3)
+  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 alpha(main, .5)
+  background transparent
   width 7px
 
 .term-wrap:hover
@@ -26,7 +22,7 @@ body
   -webkit-box-shadow none
 
 ::-webkit-scrollbar-thumb
-  background-color primary
+  background-color var(--primary)
   outline none
 
 .common-err
@@ -34,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