[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);
   }
@@ -26,12 +46,13 @@ class TagListItem extends React.Component {
     let color = this.props.item.color;
     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,18 +95,17 @@ 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 (
@@ -98,10 +118,9 @@ class ListTagDialog extends React.Component {
                 );
               })}
             </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();
   }

frontend/src/css/repo-tag.css

@@ -1,11 +1,21 @@
 .tag-list-container {
-  padding: 0.5rem;
-  padding-bottom: 0;
   max-height: 15rem;
   list-style: none;
   overflow: auto;
 }
 
+.add-tag-link {
+  display: block;
+  color: #666;
+  padding: .4rem .5rem;
+  border-radius: 4px;
+  text-decoration: underline;
+}
+.add-tag-link:hover {
+  color: #444;
+  background: #eee;
+}
+
 .tag-list-item {
   position: relative;
   display: flex;
@@ -17,18 +27,20 @@
 .tag-list-item .tag-demo {
   flex: 1;
   border-radius: 0.25rem;
-  padding-left: 0.5rem;
   display: flex;
   align-items: center;
   color: #ffffff;
+  overflow: hidden;
 }
 
-.tag-list-item .tag-demo:hover {
-  border-left: 0.75rem solid #eb8205;
+.show-tag-selected {
+  width: .5em;
+  align-self: stretch;
 }
 
 .tag-demo .tag-name {
   flex: 1;
+  padding-left: 0.5rem;
 }
 
 .tag-demo .tag-files {