change wiki and invitation pages add icon (#7457)

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

@@ -1,10 +1,11 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 
 import '../../css/single-dropdown-toolbar.css';
 
 const propTypes = {
+  withPlusIcon: PropTypes.bool,
   opList: PropTypes.array.isRequired
 };
 
@@ -37,36 +38,32 @@ class SingleDropdownToolbar extends React.Component {
     const { opList, withPlusIcon = false } = this.props;
 
     return (
-      <Fragment>
+      <Dropdown isOpen={this.state.isDropdownMenuOpen} toggle={this.toggleDropdownMenu} direction="down">
-        <Dropdown isOpen={this.state.isDropdownMenuOpen} toggle={this.toggleDropdownMenu}>
+        <DropdownToggle
-          <DropdownToggle
+          tag="span"
-            tag="span"
+          role="button"
-            role="button"
+          className={withPlusIcon ? 'ml-2 sf-dropdown-combined-toggle' : 'ml-1 sf-dropdown-toggle'}
-            className={withPlusIcon ? 'ml-2 sf-dropdown-combined-toggle' : 'ml-1 sf-dropdown-toggle'}
+          onClick={this.toggleDropdownMenu}
-            onClick={this.toggleDropdownMenu}
+          onKeyDown={this.onDropdownToggleKeyDown}
-            onKeyDown={this.onDropdownToggleKeyDown}
+          data-toggle="dropdown"
-            data-toggle="dropdown"
+        >
-          >
+          {withPlusIcon && <i className="sf3-font-new sf3-font main-icon"></i>}
-            {withPlusIcon
+          <i className="sf3-font-down sf3-font"></i>
-              ? (<><i className="sf3-font-new sf3-font main-icon"></i><i className="sf3-font-down sf3-font"></i></>)
+        </DropdownToggle>
-              : <i className="sf3-font-down sf3-font"></i>
+        <DropdownMenu positionFixed={true}>
+          {opList.map((item, index) => {
+            if (item == 'Divider') {
+              return <DropdownItem key={index} divider />;
+            } else {
+              return (
+                <DropdownItem key={index} onClick={item.onClick} onKeyDown={this.onMenuItemKeyDown.bind(this, item)}>
+                  {item.text}
+                </DropdownItem>
+              );
             }
-          </DropdownToggle>
+          })}
-          <DropdownMenu>
+        </DropdownMenu>
-            {opList.map((item, index) => {
+      </Dropdown>
-              if (item == 'Divider') {
-                return <DropdownItem key={index} divider />;
-              } else {
-                return (
-                  <DropdownItem key={index} onClick={item.onClick} onKeyDown={this.onMenuItemKeyDown.bind(this, item)}>
-                    {item.text}
-                  </DropdownItem>
-                );
-              }
-            })}
-          </DropdownMenu>
-        </Dropdown>
-      </Fragment>
     );
   }
 }

frontend/src/css/layout.css

@@ -334,12 +334,6 @@ img[src=""],img:not([src]) { /* for first loading img*/
   color: #444;
 }
 
-.path-container .add-wiki-dropdown .sf3-font-down {
-  color: #999;
-  cursor: pointer;
-  font-size: 12px;
-}
-
 .dir-tool>div {
   margin-left: 8px;
 }

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

@@ -102,12 +102,12 @@ class GroupItem extends React.Component {
           <h4 className="sf-heading m-0 d-flex align-items-center">
             <span className={`${group.parent_group_id == 0 ? 'sf3-font-group' : 'sf3-font-department'} sf3-font nav-icon`} aria-hidden="true"></span>
             <a href={`${siteRoot}group/${group.id}/`} title={group.name} className="ellipsis">{group.name}</a>
-            {isDeptAdmin && (
+            {isDeptAdmin &&
               <SingleDropdownToolbar
                 withPlusIcon={true}
                 opList={[{ 'text': gettext('New Library'), 'onClick': this.toggleCreateRepoDialog }]}
               />
-            )}
+            }
           </h4>
         </div>
         {group.repos.length === 0 ?

frontend/src/pages/invitations/invitations-view.js

@@ -277,6 +277,7 @@ class InvitationsView extends React.Component {
               <div className="d-flex">
                 <h3 className="sf-heading">{gettext('Invite Guest')}</h3>
                 <SingleDropdownToolbar
+                  withPlusIcon={true}
                   opList={[{ 'text': gettext('Invite Guest'), 'onClick': this.toggleInvitePeopleDialog }]}
                 />
               </div>

frontend/src/pages/wikis/wikis.js

@@ -1,6 +1,5 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import { gettext, canCreateWiki } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import toaster from '../../components/toast';
@@ -12,6 +11,7 @@ import WikiCardView from '../../components/wiki-card-view/wiki-card-view';
 import { seafileAPI } from '../../utils/seafile-api';
 import { userAPI } from '../../utils/user-api';
 import WikiConvertStatusDialog from '../../components/dialog/wiki-convert-status-dialog';
+import SingleDropdownToolbar from '../../components/toolbar/single-dropdown-toolbar';
 
 
 const propTypes = {
@@ -30,7 +30,6 @@ class Wikis extends Component {
       groupWikis: [],
       isShowAddWikiMenu: false,
       isShowAddDialog: false,
-      isDropdownMenuShown: false,
       isShowConvertStatusDialog: false,
     };
   }
@@ -308,13 +307,6 @@ class Wikis extends Component {
     });
   };
 
-  toggleDropdownMenu = (e) => {
-    e.stopPropagation();
-    this.setState({
-      isDropdownMenuShown: !this.state.isDropdownMenuShown
-    });
-  };
-
   render() {
     return (
       <Fragment>
@@ -338,20 +330,10 @@ class Wikis extends Component {
               <div className="path-container">
                 <h3 className="sf-heading m-0">{gettext('Wikis')}</h3>
                 {canCreateWiki &&
-                  <Dropdown
+                  <SingleDropdownToolbar
-                    direction="down"
+                    withPlusIcon={true}
-                    className="add-wiki-dropdown"
+                    opList={[{ 'text': gettext('Add Wiki'), 'onClick': () => this.toggleAddWikiDialog() }]}
-                    isOpen={this.state.isDropdownMenuShown}
+                  />
-                    toggle={this.toggleDropdownMenu}
-                    onMouseMove={(e) => {e.stopPropagation();}}
-                  >
-                    <DropdownToggle tag="i" className="px-1">
-                      <span className="sf3-font sf3-font-down" aria-hidden="true"></span>
-                    </DropdownToggle>
-                    <DropdownMenu positionFixed={true}>
-                      <DropdownItem onClick={() => {this.toggleAddWikiDialog();}}>{gettext('Add Wiki')}</DropdownItem>
-                    </DropdownMenu>
-                  </Dropdown>
                 }
               </div>
             </div>