update readonly toolbar effect (#4605)

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

@@ -163,10 +163,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,6 +193,7 @@ class DirOperationToolbar extends React.Component {
 
     return (
       <Fragment>
+        {(userPerm === 'rw' || userPerm === 'admin') && (
           <div className="dir-operation">
             <div className="operation">
               {content}
@@ -219,6 +216,7 @@ class DirOperationToolbar extends React.Component {
               </ul>
             )}
           </div>
+        )}
         {Utils.isDesktop() && <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode} />}
         {this.state.isCreateFileDialogShow && (
           <ModalPortal>

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

@@ -328,19 +328,21 @@ class MultipleDirOperationToolbar extends React.Component {
 
     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">
+              {(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'}

frontend/src/css/toolbar.css

@@ -5,6 +5,7 @@
   display: flex;
   flex: 1;
   align-items: center;
+  height: 32px;
 }
 
 .border-left-show:before {

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>