Active item improve (#3258)

* optimized code

* add active interaction

* repair interactive bug

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

@@ -61,7 +61,6 @@ const propTypes = {
   onItemRename: PropTypes.func.isRequired,
   onItemMove: PropTypes.func.isRequired,
   onItemCopy: PropTypes.func.isRequired,
-  onItemDetails: PropTypes.func.isRequired,
   onDirentClick: PropTypes.func.isRequired,
   isAllItemSelected: PropTypes.bool.isRequired,
   onAllItemSelected: PropTypes.func.isRequired,
@@ -218,7 +217,6 @@ class DirColumnView extends React.Component {
               onItemMove={this.props.onItemMove}
               onItemCopy={this.props.onItemCopy}
               onDirentClick={this.props.onDirentClick}
-              onItemDetails={this.props.onItemDetails}
               updateDirent={this.props.updateDirent}
               isAllItemSelected={this.props.isAllItemSelected}
               onAllItemSelected={this.props.onAllItemSelected}

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

@@ -6,7 +6,6 @@ import { Utils } from '../../utils/utils';
 import EditFileTagDialog from '../dialog/edit-filetag-dialog';
 import ModalPortal from '../modal-portal';
 import RelatedFileDialogs from '../dialog/related-file-dialogs';
-import { seafileAPI } from '../../utils/seafile-api';
 
 const propTypes = {
   repoInfo: PropTypes.object.isRequired,
@@ -28,7 +27,6 @@ class DetailListView extends React.Component {
     this.state = {
       isEditFileTagShow: false,
       showRelatedFileDialog: false,
-      repo: {},
     };
   }
 
@@ -72,28 +70,6 @@ class DetailListView extends React.Component {
     });
   }
   
-  getRepoInfo = (repoID) => {
-    seafileAPI.listRepos({type: 'mine'}).then((res) => {
-      let repoList = res.data.repos;
-      for (let i = 0, length = repoList.length; i < length; i++) {
-        if (repoList[i].repo_id === repoID) {
-          this.setState({ repo: repoList[i] });
-          break;
-        }
-      }
-    });
-  }
-
-  componentDidMount() {
-    this.getRepoInfo(this.props.repoID);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.repoID !== this.props.repoID) {
-      this.getRepoInfo(nextProps.repoID);
-    }
-  }
-  
   render() {
     let { direntType, direntDetail, fileTagList, relatedFiles } = this.props;
     let position = this.getDirentPostion();
@@ -110,20 +86,6 @@ class DetailListView extends React.Component {
           </tbody>
         </table>
       );
-    } else if (direntType === 'repo') {
-      const repoInfo = this.props.repoInfo;
-      return (
-        <table className="table-thead-hidden">
-          <thead>
-            <tr><th width="35%"></th><th width="65%"></th></tr>
-          </thead>
-          <tbody>
-            <tr><th>{gettext('File Count')}</th><td>{repoInfo.file_count}</td></tr>
-            <tr><th>{gettext('Size')}</th><td>{repoInfo.size}</td></tr>
-            <tr><th>{gettext('Last Update')}</th><td>{moment(this.state.repo.last_modified).format('YYYY-MM-DD')}</td></tr>
-          </tbody>
-        </table>
-      );
     } else {
       return (
         <Fragment>

frontend/src/components/dirent-detail/dirent-details.js

@@ -4,14 +4,14 @@ import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import Dirent from '../../models/dirent';
 import DetailListView from './detail-list-view';
-import RepoInfo from '../../models/repo-info';
 import FileTag from '../../models/file-tag';
 import '../../css/dirent-detail.css';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,
-  dirent: PropTypes.object.isRequired,
+  dirent: PropTypes.object,
   path: PropTypes.string.isRequired,
+  currentRepoInfo: PropTypes.object.isRequired,
   onItemDetailsClose: PropTypes.func.isRequired,
   onFileTagChanged: PropTypes.func.isRequired,
 };
@@ -23,38 +23,48 @@ class DirentDetail extends React.Component {
     this.state = {
       direntType: '',
       direntDetail: '',
-      repoInfo: null,
       fileTagList: [],
       relatedFiles: [],
-      currentFolderDirent: null,
+      folderDirent: null,
     };
   }
 
-  componentWillMount() {
-    if (!this.props.dirent.name) {
-      this.getCurrentFolderDirent();
-    }
-  }
-
   componentDidMount() {
     let { dirent, path, repoID } = this.props;
-    let direntPath = Utils.joinPath(path, dirent.name);
+    this.loadDirentInfo(dirent, path, repoID);
-    seafileAPI.getRepoInfo(repoID).then(res => {
-      let repoInfo = new RepoInfo(res.data);
-      this.setState({repoInfo: repoInfo});
-      this.updateDetailView(dirent, direntPath);
-    });
   }
 
   componentWillReceiveProps(nextProps) {
-    let { dirent, path } = nextProps;
+    let { dirent, path, repoID } = nextProps;
+    this.loadDirentInfo(dirent, path, repoID);
+  }
+
+  loadDirentInfo = (dirent, path, repoID) => {
+    if (dirent) {
       let direntPath = Utils.joinPath(path, dirent.name);
       this.updateDetailView(dirent, direntPath);
+    } else {
+      let dirPath = Utils.getDirName(path);
+      seafileAPI.listDir(repoID, dirPath).then(res => {
+        let direntList = res.data.dirent_list;
+        let folderDirent = null;
+        for (let i = 0; i < direntList.length; i++) {
+          let dirent = direntList[i];
+          if (dirent.parent_dir + dirent.name === path) {
+            folderDirent = new Dirent(dirent);
+            break;
           }
+        }
+        this.setState({folderDirent: folderDirent});
+        this.updateDetailView(folderDirent, path);
+      });
+    }
+  }
+
 
   updateDetailView = (dirent, direntPath) => {
     let repoID = this.props.repoID;
-    if (dirent && dirent.type === 'file') {
+    if (dirent.type === 'file') {
       seafileAPI.getFileInfo(repoID, direntPath).then(res => {
         this.setState({
           direntType: 'file',
@@ -84,49 +94,16 @@ class DirentDetail extends React.Component {
           });
         }
       });
-    } else if (this.props.path !== '/') {
+    } else {
-      const dirPath = dirent.name ? direntPath : this.props.path;
-      seafileAPI.getDirInfo(repoID, dirPath).then(res => {
-        this.setState({
-          direntType: 'dir',
-          direntDetail: res.data
-        });
-      });
-    } else if (this.props.path === '/' && dirent.name) {
       seafileAPI.getDirInfo(repoID, direntPath).then(res => {
         this.setState({
           direntType: 'dir',
           direntDetail: res.data
         });
       });
-    } else if (this.props.path === '/' && !dirent.name) {
-      this.setState({
-        direntType: 'repo',
-        direntDetail: {},
-      });
     }
   }
 
-  getCurrentFolderDirent = () => {
-    const path = this.props.path;
-    const parentPath = path.slice(0, path.lastIndexOf('/'));
-    seafileAPI.listDir(this.props.repoID, parentPath).then(res => {
-      try {
-        res.data.dirent_list.forEach((dirent) => {
-          if ((dirent.parent_dir + dirent.name) === path) throw dirent;
-        });
-      } catch (dirent) {
-        let dirent = new Dirent(dirent);
-        this.setState({ currentFolderDirent: dirent });
-      }
-    });
-  }
-
-  onFileTagChanged = (dirent, direntPath) => {
-    this.updateDetailView(dirent, direntPath);
-    this.props.onFileTagChanged(dirent, direntPath);
-  }
-
   onRelatedFileChange = () => {
     let { dirent, path } = this.props;
     let direntPath = Utils.joinPath(path, dirent.name);
@@ -134,27 +111,16 @@ class DirentDetail extends React.Component {
   }
 
   render() {
-    let { dirent, path, currentRepoInfo } = this.props;
+    let { dirent } = this.props;
-    let smallIconUrl, bigIconUrl, direntName;
+    let { folderDirent } = this.state;
-    let folderDirent = this.state.currentFolderDirent;
+    if (!dirent && !folderDirent) {
-
+      return '';
-    if (dirent.name) {
-      // selected something
-      smallIconUrl = Utils.getDirentIcon(dirent);
-      bigIconUrl = Utils.getDirentIcon(dirent, true);
-      direntName = dirent.name;
-    } else if (!dirent.name && path === '/') {
-      // seleted nothing and parent is repo
-      smallIconUrl = Utils.getLibIconUrl(currentRepoInfo);
-      bigIconUrl = Utils.getLibIconUrl(currentRepoInfo, true);
-      direntName = currentRepoInfo.repo_name;
-    } else if (!dirent.name && path !== '/') {
-      // select nothing and parent is folder
-      smallIconUrl = folderDirent && Utils.getDirentIcon(folderDirent);
-      bigIconUrl = folderDirent && Utils.getDirentIcon(folderDirent, true);
-      direntName = folderDirent && folderDirent.name;
     }
 
+    let smallIconUrl = dirent ? Utils.getDirentIcon(dirent) : Utils.getDirentIcon(folderDirent);
+    let bigIconUrl = dirent ? Utils.getDirentIcon(dirent, true) : Utils.getDirentIcon(folderDirent, true);
+    let direntName = dirent ? dirent.name : folderDirent.name;
+
     return (
       <div className="detail-container">
         <div className="detail-header">
@@ -171,7 +137,7 @@ class DirentDetail extends React.Component {
           {this.state.direntDetail && 
             <div className="dirent-table-container">
               <DetailListView 
-                repoInfo={this.state.repoInfo}
+                repoInfo={this.props.currentRepoInfo}
                 path={this.props.path}
                 repoID={this.props.repoID}
                 dirent={this.props.dirent || folderDirent}
@@ -179,7 +145,7 @@ class DirentDetail extends React.Component {
                 direntDetail={this.state.direntDetail} 
                 fileTagList={this.state.fileTagList}
                 relatedFiles={this.state.relatedFiles}
-                onFileTagChanged={this.onFileTagChanged}
+                onFileTagChanged={this.props.onFileTagChanged}
                 onRelatedFileChange={this.onRelatedFileChange}
               />
             </div>

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

@@ -41,6 +41,7 @@ const propTypes = {
   isGroupOwnedRepo: PropTypes.bool.isRequired,
   onItemMouseDown: PropTypes.func.isRequired,
   onItemContextMenu: PropTypes.func.isRequired,
+  selectedDirentList: PropTypes.array.isRequired
 };
 
 class DirentListItem extends React.Component {
@@ -102,13 +103,6 @@ class DirentListItem extends React.Component {
   }
 
   onUnfreezedItem = () => {
-    let dirent = this.props.dirent;
-    // scenes 1: dirent isSelected --> this have Highest level
-    // scenes 2: dirent contextmenu show
-    // scenes 3: dirent operation menu show
-    if (dirent.isSelected) {
-      return;
-    }
     this.setState({
       highlight: false,
       isOperationShow: false,
@@ -118,7 +112,6 @@ class DirentListItem extends React.Component {
 
   //buiness handler
   onItemSelected = () => {
-    this.props.onFreezedItem();
     this.props.onItemSelected(this.props.dirent);
   }
 
@@ -389,7 +382,7 @@ class DirentListItem extends React.Component {
   }
 
   render() {
-    let { path, dirent } = this.props;
+    let { path, dirent, selectedDirentList } = this.props;
     let direntPath = Utils.joinPath(path, dirent.name);
     let dirHref = '';
     if (this.props.currentRepoInfo) {
@@ -408,6 +401,7 @@ class DirentListItem extends React.Component {
 
     let trClass = this.state.highlight ? 'tr-highlight ' : '';
     trClass += this.state.isDropTipshow ? 'tr-drop-effect' : '';
+    trClass += dirent.isSelected ? 'tr-active' : '';
 
     return (
       <Fragment>
@@ -466,8 +460,9 @@ class DirentListItem extends React.Component {
             )} 
           </td>
           <td className="operation">
-            {
+            {selectedDirentList.length > 1 ? 
-              this.state.isOperationShow &&
+              <Fragment>
+                {this.state.isOperationShow && !dirent.isSelected &&
                   <div className="operations">
                     <ul className="operation-group">
                       <li className="operation-group-item">
@@ -494,6 +489,37 @@ class DirentListItem extends React.Component {
                     </ul>
                   </div>
                 }
+              </Fragment> : 
+              <Fragment>
+                {this.state.isOperationShow && 
+                  <div className="operations">
+                    <ul className="operation-group">
+                      <li className="operation-group-item">
+                        <i className="op-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemDownload}></i>
+                      </li>
+                      {this.props.showShareBtn &&
+                      <li className="operation-group-item">
+                        <i className="op-icon sf2-icon-share" title={gettext('Share')} onClick={this.onItemShare}></i>
+                      </li>
+                      }
+                      <li className="operation-group-item">
+                        <i className="op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemDelete}></i>
+                      </li>
+                      <li className="operation-group-item">
+                        <DirentMenu
+                          dirent={this.props.dirent}
+                          onMenuItemClick={this.onMenuItemClick}
+                          currentRepoInfo={this.props.currentRepoInfo}
+                          isRepoOwner={this.props.isRepoOwner}
+                          onFreezedItem={this.props.onFreezedItem}
+                          onUnfreezedItem={this.onUnfreezedItem}
+                        />
+                      </li>
+                    </ul>
+                  </div>
+                }
+              </Fragment>
+            }
           </td>
           <td className="file-size">{dirent.size && dirent.size}</td>
           <td className="last-update">{dirent.mtime_relative}</td>

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

@@ -101,10 +101,6 @@ class DirentListView extends React.Component {
     this.onFreezedItem();
   }
 
-  onItemDetails = (dirent) => {
-    this.props.onItemDetails(dirent);
-  }
-
   sortByName = (e) => {
     e.preventDefault();
     const sortBy = 'name';
@@ -174,9 +170,7 @@ class DirentListView extends React.Component {
   }
 
   closeImagePopup = () => {
-    this.setState({
+    this.setState({isImagePopupOpen: false});
-      isImagePopupOpen: false
-    });
   }
 
   onCreateFileToggle = () => {
@@ -395,10 +389,8 @@ class DirentListView extends React.Component {
   }
 
   onHideMenu = (e) => {
-    if (this.props.selectedDirentList.length === 0) {
     this.onUnfreezedItem();
   }
-  }
 
   // contextmenu utils
   getDirentIndex = (dirent) => {
@@ -545,10 +537,10 @@ class DirentListView extends React.Component {
                   onFreezedItem={this.onFreezedItem}
                   onUnfreezedItem={this.onUnfreezedItem}
                   onDirentClick={this.props.onDirentClick}
-                  onItemDetails={this.onItemDetails}
                   showImagePopup={this.showImagePopup}
                   onItemMouseDown={this.onItemMouseDown}
                   onItemContextMenu={this.onItemContextMenu}
+                  selectedDirentList={this.props.selectedDirentList}
                 />
               );
             })}

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

@@ -1,14 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { DropdownMenu, DropdownToggle, DropdownItem, ButtonDropdown } from 'reactstrap';
 import { Utils } from '../../utils/utils';
-import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem, ButtonDropdown } from 'reactstrap';
+import { gettext, isPro } from '../../utils/constants';
-import { gettext, isPro, enableFileComment, fileAuditEnabled, folderPermEnabled } from '../../utils/constants';
+import TextTranslation from '../../utils/text-translation';
+
 import '../../css/dirents-menu.css';
 
 const propTypes = {
-  dirents: PropTypes.array.isRequired,
+  dirent: PropTypes.object.isRequired,
   currentRepoInfo: PropTypes.object.isRequired,
-  isRepoOwner: PropTypes.bool.isRequired,
   onMenuItemClick: PropTypes.func.isRequired,
 };
 
@@ -22,65 +23,43 @@ class DirentMenu extends React.Component {
     };
   }
 
-  calculateMenuList(props) {
+  componentDidMount() {
-    const { currentRepoInfo, dirents, isRepoOwner } = props;
+    const { currentRepoInfo, dirent } = this.props;
-    const length = dirents.length;
+    let menuList = this.calculateMenuList(currentRepoInfo, dirent);
+    this.setState({menuList: menuList});
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { currentRepoInfo, dirent } = nextProps;
+    let menuList = this.calculateMenuList(currentRepoInfo, dirent);
+    this.setState({menuList: menuList});
+  }
+
+  calculateMenuList(currentRepoInfo, dirent) {
     let menuList = [];
-    if (length === 1) {
+    const { SHARE, TAGS, RELATED_FILES, HISTORY, OPEN_VIA_CLIENT, LOCK, UNLOCK } = TextTranslation;
-      const dirent = dirents[0];
+
     if (dirent.type === 'dir') {
-        menuList = ['Share'];
+      menuList = [SHARE];
-      } else if (dirent.type === 'file') {
+      return menuList;
-        menuList = ['Share', 'Tags', 'Related Files', 'Divider', 'History', 'Divider', 'Open via Client'];
+    } 
+
+    if (dirent.type === 'file') {
+      menuList = [SHARE, TAGS, RELATED_FILES, 'Divider', HISTORY, 'Divider', OPEN_VIA_CLIENT];
       if (!Utils.isMarkdownFile(dirent.name)) {
         menuList.splice(2, 1);
       }
       if (isPro) {
         if (dirent.is_locked) {
           if (dirent.locked_by_me || (dirent.lock_owner === 'OnlineOffice' && currentRepoInfo.permission === 'rw')) {
-              menuList.splice(1, 0, 'Unlock');
+            menuList.splice(1, 0, UNLOCK);
           }
         } else {
-            menuList.splice(1, 0, 'Lock');
+          menuList.splice(1, 0, LOCK);
         }
       }
+      return menuList;
     }
-    } else {
-      menuList = [];
-    }
-    this.setState({
-      menuList: menuList,
-    });
-  }
-
-  translateMenuItem = (menuItem) => {
-    let translateResult = '';
-    switch (menuItem) {
-      case 'Share':
-        translateResult = gettext('Share');
-        break;
-      case 'Tags':
-        translateResult = gettext('Tags');
-        break;
-      case 'Lock':
-        translateResult = gettext('Lock');
-        break;
-      case 'Unlock':
-        translateResult = gettext('Unlock');
-        break;
-      case 'Related Files':
-        translateResult = gettext('Related Files');
-        break;
-      case 'History':
-        translateResult = gettext('History');
-        break;
-      case 'Open via Client':
-        translateResult = gettext('Open via Client');
-        break;
-      default:
-        break;
-    }
-    return translateResult;
   }
 
   onDropdownToggleClick = (e) => {
@@ -92,23 +71,11 @@ class DirentMenu extends React.Component {
 
   onMenuItemClick = (event) => {
     let operation = event.target.dataset.toggle;
-    this.props.onMenuItemClick(operation, this.props.dirents);
+    this.props.onMenuItemClick(operation, this.props.dirent);
-  }
-
-  componentDidMount() {
-    this.calculateMenuList(this.props);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (this.props.dirents.length !== nextProps.dirents.length) {
-      this.calculateMenuList(nextProps);
-    }
   }
 
   render() {
-    if (this.state.menuList.length === 0) {
+
-      return null;
-    }
     return (
       <ButtonDropdown isOpen={this.state.isItemMenuShow} toggle={this.onDropdownToggleClick} title={gettext('More Operations')}>
         <DropdownToggle data-toggle="dropdown" aria-expanded={this.state.isItemMenuShow} onClick={this.onDropdownToggleClick} className="fas fa-ellipsis-v sf-dropdown-toggle dirents-more-menu">
@@ -119,7 +86,7 @@ class DirentMenu extends React.Component {
               return <DropdownItem key={index} divider/>;
             } else {
               return (
-                <DropdownItem key={index} data-toggle={menuItem} onClick={this.onMenuItemClick}>{this.translateMenuItem(menuItem)}</DropdownItem>
+                <DropdownItem key={index} data-toggle={menuItem.key} onClick={this.onMenuItemClick}>{menuItem.value}</DropdownItem>
               );
             }
           })}

frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js

@@ -28,7 +28,6 @@ const propTypes = {
   onFilesTagChanged: PropTypes.func.isRequired,
   unSelectDirent: PropTypes.func.isRequired,
   updateDirent: PropTypes.func.isRequired,
-  showDirentDetail: PropTypes.func.isRequired,
 };
 
 class MutipleDirOperationToolbar extends React.Component {
@@ -96,9 +95,6 @@ class MutipleDirOperationToolbar extends React.Component {
       case 'Tags':
         this.listFileTags(dirent);
         break;
-      case 'Details':
-        this.props.showDirentDetail();
-        break;
       case 'Lock':
         this.lockFile(dirent);
         break;
@@ -246,11 +242,10 @@ class MutipleDirOperationToolbar extends React.Component {
             <Button className="secondary group-op-item action-icon sf2-icon-copy" title={gettext('Copy')} onClick={this.onCopyToggle}></Button>
             <Button className="secondary group-op-item action-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemsDelete}></Button>
             <Button className="secondary group-op-item action-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemsDownload}></Button>
-            {this.props.selectedDirentList.length > 0 &&
+            {this.props.selectedDirentList.length === 1 &&
               <DirentsMenu
-                dirents={this.props.selectedDirentList}
+                dirent={this.props.selectedDirentList[0]}
                 currentRepoInfo={this.props.currentRepoInfo}
-                isRepoOwner={this.props.isRepoOwner}
                 onMenuItemClick={this.onMenuItemClick}
               />
             }

frontend/src/pages/lib-content-view/lib-content-container.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 import CurDirPath from '../../components/cur-dir-path';
 import DirentDetail from '../../components/dirent-detail/dirent-details';
+import LibDetail from '../../components/dirent-detail/lib-details';
 import DirListView from '../../components/dir-view-mode/dir-list-view';
 import DirGridView from '../../components/dir-view-mode/dir-grid-view';
 import DirColumnView from '../../components/dir-view-mode/dir-column-view';
@@ -88,12 +89,18 @@ class LibContentContainer extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      currentDirent: {},
+      currentDirent: null,
     };
 
     this.errMessage = (<div className="message err-tip">{gettext('Folder does not exist.')}</div>);
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.path !== this.props.path) {
+      this.setState({currentDirent: null});
+    }
+  }
+
   onPathClick = (path) => {
     this.props.onMainNavBarClick(path);
     this.props.closeDirentDetail();
@@ -106,33 +113,12 @@ class LibContentContainer extends React.Component {
 
   // on '<tr>'
   onDirentClick = (dirent) => {
-    if (this.props.isDirentDetailShow) {
+    this.setState({currentDirent: dirent});
-      this.onItemDetails(dirent);
+    this.props.onDirentClick(dirent);
-    }
   }
 
-  onItemDetails = (dirent) => {
+  onItemSelected = (dirent) => {
-    this.setState({
+    this.setState({currentDirent: dirent});
-      currentDirent: dirent,
-    });
-    this.props.showDirentDetail();
-  }
-
-  onItemDetailsClose = () => {
-    this.props.closeDirentDetail();
-  }
-
-  componentWillReceiveProps (nextProps) {
-    if (nextProps.isDirentDetailShow) {
-      this.setState({
-        isDirentDetailShow: nextProps.isDirentDetailShow
-      });
-    }
-    if (nextProps.selectedDirent && nextProps.isDirentDetailShow) {
-      this.setState({
-        currentDirent: nextProps.selectedDirent,
-      });
-    }
   }
 
   render() {
@@ -193,7 +179,6 @@ class LibContentContainer extends React.Component {
                     onItemMove={this.props.onItemMove}
                     onItemCopy={this.props.onItemCopy}
                     onDirentClick={this.onDirentClick}
-                    onItemDetails={this.onItemDetails}
                     updateDirent={this.props.updateDirent}
                     isAllItemSelected={this.props.isAllDirentSelected}
                     onAllItemSelected={this.props.onAllDirentSelected}
@@ -257,7 +242,6 @@ class LibContentContainer extends React.Component {
                     onItemMove={this.props.onItemMove}
                     onItemCopy={this.props.onItemCopy}
                     onDirentClick={this.onDirentClick}
-                    onItemDetails={this.onItemDetails}
                     updateDirent={this.props.updateDirent}
                     isAllItemSelected={this.props.isAllDirentSelected}
                     onAllItemSelected={this.props.onAllDirentSelected}
@@ -271,18 +255,26 @@ class LibContentContainer extends React.Component {
             )}
           </div>
         </div>
-        {this.props.isDirentDetailShow && (
+        {this.props.isDirentDetailShow && 
+          <Fragment>
             <div className="cur-view-detail">
+              {this.props.path !== '/' ? 
                 <DirentDetail
                   repoID={repoID}
                   path={this.props.path}
                   dirent={this.state.currentDirent}
                   currentRepoInfo={this.props.currentRepoInfo}
-              onItemDetailsClose={this.onItemDetailsClose}
                   onFileTagChanged={this.props.onFileTagChanged}
+                  onItemDetailsClose={this.props.closeDirentDetail}
+                /> :
+                <LibDetail 
+                  currentRepo={this.props.currentRepoInfo}
+                  closeDetails={this.props.closeDirentDetail}
                 />
+              }
             </div>
-        )}
+          </Fragment>
+        }
       </Fragment>
     );
   }

frontend/src/pages/lib-content-view/lib-content-toolbar.js

@@ -45,8 +45,6 @@ const propTypes = {
   onSearchedClick: PropTypes.func.isRequired,
   isRepoOwner: PropTypes.bool.isRequired,
   // selected menu
-  onDirentSelected: PropTypes.func.isRequired,
-  showDirentDetail: PropTypes.func.isRequired,
   onFilesTagChanged: PropTypes.func.isRequired, // for mutiple select toolbar
   updateDirent: PropTypes.func.isRequired,
 };
@@ -99,8 +97,6 @@ class LibContentToolbar extends React.Component {
                 currentRepoInfo={this.props.currentRepoInfo}
                 enableDirPrivateShare={this.props.enableDirPrivateShare}
                 updateDirent={this.props.updateDirent}
-                onDirentSelected={this.props.onDirentSelected}
-                showDirentDetail={this.props.showDirentDetail}
                 relatedFiles={this.props.relatedFiles}
                 unSelectDirent={this.props.unSelectDirent}
                 onFilesTagChanged={this.props.onFilesTagChanged}

frontend/src/pages/lib-content-view/lib-content-view.js

@@ -78,9 +78,7 @@ class LibContentView extends React.Component {
   }
 
   showDirentDetail = () => {
-    this.setState({
+    this.setState({isDirentDetailShow: true});
-      isDirentDetailShow: true,
-    });
   }
 
   toggleDirentDetail = () => {
@@ -747,6 +745,19 @@ class LibContentView extends React.Component {
   }
 
   onDirentClick = (dirent) => {
+    let direntList = this.state.direntList.map(dirent => {
+      dirent.isSelected = false;
+      return dirent;
+    });
+    dirent.isSelected = true;
+    this.setState({
+      direntList: direntList,
+      isDirentSelected: true,
+      selectedDirentList: [dirent],
+    })
+  }
+
+  onItemClick = (dirent) => {
     this.resetSelected();
     let repoID = this.props.repoID;
     let direntPath = Utils.joinPath(this.state.path, dirent.name);
@@ -1395,7 +1406,8 @@ class LibContentView extends React.Component {
             sortOrder={this.state.sortOrder}
             sortItems={this.sortItems}
             updateDirent={this.updateDirent}
-            onItemClick={this.onDirentClick}
+            onDirentClick={this.onDirentClick}
+            onItemClick={this.onItemClick}
             onItemSelected={this.onDirentSelected}
             onItemDelete={this.onMainPanelItemDelete}
             onItemRename={this.onMainPanelItemRename}

frontend/src/utils/text-translation.js

@@ -19,6 +19,8 @@ const TextTranslation = {
   'COMMENT' : {key : 'Comment', value : gettext('Comment')},
   'HISTORY' : {key : 'History', value : gettext('History')},
   'ACCESS_LOG' : {key : 'Access Log', value : gettext('Access Log')},
+  'TAGS': {key: 'Tags', value: gettext('Tags')},
+  'RELATED_FILES': {key: 'Related Files', value: gettext('Related Files')},
 };
 
 export default TextTranslation;

media/css/seahub_react.css

@@ -907,6 +907,10 @@ table td {
     background-color: #f8f8f8;
 }
 
+.tr-active {
+    background-color: #eee !important;
+}
+
 /* table-item reanme-component */
 .rename-container input {
     box-sizing: content-box;