[dir view] redesigned the top toolbar for the selected dirent(s) (#6111)

* [dir view] redesigned the top toolbar for the selected dirent(s)

* code cleanup

frontend/src/components/dropdown-menu/item-dropdown-menu.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import listener from '../context-menu/globalEventListener';
-import { Dropdown, ButtonDropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
+import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 
@@ -9,6 +9,7 @@ const propTypes = {
   tagName: PropTypes.string,
   item: PropTypes.object.isRequired,
   toggleClass: PropTypes.string,
+  toggleChildren: PropTypes.object,
   isHandleContextMenuEvent: PropTypes.bool,
   getMenuList: PropTypes.func.isRequired,
   onMenuItemClick: PropTypes.func.isRequired,
@@ -107,7 +108,7 @@ class ItemDropdownMenu extends React.Component {
 
   render() {
     let menuList = this.state.menuList;
-    let { toggleClass, tagName } = this.props;
+    let { toggleClass, toggleChildren, tagName } = this.props;
     toggleClass = 'sf-dropdown-toggle ' + toggleClass;
 
     if (!menuList.length) {
@@ -116,9 +117,9 @@ class ItemDropdownMenu extends React.Component {
 
     if (tagName && tagName === 'button') {
       return (
-        <ButtonDropdown isOpen={this.state.isItemMenuShow} toggle={this.onDropdownToggleClick}>
+        <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.onDropdownToggleClick}>
           <DropdownToggle
-            className={toggleClass}
+            className={this.props.toggleClass}
             data-toggle="dropdown"
             title={gettext('More operations')}
             aria-label={gettext('More operations')}
@@ -126,6 +127,7 @@ class ItemDropdownMenu extends React.Component {
             onKeyDown={this.onDropdownToggleKeyDown}
             // onClick={this.onDropdownToggleClick}
           >
+            {toggleChildren}
           </DropdownToggle>
           <DropdownMenu>
             {menuList.map((menuItem, index) => {
@@ -138,7 +140,7 @@ class ItemDropdownMenu extends React.Component {
               }
             })}
           </DropdownMenu>
-        </ButtonDropdown>
+        </Dropdown>
       );
     }
 

frontend/src/components/toolbar/selected-dirents-toolbar.js

@@ -7,9 +7,9 @@ import { seafileAPI } from '../../utils/seafile-api';
 import URLDecorator from '../../utils/url-decorator';
 import MoveDirentDialog from '../dialog/move-dirent-dialog';
 import CopyDirentDialog from '../dialog/copy-dirent-dialog';
-import ShareDialog from '../dialog/share-dialog';
 import EditFileTagDialog from '../dialog/edit-filetag-dialog';
 import ZipDownloadDialog from '../dialog/zip-download-dialog';
+import ShareDialog from '../dialog/share-dialog';
 import Rename from '../dialog/rename-dirent';
 import LibSubFolderPermissionDialog from '../dialog/lib-sub-folder-permission-dialog';
 
@@ -17,8 +17,6 @@ import ModalPortal from '../modal-portal';
 import ItemDropdownMenu from '../dropdown-menu/item-dropdown-menu';
 import toaster from '../toast';
 
-import '../../css/dirents-menu.css';
-
 const propTypes = {
   path: PropTypes.string.isRequired,
   userPerm: PropTypes.string.isRequired,
@@ -303,58 +301,108 @@ class MultipleDirOperationToolbar extends React.Component {
     const { repoID, repoTags, userPerm } = this.props;
     const dirent = this.props.selectedDirentList[0];
     const direntPath = this.getDirentPath(dirent);
-
     const { isCustomPermission, customPermission } = Utils.getUserPermission(userPerm);
-    let canDelete = true;
+
-    let canDownload = true;
+    let canModify = false;
-    let canCopy = true;
+    let canCopy = false;
-    let canModify = true;
+    let canDelete = false;
+    let canDownload = false;
+    switch (userPerm) {
+      case 'rw':
+      case 'admin':
+        canModify = true;
+        canCopy = true;
+        canDelete = true;
+        canDownload = true;
+        break;
+      case 'cloud-edit':
+        canModify = true;
+        canCopy = true;
+        canDelete = true;
+        break;
+      case 'r':
+        canCopy = true;
+        canDownload = true;
+        break;
+    }
     if (isCustomPermission) {
       const { permission } = customPermission;
-      canDelete = permission.delete;
-      canDownload = permission.download;
-      canCopy = permission.copy;
       canModify = permission.modify;
+      canCopy = permission.copy;
+      canDownload = permission.download;
+      canDelete = permission.delete;
     }
 
     return (
       <Fragment>
-        <div className="dir-operation">
+        <ButtonGroup className="">
-          <div className="d-flex">
-            <ButtonGroup className="flex-row group-operations">
-              {(userPerm === 'rw' || userPerm === 'admin' || isCustomPermission) && (
           <Fragment>
-                  {canModify && <Button className="secondary group-op-item action-icon sf2-icon-move" title={gettext('Move')} aria-label={gettext('Move')} onClick={this.onMoveToggle}></Button>}
+            {canModify &&
-                  {canCopy && <Button className="secondary group-op-item action-icon sf2-icon-copy" title={gettext('Copy')} aria-label={gettext('Copy')} onClick={this.onCopyToggle}></Button>}
+              <Button
-                  {canDelete && <Button className="secondary group-op-item action-icon sf3-font-delete1 sf3-font" title={gettext('Delete')} aria-label={gettext('Delete')} onClick={this.onItemsDelete}></Button>}
+                className="op-btn selected-dirent-op-btn"
-                  {canDownload && <Button className="secondary group-op-item action-icon sf2-icon-download" title={gettext('Download')} aria-label={gettext('Download')} onClick={this.onItemsDownload}></Button>}
+                onClick={this.onMoveToggle}
+              >
+                <i
+                  className="selected-dirent-op-btn-icon sf3-font-move1 sf3-font"
+                  aria-hidden={true}
+                ></i>
+                <span className="selected-dirent-op-btn-text">{gettext('Move')}</span>
+              </Button>
+            }
+            {canCopy &&
+              <Button
+                className="op-btn selected-dirent-op-btn"
+                onClick={this.onCopyToggle}
+              >
+                <i
+                  className="selected-dirent-op-btn-icon sf3-font-copy1 sf3-font"
+                  aria-hidden={true}
+                ></i>
+                <span className="selected-dirent-op-btn-text">{gettext('Copy')}</span>
+              </Button>
+            }
+            {canDelete &&
+              <Button
+                className="op-btn selected-dirent-op-btn"
+                onClick={this.onItemsDelete}
+              >
+                <i
+                  className="selected-dirent-op-btn-icon sf3-font-delete1 sf3-font"
+                  aria-hidden={true}
+                ></i>
+                <span className="selected-dirent-op-btn-text">{gettext('Delete')}</span>
+              </Button>
+            }
+            {canDownload &&
+              <Button
+                className="op-btn selected-dirent-op-btn"
+                onClick={this.onItemsDownload}
+              >
+                <i
+                  className="selected-dirent-op-btn-icon sf3-font-download1 sf3-font"
+                  aria-hidden={true}
+                ></i>
+                <span className="selected-dirent-op-btn-text">{gettext('Download')}</span>
+              </Button>
+            }
           </Fragment>
-              )}
-              {userPerm === 'cloud-edit' && (
-                <Fragment>
-                  {canModify && <Button className="secondary group-op-item action-icon sf2-icon-move" title={gettext('Move')} aria-label={gettext('Move')} onClick={this.onMoveToggle}></Button>}
-                  {canCopy && <Button className="secondary group-op-item action-icon sf2-icon-copy" title={gettext('Copy')} aria-label={gettext('Copy')} onClick={this.onCopyToggle}></Button>}
-                  {canDelete && <Button className="secondary group-op-item action-icon sf3-font-delete1 sf3-font" title={gettext('Delete')} aria-label={gettext('Delete')} onClick={this.onItemsDelete}></Button>}
-                </Fragment>
-              )}
-              {userPerm === 'r' && (
-                <Fragment>
-                  <Button className="secondary group-op-item action-icon sf2-icon-copy" title={gettext('Copy')} aria-label={gettext('Copy')} onClick={this.onCopyToggle}></Button>
-                  <Button className="secondary group-op-item action-icon sf2-icon-download" title={gettext('Download')} aria-label={gettext('Download')} onClick={this.onItemsDownload}></Button>
-                </Fragment>
-              )}
           {this.props.selectedDirentList.length === 1 &&
           <ItemDropdownMenu
             tagName={'button'}
             item={this.props.selectedDirentList[0]}
-                  toggleClass={'fas fa-ellipsis-v dirents-more-menu'}
+            toggleClass={'op-btn selected-dirent-op-btn selected-dirent-more-op-btn'}
+            toggleChildren={(<>
+              <i
+                className="selected-dirent-op-btn-icon sf3-font-more-vertical sf3-font"
+                aria-hidden={true}
+              ></i>
+              <span className="selected-dirent-op-btn-text">{gettext('More')}</span>
+            </>)}
             onMenuItemClick={this.onMenuItemClick}
             getMenuList={this.getDirentMenuList}
           />
           }
         </ButtonGroup>
-          </div>
-        </div>
         {this.state.isMoveDialogShow &&
           <MoveDirentDialog
             path={this.props.path}

frontend/src/css/dirents-menu.css

@@ -1,15 +0,0 @@
-.dirents-more-menu {
-  margin-left: 0;
-  padding: 4px 15px;
-  border: 1px solid #ccc;
-  border-top-right-radius: 2px !important;
-  border-bottom-right-radius: 2px !important;
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
-  width: 46px;
-  height: 30px;
-}
-.dirents-more-menu:hover {
-  background-color: #fff;
-  border: 1px solid #ccc;
-}

frontend/src/css/toolbar.css

@@ -33,21 +33,29 @@
   border-radius: 2px;
 }
 
-.group-operations {
+.op-btn.selected-dirent-op-btn {
-  margin-right: 0.25rem;
+  padding: 0 .75rem;
+  font-weight: normal;
 }
 
-.group-operations .group-op-item {
+.op-btn.selected-dirent-more-op-btn {
-  padding: 0 0.5rem;
+  margin-left: -1px;
-  height: 30px;
+  border-top-left-radius: 0;
-  min-width: 46px;
+  border-bottom-left-radius: 0;
-  background-color: #fff;
-  line-height: 29px;
-  font-weight: normal;
-  border: 1px solid #ccc;
-  border-radius: 2px;
-  font-size: 1.125rem;
 }
+
+.selected-dirent-op-btn .selected-dirent-op-btn-icon { /* overwrite styles from seafile-ui.css */
+  font-size: 1rem;
+  color: #444;
+  vertical-align: middle;
+}
+
+.selected-dirent-op-btn-text {
+  font-size: .875rem;
+  margin-left: 6px;
+  vertical-align: middle;
+}
+
 /* end file-operation toolbar */
 
 /* begin view-mode toolbar */

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

@@ -5,6 +5,7 @@ import CurDirPath from '../../components/cur-dir-path';
 import DirentDetail from '../../components/dirent-detail/dirent-details';
 import LibDetail from '../../components/dirent-detail/lib-details';
 import DirColumnView from '../../components/dir-view-mode/dir-column-view';
+import ToolbarForSelectedDirents from '../../components/toolbar/selected-dirents-toolbar';
 
 import '../../css/lib-content-view.css';
 
@@ -19,11 +20,13 @@ const propTypes = {
   path: PropTypes.string.isRequired,
   pathExist: PropTypes.bool.isRequired,
   // repoinfo
+  repoEncrypted: PropTypes.bool.isRequired,
   currentRepoInfo: PropTypes.object.isRequired,
   repoID: PropTypes.string.isRequired,
   enableDirPrivateShare: PropTypes.bool.isRequired,
   isGroupOwnedRepo: PropTypes.bool.isRequired,
   userPerm: PropTypes.string,
+  isRepoOwner: PropTypes.bool.isRequired,
   // path func
   onTabNavClick: PropTypes.func.isRequired,
   onMainNavBarClick: PropTypes.func.isRequired,
@@ -88,6 +91,10 @@ const propTypes = {
   direntDetailPanelTab: PropTypes.string,
   loadDirentList: PropTypes.func,
   fullDirentList: PropTypes.array,
+
+  unSelectDirent: PropTypes.func,
+  onFilesTagChanged: PropTypes.func.isRequired,
+  showShareBtn: PropTypes.bool.isRequired,
 };
 
 class LibContentContainer extends React.Component {
@@ -174,6 +181,31 @@ class LibContentContainer extends React.Component {
             </div>
           }
           <div className="cur-view-path">
+            {this.props.isDirentSelected ?
+              <ToolbarForSelectedDirents
+                repoID={this.props.repoID}
+                path={this.props.path}
+                userPerm={this.props.userPerm}
+                repoEncrypted={this.props.repoEncrypted}
+                repoTags={this.props.repoTags}
+                selectedDirentList={this.props.selectedDirentList}
+                direntList={this.props.direntList}
+                onItemsMove={this.props.onItemsMove}
+                onItemsCopy={this.props.onItemsCopy}
+                onItemsDelete={this.props.onItemsDelete}
+                onItemRename={this.props.onItemRename}
+                isRepoOwner={this.props.isRepoOwner}
+                currentRepoInfo={this.props.currentRepoInfo}
+                enableDirPrivateShare={this.props.enableDirPrivateShare}
+                updateDirent={this.props.updateDirent}
+                unSelectDirent={this.props.unSelectDirent}
+                onFilesTagChanged={this.props.onFilesTagChanged}
+                showShareBtn={this.props.showShareBtn}
+                isGroupOwnedRepo={this.props.isGroupOwnedRepo}
+                showDirentDetail={this.props.showDirentDetail}
+                currentMode={this.props.currentMode}
+                switchViewMode={this.props.switchViewMode}
+              /> :
               <CurDirPath
                 repoID={repoID}
                 repoName={this.props.currentRepoInfo.repo_name}
@@ -195,6 +227,7 @@ class LibContentContainer extends React.Component {
                 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}>
             {!this.props.pathExist && this.errMessage}

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

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 import CommonToolbar from '../../components/toolbar/common-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';
 
 const propTypes = {
@@ -87,31 +86,7 @@ class LibContentToolbar extends React.Component {
       <Fragment>
         <div className="cur-view-toolbar">
           <span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title={gettext('Side Nav Menu')} onClick={this.props.onSideNavMenuClick}></span>
-          {this.props.isDirentSelected ?
+          {!this.props.isDirentSelected &&
-            <MultipleDirOperationToolbar
-              repoID={this.props.repoID}
-              path={this.props.path}
-              userPerm={this.props.userPerm}
-              repoEncrypted={this.props.repoEncrypted}
-              repoTags={this.props.repoTags}
-              selectedDirentList={this.props.selectedDirentList}
-              direntList={this.props.direntList}
-              onItemsMove={this.props.onItemsMove}
-              onItemsCopy={this.props.onItemsCopy}
-              onItemsDelete={this.props.onItemsDelete}
-              onItemRename={this.props.onItemRename}
-              isRepoOwner={this.props.isRepoOwner}
-              currentRepoInfo={this.props.currentRepoInfo}
-              enableDirPrivateShare={this.props.enableDirPrivateShare}
-              updateDirent={this.props.updateDirent}
-              unSelectDirent={this.props.unSelectDirent}
-              onFilesTagChanged={this.props.onFilesTagChanged}
-              showShareBtn={this.props.showShareBtn}
-              isGroupOwnedRepo={this.props.isGroupOwnedRepo}
-              showDirentDetail={this.props.showDirentDetail}
-              currentMode={this.props.currentMode}
-              switchViewMode={this.props.switchViewMode}
-            /> :
             <DirOperationToolBar
               path={this.props.path}
               repoID={this.props.repoID}

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

@@ -2061,6 +2061,10 @@ class LibContentView extends React.Component {
         </div>
         <div className="main-panel-center flex-row">
           <LibContentContainer
+            repoEncrypted={this.state.repoEncrypted}
+            isRepoOwner={isRepoOwner}
+            onFilesTagChanged={this.onFileTagChanged}
+            unSelectDirent={this.unSelectDirent}
             pathPrefix={this.props.pathPrefix}
             isTreePanelShown={this.state.isTreePanelShown}
             toggleTreePanel={this.toggleTreePanel}