Files (#5881)

* [side nav] redesigned it: added a new item 'Files', and made 'My Libraries' and some other items as its sub nav items

* ['Files'] added new page 'Files'(added 'My Libraries' to it)

* ['Files'] added 'Shared with me' to it

* ['Files'] added 'Shared with all' to it

* ['Files'] added 'Shared with groups' to it (removed 'details' for 'department')

frontend/src/components/toolbar/groups-toolbar.js

@@ -1,44 +1,47 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import MediaQuery from 'react-responsive';
-import CommonToolbar from './common-toolbar';
-import { Button } from 'reactstrap';
-import { gettext, canAddGroup } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+import { gettext } from '../../utils/constants';
+import CreateGroupDialog from '../../components/dialog/create-group-dialog';
 
 const propTypes = {
-  searchPlaceholder: PropTypes.string,
-  onShowSidePanel: PropTypes.func.isRequired,
-  onSearchedClick: PropTypes.func.isRequired,
-  toggleAddGroupModal: PropTypes.func.isRequired,
+  onCreateGroup: PropTypes.func.isRequired
 };
 
 class GroupsToolbar extends React.Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      isDialogOpen: false
+    };
   }
 
+  toggleDialog = () => {
+    this.setState({
+      isDialogOpen: !this.state.isDialogOpen
+    });
+  };
+
   render() {
-    let { onShowSidePanel, onSearchedClick } = this.props;
     return (
-      <div className="main-panel-north border-left-show">
-        <div className="cur-view-toolbar">
-          <span title="Side Nav Menu" onClick={onShowSidePanel} className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none"></span>
-          {canAddGroup && (
-            <div className="operation">
-              <MediaQuery query="(min-width: 768px)">
-                <Button color="btn btn-secondary operation-item" onClick={this.props.toggleAddGroupModal}>
-                  <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Group')}
-                </Button>
-              </MediaQuery>
-              <MediaQuery query="(max-width: 767.8px)">
-                <span className="sf2-icon-plus mobile-toolbar-icon" title={gettext('New Group')} onClick={this.props.toggleAddGroupModal}></span>
-              </MediaQuery>
-            </div>
-          )}
-        </div>
-        <CommonToolbar searchPlaceholder={this.props.searchPlaceholder} onSearchedClick={onSearchedClick}/>
-      </div>
+      <>
+        {Utils.isDesktop() ? (
+          <div className="operation">
+            <button className="btn btn-secondary operation-item" onClick={this.toggleDialog}>
+              <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Group')}
+            </button>
+          </div>
+        ) : (
+          <span className="sf2-icon-plus mobile-toolbar-icon" title={gettext('New Group')} onClick={this.toggleDialog}></span>
+        )}
+        {this.state.isDialogOpen &&
+          <CreateGroupDialog
+            toggleDialog={this.toggleDialog}
+            onCreateGroup={this.props.onCreateGroup}
+          />
+        }
+      </>
     );
   }
 }

frontend/src/components/toolbar/my-libs-toolbar.js

@@ -1,24 +1,23 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Utils } from '../../utils/utils';
+import { DropdownToggle, Dropdown, DropdownMenu, DropdownItem } from 'reactstrap';
 import { Link, navigate } from '@gatsbyjs/reach-router';
+import { Utils } from '../../utils/utils';
 import { siteRoot, gettext } from '../../utils/constants';
 import ModalPortal from '../modal-portal';
 import CreateRepoDialog from '../dialog/create-repo-dialog';
-import { DropdownToggle, Dropdown, DropdownMenu, DropdownItem } from 'reactstrap';
 
 const propTypes = {
-  libraryType: PropTypes.string.isRequired,
   onCreateRepo: PropTypes.func.isRequired,
-  onShowSidePanel: PropTypes.func.isRequired,
+  moreShown: PropTypes.bool
 };
 
-class RepoViewToolbar extends React.Component {
+class MyLibsToolbar extends React.Component {
 
   constructor(props) {
     super(props);
     this.state = {
-      isCreateRepoDialogShow: false,
+      isCreateRepoDialogOpen: false,
       isOpen: false,
     };
   }
@@ -29,7 +28,7 @@ class RepoViewToolbar extends React.Component {
   };
 
   onCreateToggle = () => {
-    this.setState({isCreateRepoDialogShow: !this.state.isCreateRepoDialogShow});
+    this.setState({isCreateRepoDialogOpen: !this.state.isCreateRepoDialogOpen});
   };
 
   toggleMore = () => {
@@ -49,15 +48,15 @@ class RepoViewToolbar extends React.Component {
   };
 
   render() {
+    const { moreShown = false } = this.props;
     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>
-          {Utils.isDesktop() ? (
-            <div className="operation">
-              <button className="btn btn-secondary operation-item" title={gettext('New Library')} onClick={this.onCreateToggle}>
-                <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Library')}
-              </button>
+        {Utils.isDesktop() ? (
+          <div className="operation">
+            <button className="btn btn-secondary operation-item" title={gettext('New Library')} onClick={this.onCreateToggle}>
+              <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Library')}
+            </button>
+            {moreShown &&
               <Dropdown isOpen={this.state.isOpen} toggle={this.toggleMore}>
                 <DropdownToggle className='btn btn-secondary operation-item' onKeyDown={this.onDropdownToggleKeyDown}>
                   {gettext('More')}
@@ -68,15 +67,15 @@ class RepoViewToolbar extends React.Component {
                   </DropdownItem>
                 </DropdownMenu>
               </Dropdown>
-            </div>
-          ) : (
-            <span className="sf2-icon-plus mobile-toolbar-icon" title={gettext('New Library')} onClick={this.onCreateToggle}></span>
-          )}
-        </div>
-        {this.state.isCreateRepoDialogShow && (
+            }
+          </div>
+        ) : (
+          <span className="sf2-icon-plus mobile-toolbar-icon" title={gettext('New Library')} onClick={this.onCreateToggle}></span>
+        )}
+        {this.state.isCreateRepoDialogOpen && (
           <ModalPortal>
             <CreateRepoDialog
-              libraryType={this.props.libraryType}
+              libraryType='mine'
               onCreateRepo={this.onCreateRepo}
               onCreateToggle={this.onCreateToggle}
             />
@@ -87,6 +86,6 @@ class RepoViewToolbar extends React.Component {
   }
 }
 
-RepoViewToolbar.propTypes = propTypes;
+MyLibsToolbar.propTypes = propTypes;
 
-export default RepoViewToolbar;
+export default MyLibsToolbar;