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,8 +38,7 @@ class SingleDropdownToolbar extends React.Component {
     const { opList, withPlusIcon = false } = this.props;
 
     return (
-      <Fragment>
-        <Dropdown isOpen={this.state.isDropdownMenuOpen} toggle={this.toggleDropdownMenu}>
+      <Dropdown isOpen={this.state.isDropdownMenuOpen} toggle={this.toggleDropdownMenu} direction="down">
         <DropdownToggle
           tag="span"
           role="button"
@@ -47,12 +47,10 @@ class SingleDropdownToolbar extends React.Component {
           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>
-            }
+          {withPlusIcon && <i className="sf3-font-new sf3-font main-icon"></i>}
+          <i className="sf3-font-down sf3-font"></i>
         </DropdownToggle>
-          <DropdownMenu>
+        <DropdownMenu positionFixed={true}>
           {opList.map((item, index) => {
             if (item == 'Divider') {
               return <DropdownItem key={index} divider />;
@@ -66,7 +64,6 @@ class SingleDropdownToolbar extends React.Component {
           })}
         </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
-                    direction="down"
-                    className="add-wiki-dropdown"
-                    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>
+                  <SingleDropdownToolbar
+                    withPlusIcon={true}
+                    opList={[{ 'text': gettext('Add Wiki'), 'onClick': () => this.toggleAddWikiDialog() }]}
+                  />
                 }
               </div>
             </div>