@electerm/electerm-react 1.35.6 → 1.36.2

package/client/common/constants.js

@@ -216,6 +216,7 @@ export const syncTokenCreateUrls = {
   custom: 'https://github.com/electerm/electerm/wiki/Custom-sync-server'
 }
 export const settingSyncId = 'setting-sync'
+export const settingTerminalId = 'setting-terminal'
 export const settingShortcutsId = 'setting-shortcuts'
 export const settingCommonId = 'setting-common'
 export const defaultEnvLang = 'en_US.UTF-8'

package/client/components/auth/login.jsx

@@ -15,6 +15,8 @@ import './login.styl'
 const { prefix } = window
 const f = prefix('form')
 
+window.store = store
+
 export default class Login extends Component {
   state = {
     pass: '',

package/client/components/bookmark-form/color-picker.jsx

@@ -3,6 +3,7 @@ import { Popover } from 'antd'
 import { HexColorPicker } from 'react-colorful'
 import { defaultColors, getRandomHexColor } from '../../common/rand-hex-color.js'
 import { HexInput } from './hex-input.jsx'
+import './color-picker.styl'
 
 // Your Custom Color Picker component
 export const ColorPicker = React.forwardRef((props, ref) => {

package/client/components/bookmark-form/local-form-ui.jsx

@@ -22,6 +22,8 @@ import useQm from './use-quick-commands'
 import copy from 'json-deep-copy'
 import { defaults } from 'lodash-es'
 import renderRunScripts from './render-delayed-scripts.jsx'
+import { ColorPickerItem } from './color-picker-item.jsx'
+import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
 
 const FormItem = Form.Item
 const { prefix } = window
@@ -60,6 +62,7 @@ export default function LocalFormUi (props) {
     term: props.store.config.terminalType,
     displayRaw: false,
     type: terminalLocalType,
+    color: getRandomDefaultColor(),
     runScripts: [{}],
     enableSsh: true
   }
@@ -75,10 +78,11 @@ export default function LocalFormUi (props) {
         <FormItem
           {...formItemLayout}
           label={e('title')}
-          name='title'
           hasFeedback
         >
-          <Input />
+          <FormItem noStyle name='title'>
+            <Input addonBefore={<ColorPickerItem />} />
+          </FormItem>
         </FormItem>
         <FormItem
           {...formItemLayout}

package/client/components/bookmark-form/telnet-form-ui.jsx

@@ -19,6 +19,7 @@ import useSubmit from './use-submit'
 import useUI from './use-ui'
 import useQm from './use-quick-commands'
 import renderCommon from './form-ssh-common'
+import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
 import copy from 'json-deep-copy'
 import { defaultsDeep, uniqBy } from 'lodash-es'
 import './bookmark-form.styl'
@@ -59,6 +60,7 @@ export default function TelnetFormUI (props) {
     id: '',
     username: 'root',
     password: 'guest',
+    color: getRandomDefaultColor(),
     runScripts: [{}],
     term: defaultSettings.terminalType,
     displayRaw: false,

package/client/components/main/custom-css.jsx

@@ -23,6 +23,6 @@ export default function CustomCss (props) {
   }, [])
   useConditionalEffect(() => {
     applyTheme()
-  }, delta && delta.prev && !eq(delta.prev, delta.curr))
+  }, delta && !eq(delta.prev, delta.curr))
   return null
 }

package/client/components/setting-panel/keywords-form.jsx

@@ -0,0 +1,124 @@
+import {
+  Form,
+  Input,
+  Select,
+  Space,
+  Button
+} from 'antd'
+import { formItemLayout } from '../../common/form-layout'
+import {
+  MinusCircleOutlined,
+  PlusOutlined
+} from '@ant-design/icons'
+
+const FormItem = Form.Item
+const FormList = Form.List
+const OptionSel = Select.Option
+const { prefix } = window
+const f = prefix('form')
+
+export default function KeywordForm (props) {
+  const {
+    formData
+  } = props
+  console.log('formData', formData)
+  const [formChild] = Form.useForm()
+  function handleTrigger () {
+    formChild.submit()
+  }
+
+  function handleFinish (data) {
+    props.submit(data)
+  }
+
+  function renderItem (field, i, add, remove) {
+    return (
+      <Space
+        align='center'
+        key={field.key}
+      >
+        <FormItem
+          hasFeedback
+        >
+          <FormItem noStyle required name={[field.name, 'keyword']}>
+            <Input
+              addonBefore={renderBefore(field.name)}
+            />
+          </FormItem>
+        </FormItem>
+        <Button
+          icon={<MinusCircleOutlined />}
+          onClick={() => remove(field.name)}
+          className='mg24b'
+        />
+      </Space>
+    )
+  }
+
+  function renderBefore (name) {
+    const colors = ['red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'white']
+    return (
+      <FormItem name={[name, 'color']} noStyle>
+        <Select>
+          {
+            colors.map(color => {
+              const ps = {
+                className: 'color-picker-choose iblock',
+                style: {
+                  backgroundColor: color
+                }
+              }
+              return (
+                <OptionSel key={color} value={color}>
+                  <span
+                    {...ps}
+                  />
+                </OptionSel>
+              )
+            })
+          }
+        </Select>
+      </FormItem>
+    )
+  }
+
+  return (
+    <div>
+      <Form
+        form={formChild}
+        onValuesChange={handleTrigger}
+        initialValues={formData}
+        onFinish={handleFinish}
+      >
+        <FormItem {...formItemLayout}>
+          <FormList
+            name='keywords'
+          >
+            {
+              (fields, { add, remove }, { errors }) => {
+                return (
+                  <div>
+                    {
+                      fields.map((field, i) => {
+                        return renderItem(field, i, add, remove)
+                      })
+                    }
+                    <FormItem>
+                      <Button
+                        type='dashed'
+                        onClick={() => add()}
+                        icon={<PlusOutlined />}
+                      >
+                        {f('keyword')}
+                      </Button>
+                    </FormItem>
+                  </div>
+                )
+              }
+            }
+          </FormList>
+        </FormItem>
+      </Form>
+    </div>
+  )
+}

package/client/components/setting-panel/{setting.jsx → setting-common.jsx}

@@ -1,6 +1,5 @@
 import React, { Component } from 'react'
 import {
-  CodeOutlined,
   ArrowRightOutlined,
   LoadingOutlined
 } from '@ant-design/icons'
@@ -9,29 +8,21 @@ import {
   Select,
   Switch,
   Input,
-  Upload,
   InputNumber,
   Alert,
   Button,
-  AutoComplete,
-  Tooltip,
   Table,
   Space
 } from 'antd'
 import deepCopy from 'json-deep-copy'
 import {
-  noTerminalBgValue,
   settingMap,
-  rendererTypes,
   proxyHelpLink
 } from '../../common/constants'
 import defaultSettings from '../../common/default-setting'
-import ShowItem from '../common/show-item'
-import { osResolve } from '../../common/resolve'
 import Link from '../common/external-link'
 import { isNumber, isNaN } from 'lodash-es'
 import createEditLangLink from '../../common/create-lang-edit-link'
-import mapper from '../../common/auto-complete-data-mapper'
 import StartSession from './start-session-select'
 import HelpIcon from '../common/help-icon'
 import delay from '../../common/wait.js'
@@ -41,7 +32,6 @@ const { Option } = Select
 const { prefix } = window
 const e = prefix('setting')
 const f = prefix('form')
-const s = prefix('ssh')
 const p = prefix('sftp')
 const t = prefix('terminalThemes')
 
@@ -58,7 +48,7 @@ const keys = [
   })
 ]
 
-export default class Setting extends Component {
+export default class SettingCommon extends Component {
   state = {
     ready: false,
     languageChanged: false,
@@ -202,20 +192,6 @@ export default class Setting extends Component {
     this.onChangeValue(value, 'onStartSessions')
   }
 
-  handleChangeFont = (values) => {
-    this.onChangeValue(
-      values.join(', '),
-      'fontFamily'
-    )
-  }
-
-  handleChangeCursorStyle = (cursorStyle) => {
-    this.onChangeValue(
-      cursorStyle,
-      'cursorStyle'
-    )
-  }
-
   saveConfig = async (ext) => {
     const { config } = this.props
     if (ext.hotkey && ext.hotkey !== config.hotkey) {
@@ -386,111 +362,6 @@ export default class Setting extends Component {
     )
   }
 
-  renderBgOption = item => {
-    return {
-      value: item.value,
-      label: item.desc
-    }
-  }
-
-  renderTerminalBgSelect = (name) => {
-    const value = this.props.config[name]
-    const defaultValue = defaultSettings[name]
-    const onChange = (v) => this.onChangeValue(v, name)
-    const after = (
-      <Upload
-        beforeUpload={(file) => {
-          this.onChangeValue(file.path, name)
-          return false
-        }}
-        showUploadList={false}
-      >
-        <span>{e('chooseFile')}</span>
-      </Upload>
-    )
-    const dataSource = [
-      {
-        value: '',
-        desc: t('default')
-      },
-      {
-        value: noTerminalBgValue,
-        desc: e('noTerminalBg')
-      }
-    ]
-    const numberOpts = { step: 0.05, min: 0, max: 1, cls: 'bg-img-setting' }
-
-    const renderFilter = () => {
-      if (this.props.config[name] === noTerminalBgValue) return
-
-      return (
-        <div>
-          {
-            this.renderNumber(
-              'terminalBackgroundFilterOpacity',
-              numberOpts,
-              e('Opacity')
-            )
-          }
-          {
-            this.renderNumber(
-              'terminalBackgroundFilterBlur',
-              { ...numberOpts, min: 0, max: 50, step: 0.5 },
-              e('Blur')
-            )
-          }
-          {
-            this.renderNumber(
-              'terminalBackgroundFilterBrightness',
-              { ...numberOpts, min: 0, max: 10, step: 0.1 },
-              e('Brightness')
-            )
-          }
-          {
-            this.renderNumber(
-              'terminalBackgroundFilterGrayscale',
-              numberOpts,
-              e('Grayscale')
-            )
-          }
-          {
-            this.renderNumber(
-              'terminalBackgroundFilterContrast',
-              { ...numberOpts, min: 0, max: 10, step: 0.1 },
-              e('Contrast')
-            )
-          }
-        </div>
-      )
-    }
-
-    return (
-      <div className='pd2b'>
-        <div className='pd1b'>
-          <Tooltip
-            title='eg: https://xx.com/xx.png or /path/to/xx.png'
-          >
-            <AutoComplete
-              value={value}
-              onChange={onChange}
-              placeholder={defaultValue}
-              className='width-100'
-              options={dataSource.map(this.renderBgOption)}
-            >
-              <Input
-                addonAfter={after}
-              />
-            </AutoComplete>
-          </Tooltip>
-        </div>
-
-        {
-          renderFilter()
-        }
-      </div>
-    )
-  }
-
   renderReset = () => {
     return (
       <div className='pd1b pd1t'>
@@ -503,20 +374,6 @@ export default class Setting extends Component {
     )
   }
 
-  renderDefaultTerminalType = () => {
-    const opts = this.props.config.terminalTypes.map(mapper)
-    return (
-      <AutoComplete
-        options={opts}
-        style={{
-          width: '200px'
-        }}
-        value={this.props.config.terminalType}
-        onChange={(v) => this.onChangeValue(v, 'terminalType')}
-      />
-    )
-  }
-
   renderProxy () {
     const {
       enableGlobalProxy
@@ -587,82 +444,6 @@ export default class Setting extends Component {
     )
   }
 
-  renderCursorStyleSelect = () => {
-    const {
-      cursorStyle = 'block'
-    } = this.props.config
-    const sets = [
-      {
-        id: 'block',
-        title: '▊'
-      },
-      {
-        id: 'underline',
-        title: '_'
-      },
-      {
-        id: 'bar',
-        title: '|'
-      }
-    ]
-    const props = {
-      onChange: this.handleChangeCursorStyle,
-      value: cursorStyle,
-      style: {
-        width: '100px'
-      }
-    }
-    return (
-      <div className='pd1b'>
-        <span className='inline-title mg1r'>{e('cursorStyle')}</span>
-        <Select
-          {...props}
-          showSearch
-        >
-          {
-            sets.map(f => {
-              return (
-                <Option value={f.id} key={f.id}>
-                  <b>{f.title}</b>
-                </Option>
-              )
-            })
-          }
-        </Select>
-      </div>
-    )
-  }
-
-  renderFontFamily = () => {
-    const { fonts } = this.props.store
-    const { fontFamily } = this.props.config
-    const props = {
-      mode: 'multiple',
-      onChange: this.handleChangeFont,
-      value: fontFamily.split(/, */g)
-    }
-    return (
-      <Select
-        {...props}
-        showSearch
-      >
-        {
-          fonts.map(f => {
-            return (
-              <Option value={f} key={f}>
-                <span style={{
-                  fontFamily: f
-                }}
-                >{f}
-                </span>
-              </Option>
-            )
-          })
-        }
-      </Select>
-    )
-  }
-
   renderLoginPassAfter () {
     const {
       loginPass,
@@ -726,15 +507,12 @@ export default class Setting extends Component {
     const {
       hotkey,
       language,
-      rendererType,
       theme,
       customCss
     } = this.props.config
     const {
-      appPath,
       langs
     } = this.props.store
-    const terminalLogPath = appPath ? osResolve(appPath, 'electerm', 'session_logs') : window.et.sessionLogPath
     const terminalThemes = this.props.store.getSidebarList(settingMap.terminalThemes)
     const [modifier, key] = hotkey.split('+')
     const pops = {
@@ -778,12 +556,6 @@ export default class Setting extends Component {
           />
         </div>
         {this.renderProxy()}
-        {
-          this.renderNumber('scrollback', {
-            step: 200,
-            min: 1000
-          }, e('scrollBackDesc'), 400)
-        }
         {
           this.renderNumber('sshReadyTimeout', {
             step: 200,
@@ -810,7 +582,7 @@ export default class Setting extends Component {
         }
 
         <div className='pd2b'>
-          <span className='inline-title mg1r'>{e('terminalTheme')}</span>
+          <span className='inline-title mg1r'>{t('uiThemes')}</span>
           <Select
             onChange={this.handleChangeTerminalTheme}
             popupMatchSelectWidth={false}
@@ -855,52 +627,6 @@ export default class Setting extends Component {
           <Link className='mg1l' to={createEditLangLink(language)}>{p('edit')}</Link>
         </div>
         {this.renderRestart('languageChanged')}
-        <div className='pd1y font16 bold'>
-          <CodeOutlined className='mg1r' />
-          {s('terminal')} {e('settings')}
-        </div>
-        <div className='pd2b'>
-          <span className='inline-title mg1r'>{e('rendererType')}</span>
-          <Select
-            onChange={v => this.onChangeValue(v, 'rendererType')}
-            value={rendererType}
-            popupMatchSelectWidth={false}
-          >
-            {
-              Object.keys(rendererTypes).map(id => {
-                return (
-                  <Option key={id} value={id}>{id}</Option>
-                )
-              })
-            }
-          </Select>
-        </div>
-        {
-          this.renderNumber('fontSize', {
-            step: 1,
-            min: 9
-          }, `${t('default')} ${e('fontSize')}`, 400)
-        }
-        <div className='pd2b'>
-          <span className='inline-title mg1r'>{t('default')} {e('fontFamily')}</span>
-          {
-            this.renderFontFamily()
-          }
-        </div>
-        <div className='pd2b'>
-          <span className='inline-title mg1r'>{e('defaultTerminalType')}</span>
-          {
-            this.renderDefaultTerminalType()
-          }
-        </div>
-        <div className='pd1b'>{e('terminalBackgroundImage')}</div>
-        {
-          this.renderTerminalBgSelect('terminalBackgroundImagePath')
-        }
-        <div className='pd1b'>{e('terminalWordSeparator')}</div>
-        {
-          this.renderText('terminalWordSeparator', e('terminalWordSeparator'))
-        }
         <div className='pd1b'>{t('default')} {e('execWindows')}</div>
         {
           this.renderTextExec('execWindows')
@@ -913,31 +639,19 @@ export default class Setting extends Component {
         {
           this.renderTextExec('execLinux')
         }
-        {
-          this.renderCursorStyleSelect()
-        }
         {
           [
             'autoRefreshWhenSwitchToSftp',
             'screenReaderMode',
             'initDefaultTabOnStart',
-            'cursorBlink',
-            'rightClickSelectsWord',
-            'pasteWhenContextMenu',
-            'copyWhenSelect',
             'disableSshHistory',
             'disableTransferHistory',
-            'ctrlOrMetaOpenTerminalLink',
             'checkUpdateOnStart',
             'useSystemTitleBar',
             'confirmBeforeExit',
             'debug'
           ].map(this.renderToggle)
         }
-        {this.renderToggle('saveTerminalLogToFile', (
-          <ShowItem to={terminalLogPath} className='mg1l'>{p('open')}</ShowItem>
-        ))}
-
         {this.renderLoginPass()}
         {this.renderReset()}
       </div>