@electerm/electerm-react 1.34.30

package/client/components/terminal-theme/theme-list.jsx

@@ -0,0 +1,146 @@
+/**
+ * theme list render
+ */
+
+import List from '../setting-panel/list'
+import { CheckCircleOutlined, PlusOutlined, LoadingOutlined } from '@ant-design/icons'
+import { Tooltip, Pagination } from 'antd'
+import classnames from 'classnames'
+import { defaultTheme } from '../../common/constants'
+import highlight from '../common/highlight'
+import './terminal-theme-list.styl'
+
+const { prefix } = window
+const e = prefix('terminalThemes')
+
+export default class ThemeList extends List {
+  del = (item, e) => {
+    e.stopPropagation()
+    this.props.store.delTheme(item)
+  }
+
+  handlePager = page => {
+    this.setState({ page })
+  }
+
+  renderApplyBtn = item => {
+    if (!item.id) {
+      return null
+    }
+    return (
+      <Tooltip
+        title={e('apply')}
+        placement='topLeft'
+      >
+        <CheckCircleOutlined
+          className='pointer list-item-apply'
+          onClick={() => this.props.store.setTheme(item.id)}
+        />
+      </Tooltip>
+    )
+  }
+
+  onClickTheme = item => {
+    this.props.onClickItem(item)
+  }
+
+  renderItem = (item, i) => {
+    const { activeItemId } = this.props
+    const { theme } = this.props
+    const { name, id } = item
+    const cls = classnames(
+      'item-list-unit theme-item',
+      {
+        current: theme === id
+      },
+      {
+        active: activeItemId === id
+      }
+    )
+    let title = id === defaultTheme.id
+      ? e(id)
+      : name
+    title = highlight(
+      title,
+      this.state.keyword
+    )
+    return (
+      <div
+        key={i + id}
+        className={cls}
+        onClick={() => this.onClickTheme(item)}
+      >
+        <div className='elli pd1y pd2x' title={name}>
+          {
+            !id
+              ? <PlusOutlined className='mg1r' />
+              : null
+          }
+          {title}
+        </div>
+        {
+          id === defaultTheme.id
+            ? null
+            : this.renderDelBtn(item)
+        }
+        {this.renderApplyBtn(item)}
+      </div>
+    )
+  }
+
+  filter = list => {
+    const { keyword, ready } = this.state
+    return keyword
+      ? list.slice(0, ready ? list.length : 2).filter(item => {
+        return item.name.toLowerCase().includes(keyword.toLowerCase())
+      })
+      : list.slice(0, ready ? list.length : 2)
+  }
+
+  paged = list => {
+    const { pageSize, ready, page } = this.state
+    if (!ready) {
+      return list
+    }
+    return list.slice((page - 1) * pageSize, pageSize * page)
+  }
+
+  render () {
+    const { ready, page, pageSize } = this.state
+    let {
+      list = [],
+      type,
+      listStyle = {}
+    } = this.props
+    list = this.filter(list)
+    const all = list.length
+    list = this.paged(this.filter(list))
+    return (
+      <div className={`item-list item-type-${type}`}>
+        {this.renderTransport ? this.renderTransport() : null}
+        {this.renderLabels ? this.renderLabels() : null}
+        {this.renderSearch()}
+        <div className='item-list-wrap' style={listStyle}>
+          {
+            list.map(this.renderItem)
+          }
+        </div>
+        <Pagination
+          onChange={this.handlePager}
+          total={all}
+          current={page}
+          pageSize={pageSize}
+        />
+        {
+          ready
+            ? null
+            : (
+              <div className='pd3 aligncenter'>
+                <LoadingOutlined />
+              </div>
+              )
+        }
+      </div>
+    )
+  }
+}

package/client/components/text-editor/text-editor-form.jsx

