[grid] improvement

* modifie UI for 'thumbnail' images
* added 'Tags'('Select Tags') for file
* show tags for tagged files

frontend/src/components/dir-view-mode/dir-grid-view.js

@@ -79,6 +79,7 @@ class DirGridView extends React.Component {
           isDirentDetailShow={this.props.isDirentDetailShow}
           onItemRename={this.props.onItemRename}
           onAddFolder={this.props.onAddFolder}
+          onFileTagChanged={this.props.onFileTagChanged}
         />
       </Fragment>
     );

frontend/src/components/dirent-grid-view/dirent-grid-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, mediaUrl } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 
@@ -136,6 +138,14 @@ class DirentGridItem extends React.Component {
     let iconUrl = Utils.getDirentIcon(dirent, true);
     let fileUrl = dirent.encoded_thumbnail_src ? this.getFileUrl(dirent.encoded_thumbnail_src) : '';
 
+    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 + ' ';
+      });
+    }
+
     let dirHref = '';
     if (this.props.currentRepoInfo) {
       dirHref = siteRoot + 'library/' + this.props.repoID + '/' + this.props.currentRepoInfo.repo_name + Utils.encodePath(direntPath);
@@ -169,6 +179,21 @@ class DirentGridItem extends React.Component {
             {dirent.is_locked && <img className="grid-file-locked-icon" src={mediaUrl + 'img/file-locked-32.png'} alt={gettext('locked')} title={lockedInfo}/>}
           </div>
           <div className="grid-file-name" onDragStart={this.onGridItemDragStart} draggable="true" >
+            {(dirent.type !== 'dir' && dirent.file_tags) && (
+              <Fragment>
+                <div id={`tag-list-title-${toolTipID}`} className="dirent-item tag-list tag-list-stacked d-inline-flex">
+                  {dirent.file_tags.map((fileTag, index) => {
+                    let length = dirent.file_tags.length;
+                    return (
+                      <span className="file-tag" key={fileTag.id} style={{zIndex:length - index, backgroundColor:fileTag.color}}></span>
+                    );
+                  })}
+                </div>
+                <UncontrolledTooltip target={`tag-list-title-${toolTipID}`} placement="bottom">
+                  {tagTitle}
+                </UncontrolledTooltip>
+              </Fragment>
+            )}
             <a className={`grid-file-name-link ${this.state.isGridSelected ? 'grid-link-selected-active' : ''}`} href={dirent.type === 'dir' ? dirHref : fileHref} onClick={this.onItemLinkClick}>{dirent.name}</a>
           </div>
         </li>

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

@@ -15,6 +15,7 @@ import MoveDirentDialog from '../dialog/move-dirent-dialog';
 import CopyDirentDialog from '../dialog/copy-dirent-dialog';
 import ShareDialog from '../dialog/share-dialog';
 import ZipDownloadDialog from '../dialog/zip-download-dialog';
+import EditFileTagDialog from '../dialog/edit-filetag-dialog';
 import Rename from '../../components/dialog/rename-grid-item-dialog';
 import CreateFile from '../dialog/create-file-dialog';
 import CreateFolder from '../dialog/create-folder-dialog';
@@ -40,6 +41,7 @@ const propTypes = {
   updateDirent: PropTypes.func.isRequired,
   isDirentDetailShow: PropTypes.bool.isRequired,
   onGridItemClick: PropTypes.func,
+  onFileTagChanged: PropTypes.func,
   onAddFolder: PropTypes.func.isRequired,
   showDirentDetail: PropTypes.func.isRequired,
   onItemRename: PropTypes.func.isRequired,
@@ -48,7 +50,7 @@ const propTypes = {
 class DirentGridView extends React.Component{
   constructor(props) {
     super(props);
-    this.state= {
+    this.state = {
       isImagePopupOpen: false,
       imageItems: [],
       imageIndex: 0,
@@ -56,6 +58,7 @@ class DirentGridView extends React.Component{
       isShareDialogShow: false,
       isMoveDialogShow: false,
       isCopyDialogShow: false,
+      isEditFileTagShow: false,
       isZipDialogOpen: false,
       isRenameDialogShow: false,
       isCreateFolderDialogShow: false,
@@ -133,6 +136,9 @@ class DirentGridView extends React.Component{
       case 'Copy':
         this.onItemCopyToggle();
         break;
+      case 'Tags':
+        this.onEditFileTagToggle();
+        break;
       case 'Permission':
         this.onPermissionItem();
         break;
@@ -165,6 +171,18 @@ class DirentGridView extends React.Component{
     }
   }
 
+  onEditFileTagToggle = () => {
+    this.setState({
+      isEditFileTagShow: !this.state.isEditFileTagShow
+    });
+  }
+
+  onFileTagChanged = () => {
+    let dirent = this.state.activeDirent ? this.state.activeDirent : '';
+    let direntPath = Utils.joinPath(this.props.path, dirent.name);
+    this.props.onFileTagChanged(dirent, direntPath);
+  }
+
   getDirentPath = (dirent) => {
     let path = this.props.path;
     return path === '/' ? path + dirent.name : path + '/' + dirent.name;
@@ -437,7 +455,7 @@ class DirentGridView extends React.Component{
       contextmenuList = contextmenuList.length > 0 ? [...contextmenuList, 'Divider'] : [];
     }
 
-    let { RENAME, MOVE, COPY, PERMISSION, OPEN_VIA_CLIENT, LOCK, UNLOCK, COMMENT, HISTORY, ACCESS_LOG } = TextTranslation;
+    let { RENAME, MOVE, COPY, PERMISSION, OPEN_VIA_CLIENT, LOCK, UNLOCK, COMMENT, HISTORY, ACCESS_LOG, TAGS } = TextTranslation;
     if (type === 'dir' && permission === 'rw') {
       if (can_set_folder_perm) {
         menuList = [...contextmenuList, RENAME, MOVE, COPY, 'Divider', PERMISSION, 'Divider', OPEN_VIA_CLIENT];
@@ -460,6 +478,7 @@ class DirentGridView extends React.Component{
         menuList.push(MOVE);
       }
       menuList.push(COPY);
+      menuList.push(TAGS);
       if (isPro) {
         if (dirent.is_locked) {
           if (dirent.locked_by_me || (dirent.lock_owner === 'OnlineOffice' && permission === 'rw')) {
@@ -590,6 +609,15 @@ class DirentGridView extends React.Component{
             dirent={this.state.activeDirent}
           />
         }
+        {this.state.isEditFileTagShow &&
+          <EditFileTagDialog
+            repoID={this.props.repoID}
+            fileTagList={dirent.file_tags}
+            filePath={direntPath}
+            toggleCancel={this.onEditFileTagToggle}
+            onFileTagChanged={this.onFileTagChanged}
+          />
+        }
         {this.state.isShareDialogShow &&
           <ModalPortal>
             <ShareDialog 

frontend/src/css/grid-view.css

@@ -35,11 +35,12 @@
 }
 
 .grid-file-img-link .thumbnail {
-  max-width: 96px;
+  max-width: 88px;
-  max-height: 96px;
+  max-height: 88px;
   padding: 1px;
+  background: #fff;
   border: 1px solid #ddd;
-  border-radius: 3px;
+  border-radius: 1px;
 }
 
 .grid-file-img-link::before {
@@ -82,4 +83,4 @@
 
 .grid-drop-show {
   background: #f8f8f8;
-}
+}