optimized tag-item-hover state (#2822)

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

@@ -5,6 +5,87 @@ import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import RepoTag from '../../models/repo-tag';
 
+const TagItemPropTypes = {
+  repoTag: PropTypes.object.isRequired,
+  fileTagList: PropTypes.array.isRequired,
+  onEditFileTag: PropTypes.func.isRequired,
+};
+
+class TagItem extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      showSelectedTag: false
+    };
+  }
+
+  onMouseEnter = () => {
+    this.setState({
+      showSelectedTag: true
+    });
+  }
+
+  onMouseLeave = () => {
+    this.setState({
+      showSelectedTag: false
+    });
+  }
+
+  getRepoTagIdList = () => {
+    let repoTagIdList = [];
+    let fileTagList = this.props.fileTagList;
+    fileTagList.map((fileTag) => {
+      repoTagIdList.push(fileTag.repo_tag_id);
+    });
+    return repoTagIdList;
+  }
+
+  onEditFileTag = () => {
+    let { repoID, repoTag, filePath } = this.props;
+    let repoTagIdList = this.getRepoTagIdList();
+    if (repoTagIdList.indexOf(repoTag.id) === -1) {
+      let id = repoTag.id;
+      seafileAPI.addFileTag(repoID, filePath, id).then(() => {
+        repoTagIdList = this.getRepoTagIdList();
+        this.props.onEditFileTag();
+      });
+    } else {
+      let fileTag = null;
+      let fileTagList = this.props.fileTagList;
+      for(let i = 0; i < fileTagList.length; i++) {
+        if (fileTagList[i].repo_tag_id === repoTag.id) {
+          fileTag = fileTagList[i];
+          break;
+        }
+      } 
+      seafileAPI.deleteFileTag(repoID, fileTag.id).then(() => {
+        repoTagIdList = this.getRepoTagIdList();
+        this.props.onEditFileTag();
+      });
+    }
+  }
+
+  render() {
+    let repoTag = this.props.repoTag;
+    let repoTagIdList = this.getRepoTagIdList();
+    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>
+          <span className="tag-name">{repoTag.name}</span>
+          {repoTagIdList.indexOf(repoTag.id) > -1 &&
+            <i className="fas fa-check tag-operation"></i>
+          }
+        </div>
+      </li>
+    )
+  }
+
+}
+
+TagItem.propTypes = TagItemPropTypes;
+
 const propTypes = {
   repoID: PropTypes.string.isRequired,
   filePath: PropTypes.string.isRequired,
@@ -39,47 +120,15 @@ class EditFileTagDialog extends React.Component {
     });
   }
 
-  getRepoTagIdList = () => {
-    let repoTagIdList = [];
-    let fileTagList = this.props.fileTagList;
-    fileTagList.map((fileTag) => {
-      repoTagIdList.push(fileTag.repo_tag_id);
-    });
-    return repoTagIdList;
-  }
-
-  editFileTag = (repoTag) => {
-    let repoID = this.props.repoID;
-    let repoTagIdList = this.getRepoTagIdList();
-    if (repoTagIdList.indexOf(repoTag.id) === -1) {
-      let id = repoTag.id;
-      let filePath = this.props.filePath;
-      seafileAPI.addFileTag(repoID, filePath, id).then(() => {
-        repoTagIdList = this.getRepoTagIdList();
-        this.props.onFileTagChanged();
-      });
-    } else {
-      let fileTag = null;
-      let fileTagList = this.props.fileTagList;
-      for(let i = 0; i < fileTagList.length; i++) {
-        if (fileTagList[i].repo_tag_id === repoTag.id) {
-          fileTag = fileTagList[i];
-          break;
-        }
-      } 
-      seafileAPI.deleteFileTag(repoID, fileTag.id).then(() => {
-        repoTagIdList = this.getRepoTagIdList();
-        this.props.onFileTagChanged();
-      });
-    }
-  }
-
   toggle = () => {
     this.props.toggleCancel();
   }
 
+  onEditFileTag = () => {
+    this.props.onFileTagChanged();
+  }
+
   render() {
-    let repoTagIdList = this.getRepoTagIdList();
     return (
       <Modal isOpen={true} toggle={this.toggle}>
         <ModalHeader toggle={this.toggle}>{gettext('Select Tags')}</ModalHeader>
@@ -88,14 +137,14 @@ class EditFileTagDialog extends React.Component {
             <ul className="tag-list tag-list-container">
               {this.state.repotagList.map((repoTag) => {
                 return (
-                  <li key={repoTag.id} className="tag-list-item" onClick={this.editFileTag.bind(this, repoTag)}>
-                    <div className={`tag-demo bg-${repoTag.color}`}>
-                      <span>{repoTag.name}</span>
-                      {repoTagIdList.indexOf(repoTag.id) > -1 &&
-                        <i className="fas fa-check tag-operation"></i>
-                      }
-                    </div>
-                  </li>
+                  <TagItem 
+                    key={repoTag.id} 
+                    repoTag={repoTag}
+                    repoID={this.props.repoID}
+                    filePath={this.props.filePath}
+                    fileTagList={this.props.fileTagList}
+                    onEditFileTag={this.onEditFileTag}
+                  />
                 );
               })}
             </ul>

frontend/src/css/repo-tag.css

@@ -31,11 +31,10 @@
   align-items: center;
   color: #ffffff;
   overflow: hidden;
-  padding: 10px;
 }
 
 .show-tag-selected {
-  width: .5em;
+  width: 0.5rem;
   align-self: stretch;
 }