@@ -0,0 +1,97 @@
+/**
+ * default text editor for remote file
+ */
+
+import { useEffect } from 'react'
+import { Input, Form, Button } from 'antd'
+
+const FormItem = Form.Item
+
+const { prefix } = window
+const e = prefix('form')
+const c = prefix('common')
+const s = prefix('sftp')
+
+export default function TextEditorForm (props) {
+  const [form] = Form.useForm()
+
+  useEffect(() => {
+    form.resetFields()
+  }, [props.text])
+
+  function submit () {
+    form.submit()
+  }
+
+  async function handleSubmit (res) {
+    props.submit(res)
+  }
+
+  function onPressEnter (e) {
+    e.stopPropagation()
+  }
+
+  function reset () {
+    form.resetFields()
+  }
+
+  const {
+    text,
+    loading
+  } = props
+  const popsEdit = {
+    type: 'primary',
+    className: 'mg3r mg1b',
+    disabled: loading,
+    onClick: props.editWith
+  }
+  const popsCancel = {
+    type: 'dashed',
+    onClick: props.cancel,
+    disabled: loading,
+    className: 'mg2r mg1b'
+  }
+  return (
+    <Form
+      onFinish={handleSubmit}
+      form={form}
+      name='text-edit-form'
+      layout='vertical'
+      initialValues={{ text }}
+    >
+      <FormItem
+        name='text'
+      >
+        <Input.TextArea
+          rows={20}
+          onPressEnter={onPressEnter}
+        >{text}
+        </Input.TextArea>
+      </FormItem>
+      <div className='pd1t pd2b'>
+        <Button
+          {...popsEdit}
+        >{s('editWithSystemEditor')}
+        </Button>
+        <Button
+          type='primary'
+          className='mg1r mg1b'
+          disabled={loading}
+          onClick={submit}
+        >{e('save')}
+        </Button>
+        <Button
+          type='dashed'
+          className='mg1r mg1b'
+          disabled={loading}
+          onClick={reset}
+        >{s('reset')}
+        </Button>
+        <Button
+          {...popsCancel}
+        >{c('cancel')}
+        </Button>
+      </div>
+    </Form>
+  )
+}

package/client/components/text-editor/text-editor.jsx

