@electerm/electerm-react 2.3.6 → 2.3.30

package/client/components/tabs/add-btn.jsx

@@ -0,0 +1,258 @@
+/**
+ * Add button component for tabs
+ */
+
+import React, { Component } from 'react'
+import { createPortal } from 'react-dom'
+import {
+  CodeFilled,
+  PlusOutlined,
+  RightSquareFilled
+} from '@ant-design/icons'
+import BookmarksList from '../sidebar/bookmark-select'
+import classNames from 'classnames'
+import hasActiveInput from '../../common/has-active-input'
+import './add-btn.styl'
+
+const e = window.translate
+
+export default class AddBtn extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      open: false,
+      menuPosition: 'right',
+      menuTop: 0,
+      menuLeft: 0
+    }
+    this.addBtnRef = React.createRef()
+    this.menuRef = React.createRef()
+    this.hideTimeout = null
+    this.portalContainer = null
+  }
+
+  getPortalContainer = () => {
+    if (!this.portalContainer) {
+      this.portalContainer = document.createElement('div')
+      this.portalContainer.className = 'add-btn-menu-portal'
+      document.body.appendChild(this.portalContainer)
+    }
+    return this.portalContainer
+  }
+
+  componentDidMount () {
+    document.addEventListener('click', this.handleDocumentClick)
+    // Listen for dropdown events to prevent menu closing
+    document.addEventListener('ant-dropdown-show', this.handleDropdownShow)
+    document.addEventListener('ant-dropdown-hide', this.handleDropdownHide)
+  }
+
+  componentWillUnmount () {
+    document.removeEventListener('click', this.handleDocumentClick)
+    document.removeEventListener('ant-dropdown-show', this.handleDropdownShow)
+    document.removeEventListener('ant-dropdown-hide', this.handleDropdownHide)
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout)
+    }
+    // Clean up portal container
+    if (this.portalContainer) {
+      document.body.removeChild(this.portalContainer)
+      this.portalContainer = null
+    }
+  }
+
+  handleDropdownShow = () => {
+    // Cancel any pending hide timeout when dropdown shows
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout)
+      this.hideTimeout = null
+    }
+  }
+
+  handleDropdownHide = () => {
+    // Small delay after dropdown hides before allowing menu to close
+    // This prevents flicker when dropdown closes
+  }
+
+  handleDocumentClick = (e) => {
+    // Don't close menu when clicking inside menu or add button
+    if (this.menuRef.current && this.menuRef.current.contains(e.target)) {
+      return
+    }
+    if (this.addBtnRef.current && this.addBtnRef.current.contains(e.target)) {
+      return
+    }
+
+    // Don't close if clicking on dropdown or active input elements
+    if (hasActiveInput()) {
+      return
+    }
+
+    this.setState({ open: false })
+  }
+
+  handleMouseEnter = () => {
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout)
+      this.hideTimeout = null
+    }
+
+    // Calculate menu position
+    if (this.addBtnRef.current) {
+      const rect = this.addBtnRef.current.getBoundingClientRect()
+      const windowWidth = window.innerWidth
+      const windowHeight = window.innerHeight
+
+      // Estimate menu width and height
+      const estimatedMenuWidth = Math.min(300, windowWidth - 40) // Responsive width
+      const estimatedMenuHeight = 400 // Rough estimate
+
+      // Calculate fixed position coordinates
+      let menuTop = rect.bottom + 4 // 4px margin
+      let menuLeft = rect.left
+      let menuPosition = 'right'
+
+      // Check if menu would overflow bottom of screen
+      if (menuTop + estimatedMenuHeight > windowHeight - 20) {
+        menuTop = rect.top - estimatedMenuHeight - 4 // Show above button
+      }
+
+      // If aligning right would cause overflow, align left instead
+      if (rect.left + estimatedMenuWidth > windowWidth - 20) {
+        menuPosition = 'left'
+        menuLeft = rect.right - estimatedMenuWidth
+      }
+
+      // If aligning left would cause overflow (negative position), force right
+      if (menuLeft < 20) {
+        menuPosition = 'right'
+        menuLeft = Math.max(20, rect.left) // Ensure at least 20px from edge
+      }
+
+      // Final check to ensure menu doesn't go off screen
+      if (menuLeft + estimatedMenuWidth > windowWidth - 20) {
+        menuLeft = windowWidth - estimatedMenuWidth - 20
+      }
+
+      this.setState({
+        open: true,
+        menuPosition,
+        menuTop,
+        menuLeft
+      })
+
+      if (!this.state.open) {
+        window.openTabBatch = this.props.batch
+      }
+    }
+  }
+
+  handleMouseLeave = () => {
+    this.hideTimeout = setTimeout(() => {
+      this.setState({ open: false })
+    }, 200)
+  }
+
+  handleMenuMouseEnter = () => {
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout)
+      this.hideTimeout = null
+    }
+  }
+
+  handleMenuMouseLeave = () => {
+    // Don't close if there's an active input or dropdown
+    if (hasActiveInput()) {
+      return
+    }
+
+    this.hideTimeout = setTimeout(() => {
+      this.setState({ open: false })
+    }, 200)
+  }
+
+  handleMenuScroll = (e) => {
+    // Prevent scroll events from bubbling up
+    e.stopPropagation()
+  }
+
+  handleTabAdd = () => {
+    if (!window.store.hasNodePty) {
+      window.store.onNewSsh()
+      return
+    }
+    window.store.addTab(
+      undefined, undefined,
+      this.props.batch
+    )
+  }
+
+  renderMenus = () => {
+    const { onNewSsh } = window.store
+    const cls = 'pd2x pd1y context-item pointer'
+    const addTabBtn = window.store.hasNodePty
+      ? (
+        <div
+          className={cls}
+          onClick={this.handleTabAdd}
+        >
+          <RightSquareFilled /> {e('newTab')}
+        </div>
+        )
+      : null
+
+    const { menuPosition, menuTop, menuLeft } = this.state
+
+    return (
+      <div
+        ref={this.menuRef}
+        className={`add-menu-wrap add-menu-${menuPosition}`}
+        style={{
+          maxHeight: window.innerHeight - menuTop - 50,
+          top: menuTop,
+          left: menuLeft
+        }}
+        onMouseEnter={this.handleMenuMouseEnter}
+        onMouseLeave={this.handleMenuMouseLeave}
+        onScroll={this.handleMenuScroll}
+      >
+        <div
+          className={cls}
+          onClick={onNewSsh}
+        >
+          <CodeFilled /> {e('newBookmark')}
+        </div>
+        {addTabBtn}
+        <BookmarksList
+          store={window.store}
+        />
+      </div>
+    )
+  }
+
+  render () {
+    const { empty, className } = this.props
+    const { open } = this.state
+    const cls = classNames(
+      'tabs-add-btn pointer',
+      className,
+      {
+        empty
+      }
+    )
+
+    return (
+      <>
+        <PlusOutlined
+          title={e('openNewTerm')}
+          className={cls}
+          onClick={this.handleTabAdd}
+          onMouseEnter={this.handleMouseEnter}
+          onMouseLeave={this.handleMouseLeave}
+          ref={this.addBtnRef}
+        />
+        {open && createPortal(this.renderMenus(), this.getPortalContainer())}
+      </>
+    )
+  }
+}

