[dir view] redesign: moved 'list/grid' view mode icons down to the 'cur path'bar, grouped 'properties', 'tags', 'history', 'trash' icons into a 'more' dropdown menu (#6102)

frontend/src/components/cur-dir-path/dir-tool.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { v4 as uuidv4 } from 'uuid';
+import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
 import { gettext, siteRoot } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
+import TextTranslation from '../../utils/text-translation';
 import SeahubPopover from '../common/seahub-popover';
 import ListTagPopover from '../popover/list-tag-popover';
 
@@ -12,6 +13,9 @@ const propTypes = {
   currentPath: PropTypes.string.isRequired,
   updateUsedRepoTags: PropTypes.func.isRequired,
   onDeleteRepoTag: PropTypes.func.isRequired,
+  currentMode: PropTypes.string.isRequired,
+  switchViewMode: PropTypes.func.isRequired,
+  isCustomPermission: PropTypes.bool,
 };
 
 class DirTool extends React.Component {
@@ -19,20 +23,21 @@ class DirTool extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      isListRepoTagShow: false,
+      isRepoTagDialogOpen: false,
+      isDropdownMenuOpen: false
     };
-    this.tagsIconID = `tags-icon-${uuidv4()}`;
   }
 
+  toggleDropdownMenu = () => {
+    this.setState({
+      isDropdownMenuOpen: !this.state.isDropdownMenuOpen
+    });
+  };
+
   onMouseDown = (e) => {
     e.stopPropagation();
   };
 
-  toggleRepoTag = (e) => {
-    e.stopPropagation();
-    this.setState({ isListRepoTagShow: !this.state.isListRepoTagShow });
-  };
-
   hidePopover = (e) => {
     if (e) {
       let dom = e.target;
@@ -41,80 +46,120 @@ class DirTool extends React.Component {
         dom = dom.parentNode;
       }
     }
-    this.setState({ isListRepoTagShow: false });
+    this.setState({isRepoTagDialogOpen: false});
   };
 
   toggleCancel = () => {
-    this.setState({ isListRepoTagShow: false });
+    this.setState({isRepoTagDialogOpen: false});
   };
 
   isMarkdownFile(filePath) {
     return Utils.getFileName(filePath).includes('.md');
   }
 
