Merge pull request #2656 from haiwen/file-tag-improve

File tag improve

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">
@@ -102,7 +102,7 @@ class EditFileTagDialog extends React.Component {
           }
         </ModalBody>
         <ModalFooter>
-          <Button color="primary" onClick={this.toggle}>{gettext('Close')}</Button>
+          <Button onClick={this.toggle}>{gettext('Close')}</Button>
         </ModalFooter>
       </Modal>
     );

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-item.js

@@ -1,5 +1,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import MD5 from 'MD5';
+import { UncontrolledTooltip } from 'reactstrap';
 import { gettext, siteRoot } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
@@ -48,6 +50,7 @@ class DirentListItem extends React.Component {
       isCopyDialogShow: false,
       isShareDialogShow: false,
       isMutipleOperation: false,
+      isShowTagTooltip: false,
     };
     this.zipToken = null;
   }
@@ -373,10 +376,22 @@ class DirentListItem extends React.Component {
     return path === '/' ? path + dirent.name : path + '/' + dirent.name;
   }
 
+  onTagTooltipToggle = (e) => {
+    e.stopPropagation();
+    this.setState({isShowTagTooltip: !this.state.isShowTagTooltip})
+  }
+
   render() {
     let { path, dirent } = this.props;
     let direntPath = Utils.joinPath(path, dirent.name);
     let href = siteRoot + 'wiki/lib/' + this.props.repoID + Utils.encodePath(direntPath);
+    let toolTipID = MD5(dirent.name).slice(0, 7);
+    let tagTitle = '';
+    if (dirent.file_tags && dirent.file_tags.length > 0) {
+      dirent.file_tags.forEach(item => {
+        tagTitle += item.name + ' ';
+      });
+    }
     return (
       <Fragment>
         <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
@@ -400,13 +415,21 @@ class DirentListItem extends React.Component {
             }
           </td>
           <td>
-            <div className="dirent-item tag-list tag-list-stacked ">
-              { dirent.type !== 'dir' && dirent.file_tags.map((fileTag) => {
-                return (
-                  <span className={`file-tag bg-${fileTag.color}`} key={fileTag.id} title={fileTag.name}></span>
-                );
-              })}
-            </div>
+            {(dirent.type !== 'dir' && dirent.file_tags) && (
+              <Fragment>
+                <div id={`tag-list-title-${toolTipID}`} className="dirent-item tag-list tag-list-stacked">
+                  {dirent.file_tags.map((fileTag, index) => {
+                    let length = dirent.file_tags.length;
+                    return (
+                      <span className={`file-tag bg-${fileTag.color}`} key={fileTag.id} style={{zIndex: length - index }}></span>
+                    );
+                  })}
+                </div>
+                <UncontrolledTooltip target={`tag-list-title-${toolTipID}`} placement="bottom">
+                  {tagTitle}
+                </UncontrolledTooltip>
+              </Fragment>
+            )} 
           </td>
           <td className="operation">
             {

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="5%"></th>
-            <th width="35%">{gettext('Name')}</th>
-            <th width="10%"></th>
-            <th width="20%"></th>
+            <th width="3%">{/*icon */}</th>
+            <th width="5%">{/*star */}</th>
+            <th width="39%">{gettext('Name')}</th>
+            <th width="6%">{/*tag */}</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

@@ -998,20 +998,20 @@ table .menu-toggle {
 /* begin file-tag */
 .tag-list {
     position: relative;
+    justify-content: flex-end;
 }
 
 .tag-list .file-tag {
-    margin-left: 0.25rem;
     cursor: pointer;
 }
 
-.tag-list .file-tag:first-child {
-    margin-left: 0;
+.tag-list .file-tag:last-child {
+    margin-right: 0;
 }
 
 .tag-list-stacked .file-tag{
-    margin-left: -0.5rem;
-    box-shadow: 0 0 0 2px #fff;
+    margin-right: -0.5rem;
+    border: 0.125rem solid #fff;
     cursor: pointer;
 }
 
@@ -1028,6 +1028,7 @@ table .menu-toggle {
 .dirent-item.tag-list {
     display: flex;
     align-items: center;
+    width: max-content;
 }
 
 .item-meta-info {