@electerm/electerm-react 1.37.46 → 1.37.58

package/client/common/constants.js

@@ -138,6 +138,8 @@ export const terminalTelnetType = 'telnet'
 export const terminalLocalType = 'local'
 export const openedSidebarKey = 'opened-sidebar'
 export const sidebarPinnedKey = 'sidebar-pinned'
+export const leftSidebarWidthKey = 'left-sidebar-width'
+export const rightSidebarWidthKey = 'right-sidebar-width'
 export const sftpDefaultSortSettingKey = 'sftp-default-sort'
 // https://github.com/tinkertrain/panda-syntax-vscode/blob/master/themes/workbench.yaml
 export const defaultTheme = {

package/client/components/footer/footer-entry.jsx

@@ -122,13 +122,24 @@ export default class SystemMenu extends Component {
   }
 
   render () {
-    const { tabs } = this.props.store
+    const { tabs, leftSidebarWidth, openedSideBar } = this.props.store
     const pane = this.props.store.currentTab?.pane
     if (pane === paneMap.fileManager || !tabs.length) {
       return null
     }
+    const w = 43 + leftSidebarWidth
+    const sideProps = openedSideBar
+      ? {
+          className: 'main-footer',
+          style: {
+            left: `${w}px`
+          }
+        }
+      : {
+          className: 'main-footer'
+        }
     return (
-      <div className='main-footer'>
+      <div {...sideProps}>
         <div className='terminal-footer-flex'>
           {this.renderQuickCommands()}
           {this.renderBatchInputs()}

package/client/components/session/session.jsx

@@ -74,6 +74,7 @@ export default class SessionWrapper extends Component {
       enableSftp: false,
       splitDirection: terminalSplitDirectionMap.horizontal,
       activeSplitId,
+      infoPanelPinned: false,
       key: Math.random(),
       sessionOptions: null,
       sessionId: generate(),
@@ -104,6 +105,12 @@ export default class SessionWrapper extends Component {
     })
   }
 
+  toggleInfoPinned = () => {
+    this.setState({
+      infoPanelPinned: !this.state.infoPanelPinned
+    })
+  }
+
   hideInfoPanel = () => {
     this.setState({
       showInfo: false
@@ -217,7 +224,7 @@ export default class SessionWrapper extends Component {
 
   computePosition = (index) => {
     const len = this.state.terminals.length || 1
-    const { width: windowWidth } = this.props
+    const windowWidth = this.getWidth()
     const { splitDirection } = this.state
     const isHori = splitDirection === terminalSplitDirectionMap.horizontal
     const heightAll = this.computeHeight()
@@ -241,6 +248,18 @@ export default class SessionWrapper extends Component {
     }
   }
 
+  getWidth = () => {
+    const {
+      infoPanelPinned,
+      showInfo
+    } = this.state
+    if (!infoPanelPinned || !showInfo) {
+      return this.props.width
+    }
+    const { rightSidebarWidth, width } = this.props
+    return width - rightSidebarWidth
+  }
+
   renderTerminals = () => {
     const {
       terminals,
@@ -256,7 +275,8 @@ export default class SessionWrapper extends Component {
       ? 'terms-box'
       : 'terms-box hide'
     const height = this.computeHeight()
-    const { width, tab } = this.props
+    const { tab } = this.props
+    const width = this.getWidth()
     const themeConfig = copy(window.store.getThemeConfig())
     return (
       <div
@@ -467,20 +487,20 @@ export default class SessionWrapper extends Component {
     const {
       splitDirection,
       infoPanelProps,
-      showInfo
+      showInfo,
+      infoPanelPinned
     } = this.state
     const { pane } = this.props.tab
     const infoProps = {
+      infoPanelPinned,
       ...pick(this.props.config, ['host', 'port', 'saveTerminalLogToFile']),
       ...infoPanelProps,
       appPath: this.props.appPath,
+      rightSidebarWidth: this.props.rightSidebarWidth,
       showInfo,
       tabsHeight: this.props.tabsHeight,
       topMenuHeight: this.props.topMenuHeight,
-      // pid,
-      // sessionId,
-      // isRemote: this.isRemote(),
-      // isActive: this.isActiveTerminal(),
+      toggleInfoPinned: this.toggleInfoPinned,
       hideInfoPanel: this.hideInfoPanel
     }
     const cls = classnames(

package/client/components/session/sessions.jsx

@@ -346,7 +346,8 @@ class Sessions extends Component {
           'pinnedQuickCommandBar',
           'tabsHeight',
           'appPath',
-          'topMenuHeight'
+          'topMenuHeight',
+          'rightSidebarWidth'
         ]),
         config,
         ...pick(this, [
@@ -407,8 +408,23 @@ class Sessions extends Component {
   }
 
   renderSessionsWrap = () => {
+    const { leftSidebarWidth, openedSideBar } = this.props.store
+    const w = leftSidebarWidth + 43
+    const ptp = openedSideBar
+      ? {
+          className: 'sessions',
+          style: {
+            marginLeft: `${w}px`
+          }
+        }
+      : {
+          className: 'sessions'
+        }
     return (
-      <div className='sessions' key='main-sess'>
+      <div
+        {...ptp}
+        key='main-sess'
+      >
         {this.renderSessions()}
       </div>
     )

package/client/components/setting-sync/setting-sync-form.jsx

@@ -110,7 +110,7 @@ export default function SyncForm (props) {
   }
   const otherNameMapper = {
     token: 'access token',
-    gist: 'gist id'
+    gistId: 'gist id'
   }
   function createLabel (name, text) {
     return (

package/client/components/sidebar/index.jsx

@@ -23,6 +23,7 @@ import {
   modals
 } from '../../common/constants'
 import SideIcon from './side-icon'
+import SidePanel from './side-panel'
 import './sidebar.styl'
 
 const { prefix } = window
@@ -91,7 +92,9 @@ export default class Sidebar extends Component {
       showModal,
       showInfoModal,
       settingItem,
-      isSyncingSetting
+      isSyncingSetting,
+      leftSidebarWidth,
+      setLeftSidePanelWidth
     } = store
     const {
       showUpgradeModal,
@@ -106,6 +109,16 @@ export default class Sidebar extends Component {
     const themeActive = showSetting && settingTab === settingMap.terminalThemes
     const historyActive = showSetting && settingTab === settingMap.history
     const bookmarksActive = showSetting && settingTab === settingMap.bookmarks
+    const sideProps = openedSideBar
+      ? {
+          className: 'sidebar-list',
+          style: {
+            width: `${leftSidebarWidth}px`
+          }
+        }
+      : {
+          className: 'sidebar-list'
+        }
     return (
       <div
         className={`sidebar type-${openedSideBar}`}
@@ -210,8 +223,10 @@ export default class Sidebar extends Component {
           }
         </div>
         <InfoModal store={store} />
-        <div
-          className='sidebar-list'
+        <SidePanel
+          sideProps={sideProps}
+          setLeftSidePanelWidth={setLeftSidePanelWidth}
+          leftSidebarWidth={leftSidebarWidth}
         >
           <BookMarksWrap
             store={store}
@@ -223,7 +238,7 @@ export default class Sidebar extends Component {
             onMouseEnter={this.handleMouseEnterHistory}
             onMouseLeave={this.handleMouseLeave}
           />
-        </div>
+        </SidePanel>
       </div>
     )
   }

package/client/components/sidebar/side-panel.jsx

@@ -0,0 +1,51 @@
+import { PureComponent } from 'react'
+export default class SidePanel extends PureComponent {
+  handleMousedown = (e) => {
+    this.dragStart = true
+    this.clientX = e.clientX
+    document.body.addEventListener('mouseup', this.handleMouseup)
+    document.body.addEventListener('mousemove', this.handleMousemove)
+  }
+
+  handleMouseup = (e) => {
+    this.dragStart = false
+    const {
+      clientX
+    } = e
+    let nw = clientX - this.clientX + 300
+    if (nw < 343) {
+      nw = 343
+    } else if (nw > 600) {
+      nw = 600
+    }
+    this.props.setLeftSidePanelWidth(nw)
+    document.body.removeEventListener('mouseup', this.handleMouseup)
+    document.body.removeEventListener('mousemove', this.handleMousemove)
+  }
+
+  handleMousemove = (e) => {
+    const {
+      clientX
+    } = e
+    const el = document.getElementById('side-panel')
+    const nw = clientX - this.clientX + this.props.leftSidebarWidth
+    el.style.width = nw + 'px'
+  }
+
+  render () {
+    return (
+      <div
+        {...this.props.sideProps}
+        id='side-panel'
+        draggable={false}
+      >
+        <div
+          className='drag-handle'
+          onMouseDown={this.handleMousedown}
+          draggable={false}
+        />
+        {this.props.children}
+      </div>
+    )
+  }
+}

package/client/components/sidebar/sidebar.styl

@@ -3,9 +3,9 @@
   animation-duration .2s
 .sidebar-panel
   position absolute
-  left 43px
-  top 46px
-  bottom 36px
+  left 0
+  top 0
+  bottom 0
   z-index 200
   width 0
   overflow-y scroll
@@ -15,8 +15,6 @@
     .list-item-remove
       display none !important
 
-.pinned .sidebar-panel
-  bottom 0
 .sidebar
   position absolute
   left 0
@@ -30,10 +28,10 @@
     padding-right 0
 .type-bookmarks
   .bookmarks-panel
-    width 300px
+    width 100%
 .type-history
   .history-panel
-    width 300px
+    width 100%
 .control-icon-text
   color text
   &:hover
@@ -50,11 +48,21 @@
     &:hover
       color text-light
 .sidebar-list
-  .pinned
-    color success
-    &:hover
-      color success
+  position absolute
+  left 43px
+  top 45px
+  bottom 36px
+  z-index 200
+  width 0
+  border-top 5px solid main
 
+.pinned
+  .sidebar-list
+    bottom 0
+  .drag-handle
+    display block
+  .sidebar-panel .pinned
+    color success
 //btns
 .btns
   background main-dark
@@ -69,7 +77,15 @@
   //   background transparent
   //   color #aaa
   //   border-color #555
-
+.drag-handle
+  position absolute
+  right 0
+  top 0
+  width 3px
+  bottom 0
+  cursor ew-resize
+  display none
+  z-index 201
 // Hover.css (http://ianlunn.github.io/Hover/)
 // Version: 2.3.2
 // Author: Ian Lunn @IanLunn

package/client/components/terminal-info/content.jsx

@@ -2,27 +2,26 @@
  * info content module
  */
 
+import { PureComponent } from 'react'
 import TerminalInfoBase from './base'
 import TerminalInfoUp from './up'
 import TerminalInfoNetwork from './network'
 import TerminalInfoResource from './resource'
 import TerminalInfoActivities from './activity'
 import TerminalInfoDisk from './disk'
-import { useState } from 'react'
 import RunCmd from './run-cmd'
 import {
-  sidebarWidth,
   termControlHeight
 } from '../../common/constants'
 import { runCmd } from '../terminal/terminal-apis'
-import { CloseCircleOutlined, LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons'
+import {
+  CloseCircleOutlined,
+  PushpinOutlined
+} from '@ant-design/icons'
+import classNames from 'classnames'
 
-export default function TerminalInfoContent (props) {
-  if (!props.showInfo) {
-    return null
-  }
-  const [state, setter] = useState({
-    expand: false,
+export default class TerminalInfoContent extends PureComponent {
+  state = {
     uptime: '',
     cpu: '',
     mem: {},
@@ -30,72 +29,119 @@ export default function TerminalInfoContent (props) {
     activities: [],
     disks: [],
     network: {}
-  })
-  function setState (ext) {
-    setter(s => {
-      return Object.assign({}, s, ext)
-    })
   }
-  async function killProcess (id) {
+
+  setStateRef = (...args) => {
+    this.setState(...args)
+  }
+
+  togglePin = () => {
+    this.props.toggleInfoPinned()
+  }
+
+  handleMousedown = (e) => {
+    this.dragStart = true
+    this.clientX = e.clientX
+    document.body.addEventListener('mouseup', this.handleMouseup)
+    document.body.addEventListener('mousemove', this.handleMousemove)
+  }
+
+  handleMouseup = (e) => {
+    this.dragStart = false
+    const {
+      clientX
+    } = e
+    let nw = this.clientX - clientX + this.props.rightSidebarWidth
+    if (nw < 400) {
+      nw = 400
+    } else if (nw > 1000) {
+      nw = 1000
+    }
+    window.store.setRightSidePanelWidth(nw)
+    document.body.removeEventListener('mouseup', this.handleMouseup)
+    document.body.removeEventListener('mousemove', this.handleMousemove)
+  }
+
+  handleMousemove = (e) => {
+    const {
+      clientX
+    } = e
+    const el = document.getElementById('info-panel-wrap')
+    const nw = this.clientX - clientX + this.props.rightSidebarWidth
+    console.log(nw, this.clientX, clientX, this.props.rightSidebarWidth)
+    el.style.width = nw + 'px'
+  }
+
+  killProcess = async (id) => {
     const {
       pid,
       sessionId
-    } = props
+    } = this.props
     const cmd = `kill ${id}`
     runCmd(pid, sessionId, cmd)
   }
-  const pops = {
-    onClick: props.hideInfoPanel,
-    className: 'pointer font20 hide-info-panel-wrap'
-  }
-  return (
-    <div
-      className='info-panel-wrap'
-      style={{
-        width: state.expand ? `calc(100% - ${sidebarWidth}px)` : '50%',
-        top: props.topMenuHeight + props.tabsHeight + termControlHeight - 4
-      }}
-    >
-      <div className='pd2t pd2x'>
-        <CloseCircleOutlined
-          {...pops}
-        />
+
+  render () {
+    const { props, state } = this
+    if (!props.showInfo) {
+      return null
+    }
+
+    const pops = {
+      onClick: props.hideInfoPanel,
+      className: 'pointer font20 hide-info-panel-wrap'
+    }
+    const pops2 = {
+      onClick: this.togglePin,
+      className: 'pointer font20 toggle-info-panel-wrap mg1l'
+    }
+    const pops1 = {
+      className: classNames(
+        'info-panel-wrap',
         {
-          state.expand
-            ? (
-              <RightCircleOutlined
-                onClick={() => setState({
-                  expand: false
-                })}
-                className='pointer font20 mg1l'
-              />
-              )
-            : (
-              <LeftCircleOutlined
-                onClick={() => setState({
-                  expand: true
-                })}
-                className='pointer font20 mg1l'
-              />
-              )
+          'info-panel-wrap-pin': props.infoPanelPinned
         }
-
-      </div>
-      <div className='pd2'>
-        <TerminalInfoBase {...props} {...state} />
-        <TerminalInfoUp {...props} {...state} />
-        <TerminalInfoResource
-          {...props} {...state}
-        />
-        <TerminalInfoActivities
-          {...props}
-          {...state}
-          killProcess={killProcess}
+      ),
+      id: 'info-panel-wrap',
+      draggable: false,
+      style: {
+        width: props.rightSidebarWidth,
+        top: props.topMenuHeight + props.tabsHeight + termControlHeight - 4
+      }
+    }
+    return (
+      <div
+        {...pops1}
+      >
+        <div
+          className='drag-handle'
+          onMouseDown={this.handleMousedown}
+          draggable={false}
         />
-        <TerminalInfoNetwork {...props} {...state} />
-        <TerminalInfoDisk {...props} {...state} />
-        <RunCmd {...props} setState={setState} />
+        <div className='pd2t pd2x'>
+          <CloseCircleOutlined
+            {...pops}
+          />
+          <PushpinOutlined
+            {...pops2}
+          />
+        </div>
+        <div className='pd2'>
+          <TerminalInfoBase {...props} {...state} />
+          <TerminalInfoUp {...props} {...state} />
+          <TerminalInfoResource
+            {...props} {...state}
+          />
+          <TerminalInfoActivities
+            {...props}
+            {...state}
+            killProcess={this.killProcess}
+          />
+          <TerminalInfoNetwork {...props} {...state} />
+          <TerminalInfoDisk {...props} {...state} />
+          <RunCmd {...props} setState={this.setStateRef} />
+        </div>
       </div>
-    </div>
-  )
+    )
+  }
 }

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

@@ -4,17 +4,20 @@
   &:hover
     color text
 .info-panel-wrap
-  position fixed
+  position absolute
   right 0
   top 100px
   bottom 0
   width 500px
-  background main
+  background main-light
   color text
-  box-shadow 0px 3px 3px 3px alpha(main, .25)
   z-index 100
   overflow-y scroll
   opacity .9
+  .drag-handle
+    left 0
+    right auto
+    display block
 .terminal-info-section
   padding 10px 0
 .terminal-info-act
@@ -26,4 +29,7 @@
   .activity-item-copy
     display none
   &:hover .activity-item-copy
-    display inline
+    display inline
+.info-panel-wrap-pin
+  .toggle-info-panel-wrap
+    color success

package/client/store/common.js

@@ -8,8 +8,11 @@ import postMessage from '../common/post-msg'
 import {
   commonActions,
   tabActions,
-  modals
+  modals,
+  leftSidebarWidthKey,
+  rightSidebarWidthKey
 } from '../common/constants'
+import * as ls from '../common/safe-local-storage'
 
 export default Store => {
   Store.prototype.storeAssign = function (updates) {
@@ -137,4 +140,14 @@ export default Store => {
       ...update
     })
   }
+
+  Store.prototype.setLeftSidePanelWidth = function (v) {
+    ls.setItem(leftSidebarWidthKey, v)
+    window.store.leftSidebarWidth = v
+  }
+
+  Store.prototype.setRightSidePanelWidth = function (v) {
+    ls.setItem(rightSidebarWidthKey, v)
+    window.store.rightSidebarWidth = v
+  }
 }

package/client/store/init-state.js

@@ -15,7 +15,9 @@ import {
   batchInputLsKey,
   expandedKeysLsKey,
   checkedKeysLsKey,
-  localAddrBookmarkLsKey
+  localAddrBookmarkLsKey,
+  leftSidebarWidthKey,
+  rightSidebarWidthKey
 } from '../common/constants'
 import { buildDefaultThemes, buildNewTheme } from '../common/terminal-theme'
 import * as ls from '../common/safe-local-storage'
@@ -141,6 +143,8 @@ export default () => {
 
     // sidebar
     openedSideBar: ls.getItem(openedSidebarKey),
+    leftSidebarWidth: parseInt(ls.getItem(leftSidebarWidthKey), 10) || 300,
+    rightSidebarWidth: parseInt(ls.getItem(rightSidebarWidthKey), 10) || 500,
     menuOpened: false,
     pinned: ls.getItem(sidebarPinnedKey) === 'true',
 

package/client/store/setting.js

@@ -2,7 +2,7 @@
  * setting modal
  */
 
-import { find, isEqual, pick, without, findIndex } from 'lodash-es'
+import { find, isEqual, pick, without } from 'lodash-es'
 import {
   message
 } from 'antd'
@@ -113,14 +113,8 @@ export default Store => {
         pick(j, without(keysj, 'id'))
       )
     })
-    if (!existItem) {
-      store.addItem(item, settingMap.history)
-    } else {
-      const index = findIndex(history, f => f.id === existItem.id)
-      history.splice(index, 1)
-      history.unshift(existItem)
-      store.setItems('history', history)
-    }
+    history.unshift(existItem)
+    store.setItems('history', history)
   }
 
   Store.prototype.openSetting = function () {

package/package.json

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