12.0 change toolbar button style (#6202)

* 01 change common buttons

* 02 set selected dirents

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

@@ -1,6 +1,5 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Button, ButtonGroup } from 'reactstrap';
 import { gettext, siteRoot, name, fileServerRoot, useGoFileserver } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
@@ -12,10 +11,10 @@ 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';
-
 import ModalPortal from '../modal-portal';
 import ItemDropdownMenu from '../dropdown-menu/item-dropdown-menu';
 import toaster from '../toast';
+import '../../css/selected-dirents-toolbar.css';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
@@ -297,9 +296,9 @@ class MultipleDirOperationToolbar extends React.Component {
   };
 
   render() {
-
+    const { repoID, repoTags, userPerm, selectedDirentList } = this.props;
-    const { repoID, repoTags, userPerm } = this.props;
+    const dirent = selectedDirentList[0];
-    const dirent = this.props.selectedDirentList[0];
+    const selectedLen = selectedDirentList.length;
     const direntPath = this.getDirentPath(dirent);
     const { isCustomPermission, customPermission } = Utils.getUserPermission(userPerm);
 
@@ -335,74 +334,42 @@ class MultipleDirOperationToolbar extends React.Component {
 
     return (
       <Fragment>
-        <ButtonGroup className="">
+        <div className="selected-dirents-toolbar">
-          <Fragment>
+          {selectedLen > 0 &&
+            <span className="cur-view-path-btn px-2" onClick={this.props.unSelectDirent}>
+              <span className="sf3-font-x-01 sf3-font mr-2" aria-label={gettext('Unselect')} title={gettext('Unselect')}></span>
+              <span>{selectedLen}{' '}{gettext('selected')}</span>
+            </span>
+          }
           {canModify &&
-              <Button
+            <span className="cur-view-path-btn" onClick={this.onMoveToggle}>
-                className="op-btn selected-dirent-op-btn"
+              <span className="sf3-font-move1 sf3-font" aria-label={gettext('Move')} title={gettext('Move')}></span>
-                onClick={this.onMoveToggle}
+            </span>
-              >
-                <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
+            <span className="cur-view-path-btn" onClick={this.onCopyToggle}>
-                className="op-btn selected-dirent-op-btn"
+              <span className="sf3-font-copy1 sf3-font" aria-label={gettext('Copy')} title={gettext('Copy')}></span>
-                onClick={this.onCopyToggle}
+            </span>
-              >
-                <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
+            <span className="cur-view-path-btn" onClick={this.onItemsDelete}>
-                className="op-btn selected-dirent-op-btn"
+              <span className="sf3-font-delete1 sf3-font" aria-label={gettext('Delete')} title={gettext('Delete')}></span>
-                onClick={this.onItemsDelete}
+            </span>
-              >
-                <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
+            <span className="cur-view-path-btn" onClick={this.onItemsDownload}>
-                className="op-btn selected-dirent-op-btn"
+              <span className="sf3-font-download1 sf3-font" aria-label={gettext('Download')} title={gettext('Download')}></span>
-                onClick={this.onItemsDownload}
+            </span>
-              >
-                <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>
+          {selectedLen === 1 &&
-          {this.props.selectedDirentList.length === 1 &&
             <ItemDropdownMenu
-            tagName={'button'}
               item={this.props.selectedDirentList[0]}
-            toggleClass={'op-btn selected-dirent-op-btn selected-dirent-more-op-btn'}
+              toggleClass={'cur-view-path-btn sf3-font-more-vertical sf3-font'}
-            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>
         {this.state.isMoveDialogShow &&
           <MoveDirentDialog
             path={this.props.path}

frontend/src/css/layout.css

@@ -104,6 +104,7 @@
 
 .cur-view-path .cur-view-path-btn {
   cursor: pointer;
+  font-size: 14px;
   height: 24px;
   min-width: 24px;
   width: fit-content;

frontend/src/css/selected-dirents-toolbar.css

@@ -0,0 +1,13 @@
+.cur-view-path .selected-dirents-toolbar .cur-view-path-btn {
+  margin-left: 0;
+  margin-right: 20px;
+}
+
+.cur-view-path .selected-dirents-toolbar .dropdown {
+  vertical-align: unset;
+  height: 24px;
+}
+
+.cur-view-path .selected-dirents-toolbar .dropdown .sf3-font-more-vertical {
+  margin-top: -4px;
+}

frontend/src/css/toolbar.css

@@ -33,29 +33,6 @@
   border-radius: 2px;
 }
 
-.op-btn.selected-dirent-op-btn {
-  padding: 0 .75rem;
-  font-weight: normal;
-}
-
-.op-btn.selected-dirent-more-op-btn {
-  margin-left: -1px;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.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 */
 
 #cur-folder-more-op-toggle {