[tag popup] improvements: 'add tag link', 'more colors', 'darker color'

frontend/src/components/dialog/create-tag-dialog.js

@@ -16,7 +16,7 @@ class CreateTagDialog extends React.Component {
       tagName: '',
       tagColor: '',
       newTag: {},
-      colorList: ['lime', 'teal', 'azure', 'green', 'blue', 'purple', 'pink', 'indigo'],
+      colorList: ['blue', 'azure', 'indigo', 'purple', 'pink', 'red', 'orange', 'yellow', 'lime', 'green', 'teal', 'cyan', 'gray']
     };
     this.newInput = React.createRef();
   }

frontend/src/components/dialog/list-tag-dialog.js

@@ -4,6 +4,7 @@ import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import RepoTag from '../../models/repo-tag';
+
 import '../../css/repo-tag.css';
 
 const tagListItemPropTypes = {
@@ -14,6 +15,25 @@ const tagListItemPropTypes = {
 
 class TagListItem extends React.Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      showSelectedTag: false
+    };
+  }
+
+  onMouseOver = () => {
+    this.setState({
+      showSelectedTag: true
+    });
+  }
+
+  onMouseOut = () => {
+    this.setState({
+      showSelectedTag: false
+    });
+  }
+
   onTagUpdate = () => {
     this.props.onTagUpdate(this.props.item);
   }
@@ -24,14 +44,15 @@ class TagListItem extends React.Component {
 
   render() {
     let color = this.props.item.color;
-    return(
+    return (
       <li className="tag-list-item">
-        <span className={`tag-demo bg-${color}`}>
+        <div className={`tag-demo bg-${color}`} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
+          <span className={`bg-${color}-dark ${this.state.showSelectedTag ? 'show-tag-selected': ''}`}></span>
           <span className="tag-name">{this.props.item.name}</span>
           <span className="tag-files" onClick={this.onListTaggedFiles}>
             {this.props.item.fileCount}{' '}{gettext('files')}
           </span>
-        </span>
+        </div>
         <i className="tag-edit fa fa-pencil" onClick={this.onTagUpdate}></i>
       </li>
     );
@@ -74,34 +95,32 @@ class ListTagDialog extends React.Component {
     this.props.onListTagCancel();
   }
 
+  createNewTag = (e) => {
+    e.preventDefault();
+    this.props.onCreateRepoTag();
+  }
+
   render() {
     return (
       <Fragment>
         <Modal isOpen={true} toggle={this.toggle}>
           <ModalHeader toggle={this.toggle}>{gettext('Tags')}</ModalHeader>
           <ModalBody>
-            {this.state.repotagList.length === 0 && (
-              <div className="tag-list tag-list-container">
-                {gettext('Click new tag button to create tags.')}
-              </div>
-            )}
-            {this.state.repotagList.length > 0 && (
-              <ul className="tag-list tag-list-container">
-                {this.state.repotagList.map((repoTag, index) => {
-                  return (
-                    <TagListItem 
-                      key={index} 
-                      item={repoTag} 
-                      onTagUpdate={this.props.onUpdateRepoTag}
-                      onListTaggedFiles={this.props.onListTaggedFiles}
-                    />
-                  );
-                })}
-              </ul>
-            )}
+            <ul className="tag-list tag-list-container">
+              {this.state.repotagList.map((repoTag, index) => {
+                return (
+                  <TagListItem
+                    key={index}
+                    item={repoTag}
+                    onTagUpdate={this.props.onUpdateRepoTag}
+                    onListTaggedFiles={this.props.onListTaggedFiles}
+                  />
+                );
+              })}
+            </ul>
+            <a href="#" className="add-tag-link" onClick={this.createNewTag}>{gettext('Create a new tag')}</a>
           </ModalBody>
           <ModalFooter>
-            <Button color="primary" onClick={this.props.onCreateRepoTag}>{gettext('New Tag')}</Button>
             <Button color="secondary" onClick={this.toggle}>{gettext('Close')}</Button>
           </ModalFooter>
         </Modal>

frontend/src/components/dialog/update-tag-dialog.js

@@ -17,7 +17,7 @@ class UpdateTagDialog extends React.Component {
       deleteRepoTag: false,
       newName: this.props.currentTag.name,
       newColor: this.props.currentTag.color,
-      colorList: ['lime', 'teal', 'azure', 'green', 'blue', 'purple', 'pink', 'indigo'],
+      colorList: ['blue', 'azure', 'indigo', 'purple', 'pink', 'red', 'orange', 'yellow', 'lime', 'green', 'teal', 'cyan', 'gray']
     };
     this.newInput = React.createRef();
   }