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 } = this.props;
-    const dirent = this.props.selectedDirentList[0];
+    const { repoID, repoTags, userPerm, selectedDirentList } = this.props;
+    const dirent = 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="">
-          <Fragment>
-            {canModify &&
-              <Button
-                className="op-btn selected-dirent-op-btn"
-                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>
-          {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'}
-            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}
-          />
+        <div className="selected-dirents-toolbar">
+          {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>
           }
-        </ButtonGroup>
+          {canModify &&
+            <span className="cur-view-path-btn" onClick={this.onMoveToggle}>
+              <span className="sf3-font-move1 sf3-font" aria-label={gettext('Move')} title={gettext('Move')}></span>
+            </span>
+          }
+          {canCopy &&
+            <span className="cur-view-path-btn" onClick={this.onCopyToggle}>
+              <span className="sf3-font-copy1 sf3-font" aria-label={gettext('Copy')} title={gettext('Copy')}></span>
+            </span>
+          }
+          {canDelete &&
+            <span className="cur-view-path-btn" onClick={this.onItemsDelete}>
+              <span className="sf3-font-delete1 sf3-font" aria-label={gettext('Delete')} title={gettext('Delete')}></span>
+            </span>
+          }
+          {canDownload &&
+            <span className="cur-view-path-btn" onClick={this.onItemsDownload}>
+              <span className="sf3-font-download1 sf3-font" aria-label={gettext('Download')} title={gettext('Download')}></span>
+            </span>
+          }
+          {selectedLen === 1 &&
+            <ItemDropdownMenu
+              item={this.props.selectedDirentList[0]}
+              toggleClass={'cur-view-path-btn sf3-font-more-vertical sf3-font'}
+              onMenuItemClick={this.onMenuItemClick}
+              getMenuList={this.getDirentMenuList}
+            />
+          }
+        </div>
         {this.state.isMoveDialogShow &&
           <MoveDirentDialog
             path={this.props.path}