@@ -0,0 +1,182 @@
+/**
+ * default text editor for remote file
+ */
+
+import { PureComponent } from 'react'
+import TextEditorForm from './text-editor-form'
+import { Spin, Modal } from 'antd'
+import resolve from '../../common/resolve'
+import { commonActions } from '../../common/constants'
+import postMsg from '../../common/post-msg'
+
+const { prefix } = window
+const s = prefix('sftp')
+
+export default class TextEditor extends PureComponent {
+  state = {
+    text: '',
+    path: 'loading...',
+    file: null,
+    id: '',
+    loading: true
+  }
+
+  componentDidMount () {
+    window.addEventListener('message', this.onEvent)
+  }
+
+  setStateProxy = (state, cb) => {
+    if (state && typeof state.file !== 'undefined') {
+      postMsg({
+        action: commonActions.updateStore,
+        value: !!state.file,
+        prop: 'showEditor'
+      })
+    }
+    return this.setState(state, cb)
+  }
+
+  onEvent = (e) => {
+    const {
+      action,
+      data
+    } = e.data || {}
+    if (
+      action === commonActions.openTextEditor && data
+    ) {
+      this.setStateProxy(data)
+      if (data.id && data.file) {
+        this.fetchText(data)
+      } else if (data.id === '') {
+        this.cancel()
+      }
+    } else if (action === commonActions.loadTextEditorText) {
+      this.setStateProxy(data)
+    } else if (action === commonActions.editWithSystemEditorDone) {
+      let cb = this.doSubmit
+      if (data.text === this.state.text) {
+        delete data.text
+        cb = undefined
+      }
+      this.setStateProxy(data, cb)
+    }
+  }
+
+  fetchText = async ({
+    id, file
+  }) => {
+    this.setStateProxy({
+      loading: true
+    })
+    const {
+      path,
+      name,
+      type
+    } = file
+    const p = resolve(path, name)
+    this.setStateProxy({
+      path: p
+    })
+    postMsg({
+      action: commonActions.fetchTextEditorText,
+      id,
+      path: p,
+      type
+    })
+  }
+
+  doSubmit = () => {
+    this.handleSubmit({
+      text: this.state.text
+    }, true)
+  }
+
+  handleSubmit = async (res, force = false) => {
+    this.setStateProxy({
+      loading: true
+    })
+    if (!force && res.text === this.state.text) {
+      return this.cancel()
+    }
+    const {
+      path,
+      file,
+      id
+    } = this.state
+    const {
+      type,
+      mode
+    } = file
+    postMsg({
+      id,
+      path,
+      action: commonActions.submitTextEditorText,
+      text: res.text,
+      mode,
+      type,
+      noClose: force
+    })
+  }
+
+  editWith = () => {
+    this.setStateProxy({
+      loading: true
+    })
+    const {
+      id, text
+    } = this.state
+    postMsg({
+      action: commonActions.editWithSystemEditor,
+      id,
+      text
+    })
+  }
+
+  cancel = () => {
+    this.setStateProxy({
+      id: '',
+      file: null
+    })
+    postMsg({
+      action: commonActions.onCloseTextEditor
+    })
+  }
+
+  render () {
+    const {
+      file,
+      path,
+      loading,
+      text
+    } = this.state
+    if (!file) {
+      return null
+    }
+    const title = `${s('edit')} ${s('remote')} ${s('file')}: ${path}`
+    const propsAll = {
+      footer: null,
+      title,
+      maskClosable: false,
+      onCancel: this.cancel,
+      width: '90%',
+      open: true
+    }
+    const pops = {
+      submit: this.handleSubmit,
+      text,
+      cancel: this.cancel,
+      editWith: this.editWith
+    }
+    return (
+      <Modal
+        {...propsAll}
+      >
+        <Spin spinning={loading}>
+          <TextEditorForm
+            {...pops}
+          />
+        </Spin>
+      </Modal>
+    )
+  }
+}

package/client/css/antd-overwrite.styl

@@ -0,0 +1,14 @@
+
+// .ant-switch-handle::before
+//   background #232340
+// .ant-spin-container
+// .ant-spin-nested-loading
+//   filter none
+#container .ant-spin-blur
+  opacity 1 !important
+.ant-tree-indent-unit
+  width 5px
+.ant-tree .ant-tree-switcher.ant-tree-switcher-noop
+  width 18px
+td.ant-table-column-sort
+  background none

package/client/css/basic.styl

@@ -0,0 +1,38 @@
+@require './includes'
+@require './antd-overwrite'
+@require './includes/theme-default'
+
+html
+  background rgba(0,0,0,.01)
+
+body
+  color main
+  overflow hidden
+  background alpha(main, .3)
+  font-size 12px
+  line-height 1.5715
+  font-family -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
+  font-variant: tabular-nums
+
+::-webkit-scrollbar
+  background alpha(main, .5)
+  width 7px
+
+.term-wrap:hover
+  ::-webkit-scrollbar
+    width 12px
+
+::-webkit-scrollbar-track
+  -webkit-box-shadow none
+
+::-webkit-scrollbar-thumb
+  background-color primary
+  outline none
+
+.common-err
+  max-height 100px
+  overflow-y scroll
+  overflow-x hidden
+  word-break break-all
+.hide-resize-observer
+  display: none !important

package/client/css/includes/box.styl

