Merge branch '7.0'

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

@@ -7,6 +7,7 @@ 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,
@@ -22,6 +23,8 @@ const propTypes = {
   onUploadFile: PropTypes.func.isRequired,
   onUploadFolder: PropTypes.func.isRequired,
   direntList: PropTypes.array.isRequired,
+  currentMode: PropTypes.string.isRequired,
+  switchViewMode: PropTypes.func.isRequired,
 };
 
 class DirOperationToolbar extends React.Component {
@@ -167,21 +170,22 @@ class DirOperationToolbar extends React.Component {
     let itemType = path === '/' ? 'library' : 'dir';
     let itemName = path == '/' ? repoName : Utils.getFolderName(path);
 
-    const content = Utils.isDesktop() ? (
+    let content = null;
+    if (Utils.isDesktop()) {
+      let { showShareBtn } = this.props;
+      content = (
         <Fragment>
           {Utils.isSupportUploadFolder() ?
             <button className="btn btn-secondary operation-item" title={gettext('Upload')} onClick={this.onUploadClick}>{gettext('Upload')}</button> :
             <button className="btn btn-secondary operation-item" title={gettext('Upload')} onClick={this.onUploadFile}>{gettext('Upload')}</button>}
           <button className="btn btn-secondary operation-item" title={gettext('New')} onClick={this.onCreateClick}>{gettext('New')}</button>
-        {this.props.showShareBtn &&
-          <button className="btn btn-secondary operation-item" title={gettext('Share')} onClick={this.onShareClick}>{gettext('Share')}</button>}
+          {showShareBtn && <button className="btn btn-secondary operation-item" title={gettext('Share')} onClick={this.onShareClick}>{gettext('Share')}</button>}
         </Fragment>
-    ) : (
+      );
+    } else {
+      content = (
         <Dropdown isOpen={this.state.isMobileOpMenuOpen} toggle={this.toggleMobileOpMenu}>
-        <DropdownToggle
-          tag="span"
-          className="sf2-icon-plus mobile-toolbar-icon"
-        />
+          <DropdownToggle tag="span" className="sf2-icon-plus mobile-toolbar-icon" />
           <DropdownMenu>
             <DropdownItem onClick={this.onUploadFile}>{gettext('Upload')}</DropdownItem>
             <DropdownItem onClick={this.onCreateFolderToggle}>{gettext('New Folder')}</DropdownItem>
@@ -189,9 +193,11 @@ class DirOperationToolbar extends React.Component {
           </DropdownMenu>
         </Dropdown>
       );
+    }
 
     return (
       <Fragment>
+        <div className="dir-operation">
           <div className="operation">
             {content}
           </div>
@@ -212,6 +218,8 @@ class DirOperationToolbar extends React.Component {
               <li className="dropdown-item" onClick={this.onCreateWordToggle}>{gettext('New Word File')}</li>
             </ul>
           )}
+        </div>
+        {Utils.isDesktop() && <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode} />}
         {this.state.isCreateFileDialogShow && (
           <ModalPortal>
             <CreateFile

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

@@ -14,6 +14,7 @@ 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';
@@ -36,6 +37,8 @@ const propTypes = {
   onFilesTagChanged: PropTypes.func.isRequired,
   unSelectDirent: PropTypes.func.isRequired,
   updateDirent: PropTypes.func.isRequired,
+  currentMode: PropTypes.string.isRequired,
+  switchViewMode: PropTypes.func.isRequired,
 };
 
 class MultipleDirOperationToolbar extends React.Component {
@@ -331,6 +334,7 @@ class MultipleDirOperationToolbar extends React.Component {
     
     return (
       <Fragment>
+        <div className="dir-operation">
           <div className="d-flex">
             <ButtonGroup className="flex-row group-operations">
               <Button className="secondary group-op-item action-icon sf2-icon-move" title={gettext('Move')} onClick={this.onMoveToggle}></Button>
@@ -348,6 +352,8 @@ class MultipleDirOperationToolbar extends React.Component {
               }
             </ButtonGroup>
           </div>
+        </div>
+        {Utils.isDesktop() && <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode} />}
         {this.state.isMoveDialogShow && 
           <MoveDirentDialog 
             path={this.props.path}

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

@@ -1,6 +1,5 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Utils } from '../../utils/utils';
 import { gettext } from '../../utils/constants';
 import CommonToolbar from '../../components/toolbar/common-toolbar';
 import ViewModeToolbar from '../../components/toolbar/view-mode-toolbar';
@@ -87,7 +86,6 @@ 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>
-          <div className="dir-operation">
           {this.props.isDirentSelected ?
             <MultipleDirOperationToolbar
               repoID={this.props.repoID} 
@@ -110,6 +108,8 @@ class LibContentToolbar extends React.Component {
               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}
@@ -125,11 +125,11 @@ class LibContentToolbar extends React.Component {
               onAddFolder={this.props.onAddFolder}
               onUploadFile={this.props.onUploadFile}
               onUploadFolder={this.props.onUploadFolder}
+              currentMode={this.props.currentMode}
+              switchViewMode={this.props.switchViewMode}
             />
           }
         </div>
-          {Utils.isDesktop() && <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode} />}
-        </div>
         <CommonToolbar repoID={this.props.repoID} onSearchedClick={this.props.onSearchedClick} searchPlaceholder={gettext('Search files in this library')}/>
       </Fragment>
     );

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

@@ -1725,7 +1725,6 @@ class LibContentView extends React.Component {
 
     return (
       <Fragment>
-
         <div className="main-panel o-hidden">
           <div className="main-panel-north border-left-show">
             <LibContentToolbar