package/client/components/tabs/add-btn.styl

@@ -0,0 +1,12 @@
+
+.add-menu-wrap
+  position fixed
+  z-index 1000
+  background var(--main)
+  border 1px solid var(--main-darker)
+  border-radius 6px
+  min-width 160px
+  max-width 300px
+  overflow-y auto
+  margin-top 4px
+  padding 4px 15px

package/client/components/tabs/index.jsx

@@ -8,12 +8,9 @@ import runIdle from '../../common/run-idle'
 import { throttle } from 'lodash-es'
 import TabTitle from './tab-title'
 import {
-  CodeFilled,
   DownOutlined,
   LeftOutlined,
-  PlusOutlined,
-  RightOutlined,
-  RightSquareFilled
+  RightOutlined
 } from '@ant-design/icons'
 import {
   SingleIcon,
@@ -25,7 +22,7 @@ import {
   TwoRowsRightIcon,
   TwoColumnsBottomIcon
 } from '../icons/split-icons'
-import { Dropdown, Popover } from 'antd'
+import { Dropdown } from 'antd'
 import Tab from './tab'
 import './tabs.styl'
 import {
@@ -37,7 +34,7 @@ import {
   splitMapDesc
 } from '../../common/constants'
 import WindowControl from './window-control'
-import BookmarksList from '../sidebar/bookmark-select'
+import AddBtn from './add-btn'
 import AppDrag from './app-drag'
 import NoSession from './no-session'
 import classNames from 'classnames'
@@ -190,45 +187,6 @@ export default class Tabs extends Component {
     window.store.setLayout(key)
   }
 
-  handleOpenChange = (open) => {
-    if (open) {
-      window.openTabBatch = this.props.batch
-    }
-  }
-
-  renderMenus () {
-    const { onNewSsh } = window.store
-    const cls = 'pd2x pd1y context-item pointer'
-    const addTabBtn = window.store.hasNodePty
-      ? (
-        <div
-          className={cls}
-          onClick={this.handleTabAdd}
-        >
-          <RightSquareFilled /> {e('newTab')}
-        </div>
-        )
-      : null
-    return (
-      <div
-        className='add-menu-wrap' style={{
-          maxHeight: window.innerHeight - 200
-        }}
-      >
-        <div
-          className={cls}
-          onClick={onNewSsh}
-        >
-          <CodeFilled /> {e('newBookmark')}
-        </div>
-        {addTabBtn}
-        <BookmarksList
-          store={window.store}
-        />
-      </div>
-    )
-  }
-
   renderAddBtn = () => {
     const cls = classNames(
       'pointer tabs-add-btn font16',
@@ -237,17 +195,11 @@ export default class Tabs extends Component {
       }
     )
     return (
-      <Popover
-        content={this.renderMenus()}
-        onOpenChange={this.handleOpenChange}
-        placement='bottomRight'
-      >
-        <PlusOutlined
-          title={e('openNewTerm')}
-          className={cls}
-          onClick={this.handleTabAdd}
-        />
-      </Popover>
+      <AddBtn
+        className={cls}
+        empty={!this.props.tabs?.length}
+        batch={this.props.batch}
+      />
     )
   }
 

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-dark)
   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
@@ -121,29 +121,29 @@
   right 5px
   cursor pointer
   top 50%
+  background var(--main)
   margin-top -8px
-  background 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
+    background var(--primary)
+    color var(--primary-contast)
 
 .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 +153,6 @@
   z-index 20
 
   .tabs-dd-icon
-    color text
     font-size 12px
   .tabs-add-btn
     margin-top 0
@@ -165,21 +164,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 +195,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 +207,9 @@
   .window-control-minimize
   .window-control-maximize
     &:hover
-      background main-dark
+      background var(--main-dark)
   .window-control-close:hover
-    background error
+    background var(--error)
 
 .system-ui
   .window-controls
@@ -219,7 +218,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