@electerm/electerm-react 1.37.121 → 1.37.128

package/client/components/batch-op/batch-op.jsx

@@ -540,6 +540,11 @@ export default class BatchOp extends Component {
 
   renderTab = (tab) => {
     const data = this.state[tab]
+    const keeps = [
+      'index',
+      'host',
+      'state'
+    ]
     const columns = [
       'index',
       'host',
@@ -556,7 +561,8 @@ export default class BatchOp extends Component {
         title: this.translate(k),
         dataIndex: k,
         key: k,
-        render: (k) => k || ''
+        render: (k) => k || '',
+        responsive: keeps.includes(k) ? undefined : ['md', 'lg', 'xl', 'xxl']
       }
     })
     if (tab === 'tasks') {

package/client/components/common/input-auto-focus.jsx

@@ -3,6 +3,7 @@
  */
 
 import { Input } from 'antd'
+import InputNative from './native-input'
 import React from 'react'
 import { findLastIndex } from 'lodash-es'
 import uid from '../../common/uid'
@@ -57,7 +58,7 @@ export default class InputAutoFocus extends React.PureComponent {
     const { type, ...rest } = this.props
     const Dom = type === 'password'
       ? Input.Password
-      : Input
+      : type === 'native' ? InputNative : Input
     return (
       <Dom
         {...rest}

package/client/components/common/logo-elem.jsx

@@ -5,16 +5,17 @@ import {
   packInfo
 } from '../../common/constants'
 import { Tag } from 'antd'
+import './logo.styl'
 
 export default function LogoElem () {
   return (
     <h1 className='mg3y font50'>
       <span className='iblock pd3 morph-shape mg1l mg1r'>
-        <img src={logoPath2} height={80} className='iblock mwm-100 mg1l mg1r logo-filter' />
+        <img src={logoPath2} className='iblock mwm-100 mg1l mg1r logo-filter logo-img' />
       </span>
-      <img src={logoPath3} height={80} className='hide' />
+      <img src={logoPath3} className='hide logo-img' />
       <sup>
-        <img src={logoPath1} height={28} className='iblock mwm-100 mg1r' />
+        <img src={logoPath1} className='iblock mwm-100 mg1r logo-img-small' />
       </sup>
       <Tag color='#08c'>{packInfo.version}</Tag>
     </h1>

package/client/components/common/logo.styl

@@ -0,0 +1,9 @@
+.logo-img
+  height 80px
+.logo-img-small
+  height 28px
+@media (max-width: 500px)
+  .logo-img
+    height 40px
+  .logo-img-small
+    height 20px

package/client/components/common/native-input.jsx

@@ -0,0 +1,30 @@
+/**
+ * input with auto focus
+ */
+
+import React from 'react'
+import './native-input.styl'
+
+export default function InputNative (props) {
+  const { value, type, onChange, onPressEnter, addonAfter = null, ...rest } = props
+  return (
+    <span
+      className='ant-input-group-wrapper'
+      data-id={props['data-id']}
+    >
+      <span className='ant-input-wrapper ant-input-group'>
+        <input
+          class='ant-input native-input'
+          type='text'
+          value={value}
+          onChange={onChange}
+          onPressEnter={onPressEnter}
+          {...rest}
+        />
+      </span>
+      <span class='ant-input-group-addon'>
+        {addonAfter}
+      </span>
+    </span>
+  )
+}

package/client/components/common/native-input.styl

@@ -0,0 +1,7 @@
+@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/footer/footer-entry.jsx

@@ -80,7 +80,7 @@ export default class SystemMenu extends Component {
       <div className='terminal-footer-unit terminal-footer-info'>
         <div className='fleft relative'>
           <Select
-            style={{ minWidth: 100 }}
+            style={{ minWidth: 30 }}
             placeholder={f('encode')}
             defaultValue={this.props.currentTab?.encode}
             onSelect={this.handleSwitchEncoding}

package/client/components/footer/footer.styl

@@ -21,7 +21,7 @@
     line-height 24px
 .terminal-footer-unit
   margin-left 10px
-  line-height 34px
+  line-height 39px
   textarea.ant-input
     min-height 26px
     height 26px
@@ -44,4 +44,13 @@
     .bi-compact
       display none
 .batch-input-holder
-  width 100px
+  width 100px
+@media (max-width: 500px)
+  .batch-input-outer
+    &.bi-show
+      position fixed
+      left 100px
+      right 0
+      bottom 0
+      z-index 100
+      background main

package/client/components/main/wrapper.styl

@@ -1,6 +1,4 @@
 @require '../../css/includes/theme-default'
-#container
-  min-width 600px
 .common-err-desc
   &:hover
     text-overflow clip

package/client/components/quick-commands/qm.styl

@@ -27,3 +27,6 @@
     &.label-match
       font-weight bold
       opacity 1
+@media (max-width: 500px)
+  .qm-search-input
+    width 100px

package/client/components/quick-commands/quick-commands-box.jsx

@@ -193,7 +193,7 @@ export default class QuickCommandsFooterBox extends Component {
                 value={this.state.keyword}
                 onChange={this.handleChange}
                 placeholder=''
-                className='iblock'
+                className='iblock qm-search-input'
               />
             </span>
             <span className='fleft mg1l'>

package/client/components/quick-commands/quick-commands-select.jsx

@@ -30,7 +30,8 @@ export default class QuickCommandsFooter extends PureComponent {
           onMouseEnter={this.handleOpen}
           onMouseLeave={this.handleMouseLeave}
         >
-          {e('quickCommands')}
+          <span className='w500'>{e('quickCommands')}</span>
+          <span className='l500'>Q</span>
         </Button>
       </div>
     )

package/client/components/session/session.jsx

@@ -506,6 +506,11 @@ export default class SessionWrapper extends Component {
         }
       )
     }
+    const simpleMapper = {
+      [paneMap.terminal]: 'T',
+      [paneMap.fileManager]: 'F',
+      [paneMap.ssh]: 'T'
+    }
     return (
       <div
         className='terminal-control fix'
@@ -527,7 +532,8 @@ export default class SessionWrapper extends Component {
                   onClick={() => this.onChangePane(types[i])}
                 >
                   <span className='type-tab-txt'>
-                    {e(type)}
+                    <span className='w500'>{e(type)}</span>
+                    <span className='l500'>{simpleMapper[type]}</span>
                     <span className='type-tab-line' />
                   </span>
                 </span>

package/client/components/setting-panel/setting-common.jsx

@@ -251,7 +251,7 @@ export default class SettingCommon extends Component {
     )
   }
 
-  renderNumber = (name, options, title = '', width = 136) => {
+  renderNumber = (name, options, title = '', width = '100%') => {
     let value = this.props.config[name]
     if (options.valueParser) {
       value = options.valueParser(value)
@@ -286,7 +286,7 @@ export default class SettingCommon extends Component {
         return vv
       }
       opts.style = {
-        width: width + 'px'
+        width
       }
     }
     return (
@@ -554,7 +554,7 @@ export default class SettingCommon extends Component {
             step: 200,
             min: 100,
             cls: 'timeout-desc'
-          }, e('timeoutDesc'), 400)
+          }, e('timeoutDesc'))
         }
         {
           this.renderNumber('keepaliveInterval', {
@@ -563,7 +563,7 @@ export default class SettingCommon extends Component {
             max: 20000000,
             cls: 'keepalive-interval-desc',
             extraDesc: '(ms)'
-          }, e('keepaliveIntervalDesc'), 400)
+          }, e('keepaliveIntervalDesc'))
         }
         {
           this.renderNumber('opacity', {
@@ -571,7 +571,7 @@ export default class SettingCommon extends Component {
             min: 0,
             max: 1,
             cls: 'opacity'
-          }, e('opacity'), 400)
+          }, e('opacity'))
         }
 
         <div className='pd2b'>

package/client/components/setting-panel/setting-wrap.styl

@@ -47,4 +47,31 @@ body .ant-drawer .ant-drawer-content-wrapper
   padding 55px 20px 0 50px
 .setting-col
   ::-webkit-scrollbar
-    width 0
+    width 0
+@media (max-width: 1100px)
+  .setting-col
+    position fixed
+    top 128px
+    bottom 0
+    left 43px
+    right 0
+    overflow-y scroll
+  .setting-row
+    position static
+    top auto
+  .setting-row-left
+    left auto
+    width auto
+    bottom auto
+    padding 138px 10px 10px 10px
+  .setting-row-right
+    left auto
+    right auto
+    bottom auto
+    top auto
+    padding 10px
+  .setting-tabs-bookmarks
+    .setting-row-left
+      width auto
+    .setting-row-right
+      left auto

package/client/components/setting-panel/tree-list.jsx

@@ -590,6 +590,7 @@ export default class ItemListTree extends Component {
         onChange={this.handleChangeEdit}
         onPressEnter={this.handleSubmitEdit}
         addonAfter={confirm}
+        type='native'
       />
     )
   }
@@ -902,6 +903,7 @@ export default class ItemListTree extends Component {
             onPressEnter={this.handleSubmitSub}
             onChange={this.handleChangeBookmarkGroupTitleSub}
             addonAfter={confirm}
+            type='native'
           />
         )}
       />

package/client/components/sftp/file-item.jsx

@@ -295,7 +295,6 @@ export default class FileSection extends React.Component {
     } = toFile
 
     let operation = ''
-
     // same side and drop to file = drop to folder
     if (!fromFileManager && fromType === toType && !isDirectoryTo) {
       return
@@ -331,9 +330,9 @@ export default class FileSection extends React.Component {
   filterFiles = async (files) => {
     const res = []
     for (const file of files) {
-      const { base, path } = file
+      const { name, path } = file
       const info = await getLocalFileInfo(
-        resolve(path, base)
+        resolve(path, name)
       )
       if (info) {
         res.push(info)

package/client/css/basic.styl

@@ -38,4 +38,4 @@ body
   display: none !important
 
 a
-  color primary
+  color primary

package/client/css/mobile.styl

@@ -0,0 +1,8 @@
+.l500
+  display none !important
+
+@media (max-width: 500px)
+  .w500
+    display none !important
+  .l500
+    display inline !important

package/client/entry/basic.js

@@ -2,6 +2,7 @@
  * init app data then write main script to html body
  */
 import '../css/basic.styl'
+import '../css/mobile.styl'
 import { get as _get } from 'lodash-es'
 import '../common/pre'
 

package/package.json

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