-  render() {
+  getList2 = () => {
-    let { repoID, userPerm, currentPath } = this.props;
+    const list = [];
+    const { repoID, userPerm, currentPath } = this.props;
+    const { TAGS, TRASH, HISTORY } = TextTranslation;
     if (userPerm !== 'rw') {
-      return '';
+      return list;
     }
     if (this.isMarkdownFile(currentPath)) {
-      return '';
+      return list;
     }
-    let toolbarDom = null;
+
-    if (Utils.getFileName(currentPath)) { // name not '' is not root path
+    list.push(TAGS);
+
+    if (Utils.getFileName(currentPath)) {
       let trashUrl = siteRoot + 'repo/' + repoID + '/trash/?path=' + encodeURIComponent(currentPath);
-      toolbarDom = (
+      list.push({...TRASH, href: trashUrl});
-        <ul className="path-toolbar">
+    } else {
-          <li className="toolbar-item">
-            <a
-              className="op-link sf2-icon-tag"
-              href="#"
-              id={this.tagsIconID}
-              role="button"
-              onClick={this.toggleRepoTag}
-              onMouseDown={this.onMouseDown}
-              title={gettext('Tags')}
-              aria-label={gettext('Tags')}
-            ></a>
-          </li>
-          <li className="toolbar-item">
-            <a className="op-link sf2-icon-recycle" href={trashUrl} title={gettext('Trash')} aria-label={gettext('Trash')}></a>
-          </li>
-        </ul>
-      );
-    } else { // currentPath === '/' is root path
       let trashUrl = siteRoot + 'repo/' + repoID + '/trash/';
+      list.push({...TRASH, href: trashUrl});
+
       let historyUrl = siteRoot + 'repo/history/' + repoID + '/';
-      toolbarDom = (
+      list.push({...HISTORY, href: historyUrl});
-        <ul className="path-toolbar">
+    }
-          <li className="toolbar-item">
+
-            <a
+    return list;
-              className="op-link sf2-icon-tag"
+  };
-              href="#"
+
-              id={this.tagsIconID}
+  onMenuItemClick = (item) => {
-              role="button"
+    const { key: operation, href } = item;
-              onClick={this.toggleRepoTag}
+    switch (operation) {
-              onMouseDown={this.onMouseDown}
+      case 'Properties':
-              title={gettext('Tags')}
+        this.props.switchViewMode('detail');
-              aria-label={gettext('Tags')}
+        break;
-            ></a>
+      case 'Tags':
-          </li>
+        this.setState({ isRepoTagDialogOpen: !this.state.isRepoTagDialogOpen });
-          <li className="toolbar-item">
+        break;
-            <a className="op-link sf2-icon-recycle" href={trashUrl} title={gettext('Trash')} aria-label={gettext('Trash')}></a>
+      case 'Trash':
-          </li>
+        location.href = href;
-          <li className="toolbar-item">
+        break;
-            <a className="op-link sf2-icon-history" href={historyUrl} title={gettext('History')} aria-label={gettext('History')}></a>
+      case 'History':
-          </li>
+        location.href = href;
-        </ul>
+        break;
+    }
+  };
+
+  getMenuList = () => {
+    const list = [];
+    const list2 = this.getList2();
+    const { PROPERTIES, } = TextTranslation;
+    if (!this.props.isCustomPermission) {
+      list.push(PROPERTIES);
+    }
+    return list.concat(list2);
+  };
+
+  onMenuItemKeyDown = (e) => {
+    if (e.key == 'Enter' || e.key == 'Space') {
+      this.onMenuItemClick(e);
+    }
+  };
+
+  render() {
+    let baseClass = 'btn btn-secondary btn-icon sf-view-mode-btn ';
+    const menuItems = this.getMenuList();
+    const { isDropdownMenuOpen } = this.state;
+    const { repoID } = this.props;
+    return (
+      <React.Fragment>
+        <div>
+          <div className="view-mode btn-group">
+            <button className={`${baseClass} sf3-font-list-view sf3-font ${this.props.currentMode === 'list' ? 'current-mode' : ''}`} id='list' title={gettext('List')} aria-label={gettext('List')} onClick={this.props.switchViewMode.bind(this, 'list')}></button>
+            <button className={`${baseClass} sf3-font-grid-view sf3-font ${this.props.currentMode === 'grid' ? 'current-mode' : ''}`} id='grid' title={gettext('Grid')} aria-label={gettext('Grid')} onClick={this.props.switchViewMode.bind(this, 'grid')}></button>
+          </div>
+          {menuItems.length > 0 &&
+          <Dropdown isOpen={isDropdownMenuOpen} toggle={this.toggleDropdownMenu}>
+            <DropdownToggle
+              id="cur-folder-more-op-toggle"
+              className={'sf3-font-more sf3-font'}
+              data-toggle="dropdown"
+              title={gettext('More operations')}
+              aria-label={gettext('More operations')}
+              aria-expanded={isDropdownMenuOpen}
+              onKeyDown={this.onDropdownToggleKeyDown}
+            >
+            </DropdownToggle>
+            <DropdownMenu right={true}>
+              {menuItems.map((menuItem, index) => {
+                if (menuItem === 'Divider') {
+                  return <DropdownItem key={index} divider />;
+                } else {
+                  return (
+                    <DropdownItem key={index} onClick={this.onMenuItemClick.bind(this, menuItem)} onKeyDown={this.onMenuItemKeyDown}>{menuItem.value}</DropdownItem>
                   );
                 }
-    return (
+              })}
-      <>
+            </DropdownMenu>
-        {toolbarDom}
+          </Dropdown>
-        {this.state.isListRepoTagShow &&
+          }
+        </div>
+        {this.state.isRepoTagDialogOpen &&
         <SeahubPopover
           popoverClassName="list-tag-popover"
-            target={this.tagsIconID}
+          target="cur-folder-more-op-toggle"
           hideSeahubPopover={this.hidePopover}
           hideSeahubPopoverWithEsc={this.hidePopover}
           canHideSeahubPopover={true}
@@ -127,9 +172,10 @@ class DirTool extends React.Component {
           />
         </SeahubPopover>
         }
-      </>
+      </React.Fragment>
     );
   }
+
 }
 
 DirTool.propTypes = propTypes;

frontend/src/components/cur-dir-path/index.js

@@ -22,6 +22,9 @@ const propTypes = {
   sortBy: PropTypes.string,
   sortOrder: PropTypes.string,
   sortItems: PropTypes.func,
+  currentMode: PropTypes.string.isRequired,
+  switchViewMode: PropTypes.func.isRequired,
+  isCustomPermission: PropTypes.bool,
 };
 
 class CurDirPath extends React.Component {
@@ -62,6 +65,9 @@ class CurDirPath extends React.Component {
           currentPath={this.props.currentPath}
           updateUsedRepoTags={this.props.updateUsedRepoTags}
           onDeleteRepoTag={this.props.onDeleteRepoTag}
+          currentMode={this.props.currentMode}
+          switchViewMode={this.props.switchViewMode}
+          isCustomPermission={this.props.isCustomPermission}
         />}
         {!isDesktop && this.props.direntList.length > 0 &&
         <span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>}

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

@@ -7,7 +7,6 @@ import ModalPortal from '../modal-portal';
 import CreateFolder from '../../components/dialog/create-folder-dialog';
 import CreateFile from '../../components/dialog/create-file-dialog';
 import ShareDialog from '../../components/dialog/share-dialog';
-import ViewModeToolbar from './view-mode-toolbar';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
@@ -244,7 +243,6 @@ class DirOperationToolbar extends React.Component {
             {content}
           </div>
         )}
-        {Utils.isDesktop() && <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode} isCustomPermission={isCustomPermission} />}
         {this.state.isCreateFileDialogShow && (
           <ModalPortal>
             <CreateFile

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

@@ -12,7 +12,6 @@ import EditFileTagDialog from '../dialog/edit-filetag-dialog';
 import ZipDownloadDialog from '../dialog/zip-download-dialog';
 import Rename from '../dialog/rename-dirent';
 import LibSubFolderPermissionDialog from '../dialog/lib-sub-folder-permission-dialog';
-import ViewModeToolbar from './view-mode-toolbar';
 
 import ModalPortal from '../modal-portal';
 import ItemDropdownMenu from '../dropdown-menu/item-dropdown-menu';
@@ -356,7 +355,6 @@ class MultipleDirOperationToolbar extends React.Component {
             </ButtonGroup>
           </div>
         </div>
-        {Utils.isDesktop() && <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode} isCustomPermission={isCustomPermission} />}
         {this.state.isMoveDialogShow &&
           <MoveDirentDialog
             path={this.props.path}

frontend/src/components/toolbar/view-mode-toolbar.js

@@ -1,46 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { gettext } from '../../utils/constants';
-
-const propTypes = {
-  currentMode: PropTypes.string.isRequired,
-  switchViewMode: PropTypes.func.isRequired,
-  isCustomPermission: PropTypes.bool,
-};
-
-class ViewModeToolbar extends React.Component {
-
-  static defaultProps = {
-    isCustomPermission: false,
-  };
-
-  switchViewMode = (e) => {
-    e.preventDefault();
-    let id = e.target.id;
-    if (id === this.props.currentMode) {
-      return;
-    }
-    this.props.switchViewMode(id);
-  };
-
-  render() {
-    let baseClass = 'btn btn-secondary btn-icon sf-view-mode-btn ';
-    return (
-      <React.Fragment>
-        <div className="view-mode btn-group">
-          <button className={`${baseClass} sf2-icon-list-view ${this.props.currentMode === 'list' ? 'current-mode' : ''}`} id='list' title={gettext('List')} aria-label={gettext('List')} onClick={this.switchViewMode}></button>
-          <button className={`${baseClass} sf2-icon-grid-view ${this.props.currentMode === 'grid' ? 'current-mode' : ''}`} id='grid' title={gettext('Grid')} aria-label={gettext('Grid')} onClick={this.switchViewMode}></button>
-        </div>
-        {!this.props.isCustomPermission && (
-          <div className="detail-btn btn-group">
-            <button className="btn btn-secondary btn-icon ml-1 fas fa-info" id='detail' title={gettext('Properties')} aria-label={gettext('Properties')} onClick={this.switchViewMode}></button>
-          </div>
-        )}
-      </React.Fragment>
-    );
-  }
-}
-
-ViewModeToolbar.propTypes = propTypes;
-
-export default ViewModeToolbar;

frontend/src/css/toolbar.css

@@ -51,30 +51,36 @@
 /* end file-operation toolbar */
 
 /* begin view-mode toolbar */
-.detail-btn button,
 .sf-view-mode-btn {
+  width: 44px;
+  height: 32px;
   padding: 0;
-  height: 30px;
+  background-color: #e5e6e7;
-  min-width: 2rem;
+  color: #444;
-  color: #aaa;
+  font-size: 14px;
-  background-color: #fff;
+  line-height: 30px;
   border: 1px solid #ccc;
-  line-height: 29px;
+  border-radius: 3px;
-  font-size: 18px;
-  border-radius: 2px;
 }
 
-.detail-btn button {
+.sf-view-mode-btn:hover {
-  font-size: 15px;
+  background-color: #d2d3d3;
-  padding-top: 1px;
 }
 
 .sf-view-mode-btn.current-mode {
-  background-color: #ccc !important;
+  background-color: #fff;
-  color: #fff !important;
 }
 /* end view-mode toolbar */
 
+#cur-folder-more-op-toggle {
+  color: #444;
+  font-size: 14px;
+  height: 32px;
+  padding: 0;
+  line-height: 30px;
+  margin-left: 10px;
+}
+
 /* begin common-toolbar */
 .common-toolbar {
   display: flex;

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

@@ -9,6 +9,9 @@ import DirColumnView from '../../components/dir-view-mode/dir-column-view';
 import '../../css/lib-content-view.css';
 
 const propTypes = {
+  switchViewMode: PropTypes.func.isRequired,
+  isCustomPermission: PropTypes.bool,
+
   pathPrefix: PropTypes.array.isRequired,
   isTreePanelShown: PropTypes.bool.isRequired,
   toggleTreePanel: PropTypes.func.isRequired,
@@ -188,6 +191,9 @@ class LibContentContainer extends React.Component {
               sortOrder={this.props.sortOrder}
               sortItems={this.props.sortItems}
               toggleTreePanel={this.props.toggleTreePanel}
+              currentMode={this.props.currentMode}
+              switchViewMode={this.props.switchViewMode}
+              isCustomPermission={this.props.isCustomPermission}
             />
           </div>
           <div className={`cur-view-content lib-content-container ${this.props.isTreePanelShown ? 'view-mode-container' : ''}`} onScroll={this.onItemsScroll}>

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

@@ -2,11 +2,9 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 import CommonToolbar from '../../components/toolbar/common-toolbar';
-import ViewModeToolbar from '../../components/toolbar/view-mode-toolbar';
 import DirOperationToolBar from '../../components/toolbar/dir-operation-toolbar';
 import MultipleDirOperationToolbar from '../../components/toolbar/multiple-dir-operation-toolbar';
 import ViewFileToolbar from '../../components/toolbar/view-file-toolbar';
-import { Utils } from '../../utils/utils';
 
 const propTypes = {
   isViewFile: PropTypes.bool.isRequired,
@@ -55,9 +53,6 @@ class LibContentToolbar extends React.Component {
 
   render() {
 
-    const { userPerm } = this.props;
-    const { isCustomPermission } = Utils.getUserPermission(userPerm);
-
     if (this.props.isViewFile) {
       return (
         <Fragment>
@@ -76,7 +71,6 @@ class LibContentToolbar extends React.Component {
               showShareBtn={this.props.showShareBtn}
               repoTags={this.props.repoTags}
             />
-            <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode} isCustomPermission={isCustomPermission} />
           </div>
           <CommonToolbar
             isLibView={true}

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

@@ -2065,6 +2065,8 @@ class LibContentView extends React.Component {
             isTreePanelShown={this.state.isTreePanelShown}
             toggleTreePanel={this.toggleTreePanel}
             currentMode={this.state.currentMode}
+            switchViewMode={this.switchViewMode}
+            isCustomPermission={isCustomPermission}
             path={this.state.path}
             pathExist={this.state.pathExist}
             currentRepoInfo={this.state.currentRepoInfo}

frontend/src/utils/text-translation.js

@@ -32,6 +32,7 @@ const TextTranslation = {
   'ACCESS_LOG' : {key : 'Access Log', value : gettext('Access Log')},
   'PROPERTIES' : {key : 'Properties', value : gettext('Properties')},
   'TAGS': {key: 'Tags', value: gettext('Tags')},
+  'TRASH': {key: 'Trash', value: gettext('Trash')},
   'ONLYOFFICE_CONVERT': {key: 'Convert with ONLYOFFICE', value: gettext('Convert with ONLYOFFICE')}
 };