Revert "Revert "[library list] added 'plus' icon to the toggle of the dropdow…" (#7412)

This reverts commit b606f65f4e.

frontend/src/components/toolbar/single-dropdown-toolbar.js

@@ -2,6 +2,8 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 
+import '../../css/single-dropdown-toolbar.css';
+
 const propTypes = {
   opList: PropTypes.array.isRequired
 };
@@ -32,19 +34,23 @@ class SingleDropdownToolbar extends React.Component {
   };
 
   render() {
-    const { opList } = this.props;
+    const { opList, withPlusIcon = false } = this.props;
 
     return (
       <Fragment>
         <Dropdown isOpen={this.state.isDropdownMenuOpen} toggle={this.toggleDropdownMenu}>
           <DropdownToggle
-            tag="i"
+            tag="span"
             role="button"
-            className="sf3-font-down sf3-font ml-1 sf-dropdown-toggle"
+            className={withPlusIcon ? 'ml-2 sf-dropdown-combined-toggle' : 'ml-1 sf-dropdown-toggle'}
             onClick={this.toggleDropdownMenu}
             onKeyDown={this.onDropdownToggleKeyDown}
             data-toggle="dropdown"
           >
+            {withPlusIcon
+              ? (<><i className="sf3-font-new sf3-font main-icon"></i><i className="sf3-font-down sf3-font"></i></>)
+              : <i className="sf3-font-down sf3-font"></i>
+            }
           </DropdownToggle>
           <DropdownMenu>
             {opList.map((item, index) => {

frontend/src/css/single-dropdown-toolbar.css

@@ -0,0 +1,14 @@
+.sf-dropdown-combined-toggle {
+  color: #666;
+  padding: 2px 4px;
+  border-radius: 3px;
+}
+
+.sf-dropdown-combined-toggle:hover {
+  background: #efefef;
+}
+
+.sf-dropdown-combined-toggle .main-icon {
+  margin-right: 2px;
+}
+

frontend/src/pages/groups/group-item.js

@@ -104,6 +104,7 @@ class GroupItem extends React.Component {
             <a href={`${siteRoot}group/${group.id}/`} title={group.name} className="ellipsis">{group.name}</a>
             {isDeptAdmin && (
               <SingleDropdownToolbar
+                withPlusIcon={true}
                 opList={[{ 'text': gettext('New Library'), 'onClick': this.toggleCreateRepoDialog }]}
               />
             )}

frontend/src/pages/groups/group-view.js

@@ -369,6 +369,7 @@ class GroupView extends React.Component {
     const opList = [];
     if ((!isDepartmentGroup && canAddRepo) ||
       (isDepartmentGroup && isStaff)) {
+      this.newLibraryEnalbed = true;
       opList.push({ 'text': gettext('New Library'), 'onClick': this.onCreateRepoToggle }, 'Divider');
     }
     opList.push({ 'text': gettext('Members'), 'onClick': this.toggleMembersDialog });
@@ -440,7 +441,10 @@ class GroupView extends React.Component {
                     <span className="sf3-font-department sf3-font nav-icon" title={gettext('This is a special group representing a department.')}></span>
                     }
                     <span>{currentGroup.name}</span>
-                    <SingleDropdownToolbar opList={opList} />
+                    <SingleDropdownToolbar
+                      withPlusIcon={this.newLibraryEnalbed}
+                      opList={opList}
+                    />
                   </div>
                   <div className="path-tool d-flex align-items-center">
                     {isDepartmentGroup && (

frontend/src/pages/libraries/index.js

@@ -440,6 +440,7 @@ class Libraries extends Component {
                           <span className="sf3-font-mine sf3-font nav-icon" aria-hidden="true"></span>
                           {gettext('My Libraries')}
                           <SingleDropdownToolbar
+                            withPlusIcon={true}
                             opList={[{ 'text': gettext('New Library'), 'onClick': this.toggleCreateRepoDialog }]}
                           />
                         </h4>

frontend/src/pages/my-libs/my-libs.js

@@ -167,6 +167,7 @@ class MyLibraries extends Component {
               <h3 className="sf-heading m-0">
                 {gettext('My Libraries')}
                 <SingleDropdownToolbar
+                  withPlusIcon={true}
                   opList={[
                     { 'text': gettext('New Library'), 'onClick': this.toggleCreateRepoDialog },
                     { 'text': gettext('Deleted Libraries'), 'onClick': this.toggleDeletedReposDialog }

frontend/src/pages/shared-with-all/index.js

@@ -250,10 +250,11 @@ class SharedWithAll extends React.Component {
         <div className="main-panel-center">
           <div className="cur-view-container">
             <div className="cur-view-path">
-              <h3 className="sf-heading m-0">
+              <h3 className="sf-heading m-0 d-flex align-items-center">
                 {gettext('Shared with all')}
                 {canAddPublicRepo &&
                 <SingleDropdownToolbar
+                  withPlusIcon={true}
                   opList={[
                     { 'text': gettext('Share existing libraries'), 'onClick': this.onSelectRepoToggle },
                     { 'text': gettext('New Library'), 'onClick': this.onCreateRepoToggle }