@electerm/electerm-react 5.3.15 → 5.5.6

package/client/components/sidebar/index.jsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react'
 import {
   InfoCircleOutlined,
   UpCircleOutlined,
@@ -48,37 +49,43 @@ export default function Sidebar (props) {
   const { store } = window
 
   const handleClickOutside = (event) => {
-    // Don't close if pinned or has active input
-    if (store.pinned || hasActiveInput()) {
+    const { store } = window
+    // Nothing to dismiss when the panel is closed or pinned; also ignore
+    // clicks while typing in an input so the panel is not yanked away
+    // mid-interaction.
+    if (!store.openedSideBar || store.pinned || hasActiveInput()) {
       return
     }
+    const target = event.target
+    // Never treat the panel itself or the bookmark toggle button as "outside".
+    // The very click that toggles the panel open lands on that button, so this
+    // guard makes the toggle immune to event-ordering races — and, in dev hot
+    // reloads, to stale listeners left behind by an older build.
+    if (target.closest && (
+      target.closest('.sidebar-panel') ||
+      target.closest('.bookmark-sidebar-toggle')
+    )) {
+      return
+    }
+    store.setOpenedSideBar('')
+  }
 
-    // Check if click is outside the sidebar panel
-    const sidebarPanel = document.querySelector('.sidebar-panel')
-    if (sidebarPanel && !sidebarPanel.contains(event.target)) {
-      store.setOpenedSideBar('')
+  // One always-on document listener for click-outside dismissal, attached
+  // once. Previously the listener was added/removed from inside the bookmark
+  // click handler, so it leaked when the panel was closed via the ✕ icon and
+  // then instantly re-closed the panel on the next bookmark-icon click.
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside)
+    return () => {
       document.removeEventListener('click', handleClickOutside)
     }
-  }
+  }, [])
 
   const handleClickBookmark = () => {
     if (showModal) {
       store.showModal = 0
     }
-    if (pinned) {
-      return
-    }
-    if (openedSideBar === 'bookmarks') {
-      // Remove listener when closing
-      document.removeEventListener('click', handleClickOutside)
-      store.setOpenedSideBar('')
-    } else {
-      // Add listener when opening, with slight delay to avoid conflict with this click
-      setTimeout(() => {
-        document.addEventListener('click', handleClickOutside)
-      }, 0)
-      store.setOpenedSideBar('bookmarks')
-    }
+    store.openLeftSidePanel()
   }
 
   const handleShowUpgrade = () => {

package/client/components/sidebar/left-sidebar-icons.jsx

@@ -81,7 +81,7 @@ export default function LeftSidebarIcons (props) {
       >
         <BookOutlined
           onClick={handleClickBookmark}
-          className='font20 iblock control-icon'
+          className='font20 iblock control-icon bookmark-sidebar-toggle'
         />
       </SideIcon>
     ),

package/client/components/sidebar/sidebar.styl

@@ -23,6 +23,8 @@
   z-index 100
   bottom 0
   background var(--main-dark)
+  display flex
+  flex-direction column
 
   .item-list
     padding-right 0
@@ -105,6 +107,20 @@
   z-index 200
   width 0
 
+// icon bar: fills sidebar height, scrolls when overflow on small screens,
+// scrollbar hidden but scrolling still works
+.sidebar-bar
+  flex 1
+  min-height 0
+  overflow-y auto
+  overflow-x hidden
+  scrollbar-width none // Firefox
+  -ms-overflow-style none // IE/Edge
+  &::-webkit-scrollbar
+    width 0
+    height 0
+    display none
+
 // mobile: icon bar hidden — hide its buttons
 .sidebar.collapsed
   .sidebar-bar

package/client/components/sys-menu/menu-btn.jsx

@@ -65,6 +65,7 @@ class MenuBtn extends PureComponent {
   renderContext = () => {
     const items = [
       {
+        key: 'onNewSsh',
         func: 'onNewSsh',
         icon: 'CodeFilled',
         text: e('newBookmark'),
@@ -73,6 +74,7 @@ class MenuBtn extends PureComponent {
     ]
     if (window.store.hasNodePty) {
       items.push({
+        key: 'addTab',
         func: 'addTab',
         icon: 'RightSquareFilled',
         text: e('newTab'),
@@ -83,6 +85,7 @@ class MenuBtn extends PureComponent {
     //   type: 'hr'
     // },
     items.push({
+      key: 'bookmarks',
       noCloseMenu: true,
       icon: 'BookOutlined',
       text: e('bookmarks'),
@@ -90,18 +93,21 @@ class MenuBtn extends PureComponent {
     })
     items.push(
       {
+        key: 'history',
         noCloseMenu: true,
         icon: 'ClockCircleOutlined',
         text: e('history'),
         submenu: 'History'
       },
       {
+        key: 'sessions',
         noCloseMenu: true,
         icon: 'BarsOutlined',
         text: e('sessions'),
         submenu: 'Tabs'
       },
       {
+        key: 'layout',
         icon: 'AppstoreOutlined',
         text: e('layout'),
         submenu: 'Layout'
@@ -110,16 +116,19 @@ class MenuBtn extends PureComponent {
       //   type: 'hr'
       // },
       {
+        key: 'openAbout',
         func: 'openAbout',
         icon: 'InfoCircleOutlined',
         text: e('about')
       },
       {
+        key: 'openSetting',
         func: 'openSetting',
         icon: 'SettingOutlined',
         text: e('settings')
       },
       {
+        key: 'openDevTools',
         func: 'openDevTools',
         icon: 'LeftSquareFilled',
         text: e('toggledevtools')
@@ -128,19 +137,23 @@ class MenuBtn extends PureComponent {
       //   type: 'hr'
       // },
       {
+        key: 'zoom',
         module: 'Zoom'
       },
       {
+        key: 'minimize',
         func: 'minimize',
         icon: 'SwitcherFilled',
         text: e('minimize')
       },
       {
+        key: 'maximize',
         func: 'maximize',
         icon: 'LayoutFilled',
         text: e('maximize')
       },
       {
+        key: 'reload',
         func: 'reload',
         icon: 'ReloadOutlined',
         text: e('reload')
@@ -149,6 +162,7 @@ class MenuBtn extends PureComponent {
       //   type: 'hr'
       // },
       {
+        key: 'onCheckUpdate',
         func: 'onCheckUpdate',
         icon: 'UpCircleOutlined',
         text: e('checkForUpdate')
@@ -157,17 +171,32 @@ class MenuBtn extends PureComponent {
       //   type: 'hr'
       // },
       {
+        key: 'restart',
         func: 'restart',
         icon: 'RedoOutlined',
         text: e('restart')
       },
       {
+        key: 'close',
         func: 'close',
         icon: 'CloseOutlined',
         text: e('close')
       }
     )
-    return items
+    return this.filterMenus(items)
+  }
+
+  // Only show menus listed in window.et.sysMenus, when it is defined,
+  // eg: window.et.sysMenus = ['onNewSsh', 'bookmarks', 'openSetting', 'close']
+  // available keys: onNewSsh, addTab, bookmarks, history, sessions, layout,
+  // openAbout, openSetting, openDevTools, zoom, minimize, maximize, reload,
+  // onCheckUpdate, restart, close
+  filterMenus = (items) => {
+    const { sysMenus } = window.et || {}
+    if (!Array.isArray(sysMenus)) {
+      return items
+    }
+    return items.filter(d => d.type === 'hr' || sysMenus.includes(d.key))
   }
 
   renderMenu () {

package/client/components/tabs/index.jsx

@@ -225,7 +225,7 @@ export default class Tabs extends Component {
       return {
         key: i + '##' + t.id,
         label: (
-          <span><TabTitle tab={t} /></span>
+          <span><TabTitle tab={t} config={this.props.config} /></span>
         ),
         onClick: () => this.handleClickMenu({ key: i + '##' + t.id })
       }
@@ -423,7 +423,7 @@ export default class Tabs extends Component {
       return {
         key: i + '##' + t.id,
         label: (
-          <span><TabTitle tab={t} /></span>
+          <span><TabTitle tab={t} config={this.props.config} /></span>
         ),
         onClick: () => this.handleClickMenu({ key: i + '##' + t.id })
       }

package/client/components/tabs/tab-title.jsx

@@ -1,7 +1,7 @@
 import createName from '../../common/create-title'
 
 export default function tabTitle (props) {
-  const { tab } = props
+  const { tab, config } = props
   const title = createName(tab)
   const { tabCount, color } = props.tab
   const styleTag = color
@@ -9,7 +9,8 @@ export default function tabTitle (props) {
     : {}
   return (
     <span className='tab-title'>
-      <span style={styleTag}>●</span> {tabCount}. {title}
+      <span style={styleTag}>●</span>
+      {!(config && config.disableTabIndex) ? ` ${tabCount}.` : ''} {title}
     </span>
   )
 }

package/client/components/tabs/tab.jsx

@@ -561,7 +561,11 @@ class Tab extends Component {
                 )
               }
               <span className='tab-title'>
-                <span className='iblock mg1r tab-count' style={styleTag}>{tabCount}</span>
+                {!(config && config.disableTabIndex)
+                  ? (
+                    <span className='iblock mg1r tab-count' style={styleTag}>{tabCount}</span>
+                    )
+                  : null}
                 {tab.isPinned && <PushpinFilled className='tab-pin' />}
                 <span className='mg1r'>{title}</span>
               </span>

package/client/components/tabs/tabs.styl

@@ -135,6 +135,10 @@
   font-size 10px
   &:hover
     background var(--error)
+// touch screens have no hover — always reveal the close icon
+.is-touch-device
+  .tab-close
+    display block
 
 .tabs-add-btn
   display inline-block