@@ -0,0 +1,154 @@
+
+for $i, $index in 5 16 32
+  
+  //padding
+  .pd{$index+1}
+    padding ($i)px
+    
+  .pd{$index+1}x
+    padding-left ($i)px
+    padding-right ($i)px
+
+  .pd{$index+1}l
+    padding-left ($i)px
+  
+  .pd{$index+1}r
+    padding-right ($i)px
+    
+  .pd{$index+1}y
+    padding-top ($i)px
+    padding-bottom ($i)px
+
+  .pd{$index+1}t
+    padding-top ($i)px
+  
+  .pd{$index+1}b
+    padding-bottom ($i)px
+
+  //margin
+  .mg{$index+1}
+    margin ($i)px
+    
+  .mg{$index+1}x
+    margin-left ($i)px
+    margin-right ($i)px
+
+  .mg{$index+1}l
+    margin-left ($i)px
+  
+  .mg{$index+1}r
+    margin-right ($i)px
+    
+  .mg{$index+1}y
+    margin-top ($i)px
+    margin-bottom ($i)px
+
+  .mg{$index+1}t
+    margin-top ($i)px
+  
+  .mg{$index+1}b
+    margin-bottom ($i)px
+
+.mg-auto
+  margin-left auto
+  margin-right auto
+.mg0
+  margin 0
+.pd0
+  padding 0
+  
+.block
+  display block
+
+.inline
+  display inline-block
+
+.iblock
+  display inline-block
+  vertical-align middle
+
+.ibblock
+  display inline-block
+  vertical-align baseline
+  
+.itblock
+  display inline-block
+  vertical-align top
+
+.border
+  border 1px solid #e4e4e4
+
+.borderl
+  border-left 1px solid #e4e4e4
+
+.borderr
+  border-right 1px solid #e4e4e4
+
+.borderb
+  border-bottom 1px solid #e4e4e4
+  &.dashed
+    border-bottom 1px dashed #e4e4e4
+
+.bordert
+  border-top 1px solid #e4e4e4
+
+.borderr
+  border-right 1px solid #e4e4e4
+
+.borderl
+  border-left 1px solid #e4e4e4
+
+.border-dashed
+  border-style dashed
+.border-dotted
+  border-style dotted
+
+.hide,
+.hide1, 
+.hide2
+  display none
+
+.hidden
+  visibility hidden
+
+.fleft
+  float left
+
+.fright
+  float right
+
+.fcenter
+  float center
+
+.fix:before,
+.fix:after
+  content " "
+  display table
+
+.fix
+  &:after
+    clear both
+    
+.overhide
+  overflow hidden
+
+.overscroll
+  overflow scroll
+
+.overscroll-y
+  overflow-y scroll
+
+.relative
+  position relative
+.absolute
+  position absolute
+.pointer
+  cursor pointer
+.width-100
+  width 100%
+.width-40
+  width 40%
+.width-60
+  width 60%
+.spin-90
+  transform rotate(90deg)

package/client/css/includes/font-size.styl

@@ -0,0 +1,6 @@
+
+for $size in 12 13 14 16 17 18 20 22 23 30 50 60 100
+
+  .font{$size}
+    font-size ($size)px
+

package/client/css/includes/index.styl

@@ -0,0 +1,3 @@
+@require './box'
+@require './text'
+@require './font-size'

package/client/css/includes/text.styl

@@ -0,0 +1,31 @@
+
+.bold
+  font-weight bold
+
+.em
+  font-style italic
+
+.alignleft
+  text-align left
+
+.alignright
+  text-align right
+
+.aligncenter
+  text-align center
+
+.indent
+  text-indent 2em
+
+.wordbreak
+  word-break break-all
+
+.elli
+  overflow hidden
+  white-space nowrap
+  text-overflow ellipsis
+
+.under-line
+  text-decoration underline
+  &.dashed
+    text-decoration-style dashed

package/client/css/includes/theme-default.styl

@@ -0,0 +1,20 @@
+
+// Function to determine font color based on background color
+contrastColor(color)
+  if (luminance(color) > 0.5)
+    return #000000 // Black font for bright colors
+  else
+    return #ffffff // White font for dark colors
+
+main = #141314
+main-dark = #000
+main-light = #2E3338
+text = #ddd
+text-light = #fff
+text-dark = #888
+text-disabled = #777
+primary = #08c
+info = #FFD166
+success = #06D6A0
+error = #EF476F
+warn = #E55934