@electerm/electerm-react 1.100.20 → 1.100.46

package/client/components/tree-list/tree-list-item.jsx

@@ -195,6 +195,16 @@ export default function TreeListItem (props) {
     }
   )
   const tag = isGroup ? '' : createTitleTag(item)
+  const colorTag = isGroup && item.color
+    ? (
+      <span
+        className='category-color-tag'
+        style={{
+          backgroundColor: item.color
+        }}
+      />
+      )
+    : null
   const title = isGroup
     ? item.title
     : createName(item)
@@ -236,7 +246,7 @@ export default function TreeListItem (props) {
       <div
         {...titleProps}
       >
-        {tag}{titleHighlight}
+        {colorTag}{tag}{titleHighlight}
       </div>
       {
         isGroup

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

@@ -28,6 +28,8 @@ import TreeExpander from './tree-expander'
 import TreeListItem from './tree-list-item'
 import TreeSearch from './tree-search'
 import MoveItemModal from './move-item-modal'
+import { CategoryColorPicker } from './category-color-picker.jsx'
+import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
 
 export default class ItemListTree extends Component {
   constructor (props) {
@@ -41,7 +43,9 @@ export default class ItemListTree extends Component {
       moveItem: null,
       moveItemIsGroup: false,
       bookmarkGroupTitle: '',
+      bookmarkGroupColor: '',
       categoryTitle: '',
+      categoryColor: '',
       categoryId: ''
     }
   }
@@ -110,7 +114,8 @@ export default class ItemListTree extends Component {
   handleCancelNew = () => {
     this.setState({
       showNewBookmarkGroupForm: false,
-      bookmarkGroupTitle: ''
+      bookmarkGroupTitle: '',
+      bookmarkGroupColor: ''
     })
   }
 
@@ -123,7 +128,8 @@ export default class ItemListTree extends Component {
   handleCancelEdit = () => {
     this.setState({
       categoryId: '',
-      categoryTitle: ''
+      categoryTitle: '',
+      categoryColor: ''
     })
   }
 
@@ -140,6 +146,7 @@ export default class ItemListTree extends Component {
   handleSubmitEdit = () => {
     const {
       categoryTitle,
+      categoryColor,
       categoryId
     } = this.state
     if (!categoryTitle) {
@@ -153,6 +160,9 @@ export default class ItemListTree extends Component {
       return this.handleCancelEdit()
     }
     obj.title = categoryTitle
+    if (categoryColor) {
+      obj.color = categoryColor
+    }
     this.setState({
       categoryId: ''
     })
@@ -181,6 +191,18 @@ export default class ItemListTree extends Component {
     })
   }
 
+  handleChangeBookmarkGroupColor = color => {
+    this.setState({
+      bookmarkGroupColor: color
+    })
+  }
+
+  handleChangeCategoryColor = color => {
+    this.setState({
+      categoryColor: color
+    })
+  }
+
   handleNewBookmark = () => {
     this.props.onClickItem(getInitItem([], settingMap.bookmarks))
   }
@@ -197,11 +219,15 @@ export default class ItemListTree extends Component {
       showNewBookmarkGroupForm: false
     }, () => {
       this.onSubmit = false
-      window.store.addBookmarkGroup({
+      const newGroup = {
         id: uid(),
         title: this.state.bookmarkGroupTitle,
         bookmarkIds: []
-      })
+      }
+      if (this.state.bookmarkGroupColor) {
+        newGroup.color = this.state.bookmarkGroupColor
+      }
+      window.store.addBookmarkGroup(newGroup)
     })
   }
 
@@ -227,6 +253,9 @@ export default class ItemListTree extends Component {
       level: 2,
       bookmarkIds: []
     }
+    if (this.state.bookmarkGroupColor) {
+      newCat.color = this.state.bookmarkGroupColor
+    }
     bookmarkGroups.unshift(newCat)
     const cat = bookmarkGroups.find(
       d => d.id === id
@@ -244,6 +273,7 @@ export default class ItemListTree extends Component {
     this.setState({
       showNewBookmarkGroupForm: true,
       bookmarkGroupTitle: '',
+      bookmarkGroupColor: getRandomDefaultColor(),
       parentId: ''
     })
   }
@@ -309,6 +339,7 @@ export default class ItemListTree extends Component {
     if (isGroup) {
       this.setState({
         categoryTitle: '' + item.title,
+        categoryColor: item.color || '',
         categoryId: item.id,
         bookmarkGroupSubParentId: ''
       })
@@ -322,7 +353,8 @@ export default class ItemListTree extends Component {
       return {
         showNewBookmarkGroupForm: true,
         parentId: item.id,
-        bookmarkGroupTitle: ''
+        bookmarkGroupTitle: '',
+        bookmarkGroupColor: getRandomDefaultColor()
       }
     })
     window.store.expandedKeys.push(item.id)
@@ -385,7 +417,6 @@ export default class ItemListTree extends Component {
     if (tar) {
       target = tar
     }
-    console.log('tar', target, tar)
     const dataDragged = e.dataTransfer.getData('idDragged')
     const [idDragged, pidDrags, isGroupDragged] = dataDragged.split('@')
     const isGroupDrag = isGroupDragged === 'true'
@@ -519,7 +550,8 @@ export default class ItemListTree extends Component {
 
   editCategory = () => {
     const {
-      categoryTitle
+      categoryTitle,
+      categoryColor
     } = this.state
     const confirm = (
       <span>
@@ -527,11 +559,18 @@ export default class ItemListTree extends Component {
         <CloseOutlined className='mg1l pointer' onClick={this.handleCancelEdit} />
       </span>
     )
+    const colorPicker = (
+      <CategoryColorPicker
+        value={categoryColor || getRandomDefaultColor()}
+        onChange={this.handleChangeCategoryColor}
+      />
+    )
     return (
       <InputAutoFocus
         value={categoryTitle}
         onChange={this.handleChangeEdit}
         onPressEnter={this.handleSubmitEdit}
+        addonBefore={colorPicker}
         addonAfter={confirm}
       />
     )
@@ -693,6 +732,7 @@ export default class ItemListTree extends Component {
   renderNewCat = (group) => {
     const {
       bookmarkGroupTitle,
+      bookmarkGroupColor,
       parentId,
       showNewBookmarkGroupForm
     } = this.state
@@ -705,12 +745,19 @@ export default class ItemListTree extends Component {
         <CloseOutlined className='mg1l pointer' onClick={this.handleCancelNew} />
       </span>
     )
+    const colorPicker = (
+      <CategoryColorPicker
+        value={bookmarkGroupColor || getRandomDefaultColor()}
+        onChange={this.handleChangeBookmarkGroupColor}
+      />
+    )
     return (
       <div className='pd1y'>
         <InputAutoFocus
           value={bookmarkGroupTitle}
           onPressEnter={this.handleSubmit}
           onChange={this.handleChangeBookmarkGroupTitle}
+          addonBefore={colorPicker}
           addonAfter={confirm}
           onBlur={this.handleBlurBookmarkGroupTitle}
         />

package/client/components/tree-list/tree-list.styl

@@ -67,4 +67,13 @@
   top 0
   width 12px
   font-size 11px
-  line-height 30px
+  line-height 30px
+
+.category-color-tag
+  display inline-block
+  width 12px
+  height 12px
+  margin-right 6px
+  border-radius 2px
+  border 1px solid rgba(0,0,0,0.1)
+  vertical-align middle

package/client/store/init-state.js

@@ -28,6 +28,7 @@ import { buildDefaultThemes } from '../common/terminal-theme'
 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
 
@@ -36,7 +37,8 @@ function getDefaultBookmarkGroups (bookmarks) {
     JSON.stringify({
       title: e(defaultBookmarkGroupId),
       id: defaultBookmarkGroupId,
-      bookmarkIds: bookmarks.map(d => d.id)
+      bookmarkIds: bookmarks.map(d => d.id),
+      color: getRandomDefaultColor()
     })
   ]
 }

package/client/store/sync.js

@@ -514,7 +514,12 @@ export default (Store) => {
       'modelAI',
       'roleAI',
       'languageAI',
-      'proxyAI'
+      'proxyAI',
+      'disableDeveloperTool',
+      'terminalBackgroundText',
+      'terminalBackgroundTextSize',
+      'terminalBackgroundTextColor',
+      'terminalBackgroundTextFontFamily'
     ]
     return pick(store.config, configSyncKeys)
   }

package/package.json

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