modify repo tag color (#3006)

* modify repo tag color * add getDrakColor function
2025-09-12 04:10:47 +00:00 · 2019-02-27 14:14:28 +08:00
parent 344eca259a
commit abd5718931
13 changed files with 63 additions and 13 deletions
--- a/frontend/src/components/cur-dir-path/dir-tool.js
+++ b/frontend/src/components/cur-dir-path/dir-tool.js
@@ -14,6 +14,7 @@ const propTypes = {
  repoName: PropTypes.string.isRequired,
  permission: PropTypes.bool.isRequired,
  currentPath: PropTypes.string.isRequired,
+  updateUsedRepoTags: PropTypes.func.isRequired,
 };

 class DirTool extends React.Component {
@@ -129,6 +130,7 @@ class DirTool extends React.Component {
                    currentTag={this.state.currentTag}
                    onClose={this.onCloseRepoTagDialog}
                    toggleCancel={this.onListTaggedFileToggle}
+                    updateUsedRepoTags={this.props.updateUsedRepoTags}
                  />
                )}
              </Modal>
--- a/frontend/src/components/cur-dir-path/index.js
+++ b/frontend/src/components/cur-dir-path/index.js
@@ -12,6 +12,7 @@ const propTypes = {
  onTabNavClick: PropTypes.func,
  pathPrefix: PropTypes.array,
  isViewFile: PropTypes.bool,
+  updateUsedRepoTags: PropTypes.func.isRequired,
 };

 class CurDirPath extends React.Component {
@@ -33,6 +34,7 @@ class CurDirPath extends React.Component {
          repoName={this.props.repoName} 
          permission={this.props.permission}
          currentPath={this.props.currentPath} 
+          updateUsedRepoTags={this.props.updateUsedRepoTags}
        />
      </Fragment>
    );
--- a/frontend/src/components/dialog/create-tag-dialog.js
+++ b/frontend/src/components/dialog/create-tag-dialog.js
@@ -17,7 +17,7 @@ class CreateTagDialog extends React.Component {
      tagName: '',
      tagColor: '',
      newTag: {},
-      colorList: ['blue', 'azure', 'indigo', 'purple', 'pink', 'red', 'orange', 'yellow', 'lime', 'green', 'teal', 'cyan', 'gray']
+      colorList: ['#FFA8A8', '#FFA94D', '#FFD43B', '#A0EC50', '#A9E34B', '#63E6BE', '#4FD2C9', '#72C3FC', '#91A7FF', '#E599F7', '#B197FC', '#F783AC', '#CED4DA'],
    };
    this.newInput = React.createRef();
  }
@@ -75,14 +75,13 @@ class CreateTagDialog extends React.Component {
              <label className="form-label">{gettext('Select a color')}</label>
              <div className="row gutters-xs">
                {colorList.map((item, index)=>{
-                  var className = 'colorinput-color bg-' + item;
                  return (
                    <div key={index} className="col-auto" onChange={this.selectTagcolor}>
                      <label className="colorinput">
                        {index===0 ?
                          <input name="color" type="radio" value={item} className="colorinput-input" defaultChecked onClick={this.selectTagcolor}></input> :
                          <input name="color" type="radio" value={item} className="colorinput-input" onClick={this.selectTagcolor}></input>}
-                        <span className={className}></span>
+                        <span className="colorinput-color" style={{backgroundColor:item}}></span>
                      </label>
                    </div>
                  );
--- a/frontend/src/components/dialog/edit-filetag-dialog.js
+++ b/frontend/src/components/dialog/edit-filetag-dialog.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
 import RepoTag from '../../models/repo-tag';
 require('../../css/repo-tag.css');

@@ -72,10 +73,11 @@ class TagItem extends React.Component {
  render() {
    let repoTag = this.props.repoTag;
    let repoTagIdList = this.getRepoTagIdList();
+    let drakColor = Utils.getDarkColor(repoTag.color);
    return (
      <li key={repoTag.id} className="tag-list-item" onClick={this.onEditFileTag} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
-        <div className={`tag-demo bg-${repoTag.color}`}>
-          <span className={`bg-${repoTag.color}-dark ${this.state.showSelectedTag ? 'show-tag-selected': ''}`}></span>
+        <div className="tag-demo" style={{backgroundColor:repoTag.color}}>
+          <span className={`${this.state.showSelectedTag ? 'show-tag-selected': ''}`} style={{backgroundColor: drakColor}}></span>
          <span className="tag-name">{repoTag.name}</span>
          {repoTagIdList.indexOf(repoTag.id) > -1 &&
            <i className="fas fa-check tag-operation"></i>
--- a/frontend/src/components/dialog/list-tag-dialog.js
+++ b/frontend/src/components/dialog/list-tag-dialog.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Button, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
 import RepoTag from '../../models/repo-tag';

 import '../../css/repo-tag.css';
@@ -44,10 +45,11 @@ class TagListItem extends React.Component {

  render() {
    let color = this.props.item.color;
+    let drakColor = Utils.getDarkColor(color);
    return (
      <li className="tag-list-item">
-        <div className={`tag-demo bg-${color}`} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
-          <span className={`bg-${color}-dark ${this.state.showSelectedTag ? 'show-tag-selected': ''}`}></span>
+        <div className="tag-demo" style={{backgroundColor:color}} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
+          <span className={`${this.state.showSelectedTag ? 'show-tag-selected': ''}`} style={{backgroundColor: drakColor}}></span>
          <span className="tag-name">{this.props.item.name}</span>
          <span className="tag-files" onClick={this.onListTaggedFiles}>
            {/* todo 0 file 2 files  */}
--- a/frontend/src/components/dialog/update-tag-dialog.js
+++ b/frontend/src/components/dialog/update-tag-dialog.js
@@ -18,7 +18,7 @@ class UpdateTagDialog extends React.Component {
      deleteRepoTag: false,
      newName: this.props.currentTag.name,
      newColor: this.props.currentTag.color,
-      colorList: ['blue', 'azure', 'indigo', 'purple', 'pink', 'red', 'orange', 'yellow', 'lime', 'green', 'teal', 'cyan', 'gray']
+      colorList: ['#FFA8A8', '#FFA94D', '#FFD43B', '#A0EC50', '#A9E34B', '#63E6BE', '#4FD2C9', '#72C3FC', '#91A7FF', '#E599F7', '#B197FC', '#F783AC', '#CED4DA'],
    };
    this.newInput = React.createRef();
  }
@@ -72,6 +72,9 @@ class UpdateTagDialog extends React.Component {

  render() {
    let colorList = this.state.colorList;
+    if (colorList.indexOf(this.props.currentTag.color)===-1) {
+      colorList.push(this.props.currentTag.color);
+    }
    return (
      <Fragment>
        <ModalHeader toggle={this.props.onClose}>
@@ -88,14 +91,13 @@ class UpdateTagDialog extends React.Component {
              <label className="form-label">{gettext('Select a color')}</label>
              <div className="row gutters-xs">
                {colorList.map((item, index)=>{
-                  var className = 'colorinput-color bg-' + item;
                  return (
                    <div key={index} className="col-auto" onChange={this.selectNewcolor}>
                      <label className="colorinput">
                        {item===this.props.currentTag.color ?
                          <input name="color" type="radio" value={item} className="colorinput-input" defaultChecked onChange={this.selectNewcolor}></input> :
                          <input name="color" type="radio" value={item} className="colorinput-input" onChange={this.selectNewcolor}></input>}
-                        <span className={className}></span>
+                        <span className="colorinput-color" style={{backgroundColor:item}}></span>
                      </label>
                    </div>
                  );
--- a/frontend/src/components/dirent-detail/detail-list-view.js
+++ b/frontend/src/components/dirent-detail/detail-list-view.js
@@ -106,7 +106,7 @@ class DetailListView extends React.Component {
                    {fileTagList.map((fileTag) => {
                      return (
                        <li key={fileTag.id} className="file-tag-item">
-                          <span className={`file-tag bg-${fileTag.color}`}></span>
+                          <span className="file-tag" style={{backgroundColor:fileTag.color}}></span>
                          <span className="tag-name" title={fileTag.name}>{fileTag.name}</span>
                        </li>
                      );
--- a/frontend/src/components/dirent-list-view/dirent-list-item.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-item.js
@@ -377,7 +377,7 @@ class DirentListItem extends React.Component {
                  {dirent.file_tags.map((fileTag, index) => {
                    let length = dirent.file_tags.length;
                    return (
-                      <span className={`file-tag bg-${fileTag.color}`} key={fileTag.id} style={{zIndex: length - index }}></span>
+                      <span className="file-tag" key={fileTag.id} style={{zIndex:length - index, backgroundColor:fileTag.color}}></span>
                    );
                  })}
                </div>
--- a/frontend/src/components/file-content-view.js
+++ b/frontend/src/components/file-content-view.js
@@ -102,6 +102,7 @@ class FileContentView extends React.Component {
                  onPathClick={this.props.onMainNavBarClick}
                  onTabNavClick={this.props.onTabNavClick}
                  isViewFile={true}
+                  updateUsedRepoTags={this.props.updateUsedRepoTags}
                />
              )}
            </div>
--- a/frontend/src/components/repo-info-bar.js
+++ b/frontend/src/components/repo-info-bar.js
@@ -75,7 +75,7 @@ class RepoInfoBar extends React.Component {
            {usedRepoTags.map((usedRepoTag) => {
              return (
                <li key={usedRepoTag.id} className="used-tag-item">
-                  <span className={`used-tag bg-${usedRepoTag.color}`}></span>
+                  <span className="used-tag" style={{backgroundColor:usedRepoTag.color}}></span>
                  <span className="used-tag-name" title={usedRepoTag.name}>{usedRepoTag.name}</span>
                  <span className="used-tag-files" onClick={this.onListTaggedFiles.bind(this, usedRepoTag)}>
                    {usedRepoTag.fileCount > 1 ? usedRepoTag.fileCount + ' files' : usedRepoTag.fileCount + ' file'}
--- a/frontend/src/pages/lib-content-view/lib-content-container.js
+++ b/frontend/src/pages/lib-content-view/lib-content-container.js
@@ -136,6 +136,7 @@ class LibContentContainer extends React.Component {
              permission={this.props.repoPermission} 
              onTabNavClick={this.props.onTabNavClick}
              onPathClick={this.onPathClick}
+              updateUsedRepoTags={this.props.updateUsedRepoTags}
            />
          </div>
          <div className={`cur-view-content ${this.props.currentMode === 'column' ? 'view-mode-container' : ''}`}>
--- a/frontend/src/pages/repo-wiki-mode/main-panel.js
+++ b/frontend/src/pages/repo-wiki-mode/main-panel.js
@@ -219,6 +219,7 @@ class MainPanel extends Component {
                  permission={permission} 
                  onPathClick={this.onMainNavBarClick}
                  isViewFile={this.props.isViewFile}
+                  updateUsedRepoTags={this.props.updateUsedRepoTags}
                />
              )}
            </div>
--- a/frontend/src/utils/utils.js
+++ b/frontend/src/utils/utils.js
@@ -706,4 +706,42 @@ export const Utils = {
    return mode;
  },

+  DARK_COLOR_MAP: {
+    // old color
+    'red': '#D11507',
+    'orange': '#FF8C00',
+    'yellow': '#EDEF00',
+    'green': '#006400',
+    'cyan': '#00E0E1',
+    'blue': '#2510A3',
+    'indigo': '#350C56',
+    'purple': '#551054',
+    'pink': '#E3A5B0',
+    'azure': '#C4D0D0',
+    'lime': '#00E100',
+    'teal': '#006A6B',
+    'gray': '#545454',
+
+    // new color
+    '#FFA8A8': '#E49090',
+    '#FFA94D': '#E39136',
+    '#FFD43B': '#E0B815',
+    '#A0EC50': '#83CF32',
+    '#A9E34B': '#8DC72E',
+    '#63E6BE': '#43CAA4',
+    '#4FD2C9': '#2DB9B0',
+    '#72C3FC': '#57ABE3',
+    '#91A7FF': '#7A91E7',
+    '#E599F7': '#CC82DE',
+    '#B197FC': '#9B82E5',
+    '#F783AC': '#DF6D97',
+    '#CED4DA': '#A8ADB2',
+  },
+
+  getDarkColor: function(color) {
+    let darkColor;
+    darkColor = this.DARK_COLOR_MAP[color];
+    return darkColor;
+  },
+
 };