@electerm/electerm-react 5.3.5 → 5.3.15

package/client/components/sys-menu/icons-map.jsx

@@ -29,7 +29,9 @@ import {
   PlayCircleFilled,
   StopOutlined,
   DownloadOutlined,
-  SwapOutlined
+  SwapOutlined,
+  PushpinOutlined,
+  PushpinFilled
 } from '@ant-design/icons'
 import IconHolder from './icon-holder'
 
@@ -62,5 +64,7 @@ export default {
   PlayCircleFilled,
   StopOutlined,
   DownloadOutlined,
-  SwapOutlined
+  SwapOutlined,
+  PushpinOutlined,
+  PushpinFilled
 }

package/client/components/tabs/index.jsx

@@ -122,11 +122,23 @@ export default class Tabs extends Component {
     )
   }
 
+  // desktop tabs bar renders pinned tabs first: stable partition that keeps
+  // the original relative order inside the pinned and unpinned groups.
+  // store.tabs order itself is untouched by pinning.
+  getSortedTabs = () => {
+    const { tabs = [] } = this.props
+    return [
+      ...tabs.filter(t => t.isPinned),
+      ...tabs.filter(t => !t.isPinned)
+    ]
+  }
+
   adjustScroll = () => {
     if (this.props.isMobile || !this.domRef.current) {
       return
     }
-    const { tabs, currentBatchTabId, batch } = this.props
+    const { currentBatchTabId, batch } = this.props
+    const tabs = this.getSortedTabs()
     const index = tabs.findIndex(t => t.id === currentBatchTabId)
     const tabsDomWith = Array.from(
       document.querySelectorAll(`.v${batch + 1} .tab`)
@@ -209,7 +221,7 @@ export default class Tabs extends Component {
   }
 
   renderExtra () {
-    const items = this.props.tabs.map((t, i) => {
+    const items = this.getSortedTabs().map((t, i) => {
       return {
         key: i + '##' + t.id,
         label: (
@@ -261,7 +273,8 @@ export default class Tabs extends Component {
   }
 
   renderContentInner () {
-    const { tabs = [], width, config } = this.props
+    const { width, config } = this.props
+    const tabs = this.getSortedTabs()
     const len = tabs.length
     const tabsWidthAll = tabMargin * len + 10 + this.tabsWidth()
     const { overflow } = this.state

package/client/components/tabs/tab.jsx

@@ -9,7 +9,8 @@ import {
   CloseOutlined,
   Loading3QuartersOutlined,
   BorderlessTableOutlined,
-  LockOutlined
+  LockOutlined,
+  PushpinFilled
 } from '@ant-design/icons'
 import {
   Tooltip,
@@ -239,8 +240,15 @@ class Tab extends Component {
     }
   }
 
-  handleReloadTab = async () => {
-    window.store.reloadTab(this.props.tab.id)
+  handleReloadTab = async (e) => {
+    // stop propagation so the parent tab-title click doesn't re-activate
+    // this tab by its now-stale (removed) id after reloadTab replaces it
+    e && e.stopPropagation()
+    const { tab, batch } = this.props
+    const newTab = window.store.reloadTab(tab.id)
+    if (newTab) {
+      window.store.clickTab(newTab.id, batch)
+    }
   }
 
   handleReloadAll = () => {
@@ -309,8 +317,13 @@ class Tab extends Component {
     window.store.closeTabsRight(this.props.tab.id)
   }
 
+  togglePin = () => {
+    const { tab } = this.props
+    window.store.pinTab(tab.id, !tab.isPinned)
+  }
+
   renderContext = () => {
-    const { tabs, tabIndex } = this.props
+    const { tabs, tabIndex, tab } = this.props
     const len = tabs.length
     const index = tabIndex
     const noRight = index >= len - 1
@@ -359,6 +372,13 @@ class Tab extends Component {
         icon: <iconsMap.EditOutlined />,
         label: e('rename')
       },
+      !window.store.isMobile && {
+        key: 'togglePin',
+        icon: tab.isPinned
+          ? <iconsMap.PushpinFilled />
+          : <iconsMap.PushpinOutlined />,
+        label: tab.isPinned ? e('unpin') : e('pin')
+      },
       {
         key: 'handleReloadTab',
         icon: <iconsMap.ReloadOutlined />,
@@ -542,6 +562,7 @@ class Tab extends Component {
               }
               <span className='tab-title'>
                 <span className='iblock mg1r tab-count' style={styleTag}>{tabCount}</span>
+                {tab.isPinned && <PushpinFilled className='tab-pin' />}
                 <span className='mg1r'>{title}</span>
               </span>
             </div>

package/client/components/tabs/tabs.styl

@@ -225,6 +225,10 @@
   height 20px
   line-height 21px
 
+.tab-pin
+  margin-right 3px
+  font-size 11px
+
 .ssh-tunnel-list-wrapper
   max-height 300px
   overflow-y auto

package/client/store/init-state.js

@@ -29,7 +29,6 @@ import {
 import * as ls from '../common/safe-local-storage'
 import { exclude } from 'manate'
 import initSettingItem from '../common/init-setting-item'
-import { getRandomDefaultColor } from '../common/rand-hex-color'
 
 const e = window.translate
 
@@ -39,7 +38,7 @@ function getDefaultBookmarkGroups (bookmarks) {
       title: e(defaultBookmarkGroupId),
       id: defaultBookmarkGroupId,
       bookmarkIds: bookmarks.map(d => d.id),
-      color: getRandomDefaultColor()
+      color: '#0088cc'
     })
   ]
 }

package/client/store/tab.js

@@ -127,6 +127,8 @@ export default Store => {
     if (store[batchProp] === tabId) {
       store[batchProp] = newTab.id
     }
+
+    return newTab
   }
 
   Store.prototype.reloadAllTabs = function () {
@@ -168,6 +170,17 @@ export default Store => {
     store[`activeTabId${sourceTab.batch}`] = duplicatedTab.id
   }
 
+  // only toggles the flag: the tabs bar renders pinned tabs first,
+  // store.tabs order itself is never changed by pinning
+  Store.prototype.pinTab = function (tabId, isPinned = true) {
+    const { store } = window
+    const tab = store.tabs.find(t => t.id === tabId)
+    if (!tab || Boolean(tab.isPinned) === isPinned) {
+      return
+    }
+    tab.isPinned = isPinned
+  }
+
   Store.prototype.closeOtherTabs = function (id) {
     const { store } = window
     const { tabs } = store
@@ -534,7 +547,8 @@ export default Store => {
       'sshSftpSplitView',
       'sshTunnelResults',
       'displayRaw',
-      'autoReConnect'
+      'autoReConnect',
+      'isPinned'
     ]
     const { history } = store
     const index = history.filter(d => d.id && d.tab).findIndex(d => {

package/package.json

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