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/dialog/create-group-dialog.js

@@ -39,7 +39,8 @@ class CreateGroupDialog extends React.Component {
     if (name) {
       let that = this;
       seafileAPI.createGroup(name).then((res)=> {
-        that.props.onCreateGroup();
+        that.props.onCreateGroup(res.data);
+        this.props.toggleDialog();
       }).catch((error) => {
         let errorMsg = Utils.getErrorMsg(error);
         this.setState({errorMsg: errorMsg});
@@ -63,8 +64,8 @@ class CreateGroupDialog extends React.Component {
 
   render() {
     return(
-      <Modal isOpen={this.props.showAddGroupModal} toggle={this.props.toggleAddGroupModal} autoFocus={false}>
-        <ModalHeader toggle={this.props.toggleAddGroupModal}>{gettext('New Group')}</ModalHeader>
+      <Modal isOpen={true} toggle={this.props.toggleDialog} autoFocus={false}>
+        <ModalHeader toggle={this.props.toggleDialog}>{gettext('New Group')}</ModalHeader>
         <ModalBody>
           <label htmlFor="groupName">{gettext('Name')}</label>
           <Input
@@ -78,7 +79,7 @@ class CreateGroupDialog extends React.Component {
           <span className="error">{this.state.errorMsg}</span>
         </ModalBody>
         <ModalFooter>
-          <Button color="secondary" onClick={this.props.toggleAddGroupModal}>{gettext('Cancel')}</Button>
+          <Button color="secondary" onClick={this.props.toggleDialog}>{gettext('Cancel')}</Button>
           <Button color="primary" onClick={this.handleSubmitGroup} disabled={!this.state.isSubmitBtnActive}>{gettext('Submit')}</Button>
         </ModalFooter>
       </Modal>
@@ -87,9 +88,8 @@ class CreateGroupDialog extends React.Component {
 }
 
 const CreateGroupDialogPropTypes = {
-  toggleAddGroupModal: PropTypes.func.isRequired,
-  onCreateGroup: PropTypes.func.isRequired,
-  showAddGroupModal: PropTypes.bool.isRequired,
+  toggleDialog: PropTypes.func.isRequired,
+  onCreateGroup: PropTypes.func.isRequired
 };
 
 CreateGroupDialog.propTypes = CreateGroupDialogPropTypes;

frontend/src/components/main-side-nav.js

@@ -18,6 +18,7 @@ class MainSideNav extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      FilesNavUnfolded: false,
       groupsExtended: false,
       sharedExtended: false,
       closeSideBar:false,
@@ -172,64 +173,71 @@ class MainSideNav extends React.Component {
     );
   }
 
+  toggleFilesNav = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    this.setState({
+      FilesNavUnfolded: !this.state.FilesNavUnfolded
+    });
+  };
+
   render() {
     let showActivity = isDocs || isPro || !isDBSqlite3;
+    const { FilesNavUnfolded } = this.state;
     return (
       <div className="side-nav">
         <div className="side-nav-con">
-          <h3 className="sf-heading">{gettext('Files')}</h3>
           <ul className="nav nav-pills flex-column nav-container">
-            {canAddRepo && (
-              <li className="nav-item">
-                <Link to={ siteRoot + 'my-libs/' } className={`nav-link ellipsis ${this.getActiveClass('my-libs') || this.getActiveClass('deleted') }`} title={gettext('My Libraries')} onClick={(e) => this.tabItemClick(e, 'my-libs')}>
-                  <span className="sf2-icon-user" aria-hidden="true"></span>
-                  <span className="nav-text">{gettext('My Libraries')}</span>
-                </Link>
-              </li>
-            )}
-            <li className="nav-item">
-              <Link to={siteRoot + 'shared-libs/'} className={`nav-link ellipsis ${this.getActiveClass('shared-libs')}`} title={gettext('Shared with me')} onClick={(e) => this.tabItemClick(e, 'shared-libs')}>
-                <span className="sf2-icon-share" aria-hidden="true"></span>
-                <span className="nav-text">{gettext('Shared with me')}</span>
+            <li className="nav-item flex-column" id="files">
+              <Link to={ siteRoot + 'libraries/' } className={`nav-link ellipsis ${this.getActiveClass('libraries')}`} title={gettext('Files')} onClick={(e) => this.tabItemClick(e, 'libraries')}>
+                <span className="sf3-font-files sf3-font" aria-hidden="true"></span>
+                <span className="nav-text">{gettext('Files')}</span>
+                <span className={`toggle-icon fas ${FilesNavUnfolded ? 'fa-caret-down':'fa-caret-left'} ${this.getActiveClass('libraries') ? 'text-white' : ''}`} aria-hidden="true" onClick={this.toggleFilesNav}></span>
               </Link>
+              <ul id="files-sub-nav" className={`nav sub-nav nav-pills flex-column ${FilesNavUnfolded ? 'side-panel-slide' : 'side-panel-slide-up'}`}>
+                {canAddRepo && (
+                  <li className="nav-item">
+                    <Link to={ siteRoot + 'my-libs/' } className={`nav-link ellipsis ${this.getActiveClass('my-libs') || this.getActiveClass('deleted') }`} title={gettext('My Libraries')} onClick={(e) => this.tabItemClick(e, 'my-libs')}>
+                      <span className="nav-text">{gettext('My Libraries')}</span>
+                    </Link>
+                  </li>
+                )}
+                <li className="nav-item">
+                  <Link to={siteRoot + 'shared-libs/'} className={`nav-link ellipsis ${this.getActiveClass('shared-libs')}`} title={gettext('Shared with me')} onClick={(e) => this.tabItemClick(e, 'shared-libs')}>
+                    <span className="nav-text">{gettext('Shared with me')}</span>
+                  </Link>
+                </li>
+                {canViewOrg &&
+                <li className="nav-item" onClick={(e) => this.tabItemClick(e, 'org')}>
+                  <Link to={ siteRoot + 'org/' } className={`nav-link ellipsis ${this.getActiveClass('org')}`} title={gettext('Shared with all')}>
+                    <span className="nav-text">{gettext('Shared with all')}</span>
+                  </Link>
+                </li>
+                }
+                <li className="nav-item flex-column" id="group-nav">
+                  <a className="nav-link ellipsis d-flex pr-1" title={gettext('Shared with groups')} onClick={this.grpsExtend}>
+                    <span className="nav-text">{gettext('Shared with groups')}</span>
+                    <span className={`toggle-icon fas ${this.state.groupsExtended ?'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span>
+                  </a>
+                  {this.renderSharedGroups()}
+                </li>
+                {enableOCM &&
+                <li className="nav-item">
+                  <Link to={siteRoot + 'shared-with-ocm/'} className={`nav-link ellipsis ${this.getActiveClass('shared-with-ocm')}`} title={gettext('Shared from other servers')} onClick={(e) => this.tabItemClick(e, 'shared-with-ocm')}>
+                    <span className="nav-text">{gettext('Shared from other servers')}</span>
+                  </Link>
+                </li>
+                }
+                {enableOCMViaWebdav &&
+                <li className="nav-item">
+                  <Link to={siteRoot + 'ocm-via-webdav/'} className={`nav-link ellipsis ${this.getActiveClass('ocm-via-webdav')}`} title={gettext('Shared from other servers')} onClick={(e) => this.tabItemClick(e, 'ocm-via-webdav')}>
+                    <span className="nav-text">{gettext('Shared from other servers')}</span>
+                  </Link>
+                </li>
+                }
+              </ul>
             </li>
-            { canViewOrg &&
-              <li className="nav-item" onClick={(e) => this.tabItemClick(e, 'org')}>
-                <Link to={ siteRoot + 'org/' } className={`nav-link ellipsis ${this.getActiveClass('org')}`} title={gettext('Shared with all')}>
-                  <span className="sf2-icon-organization" aria-hidden="true"></span>
-                  <span className="nav-text">{gettext('Shared with all')}</span>
-                </Link>
-              </li>
-            }
-            <li className="nav-item flex-column" id="group-nav">
-              <a className="nav-link ellipsis" title={gettext('Shared with groups')} onClick={this.grpsExtend}>
-                <span className="sf2-icon-group" aria-hidden="true"></span>
-                <span className="nav-text">{gettext('Shared with groups')}</span>
-                <span className={`toggle-icon fas ${this.state.groupsExtended ?'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span>
-              </a>
-              {this.renderSharedGroups()}
-            </li>
-            {enableOCM &&
-              <li className="nav-item">
-                <Link to={siteRoot + 'shared-with-ocm/'} className={`nav-link ellipsis ${this.getActiveClass('shared-with-ocm')}`} title={gettext('Shared from other servers')} onClick={(e) => this.tabItemClick(e, 'shared-with-ocm')}>
-                  <span className="sf3-font-share-from-other-servers sf3-font" aria-hidden="true"></span>
-                  <span className="nav-text">{gettext('Shared from other servers')}</span>
-                </Link>
-              </li>
-            }
-            {enableOCMViaWebdav &&
-              <li className="nav-item">
-                <Link to={siteRoot + 'ocm-via-webdav/'} className={`nav-link ellipsis ${this.getActiveClass('ocm-via-webdav')}`} title={gettext('Shared from other servers')} onClick={(e) => this.tabItemClick(e, 'ocm-via-webdav')}>
-                  <span className="sf3-font-share-from-other-servers sf3-font" aria-hidden="true"></span>
-                  <span className="nav-text">{gettext('Shared from other servers')}</span>
-                </Link>
-              </li>
-            }
-          </ul>
 
-
-          <h3 className="sf-heading">{gettext('Tools')}</h3>
-          <ul className="nav nav-pills flex-column nav-container">
             <li className="nav-item">
               <Link className={`nav-link ellipsis ${this.getActiveClass('starred')}`} to={siteRoot + 'starred/'} title={gettext('Favorites')} onClick={(e) => this.tabItemClick(e, 'starred')}>
                 <span className="sf2-icon-star" aria-hidden="true"></span>

frontend/src/components/shared-repo-list-view/shared-repo-list-item.js

@@ -29,7 +29,6 @@ const propTypes = {
   onFreezedItem: PropTypes.func.isRequired,
   onUnfreezedItem: PropTypes.func.isRequired,
   onItemUnshare: PropTypes.func.isRequired,
-  onItemDetails: PropTypes.func,
   onItemRename: PropTypes.func,
   onItemDelete: PropTypes.func,
   onMonitorRepo: PropTypes.func
@@ -165,9 +164,6 @@ class SharedRepoListItem extends React.Component {
       case 'Folder Permission':
         this.onItemFolderPermissionToggle();
         break;
-      case 'Details':
-        this.onItemDetails();
-        break;
       case 'Share':
         this.onItemShare();
         break;
@@ -251,10 +247,6 @@ class SharedRepoListItem extends React.Component {
     this.setState({isHistorySettingDialogShow: !this.state.isHistorySettingDialogShow});
   };
 
-  onItemDetails = () => {
-    this.props.onItemDetails(this.props.repo);
-  };
-
   onItemShare = (e) => {
     e.preventDefault();
     this.setState({isShowSharedDialog: true});
@@ -338,9 +330,6 @@ class SharedRepoListItem extends React.Component {
       case 'Folder Permission':
         translateResult = gettext('Folder Permission');
         break;
-      case 'Details':
-        translateResult = gettext('Details');
-        break;
       case 'Unshare':
         translateResult = gettext('Unshare');
         break;
@@ -423,7 +412,7 @@ class SharedRepoListItem extends React.Component {
               const monitorOp = repo.monitored ? 'Unwatch File Changes' : 'Watch File Changes';
               operations.push(monitorOp);
             }
-            operations.push('Divider', 'History Setting', 'Details');
+            operations.push('Divider', 'History Setting');
             if (Utils.isDesktop()) {
               operations.push('Advanced');
             }

frontend/src/components/shared-repo-list-view/shared-repo-list-view.js

@@ -17,7 +17,6 @@ const propTypes = {
   repoList: PropTypes.array.isRequired,
   onItemUnshare: PropTypes.func.isRequired,
   onItemDelete: PropTypes.func,
-  onItemDetails: PropTypes.func,
   onItemRename: PropTypes.func,
   hasNextPage: PropTypes.bool,
   onMonitorRepo: PropTypes.func,
@@ -98,7 +97,6 @@ class SharedRepoListView extends React.Component {
               onUnfreezedItem={this.onUnfreezedItem}
               onItemUnshare={this.props.onItemUnshare}
               onItemDelete={this.props.onItemDelete}
-              onItemDetails={this.props.onItemDetails}
               onItemRename={this.props.onItemRename}
               onMonitorRepo={this.props.onMonitorRepo}
             />
@@ -109,12 +107,11 @@ class SharedRepoListView extends React.Component {
   };
 
   renderPCUI = () => {
-    let isShowTableThread = this.props.isShowTableThread !== undefined ? this.props.isShowTableThread : true;
-
+    const { theadHidden = false } = this.props;
     const { sortByName, sortByTime, sortBySize, sortIcon } = this.getSortMetaData();
 
     return (
-      <table className={isShowTableThread ? '' : 'table-thead-hidden'}>
+      <table className={theadHidden ? 'table-thead-hidden' : ''}>
         <thead>
           <tr>
             <th width="4%"></th>

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;