@electerm/electerm-react 2.3.6 → 2.3.30

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/components/tree-list/tree-expander.jsx

@@ -4,10 +4,12 @@ import {
 } from '@ant-design/icons'
 
 export default function TreeExpander (props) {
-  function onExpand () {
+  function onExpand (e) {
+    e.stopPropagation()
     props.onExpand(group)
   }
-  function onUnExpand () {
+  function onUnExpand (e) {
+    e.stopPropagation()
     props.onUnExpand(group)
   }
   const { group } = props

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
+  background var(--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.30",
   "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