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/pages/my-libs/my-libs.js

@@ -8,12 +8,10 @@ import toaster from '../../components/toast';
 import Repo from '../../models/repo';
 import Loading from '../../components/loading';
 import EmptyTip from '../../components/empty-tip';
-import CommonToolbar from '../../components/toolbar/common-toolbar';
-import RepoViewToolbar from '../../components/toolbar/repo-view-toobar';
-import LibDetail from '../../components/dirent-detail/lib-details';
+import TopToolbar from '../../components/toolbar/top-toolbar';
+import MyLibsToolbar from '../../components/toolbar/my-libs-toolbar';
 import MylibRepoListView from './mylib-repo-list-view';
 import SortOptionsDialog from '../../components/dialog/sort-options';
-import GuideForNewDialog from '../../components/dialog/guide-for-new-dialog';
 
 const propTypes = {
   onShowSidePanel: PropTypes.func.isRequired,
@@ -27,9 +25,7 @@ class MyLibraries extends Component {
       errorMsg: '',
       isLoading: true,
       repoList: [],
-      isShowDetails: false,
       isSortOptionsDialogOpen: false,
-      isGuideForNewDialogOpen: window.app.pageOptions.guideEnabled,
       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'
     };
@@ -129,37 +125,15 @@ class MyLibraries extends Component {
     this.setState({repoList: repoList});
   };
 
-  onRepoClick = (repo) => {
-    if (this.state.isShowDetails) {
-      this.onRepoDetails(repo);
-    }
-  };
-
-  onRepoDetails = (repo) => {
-    this.setState({
-      currentRepo: repo,
-      isShowDetails: true,
-    });
-  };
-
-  closeDetails = () => {
-    this.setState({isShowDetails: !this.state.isShowDetails});
-  };
-
-  toggleGuideForNewDialog = () => {
-    window.app.pageOptions.guideEnabled = false;
-    this.setState({
-      isGuideForNewDialogOpen: false
-    });
-  };
-
   render() {
     return (
       <Fragment>
-        <div className="main-panel-north border-left-show">
-          <RepoViewToolbar onShowSidePanel={this.props.onShowSidePanel} onCreateRepo={this.onCreateRepo} libraryType={'mine'}/>
-          <CommonToolbar onSearchedClick={this.props.onSearchedClick} />
-        </div>
+        <TopToolbar
+          onShowSidePanel={this.props.onShowSidePanel}
+          onSearchedClick={this.props.onSearchedClick}
+        >
+          <MyLibsToolbar onCreateRepo={this.onCreateRepo} moreShown={true} />
+        </TopToolbar>
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <div className="cur-view-path">
@@ -179,17 +153,11 @@ class MyLibraries extends Component {
                   onDeleteRepo={this.onDeleteRepo}
                   onTransferRepo={this.onTransferRepo}
                   onMonitorRepo={this.onMonitorRepo}
-                  onRepoClick={this.onRepoClick}
                   sortRepoList={this.sortRepoList}
                 />
               }
             </div>
           </div>
-          {!this.state.isLoading && !this.state.errorMsg && this.state.isGuideForNewDialogOpen &&
-            <GuideForNewDialog
-              toggleDialog={this.toggleGuideForNewDialog}
-            />
-          }
           {this.state.isSortOptionsDialogOpen &&
             <SortOptionsDialog
               toggleDialog={this.toggleSortOptionsDialog}
@@ -198,14 +166,6 @@ class MyLibraries extends Component {
               sortItems={this.sortRepoList}
             />
           }
-          {this.state.isShowDetails && (
-            <div className="cur-view-detail">
-              <LibDetail
-                currentRepo={this.state.currentRepo}
-                closeDetails={this.closeDetails}
-              />
-            </div>
-          )}
         </div>
       </Fragment>
     );