From 66300cf07bd09c95a0f6ebbba492f5ebfeec7d5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E9=A1=BA=E5=BC=BA?= <ysq9207@126.com>
Date: Wed, 24 Jun 2020 18:35:38 +0800
Subject: [PATCH] update readonly toolbar effect (#4605)

---
 .../toolbar/dir-operation-toolbar.js          | 48 +++++++++----------
 .../toolbar/multiple-dir-operation-toolbar.js | 18 +++----
 frontend/src/css/toolbar.css                  |  1 +
 .../lib-content-view/lib-content-toolbar.js   |  5 ++
 4 files changed, 39 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/toolbar/dir-operation-toolbar.js b/frontend/src/components/toolbar/dir-operation-toolbar.js
index 37728d7e0d..16cfd2cae4 100644
--- a/frontend/src/components/toolbar/dir-operation-toolbar.js
+++ b/frontend/src/components/toolbar/dir-operation-toolbar.js
@@ -162,10 +162,6 @@ class DirOperationToolbar extends React.Component {
 
   render() {
     let { path, repoName, userPerm } = this.props;
-    
-    if (userPerm !== 'rw' && userPerm !== 'admin') {
-      return '';
-    }
 
     let itemType = path === '/' ? 'library' : 'dir';
     let itemName = path == '/' ? repoName : Utils.getFolderName(path);
@@ -197,28 +193,30 @@ class DirOperationToolbar extends React.Component {
 
     return (
       <Fragment>
-        <div className="dir-operation">
-          <div className="operation">
-            {content}
+        {(userPerm === 'rw' || userPerm === 'admin') && (
+          <div className="dir-operation">
+            <div className="operation">
+              {content}
+            </div>
+            {this.state.isUploadMenuShow && (
+              <ul className="menu dropdown-menu" style={this.state.operationMenuStyle}>
+                <li className="dropdown-item" onClick={this.onUploadFile}>{gettext('Upload Files')}</li>
+                <li className="dropdown-item" onClick={this.onUploadFolder}>{gettext('Upload Folder')}</li>
+              </ul>
+            )}
+            {this.state.isCreateMenuShow && (
+              <ul className="menu dropdown-menu" style={this.state.operationMenuStyle}>
+                <li className="dropdown-item" onClick={this.onCreateFolderToggle}>{gettext('New Folder')}</li>
+                <li className="dropdown-item" onClick={this.onCreateFileToggle}>{gettext('New File')}</li>
+                <li className="dropdown-divider"></li>
+                <li className="dropdown-item" onClick={this.onCreateMarkdownToggle}>{gettext('New Markdown File')}</li>
+                <li className="dropdown-item" onClick={this.onCreateExcelToggle}>{gettext('New Excel File')}</li>
+                <li className="dropdown-item" onClick={this.onCreatePPTToggle}>{gettext('New PowerPoint File')}</li>
+                <li className="dropdown-item" onClick={this.onCreateWordToggle}>{gettext('New Word File')}</li>
+              </ul>
+            )}
           </div>
-          {this.state.isUploadMenuShow && (
-            <ul className="menu dropdown-menu" style={this.state.operationMenuStyle}>
-              <li className="dropdown-item" onClick={this.onUploadFile}>{gettext('Upload Files')}</li>
-              <li className="dropdown-item" onClick={this.onUploadFolder}>{gettext('Upload Folder')}</li>
-            </ul>
-          )}
-          {this.state.isCreateMenuShow && (
-            <ul className="menu dropdown-menu" style={this.state.operationMenuStyle}>
-              <li className="dropdown-item" onClick={this.onCreateFolderToggle}>{gettext('New Folder')}</li>
-              <li className="dropdown-item" onClick={this.onCreateFileToggle}>{gettext('New File')}</li>
-              <li className="dropdown-divider"></li>
-              <li className="dropdown-item" onClick={this.onCreateMarkdownToggle}>{gettext('New Markdown File')}</li>
-              <li className="dropdown-item" onClick={this.onCreateExcelToggle}>{gettext('New Excel File')}</li>
-              <li className="dropdown-item" onClick={this.onCreatePPTToggle}>{gettext('New PowerPoint File')}</li>
-              <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>
diff --git a/frontend/src/components/toolbar/multiple-dir-operation-toolbar.js b/frontend/src/components/toolbar/multiple-dir-operation-toolbar.js
index d5026bd954..42a33917da 100644
--- a/frontend/src/components/toolbar/multiple-dir-operation-toolbar.js
+++ b/frontend/src/components/toolbar/multiple-dir-operation-toolbar.js
@@ -327,20 +327,22 @@ class MultipleDirOperationToolbar extends React.Component {
     const dirent = this.props.selectedDirentList[0];
 
     let direntPath = this.getDirentPath(dirent);
-
-    if (userPerm !== 'rw' && userPerm !== 'admin') {
-      return '';
-    }
     
     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>
-              <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>
+              {(userPerm === 'rw' || userPerm === 'admin') && (
+                <Fragment>
+                  <Button className="secondary group-op-item action-icon sf2-icon-move" title={gettext('Move')} onClick={this.onMoveToggle}></Button>
+                  <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>
+                </Fragment>
+              )}
+              {(userPerm === 'rw' || userPerm === 'admin' || userPerm === 'r') && (
+                <Button className="secondary group-op-item action-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemsDownload}></Button>
+              )}
               {this.props.selectedDirentList.length === 1 &&
                 <ItemDropdownMenu
                   tagName={'button'}
diff --git a/frontend/src/css/toolbar.css b/frontend/src/css/toolbar.css
index b032e185cc..52143e0708 100644
--- a/frontend/src/css/toolbar.css
+++ b/frontend/src/css/toolbar.css
@@ -5,6 +5,7 @@
   display: flex;
   flex: 1;
   align-items: center;
+  height: 32px;
 }
 
 .border-left-show:before {
diff --git a/frontend/src/pages/lib-content-view/lib-content-toolbar.js b/frontend/src/pages/lib-content-view/lib-content-toolbar.js
index 8b4439ab97..7f868f45a2 100644
--- a/frontend/src/pages/lib-content-view/lib-content-toolbar.js
+++ b/frontend/src/pages/lib-content-view/lib-content-toolbar.js
@@ -54,6 +54,11 @@ const propTypes = {
 class LibContentToolbar extends React.Component {
 
   render() {
+
+    if (!this.props.userPerm) {
+      return <div className="cur-view-toolbar"></div>
+    }
+
     if (this.props.isViewFile) {
       return (
         <Fragment>