Side nav (#6309)

* [user panel] combined 7 commits into 1:

[user side nav] added 'fold/unfold' for the sidebar

[redesign] redesigned toolbar for 'my libs' & 'shared with all'; redesigned 'top bar' for 'help', 'clients' and other pages

[Shared with all] 'share existing libraries' dialog: added the 'close' icon back, enabled clicking outside to close the dialog

['Invite Guest' page] redesigned the toolbar

['Share Admin' - 'Links'] 'Share Links' page: redesigned the toolbar

['Share Admin' - 'Links'] 'Upload Links' page: redesigned the toolbar

cleaned up code

* [user side panel] update

* [user panel] update

* [code style] update: remove an eslint warning

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

@@ -8,10 +8,13 @@ import Repo from '../../models/repo';
 import toaster from '../../components/toast';
 import Loading from '../../components/loading';
 import EmptyTip from '../../components/empty-tip';
-import CommonToolbar from '../../components/toolbar/common-toolbar';
 import SharedRepoListView from '../../components/shared-repo-list-view/shared-repo-list-view';
 import SortOptionsDialog from '../../components/dialog/sort-options';
-import TopToolbar from './top-toolbar';
+import SingleDropdownToolbar from '../../components/toolbar/single-dropdown-toolbar';
+import ModalPortal from '../../components/modal-portal';
+import TopToolbar from '../../components/toolbar/top-toolbar';
+import CreateRepoDialog from '../../components/dialog/create-repo-dialog';
+import ShareRepoDialog from '../../components/dialog/share-repo-dialog';
 
 const propTypes = {
   onShowSidePanel: PropTypes.func,
@@ -29,6 +32,8 @@ class PublicSharedView extends React.Component {
       isLoading: true,
       errMessage: '',
       repoList: [],
+      isCreateRepoDialogOpen: false,
+      isSelectRepoDialogOpen: false,
       sortBy: cookie.load('seafile-repo-dir-sort-by') || 'name', // 'name' or 'time' or 'size'
       sortOrder: cookie.load('seafile-repo-dir-sort-order') || 'asc', // 'asc' or 'desc'
       isSortOptionsDialogOpen: false,
@@ -152,12 +157,51 @@ class PublicSharedView extends React.Component {
   renderSortIconInMobile = () => {
     return (
       <>
-
         {(!Utils.isDesktop() && this.state.repoList.length > 0) && <span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>}
       </>
     );
   };
 
+  onCreateRepoToggle = () => {
+    this.setState({isCreateRepoDialogOpen: !this.state.isCreateRepoDialogOpen});
+  };
+
+  onSelectRepoToggle = () => {
+    this.setState({isSelectRepoDialogOpen: !this.state.isSelectRepoDialogOpen});
+  };
+
+  onCreateRepo = (repo) => {
+    this.onCreateRepoToggle();
+    seafileAPI.createPublicRepo(repo).then(res => {
+      let object = {
+        repo_id: res.data.id,
+        repo_name: res.data.name,
+        permission: res.data.permission,
+        size: res.data.size,
+        owner_name: res.data.owner_name,
+        owner_email: res.data.owner,
+        mtime: res.data.mtime,
+        encrypted: res.data.encrypted,
+      };
+      let repo = new Repo(object);
+      this.addRepoItem(repo);
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  };
+
+  onRepoSelectedHandler = (selectedRepoList) => {
+    selectedRepoList.forEach(repo => {
+      seafileAPI.selectOwnedRepoToPublic(repo.repo_id, {share_type: 'public', permission: repo.sharePermission}).then(() => {
+        this.addRepoItem(repo);
+      }).catch((error) => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
+      });
+    });
+  };
+
   render() {
     const { inAllLibs = false, currentViewMode = 'list' } = this.props; // inAllLibs: in 'All Libs'('Files') page
 
@@ -178,14 +222,25 @@ class PublicSharedView extends React.Component {
 
     return (
       <Fragment>
-        <div className="main-panel-north border-left-show">
-          {canAddPublicRepo && <TopToolbar onShowSidePanel={this.props.onShowSidePanel} addRepoItem={this.addRepoItem} />}
-          <CommonToolbar onSearchedClick={this.props.onSearchedClick} />
-        </div>
+        <TopToolbar
+          onShowSidePanel={this.props.onShowSidePanel}
+          onSearchedClick={this.props.onSearchedClick}
+        >
+        </TopToolbar>
         <div className="main-panel-center">
           <div className="cur-view-container">
             <div className="cur-view-path">
-              <h3 className="sf-heading m-0">{gettext('Shared with all')}</h3>
+              <h3 className="sf-heading m-0">
+                {gettext('Shared with all')}
+                {canAddPublicRepo &&
+                <SingleDropdownToolbar
+                  opList={[
+                    {'text': gettext('Share existing libraries'), 'onClick': this.onSelectRepoToggle},
+                    {'text': gettext('New Library'), 'onClick': this.onCreateRepoToggle}
+                  ]}
+                />
+                }
+              </h3>
               {this.renderSortIconInMobile()}
             </div>
             <div className="cur-view-content">
@@ -201,6 +256,23 @@ class PublicSharedView extends React.Component {
           sortItems={this.sortItems}
         />
         }
+        {this.state.isCreateRepoDialogOpen && (
+          <ModalPortal>
+            <CreateRepoDialog
+              libraryType={this.state.libraryType}
+              onCreateToggle={this.onCreateRepoToggle}
+              onCreateRepo={this.onCreateRepo}
+            />
+          </ModalPortal>
+        )}
+        {this.state.isSelectRepoDialogOpen && (
+          <ModalPortal>
+            <ShareRepoDialog
+              onRepoSelectedHandler={this.onRepoSelectedHandler}
+              onShareRepoDialogClose={this.onSelectRepoToggle}
+            />
+          </ModalPortal>
+        )}
       </Fragment>
     );
   }

frontend/src/pages/shared-with-all/top-toolbar.js

@@ -1,125 +0,0 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import MediaQuery from 'react-responsive';
-import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
-import { seafileAPI } from '../../utils/seafile-api';
-import { gettext } from '../../utils/constants';
-import { Utils } from '../../utils/utils';
-import Repo from '../../models/repo';
-import toaster from '../../components/toast';
-import ModalPortal from '../../components/modal-portal';
-import CreateRepoDialog from '../../components/dialog/create-repo-dialog';
-import ShareRepoDialog from '../../components/dialog/share-repo-dialog';
-
-const propTypes = {
-  onShowSidePanel: PropTypes.func.isRequired,
-  addRepoItem: PropTypes.func.isRequired
-};
-
-class TopToolbar extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      libraryType: 'public',
-      isCreateMenuShow: false,
-      isCreateRepoDialogShow: false,
-      isSelectRepoDialpgShow: false,
-    };
-  }
-
-  onCreateRepo = (repo) => {
-    seafileAPI.createPublicRepo(repo).then(res => {
-      let object = {
-        repo_id: res.data.id,
-        repo_name: res.data.name,
-        permission: res.data.permission,
-        size: res.data.size,
-        owner_name: res.data.owner_name,
-        owner_email: res.data.owner,
-        mtime: res.data.mtime,
-        encrypted: res.data.encrypted,
-      };
-      let repo = new Repo(object);
-      this.props.addRepoItem(repo);
-      this.onCreateRepoToggle();
-    }).catch((error) => {
-      let errMessage = Utils.getErrorMsg(error);
-      toaster.danger(errMessage);
-    });
-  };
-
-  onRepoSelectedHandler = (selectedRepoList) => {
-    selectedRepoList.forEach(repo => {
-      seafileAPI.selectOwnedRepoToPublic(repo.repo_id, {share_type: 'public', permission: repo.sharePermission}).then(() => {
-        this.props.addRepoItem(repo);
-      }).catch((error) => {
-        let errMessage = Utils.getErrorMsg(error);
-        toaster.danger(errMessage);
-      });
-    });
-  };
-
-  onAddRepoToggle = () => {
-    this.setState({isCreateMenuShow: !this.state.isCreateMenuShow});
-  };
-
-  onCreateRepoToggle = () => {
-    this.setState({isCreateRepoDialogShow: !this.state.isCreateRepoDialogShow});
-  };
-
-  onSelectRepoToggle = () => {
-    this.setState({isSelectRepoDialpgShow: !this.state.isSelectRepoDialpgShow});
-  };
-
-  render() {
-    return (
-      <Fragment>
-        <div className="cur-view-toolbar">
-          <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu" onClick={this.props.onShowSidePanel}></span>
-          <div className="operation">
-            <Dropdown isOpen={this.state.isCreateMenuShow} toggle={this.onAddRepoToggle}>
-              <MediaQuery query="(min-width: 768px)">
-                <DropdownToggle className='btn btn-secondary operation-item'>
-                  <i className="sf3-font sf3-font-enlarge text-secondary mr-1"></i>{gettext('Add Library')}
-                </DropdownToggle>
-              </MediaQuery>
-              <MediaQuery query="(max-width: 767.8px)">
-                <DropdownToggle
-                  tag="span"
-                  className="sf2-icon-plus mobile-toolbar-icon"
-                  title={gettext('Add Library')}
-                />
-              </MediaQuery>
-              <DropdownMenu>
-                <DropdownItem onClick={this.onSelectRepoToggle}>{gettext('Share existing libraries')}</DropdownItem>
-                <DropdownItem onClick={this.onCreateRepoToggle}>{gettext('New Library')}</DropdownItem>
-              </DropdownMenu>
-            </Dropdown>
-          </div>
-        </div>
-        {this.state.isCreateRepoDialogShow && (
-          <ModalPortal>
-            <CreateRepoDialog
-              libraryType={this.state.libraryType}
-              onCreateToggle={this.onCreateRepoToggle}
-              onCreateRepo={this.onCreateRepo}
-            />
-          </ModalPortal>
-        )}
-        {this.state.isSelectRepoDialpgShow && (
-          <ModalPortal>
-            <ShareRepoDialog
-              onRepoSelectedHandler={this.onRepoSelectedHandler}
-              onShareRepoDialogClose={this.onSelectRepoToggle}
-            />
-          </ModalPortal>
-        )}
-      </Fragment>
-    );
-  }
-}
-
-TopToolbar.propTypes = propTypes;
-
-export default TopToolbar;