modify filt-tag style

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

@@ -82,7 +82,7 @@ class EditFileTagDialog extends React.Component {
     let repoTagIdList = this.getRepoTagIdList();
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('File Tags')}</ModalHeader>
+        <ModalHeader toggle={this.toggle}>{gettext('Select Tags')}</ModalHeader>
         <ModalBody>
           {
             <ul className="tag-list tag-list-container">

frontend/src/components/dir-view/dir-panel.js

@@ -147,7 +147,7 @@ class DirPanel extends React.Component {
             searchPlaceholder={'Search files in this library'}
           />
         </div>
-        <div className="main-panel-center flex-direction-row">
+        <div className="main-panel-center flex-row">
           {!this.props.libNeedDecrypt &&
           <div className="cur-view-container">
             <div className="cur-view-path">

frontend/src/components/dirent-detail/detail-list-view.js

@@ -84,14 +84,14 @@ class DetailListView extends React.Component {
                   <ul className="file-tag-list">
                     {fileTagList.map((fileTag) => {
                       return (
-                        <li key={fileTag.id}>
+                        <li key={fileTag.id} className="file-tag-item">
                           <span className={`file-tag bg-${fileTag.color}`}></span>
-                          <span className="tag-name">{fileTag.name}</span>
+                          <span className="tag-name" title={fileTag.name}>{fileTag.name}</span>
                         </li>
                       );
                     })}
                   </ul>
-                  <i className='fa fa-pencil' onClick={this.onEditFileTagToggle}></i>
+                  <i className='fa fa-pencil tag-edit-icon' onClick={this.onEditFileTagToggle}></i>
                 </td>
               </tr>
             </tbody>

frontend/src/components/dirent-list-view/dirent-list-view.js

@@ -62,11 +62,11 @@ class DirentListView extends React.Component {
             <th width="3%" className="select">
               <input type="checkbox" className="vam" onChange={this.props.onAllItemSelected} checked={this.props.isAllItemSelected}/>
             </th>
-            <th width="3%"></th>
+            <th width="3%">{/*icon */}</th>
-            <th width="5%"></th>
+            <th width="5%">{/*star */}</th>
-            <th width="35%">{gettext('Name')}</th>
+            <th width="39%">{gettext('Name')}</th>
-            <th width="10%"></th>
+            <th width="6%">{/*tag */}</th>
-            <th width="20%"></th>
+            <th width="20%">{/*operation */}</th>
             <th width="11%">{gettext('Size')}</th>
             <th width="13%">{gettext('Last Update')}</th>
           </tr>

frontend/src/css/repo-tag.css

@@ -48,3 +48,26 @@
   position: absolute;
   right: 0.5rem;
 }
+
+.tag-edit-icon {
+  padding: 0 0.5rem;
+  color: #888;
+  cursor: pointer;
+}
+
+.tag-edit-icon:hover {
+  color: #333;
+}
+
+.file-tag-item {
+  margin: 0.25rem 0;
+  padding: 0 0.5rem;
+  width: max-content;
+  cursor: pointer;
+  background-color: #eee;
+  border-radius: 1rem;
+}
+
+.file-tag-item:hover {
+  background-color: #bbb;
+}

media/css/seahub_react.css

@@ -1010,7 +1010,7 @@ table .menu-toggle {
 }
 
 .tag-list-stacked .file-tag{
-    margin-left: -0.5rem;
+    margin-left: -0.35rem;
     box-shadow: 0 0 0 2px #fff;
     cursor: pointer;
 }
@@ -1018,8 +1018,8 @@ table .menu-toggle {
 .file-tag {
     position: relative;
     display: inline-block;
-    width: 1rem;
+    width: 0.75rem;
-    height: 1rem;
+    height: 0.75rem;
     border-radius: 50%;
 }