[tags] redesigned the 'select tags' dialog

frontend/src/components/dialog/edit-filetag-dialog.js

@@ -22,28 +22,26 @@ class TagItem extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      showSelectedTag: false
+      isTagHighlighted: false
     };
   }
 
   onMouseEnter = () => {
     this.setState({
-      showSelectedTag: true
+      isTagHighlighted: true
     });
   }
 
   onMouseLeave = () => {
     this.setState({
-      showSelectedTag: false
+      isTagHighlighted: false
     });
   }
 
   getRepoTagIdList = () => {
     let repoTagIdList = [];
     let fileTagList = this.props.fileTagList;
-    fileTagList.map((fileTag) => {
-      repoTagIdList.push(fileTag.repo_tag_id);
-    });
+    repoTagIdList = fileTagList.map((fileTag) => fileTag.repo_tag_id);
     return repoTagIdList;
   }
 
@@ -79,18 +77,22 @@ class TagItem extends React.Component {
   }
 
   render() {
-    let repoTag = this.props.repoTag;
-    let repoTagIdList = this.getRepoTagIdList();
-    let drakColor = Utils.getDarkColor(repoTag.color);
+    const { isTagHighlighted } = this.state;
+    const { repoTag } = this.props;
+    const repoTagIdList = this.getRepoTagIdList();
+    const isTagSelected = repoTagIdList.indexOf(repoTag.id) != -1;
     return (
-      <li key={repoTag.id} className="tag-list-item" onClick={this.onEditFileTag} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
-        <div className="tag-demo" style={{backgroundColor:repoTag.color}}>
-          <span className={`${this.state.showSelectedTag ? 'show-tag-selected': ''}`} style={{backgroundColor: drakColor}}></span>
+      <li
+        className={`tag-list-item px-4 d-flex justify-content-between align-items-center ${isTagHighlighted ? 'hl' : ''}`}
+        onClick={this.onEditFileTag}
+        onMouseEnter={this.onMouseEnter}
+        onMouseLeave={this.onMouseLeave}
+      >
+        <div className="d-flex align-items-center">
+          <span className="tag-color w-4 h-4 rounded-circle" style={{backgroundColor: repoTag.color}}></span>
           <span className="tag-name">{repoTag.name}</span>
-          {repoTagIdList.indexOf(repoTag.id) > -1 &&
-            <i className="fas fa-check tag-operation"></i>
-          }
         </div>
+        {isTagSelected && <i className="fas fa-check tag-selected-icon"></i>}
       </li>
     );
   }
@@ -139,7 +141,7 @@ class TagList extends React.Component {
     return (
       <Fragment>
         <ModalHeader toggle={this.props.toggleCancel}>{gettext('Select Tags')}</ModalHeader>
-        <ModalBody>
+        <ModalBody className="px-0">
           <ul className="tag-list tag-list-container">
             {this.state.repotagList.map((repoTag) => {
               return (
@@ -154,7 +156,14 @@ class TagList extends React.Component {
               );
             })}
           </ul>
-          <a href="#" className="add-tag-link" onClick={this.props.createNewTag}>{gettext('Create a new tag')}</a>
+          <a
+            href="#"
+            className="add-tag-link px-4 py-2 d-flex align-items-center"
+            onClick={this.props.createNewTag}
+          >
+            <span className="sf2-icon-plus mr-2"></span>
+            {gettext('Create a new tag')}
+          </a>
         </ModalBody>
         <ModalFooter>
           <Button onClick={this.props.toggleCancel}>{gettext('Close')}</Button>
@@ -228,4 +237,4 @@ class EditFileTagDialog extends React.Component {
 
 EditFileTagDialog.propTypes = propTypes;
 
-export default EditFileTagDialog;
+export default EditFileTagDialog;

frontend/src/css/repo-tag.css

@@ -5,25 +5,33 @@
 }
 
 .add-tag-link {
-  display: block;
   color: #666;
-  padding: .4rem .5rem;
-  border-radius: 4px;
-  text-decoration: underline;
 }
+
 .add-tag-link:hover {
   color: #444;
-  background: #eee;
+  text-decoration: none;
+  background: #f5f5f5;
 }
 
 .tag-list-item {
-  position: relative;
-  display: flex;
-  justify-content: space-around;
-  margin-bottom: 0.5rem;
   height: 2.25rem;
+  cursor: pointer;
 }
 
+.tag-list-item.hl {
+  background: #f5f5f5;
+}
+
+.tag-color {
+  margin-right: 10px;
+}
+
+.tag-selected-icon {
+  color: #999;
+}
+
+/*
 .tag-list-item .tag-demo {
   flex: 1;
   border-radius: 0.25rem;
@@ -42,6 +50,7 @@
   flex: 1;
   padding-left: 0.5rem;
 }
+*/
 
 .tag-demo .tag-files {
   margin-right: 0.5rem;
@@ -68,10 +77,12 @@
   background-color: rgba(9,45,66,.13);
 }
 
+/*
 .tag-list-item .tag-operation {
   position: absolute;
   right: 0.5rem;
 }
+*/
 
 .file-tag-item {
   margin: 0.25rem 0;