Lib view mode (#2975)

* [update dir layout]rewrite dir layout

* add file menu handler

* optimized code

* add file load error message for file component

* repair pencil bug

* delete unnecessary file

* reapir file-chooser bug

* add file uploader module

* rename component name

frontend/src/components/dialog/list-tag-dialog.js

@@ -54,7 +54,7 @@ class TagListItem extends React.Component {
             {this.props.item.fileCount}{' '}{'files'}
           </span>
         </div>
-        <i className="tag-edit fa fa-pencil" onClick={this.onTagUpdate}></i>
+        <i className="tag-edit fa fa-pencil-alt" onClick={this.onTagUpdate}></i>
       </li>
     );
   }

frontend/src/components/dialog/readme-dialog.js

@@ -39,7 +39,7 @@ class ReadmeDialog extends React.Component {
     return (
       <Modal isOpen={true} toggle={this.props.toggleCancel} className="readme-dialog" size="lg">
         <ModalHeader>{this.props.fileName}
-          <a className="readme-dialog-edit" href={this.props.href} target='_blank'><i className="fa fa-pencil"></i></a>
+          <a className="readme-dialog-edit" href={this.props.href} target='_blank'><i className="fa fa-pencil-alt"></i></a>
         </ModalHeader>
         <ModalBody>
           {this.state.isLoading ? 

frontend/src/components/dir-view-mode/dir-column-file.js

@@ -0,0 +1,104 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Utils } from '../../utils/utils';
+import { gettext, siteRoot } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import WikiMarkdownViewer from '../wiki-markdown-viewer';
+
+const propTypes = {
+  path: PropTypes.string.isRequired,
+  repoID: PropTypes.string.isRequired,
+  hash: PropTypes.string,
+  isDraft: PropTypes.bool,
+  hasDraft: PropTypes.bool,
+  goDraftPage: PropTypes.func.isRequired,
+  reviewStatus: PropTypes.any,
+  goReviewPage: PropTypes.func.isRequired,
+  isFileLoading: PropTypes.bool.isRequired,
+  isFileLoadedErr: PropTypes.bool.isRequired,
+  filePermission: PropTypes.bool,
+  content: PropTypes.string,
+  lastModified: PropTypes.string,
+  latestContributor: PropTypes.string,
+  onLinkClick: PropTypes.func.isRequired,
+};
+
+class DirColumnFile extends React.Component {
+
+  componentDidMount() {
+    if (this.props.hash) {
+      let hash = this.props.hash;
+      setTimeout(function() {
+        window.location.hash = hash;
+      }, 500);
+    }
+  }
+
+  onEditClick = (e) => {
+    e.preventDefault();
+    let { path, repoID } = this.props;
+    let url = siteRoot + 'lib/' + repoID + '/file' + Utils.encodePath(path) + '?mode=edit';
+    window.open(url);
+  }
+
+  onNewDraft = (e) => {
+    e.preventDefault();
+    let { path, repoID } = this.props;
+    seafileAPI.createDraft(repoID, path).then(res => {
+      window.location.href = siteRoot + 'lib/' + res.data.origin_repo_id + '/file' + res.data.draft_file_path + '?mode=edit';
+    });
+  }
+
+  goDraftPage = (e) => {
+    e.preventDefault();
+    this.props.goDraftPage();
+  }
+  
+  goReviewPage = (e) => {
+    e.preventDefault();
+    this.props.goReviewPage();
+  }
+
+  render() {
+    if (this.props.isFileLoadedErr) {
+      return (
+        <div className="message err-tip">{gettext('File does not exist.')}</div>
+      );
+    }
+    return (
+      <div className="cur-view-content">
+        <WikiMarkdownViewer
+          isTOCShow={false}
+          isFileLoading={this.props.isFileLoading}
+          markdownContent={this.props.content}
+          lastModified = {this.props.lastModified}
+          latestContributor={this.props.latestContributor}
+          onLinkClick={this.props.onLinkClick}
+        >
+          <Fragment>
+            {this.props.reviewStatus === 'open' &&
+              <div className='seafile-btn-view-review text-center'>
+                <div className='tag tag-green'> 
+                  {gettext('This file is in review stage')}
+                  <span className="ml-2" onClick={this.goReviewPage}>{gettext('View Review')}</span>
+                </div>
+              </div>
+            }
+            {(this.props.reviewStatus !== 'open' && !this.props.isDraft && this.props.hasDraft) &&
+              <div className='seafile-btn-view-review text-center'>
+                <div className='tag tag-green'>
+                  {gettext('This file is in draft stage.')}
+                  <span className="ml-2" onClick={this.goDraftPage}>{gettext('Edit Draft')}</span>
+                </div>
+              </div>
+            }
+          </Fragment>
+        </WikiMarkdownViewer>
+      </div>
+    );
+  }
+}
+
+DirColumnFile.propTypes = propTypes;
+
+export default DirColumnFile;

frontend/src/components/dir-view-mode/dir-column-nav.js

@@ -1,7 +1,5 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { gettext } from '../../utils/constants';
-import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
 import TreeView from '../../components/tree-view/tree-view';
 import Loading from '../../components/loading';
 import ModalPortal from '../../components/modal-portal';
@@ -11,11 +9,11 @@ import CreateFolder from '../../components/dialog/create-folder-dialog';
 import CreateFile from '../../components/dialog/create-file-dialog';
 
 const propTypes = {
+  currentPath: PropTypes.string.isRequired,
   repoPermission: PropTypes.bool.isRequired,
-  currentPath: PropTypes.string,
-  currentRepoInfo: PropTypes.object,  // Initially not loaded
   isTreeDataLoading: PropTypes.bool.isRequired,
   treeData: PropTypes.object.isRequired,
+  currentNode: PropTypes.object,
   onNodeClick: PropTypes.func.isRequired,
   onNodeCollapse: PropTypes.func.isRequired,
   onNodeExpanded: PropTypes.func.isRequired,
@@ -25,16 +23,12 @@ const propTypes = {
   onAddFolderNode: PropTypes.func.isRequired,
 };
 
-class LibContentNav extends React.Component {
+class DirColumnNav extends React.Component {
 
   constructor(props) {
     super(props);
     this.state = {
       opNode: null,
-      isLoadFailed: false,
-      isMenuIconShow: false,
-      isHeaderMenuShow: false,
-      isHeaderMenuFreezed: false,
       isDeleteDialogShow: false,
       isAddFileDialogShow: false,
       isAddFolderDialogShow: false,
@@ -43,13 +37,8 @@ class LibContentNav extends React.Component {
     this.isNodeMenuShow = true;
   }
 
-  onDropdownToggleClick = (e) => {
-    e.preventDefault();
-    this.toggleOperationMenu();
-  }
-
-  toggleOperationMenu = () => {
-    this.setState({isHeaderMenuShow: !this.state.isHeaderMenuShow});
+  componentWillReceiveProps(nextProps) {
+    this.setState({opNode: nextProps.currentNode});
   }
 
   onNodeClick = (node) => {
@@ -145,29 +134,7 @@ class LibContentNav extends React.Component {
   render() {
     return (
       <Fragment>
-        <div id="side-nav" className="dir-side-nav" role="navigation">
-          <div className="dir-nav-heading border-left-show" onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
-            <div className="heading-title">{gettext('Files')}</div>
-            <div className="heading-icon">
-              {(this.props.repoPermission) && (
-                <Dropdown isOpen={this.state.isHeaderMenuShow} toggle={this.toggleOperationMenu}>
-                  <DropdownToggle 
-                    tag="span" 
-                    className="action-icon sf2-icon-plus" 
-                    title={gettext('More Operations')}
-                    data-toggle="dropdown" 
-                    aria-expanded={this.state.isHeaderMenuShow}
-                    onClick={this.onDropdownToggleClick}
-                  />
-                  <DropdownMenu right>
-                    <DropdownItem onClick={this.onAddFolderToggle.bind(this, 'root')}>{gettext('New Folder')}</DropdownItem>
-                    <DropdownItem onClick={this.onAddFileToggle.bind(this, 'root')}>{gettext('New File')}</DropdownItem>
-                  </DropdownMenu>
-                </Dropdown>
-              )}
-            </div>
-          </div>
-          <div className="dir-nav-container">
+        <div className="dir-content-nav" role="navigation">
           {this.props.isTreeDataLoading ? 
             (<Loading/>) :
             (<TreeView
@@ -184,7 +151,6 @@ class LibContentNav extends React.Component {
             />)
           }
         </div>
-        </div>
         {this.state.isAddFolderDialogShow && (
           <ModalPortal>
             <CreateFolder
@@ -229,6 +195,6 @@ class LibContentNav extends React.Component {
   }
 }
 
-LibContentNav.propTypes = propTypes;
+DirColumnNav.propTypes = propTypes;
 
-export default LibContentNav;
+export default DirColumnNav;

frontend/src/components/dir-view-mode/dir-column-view.js

@@ -0,0 +1,155 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import DirColumnNav from './dir-column-nav';
+import DirColumnFile from './dir-column-file';
+import DirListMode from './dir-list-view';
+
+import '../../css/lib-content-view.css';
+
+const propTypes = {
+  path: PropTypes.string.isRequired,
+  repoID: PropTypes.string.isRequired,
+  // repoinfo
+  currentRepoInfo: PropTypes.object.isRequired,
+  repoPermission: PropTypes.bool.isRequired,
+  repoEncrypted: PropTypes.bool.isRequired,
+  enableDirPrivateShare: PropTypes.bool.isRequired,
+  userPrem: PropTypes.bool,
+  isAdmin: PropTypes.bool.isRequired,
+  isRepoOwner: PropTypes.bool.isRequired,
+  isGroupOwnedRepo: PropTypes.bool.isRequired,
+  // tree
+  isTreeDataLoading: PropTypes.bool.isRequired,
+  treeData: PropTypes.object.isRequired,
+  currentNode: PropTypes.object,
+  onNodeClick: PropTypes.func.isRequired,
+  onNodeCollapse: PropTypes.func.isRequired,
+  onNodeExpanded: PropTypes.func.isRequired,
+  onRenameNode: PropTypes.func.isRequired,
+  onDeleteNode: PropTypes.func.isRequired,
+  onAddFileNode: PropTypes.func.isRequired,
+  onAddFolderNode: PropTypes.func.isRequired,
+  // file
+  isViewFile: PropTypes.bool.isRequired,
+  isFileLoading: PropTypes.bool.isRequired,
+  isFileLoadedErr: PropTypes.bool.isRequired,
+  hash: PropTypes.string,
+  isDraft: PropTypes.bool.isRequired,
+  hasDraft: PropTypes.bool.isRequired,
+  goDraftPage: PropTypes.func.isRequired,
+  reviewStatus: PropTypes.string,
+  goReviewPage: PropTypes.func.isRequired,
+  filePermission: PropTypes.bool.isRequired,
+  content: PropTypes.string,
+  lastModified: PropTypes.string,
+  latestContributor: PropTypes.string,
+  onLinkClick: PropTypes.func.isRequired,
+  // repo content
+  isRepoInfoBarShow: PropTypes.bool.isRequired,
+  draftCounts: PropTypes.number.isRequired,
+  reviewCounts: PropTypes.number.isRequired,
+  usedRepoTags: PropTypes.array.isRequired,
+  readmeMarkdown: PropTypes.object,
+  updateUsedRepoTags: PropTypes.func.isRequired,
+  // list
+  isDirentListLoading: PropTypes.bool.isRequired,
+  direntList: PropTypes.array.isRequired,
+  sortBy: PropTypes.string.isRequired,
+  sortOrder: PropTypes.string.isRequired,
+  sortItems: PropTypes.func.isRequired,
+  onAddFile: PropTypes.func.isRequired,
+  updateDirent: PropTypes.func.isRequired,
+  onItemClick: PropTypes.func.isRequired,
+  onItemSelected: PropTypes.func.isRequired,
+  onItemDelete: PropTypes.func.isRequired,
+  onItemRename: PropTypes.func.isRequired,
+  onItemMove: PropTypes.func.isRequired,
+  onItemCopy: PropTypes.func.isRequired,
+  onItemDetails: PropTypes.func.isRequired,
+  onDirentClick: PropTypes.func.isRequired,
+  isAllItemSelected: PropTypes.bool.isRequired,
+  onAllItemSelected: PropTypes.func.isRequired,
+};
+
+class DirColumnView extends React.Component {
+
+  render() {
+    return (
+      <Fragment>
+        <DirColumnNav 
+          currentPath={this.props.path}
+          repoPermission={this.props.repoPermission}
+          isTreeDataLoading={this.props.isTreeDataLoading}
+          treeData={this.props.treeData}
+          currentNode={this.props.currentNode}
+          onNodeClick={this.props.onNodeClick}
+          onNodeCollapse={this.props.onNodeCollapse}
+          onNodeExpanded={this.props.onNodeExpanded}
+          onAddFolderNode={this.props.onAddFolderNode}
+          onAddFileNode={this.props.onAddFileNode}
+          onRenameNode={this.props.onRenameNode}
+          onDeleteNode={this.props.onDeleteNode}
+        />
+        <div className="dir-content-main">
+          {this.props.isViewFile ? (
+            <DirColumnFile 
+              path={this.props.path}
+              repoID={this.props.repoID}
+              hash={this.props.hash}
+              isDraft={this.props.isDraft}
+              hasDraft={this.props.hasDraft}
+              goDraftPage={this.props.goDraftPage}
+              reviewStatus={this.props.reviewStatus}
+              goReviewPage={this.props.goReviewPage}
+              isFileLoading={this.props.isFileLoading}
+              isFileLoadedErr={this.props.isFileLoadedErr}
+              filePermission={this.props.filePermission}
+              content={this.props.content}
+              lastModified={this.props.lastModified}
+              latestContributor={this.props.latestContributor}
+              onLinkClick={this.props.onLinkClick}
+            />
+          ) : (
+            <DirListMode 
+              path={this.props.path}
+              repoID={this.props.repoID}
+              currentRepoInfo={this.props.currentRepoInfo}
+              repoEncrypted={this.props.repoEncrypted}
+              isRepoOwner={this.props.isRepoOwner}
+              isAdmin={this.props.isAdmin}
+              isGroupOwnedRepo={this.props.isGroupOwnedRepo}
+              enableDirPrivateShare={this.props.enableDirPrivateShare}
+              isRepoInfoBarShow={this.props.isRepoInfoBarShow}
+              usedRepoTags={this.props.usedRepoTags}
+              readmeMarkdown={this.props.readmeMarkdown}
+              draftCounts={this.props.draftCounts}
+              reviewCounts={this.props.draftCounts}
+              updateUsedRepoTags={this.props.updateUsedRepoTags}
+              isDirentListLoading={this.props.isDirentListLoading}
+              direntList={this.props.direntList}
+              sortBy={this.props.sortBy}
+              sortOrder={this.props.sortOrder}
+              sortItems={this.props.sortItems}
+              onAddFile={this.props.onAddFile}
+              onItemClick={this.props.onItemClick}
+              onItemSelected={this.props.onItemSelected}
+              onItemDelete={this.props.onItemDelete}
+              onItemRename={this.props.onItemRename}
+              onItemMove={this.props.onItemMove}
+              onItemCopy={this.props.onItemCopy}
+              onDirentClick={this.props.onDirentClick}
+              onItemDetails={this.props.onItemDetails}
+              updateDirent={this.props.updateDirent}
+              isAllItemSelected={this.props.isAllItemSelected}
+              onAllItemSelected={this.props.onAllItemSelected}
+            />
+          )}
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+DirColumnView.propTypes = propTypes;
+
+export default DirColumnView;

frontend/src/components/dir-view-mode/dir-grid-view.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+
+};
+
+class DirGridView extends React.Component {
+
+  render() {
+    return (
+      <div>表格布局</div>
+    );
+  }
+}
+
+DirGridView.propTypes = propTypes;
+
+export default DirGridView;

frontend/src/components/dir-view-mode/dir-list-view.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import RepoInfoBar from '../../components/repo-info-bar';
+import DirentListView from '../../components/dirent-list-view/dirent-list-view';
+
+const propTypes = {
+  path: PropTypes.string.isRequired,
+  repoID: PropTypes.string.isRequired,
+  currentRepoInfo: PropTypes.object.isRequired,
+  repoEncrypted: PropTypes.bool.isRequired,
+  isRepoOwner: PropTypes.bool.isRequired,
+  isAdmin: PropTypes.bool.isRequired,
+  isGroupOwnedRepo: PropTypes.bool.isRequired,
+  enableDirPrivateShare: PropTypes.bool.isRequired,
+  isRepoInfoBarShow: PropTypes.bool.isRequired,
+  usedRepoTags: PropTypes.array.isRequired,
+  readmeMarkdown: PropTypes.object,
+  draftCounts: PropTypes.number,
+  reviewCounts: PropTypes.number,
+  updateUsedRepoTags: PropTypes.func.isRequired,
+  isDirentListLoading: PropTypes.bool.isRequired,
+  direntList: PropTypes.array.isRequired,
+  sortBy: PropTypes.string.isRequired,
+  sortOrder: PropTypes.string.isRequired,
+  sortItems: PropTypes.func.isRequired,
+  onAddFile: PropTypes.func.isRequired,
+  onItemClick: PropTypes.func.isRequired,
+  onItemSelected: PropTypes.func.isRequired,
+  onItemDelete: PropTypes.func.isRequired,
+  onItemRename: PropTypes.func.isRequired,
+  onItemMove: PropTypes.func.isRequired,
+  onItemCopy: PropTypes.func.isRequired,
+  onDirentClick: PropTypes.func.isRequired,
+  onItemDetails: PropTypes.func.isRequired,
+  updateDirent: PropTypes.func.isRequired,
+  isAllItemSelected: PropTypes.bool.isRequired,
+  onAllItemSelected: PropTypes.func.isRequired,
+};
+
+class DirListView extends React.Component {
+
+  render() {
+    return (
+      <div className="main-panel">
+        {this.props.isRepoInfoBarShow && (
+          <RepoInfoBar 
+            repoID={this.props.repoID}
+            currentPath={this.props.path}
+            readmeMarkdown={this.props.readmeMarkdown}
+            draftCounts={this.props.draftCounts}
+            reviewCounts={this.props.reviewCounts}
+            usedRepoTags={this.props.usedRepoTags}
+            updateUsedRepoTags={this.props.updateUsedRepoTags}
+          />
+        )}
+        <DirentListView
+          path={this.props.path}
+          currentRepoInfo={this.props.currentRepoInfo}
+          repoID={this.props.repoID}
+          repoEncrypted={this.props.repoEncrypted}
+          isRepoOwner={this.props.isRepoOwner}
+          isAdmin={this.props.isAdmin}
+          isGroupOwnedRepo={this.props.isGroupOwnedRepo}
+          enableDirPrivateShare={this.props.enableDirPrivateShare}
+          direntList={this.props.direntList}
+          sortBy={this.props.sortBy}
+          sortOrder={this.props.sortOrder}
+          sortItems={this.props.sortItems}
+          onAddFile={this.props.onAddFile}
+          onItemClick={this.props.onItemClick}
+          onItemSelected={this.props.onItemSelected}
+          onItemDelete={this.props.onItemDelete}
+          onItemRename={this.props.onItemRename}
+          onItemMove={this.props.onItemMove}
+          onItemCopy={this.props.onItemCopy}
+          onDirentClick={this.props.onDirentClick}
+          onItemDetails={this.props.onItemDetails}
+          isDirentListLoading={this.props.isDirentListLoading}
+          updateDirent={this.props.updateDirent}
+          isAllItemSelected={this.props.isAllItemSelected}
+          onAllItemSelected={this.props.onAllItemSelected}
+        />
+      </div>
+    );
+  }
+}
+
+DirListView.propTypes = propTypes;
+
+export default DirListView;

frontend/src/components/dirent-detail/detail-list-view.js

@@ -112,7 +112,7 @@ class DetailListView extends React.Component {
                       );
                     })}
                   </ul>
-                  <i className='fa fa-pencil attr-action-icon' onClick={this.onEditFileTagToggle}></i>
+                  <i className='fa fa-pencil-alt attr-action-icon' onClick={this.onEditFileTagToggle}></i>
                 </td>
               </tr>
               <tr className="file-related-files">
@@ -128,7 +128,7 @@ class DetailListView extends React.Component {
                       );
                     })}
                   </ul>
-                  <i className='fa fa-pencil attr-action-icon' onClick={this.onListRelatedFileToggle}></i>
+                  <i className='fa fa-pencil-alt attr-action-icon' onClick={this.onListRelatedFileToggle}></i>
                 </td>
               </tr>
             </tbody>

frontend/src/components/file-chooser/dirent-list-item.js

@@ -88,6 +88,7 @@ class DirentListItem extends React.Component {
               filePath={this.state.filePath}
               onItemClick={this.onItemClick}
               selectedPath={this.props.selectedPath}
+              selectedRepo={this.props.selectedRepo}
               onDirentItemClick={this.props.onDirentItemClick}
               isShowFile={this.props.isShowFile}
             />
@@ -98,10 +99,7 @@ class DirentListItem extends React.Component {
   }
 
   render() {
-    let isCurrentRepo = false;
-    if (this.props.selectedRepo) {
-      isCurrentRepo = this.props.selectedRepo.repo_id === this.props.repo.repo_id;
-    }
+    let isCurrentRepo = this.props.selectedRepo.repo_id === this.props.repo.repo_id;
     let isCurrentPath = this.props.selectedPath === this.state.filePath;
 
     return (

frontend/src/components/file-chooser/file-chooser.js

@@ -39,6 +39,7 @@ class FileChooser extends React.Component {
         let repoInfo = new RepoInfo(res.data);
         this.setState({
           currentRepoInfo: repoInfo,
+          selectedRepo: repoInfo
         });
       });
     }
@@ -100,6 +101,9 @@ class FileChooser extends React.Component {
   }
 
   render() {
+    if (!this.state.selectedRepo) {
+      return '';
+    }
     const mode = this.props.mode;
     let libName = mode === 'current_repo_and_other_repos' ? gettext('Other Libraries') : gettext('Libraries');
     return (

frontend/src/components/select-editor/select-editor.js

@@ -88,7 +88,7 @@ class SelectEditor extends React.Component {
             {this.props.isEditIconShow && (
               <span 
                 title={gettext('Edit')} 
-                className="fa fa-pencil attr-action-icon" 
+                className="fa fa-pencil-alt attr-action-icon" 
                 onClick={this.onEditPermission}>
               </span>
             )}

frontend/src/components/toolbar/dir-operation-toolbar.js

@@ -10,6 +10,12 @@ import ShareDialog from '../../components/dialog/share-dialog';
 const propTypes = {
   path: PropTypes.string.isRequired,
   repoID: PropTypes.string.isRequired,
+  repoName: PropTypes.string.isRequired,
+  repoEncrypted: PropTypes.bool.isRequired,
+  enableDirPrivateShare: PropTypes.bool.isRequired,
+  userPerm: PropTypes.string.isRequired,
+  isAdmin: PropTypes.bool.isRequired,
+  isGroupOwnedRepo: PropTypes.bool.isRequired,
   showShareBtn: PropTypes.bool.isRequired,
   onAddFile: PropTypes.func.isRequired,
   onAddFolder: PropTypes.func.isRequired,
@@ -139,14 +145,6 @@ class DirOperationToolbar extends React.Component {
     this.props.onAddFolder(dirPath);
   }
 
-  onViewReview = () => {
-    this.props.goReviewPage();
-  }
-
-  onViewDraft = () => {
-    this.props.goDraftPage();
-  }
-
   checkDuplicatedName = (newName) => {
     let direntList = this.props.direntList;
     let isDuplicated = direntList.some(object => {

frontend/src/components/tree-view/tree-node.js

@@ -79,8 +79,9 @@ class TreeNode {
     this.path = this.generatePath(this.parentNode); 
     if (this.isExpanded) {
       this.updateChildrenPath(this);
+    } else {
+      this.isLoaded = false;
     }
-    // this.isLoaded = false;
   }
 
   updateChildrenPath(node) {

frontend/src/css/layout.css

@@ -107,7 +107,6 @@
 
 .cur-view-content {
   padding: 0.625rem 1rem 1.25rem;
-  height: calc(100% - 40px);
   flex: 1;
   min-height: 0;
   overflow: auto;

frontend/src/css/lib-content-view.css

@@ -2,56 +2,31 @@
 .view-mode-container {
   display: flex;
   flex-direction: row !important;
+  overflow: hidden !important;
+  min-height: 0;
 }
 
-.dir-side-nav {
+.dir-content-nav {
   flex: 0 0 25%;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
   background-color: #fff;
-  overflow: hidden;
-}
-
-.dir-main-content {
-  flex: 1 0 75% !important;
-  display: flex;
-  flex-direction: column;
-}
-
-.dir-nav-heading {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #f4f4f7;
-  border-bottom: solid 1px #e8e8e8;
-  font-size: 1rem;
-  font-weight: normal;
-  height: 49px;
-  margin: 0;
-}
-
-.dir-nav-container {
-  flex: 1 1;
-  overflow: hidden;
-  padding: 12px 0;
   border-right: 1px solid #eee;
+  margin-left: -0.75rem;
 }
 
-.dir-nav-container:hover {
+.dir-content-nav:hover {
   overflow: auto;
 }
 
-.heading-icon {
-  position: absolute;
-  right: 1rem;
-  top: 30%;
-  color: #888;  
-  font-size: 0.8125rem;
-}
-
-.heading-icon .action-icon {
-  font-size: 1.125rem;
+.dir-content-main {
+  flex: 1 0 75% !important;
+  display: flex;
+  flex-direction: column;
+  margin-right: -0.75rem;
+  padding:0 0.75rem;
+  overflow: auto;
 }
 
 /*tree view */
@@ -170,20 +145,19 @@
 }
 
 .cur-view-content .wiki-page-content {
-  /* width: calc(100% - 160px); */
   flex: 1;
   padding-right: 40px;
 }
 
-.dir-main-content .wiki-page-content .article {
+.dir-content-main .wiki-page-content .article {
   padding: 0 10px;
 }
 
-.dir-main-content .wiki-page-content .ml-2 {
+.dir-content-main .wiki-page-content .ml-2 {
   text-decoration: underline;
 }
 
-.dir-main-content .wiki-page-content .ml-2:hover {
+.dir-content-main .wiki-page-content .ml-2:hover {
   text-decoration: underline;
   color:#eb8205;
 }

frontend/src/pages/lib-content-view/lib-content-container.js

@@ -0,0 +1,270 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../../utils/constants';
+import CurDirPath from '../../components/cur-dir-path';
+import DirentDetail from '../../components/dirent-detail/dirent-details';
+import DirListView from '../../components/dir-view-mode/dir-list-view';
+import DirGridView from '../../components/dir-view-mode/dir-grid-view';
+import DirColumnView from '../../components/dir-view-mode/dir-column-view';
+
+const propTypes = {
+  pathPrefix: PropTypes.array.isRequired,
+  currentMode: PropTypes.string.isRequired,
+  path: PropTypes.string.isRequired,
+  pathExist: PropTypes.bool.isRequired,
+  // repoinfo
+  currentRepoInfo: PropTypes.object.isRequired,
+  repoID: PropTypes.string.isRequired,
+  repoName: PropTypes.string.isRequired,
+  repoPermission: PropTypes.bool.isRequired,
+  repoEncrypted: PropTypes.bool.isRequired,
+  enableDirPrivateShare: PropTypes.bool.isRequired,
+  userPrem: PropTypes.bool,
+  isAdmin: PropTypes.bool.isRequired,
+  isRepoOwner: PropTypes.bool.isRequired,
+  isGroupOwnedRepo: PropTypes.bool.isRequired,
+  // path func
+  onTabNavClick: PropTypes.func.isRequired,
+  onMainNavBarClick: PropTypes.func.isRequired,
+  // file
+  isViewFile: PropTypes.bool.isRequired,
+  isFileLoadedErr: PropTypes.bool.isRequired,
+  hash: PropTypes.string,
+  isDraft: PropTypes.bool.isRequired,
+  hasDraft: PropTypes.bool.isRequired,
+  goDraftPage: PropTypes.func.isRequired,
+  reviewStatus: PropTypes.string,
+  goReviewPage: PropTypes.func.isRequired,
+  isFileLoading: PropTypes.bool.isRequired,
+  filePermission: PropTypes.bool.isRequired,
+  content: PropTypes.string,
+  lastModified: PropTypes.string,
+  latestContributor: PropTypes.string,
+  onLinkClick: PropTypes.func.isRequired,
+  // tree
+  isTreeDataLoading: PropTypes.bool.isRequired,
+  treeData: PropTypes.object.isRequired,
+  currentNode: PropTypes.object,
+  onNodeClick: PropTypes.func.isRequired,
+  onNodeCollapse: PropTypes.func.isRequired,
+  onNodeExpanded: PropTypes.func.isRequired,
+  onRenameNode: PropTypes.func.isRequired,
+  onDeleteNode: PropTypes.func.isRequired,
+  onAddFileNode: PropTypes.func.isRequired,
+  onAddFolderNode: PropTypes.func.isRequired,
+  // repo content
+  draftCounts: PropTypes.number,
+  reviewCounts: PropTypes.number,
+  usedRepoTags: PropTypes.array.isRequired,
+  readmeMarkdown: PropTypes.object,
+  updateUsedRepoTags: PropTypes.func.isRequired,
+  // list
+  isDirentListLoading: PropTypes.bool.isRequired,
+  direntList: PropTypes.array.isRequired,
+  sortBy: PropTypes.string.isRequired,
+  sortOrder: PropTypes.string.isRequired,
+  sortItems: PropTypes.func.isRequired,
+  updateDirent: PropTypes.func.isRequired,
+  onItemClick: PropTypes.func.isRequired,
+  onItemSelected: PropTypes.func.isRequired,
+  onItemDelete: PropTypes.func.isRequired,
+  onItemRename: PropTypes.func.isRequired,
+  onItemMove: PropTypes.func.isRequired,
+  onItemCopy: PropTypes.func.isRequired,
+  onAddFolder: PropTypes.func.isRequired,
+  onAddFile: PropTypes.func.isRequired,
+  onFileTagChanged: PropTypes.func.isRequired,
+  isDirentSelected: PropTypes.bool.isRequired,
+  isAllDirentSelected: PropTypes.bool.isRequired,
+  onAllDirentSelected: PropTypes.func.isRequired,
+};
+
+class LibContentContainer extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentDirent: null,
+      isDirentDetailShow: false,
+    };
+
+    this.errMessage = (<div className="message err-tip">{gettext('Folder does not exist.')}</div>);
+  }
+
+  onPathClick = (path) => {
+    this.setState({isDirentDetailShow: false});
+    this.props.onMainNavBarClick(path);
+  }
+
+  onItemClick = (dirent) => {
+    this.setState({isDirentDetailShow: false});
+    this.props.onItemClick(dirent);
+  }
+
+  // on '<tr>'
+  onDirentClick = (dirent) => {
+    if (this.state.isDirentDetailShow) {
+      this.onItemDetails(dirent);
+    }
+  }
+
+  onItemDetails = (dirent) => {
+    this.setState({
+      currentDirent: dirent,
+      isDirentDetailShow: true,
+    });
+  }
+
+  onItemDetailsClose = () => {
+    this.setState({isDirentDetailShow: false});
+  }
+
+  render() {
+    let { path, repoID, usedRepoTags, readmeMarkdown, draftCounts, reviewCounts } = this.props;
+    let isRepoInfoBarShow = false;
+    if (path === '/') {
+      if (usedRepoTags.length !== 0 || readmeMarkdown !== null || draftCounts !== 0 || reviewCounts !== 0) {
+        isRepoInfoBarShow = true;
+      }
+    } 
+
+    return (
+      <Fragment>
+        <div className="cur-view-container">
+          <div className="cur-view-path">
+            <CurDirPath 
+              pathPrefix={this.props.pathPrefix}
+              currentPath={this.props.path} 
+              repoID={repoID}
+              repoName={this.props.currentRepoInfo.repo_name}
+              permission={this.props.repoPermission} 
+              onTabNavClick={this.props.onTabNavClick}
+              onPathClick={this.onPathClick}
+            />
+          </div>
+          <div className="cur-view-content view-mode-container">
+            {!this.props.pathExist && this.errMessage}
+            {this.props.pathExist && (
+              <Fragment>
+                {this.props.currentMode === 'list' && (
+                  <DirListView 
+                    path={this.props.path}
+                    repoID={repoID}
+                    currentRepoInfo={this.props.currentRepoInfo}
+                    repoEncrypted={this.props.repoEncrypted}
+                    isRepoOwner={this.props.isRepoOwner}
+                    isAdmin={this.props.isAdmin}
+                    isGroupOwnedRepo={this.props.isGroupOwnedRepo}
+                    enableDirPrivateShare={this.props.enableDirPrivateShare}
+                    isRepoInfoBarShow={isRepoInfoBarShow}
+                    usedRepoTags={this.props.usedRepoTags}
+                    readmeMarkdown={this.props.readmeMarkdown}
+                    draftCounts={this.props.draftCounts}
+                    reviewCounts={this.props.draftCounts}
+                    updateUsedRepoTags={this.props.updateUsedRepoTags}
+                    isDirentListLoading={this.props.isDirentListLoading}
+                    direntList={this.props.direntList}
+                    sortBy={this.props.sortBy}
+                    sortOrder={this.props.sortOrder}
+                    sortItems={this.props.sortItems}
+                    onAddFile={this.props.onAddFile}
+                    onItemClick={this.onItemClick}
+                    onItemSelected={this.props.onItemSelected}
+                    onItemDelete={this.props.onItemDelete}
+                    onItemRename={this.props.onItemRename}
+                    onItemMove={this.props.onItemMove}
+                    onItemCopy={this.props.onItemCopy}
+                    onDirentClick={this.onDirentClick}
+                    onItemDetails={this.onItemDetails}
+                    updateDirent={this.props.updateDirent}
+                    isAllItemSelected={this.props.isAllDirentSelected}
+                    onAllItemSelected={this.props.onAllDirentSelected}
+                  />
+                )}
+                {this.props.currentMode === 'grid' && (
+                  <DirGridView 
+                  />
+                )}
+                {this.props.currentMode === 'column' && (
+                  <DirColumnView 
+                    path={this.props.path}
+                    repoID={repoID}
+                    currentRepoInfo={this.props.currentRepoInfo}
+                    repoPermission={this.props.repoPermission}
+                    repoEncrypted={this.props.repoEncrypted}
+                    isRepoOwner={this.props.isRepoOwner}
+                    isAdmin={this.props.isAdmin}
+                    isGroupOwnedRepo={this.props.isGroupOwnedRepo}
+                    enableDirPrivateShare={this.props.enableDirPrivateShare}
+                    isTreeDataLoading={this.props.isTreeDataLoading}
+                    treeData={this.props.treeData}
+                    currentNode={this.props.currentNode}
+                    onNodeClick={this.props.onNodeClick}
+                    onNodeCollapse={this.props.onNodeCollapse}
+                    onNodeExpanded={this.props.onNodeExpanded}
+                    onAddFolderNode={this.props.onAddFolder}
+                    onAddFileNode={this.props.onAddFile}
+                    onRenameNode={this.props.onRenameNode}
+                    onDeleteNode={this.props.onDeleteNode}
+                    isViewFile={this.props.isViewFile}
+                    isFileLoading={this.props.isFileLoading}
+                    isFileLoadedErr={this.props.isFileLoadedErr}
+                    hash={this.props.hash}
+                    isDraft={this.props.isDraft}
+                    hasDraft={this.props.hasDraft}
+                    goDraftPage={this.props.goDraftPage}
+                    reviewStatus={this.props.reviewStatus}
+                    goReviewPage={this.props.goReviewPage}
+                    filePermission={this.props.filePermission}
+                    content={this.props.content}
+                    lastModified={this.props.lastModified}
+                    latestContributor={this.props.latestContributor}
+                    onLinkClick={this.props.onLinkClick}
+                    isRepoInfoBarShow={isRepoInfoBarShow}
+                    usedRepoTags={this.props.usedRepoTags}
+                    readmeMarkdown={this.props.readmeMarkdown}
+                    draftCounts={this.props.draftCounts}
+                    reviewCounts={this.props.draftCounts}
+                    updateUsedRepoTags={this.props.updateUsedRepoTags}
+                    isDirentListLoading={this.props.isDirentListLoading}
+                    direntList={this.props.direntList}
+                    sortBy={this.props.sortBy}
+                    sortOrder={this.props.sortOrder}
+                    sortItems={this.props.sortItems}
+                    onAddFile={this.props.onAddFile}
+                    onItemClick={this.onItemClick}
+                    onItemSelected={this.props.onItemSelected}
+                    onItemDelete={this.props.onItemDelete}
+                    onItemRename={this.props.onItemRename}
+                    onItemMove={this.props.onItemMove}
+                    onItemCopy={this.props.onItemCopy}
+                    onDirentClick={this.onDirentClick}
+                    onItemDetails={this.onItemDetails}
+                    updateDirent={this.props.updateDirent}
+                    isAllItemSelected={this.props.isAllDirentSelected}
+                    onAllItemSelected={this.props.onAllDirentSelected}
+                  />
+                )}
+              </Fragment>
+            )}
+          </div>
+        </div>
+        {this.state.isDirentDetailShow && (
+          <div className="cur-view-detail">
+            <DirentDetail
+              repoID={repoID}
+              path={this.props.path}
+              dirent={this.state.currentDirent}
+              onItemDetailsClose={this.onItemDetailsClose}
+              onFileTagChanged={this.props.onFileTagChanged}
+            />
+          </div>
+        )}
+      </Fragment>
+    );
+  }
+}
+
+LibContentContainer.propTypes = propTypes;
+
+export default LibContentContainer;

frontend/src/pages/lib-content-view/lib-content-main.js

@@ -1,285 +0,0 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { gettext } from '../../utils/constants';
-import CommonToolbar from '../../components/toolbar/common-toolbar';
-import ViewModeToolbar from '../../components/toolbar/view-mode-toolbar';
-import DirOperationToolBar from '../../components/toolbar/dir-operation-toolbar';
-import MutipleDirOperationToolbar from '../../components/toolbar/mutilple-dir-operation-toolbar';
-import CurDirPath from '../../components/cur-dir-path';
-import DirentListView from '../../components/dirent-list-view/dirent-list-view';
-import DirentDetail from '../../components/dirent-detail/dirent-details';
-import FileUploader from '../../components/file-uploader/file-uploader';
-import RepoInfoBar from '../../components/repo-info-bar';
-
-const propTypes = {
-  pathPrefix: PropTypes.array.isRequired,
-  currentMode: PropTypes.string.isRequired,
-  path: PropTypes.string.isRequired,
-  pathExist: PropTypes.bool.isRequired,
-  // repo
-  currentRepoInfo: PropTypes.object,  // Initially not loaded
-  repoID: PropTypes.string.isRequired,
-  repoName: PropTypes.string.isRequired,
-  repoPermission: PropTypes.bool.isRequired,
-  repoEncrypted: PropTypes.bool.isRequired,
-  isAdmin: PropTypes.bool.isRequired,
-  userPerm: PropTypes.string.isRequired,
-  showShareBtn: PropTypes.bool.isRequired,
-  enableDirPrivateShare: PropTypes.bool.isRequired,
-  isRepoOwner: PropTypes.bool.isRequired,
-  isGroupOwnedRepo: PropTypes.bool.isRequired,
-  // toolbar
-  onTabNavClick: PropTypes.func.isRequired,
-  onSideNavMenuClick: PropTypes.func.isRequired,
-  selectedDirentList: PropTypes.array.isRequired,
-  onItemsMove: PropTypes.func.isRequired,
-  onItemsCopy: PropTypes.func.isRequired,
-  onItemsDelete: PropTypes.func.isRequired,
-  switchViewMode: PropTypes.func.isRequired,
-  onSearchedClick: PropTypes.func.isRequired,
-  onMainNavBarClick: PropTypes.func.isRequired,
-  // repo content
-  draftCounts: PropTypes.number,
-  reviewCounts: PropTypes.number,
-  usedRepoTags: PropTypes.array.isRequired,
-  readmeMarkdown: PropTypes.object,
-  updateUsedRepoTags: PropTypes.func.isRequired,
-  // dirent list
-  isDirentListLoading: PropTypes.bool.isRequired,
-  direntList: PropTypes.array.isRequired,
-  sortBy: PropTypes.string.isRequired,
-  sortOrder: PropTypes.string.isRequired,
-  sortItems: PropTypes.func.isRequired,
-  updateDirent: PropTypes.func.isRequired,
-  onItemClick: PropTypes.func.isRequired,
-  onItemSelected: PropTypes.func.isRequired,
-  onItemDelete: PropTypes.func.isRequired,
-  onItemRename: PropTypes.func.isRequired,
-  onItemMove: PropTypes.func.isRequired,
-  onItemCopy: PropTypes.func.isRequired,
-  onAddFolder: PropTypes.func.isRequired,
-  onAddFile: PropTypes.func.isRequired,
-  onFileTagChanged: PropTypes.func.isRequired,
-  isDirentSelected: PropTypes.bool.isRequired,
-  isAllDirentSelected: PropTypes.bool.isRequired,
-  onAllDirentSelected: PropTypes.func.isRequired,
-  onFileUploadSuccess: PropTypes.func.isRequired,
-};
-
-class LibContentMain extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      currentDirent: null,
-      isDirentDetailShow: false,
-    };
-  }
-
-  onSideNavMenuClick = () => {
-    this.props.onSideNavMenuClick();
-  }
-
-  onPathClick = (path) => {
-    this.setState({isDirentDetailShow: false});
-    this.props.onPathClick(path);
-  }
-
-  onItemClick = (dirent) => {
-    this.setState({isDirentDetailShow: false});
-    this.props.onItemClick(dirent);
-  }
-
-  // on '<tr>'
-  onDirentClick = (dirent) => {
-    if (this.state.isDirentDetailShow) {
-      this.onItemDetails(dirent);
-    }
-  }
-
-  onItemDetails = (dirent) => {
-    this.setState({
-      currentDirent: dirent,
-      isDirentDetailShow: true,
-    });
-  }
-
-  onItemDetailsClose = () => {
-    this.setState({isDirentDetailShow: false});
-  }
-
-  onUploadFile = (e) => {
-    e.nativeEvent.stopImmediatePropagation();
-    this.uploader.onFileUpload();
-  }
-
-  onUploadFolder = (e) => {
-    e.nativeEvent.stopImmediatePropagation();
-    this.uploader.onFolderUpload();
-  }
-
-  switchViewMode = (mode) => {
-    this.props.switchViewMode(mode);
-  }
-
-  onFileUploadSuccess = (direntObject) => {
-    this.props.onFileUploadSuccess(direntObject);
-  }
-
-  renderListView = () => {
-    let repoID = this.props.repoID;
-    const showRepoInfoBar = this.props.path === '/' && (
-      this.props.usedRepoTags.length != 0 || this.props.readmeMarkdown != null ||
-      this.props.draftCounts != 0 || this.props.reviewCounts != 0);
-    return (
-      <Fragment>
-        {showRepoInfoBar && (
-          <RepoInfoBar
-            repoID={repoID}
-            currentPath={this.props.path}
-            usedRepoTags={this.props.usedRepoTags}
-            readmeMarkdown={this.props.readmeMarkdown}
-            draftCounts={this.props.draftCounts}
-            reviewCounts={this.props.reviewCounts}
-            updateUsedRepoTags={this.props.updateUsedRepoTags}
-          />
-        )}
-        <DirentListView
-          path={this.props.path}
-          repoID={repoID}
-          repoEncrypted={this.props.repoEncrypted}
-          isRepoOwner={this.props.isRepoOwner}
-          isAdmin={this.props.isAdmin}
-          isGroupOwnedRepo={this.props.isGroupOwnedRepo}
-          enableDirPrivateShare={this.props.enableDirPrivateShare}
-          direntList={this.props.direntList}
-          sortBy={this.props.sortBy}
-          sortOrder={this.props.sortOrder}
-          sortItems={this.props.sortItems}
-          onAddFile={this.props.onAddFile}
-          onItemClick={this.onItemClick}
-          onItemDelete={this.props.onItemDelete}
-          onItemRename={this.props.onItemRename}
-          onItemMove={this.props.onItemMove}
-          onItemCopy={this.props.onItemCopy}
-          onDirentClick={this.onDirentClick}
-          onItemDetails={this.onItemDetails}
-          isDirentListLoading={this.props.isDirentListLoading}
-          updateDirent={this.props.updateDirent}
-          currentRepoInfo={this.props.currentRepoInfo}
-          isAllItemSelected={this.props.isAllDirentSelected}
-          onAllItemSelected={this.props.onAllDirentSelected}
-          onItemSelected={this.props.onItemSelected}
-        />
-      </Fragment>
-    );
-  }
-
-  renderGridView = () => {
-    // todo
-    return (
-      <div>grid-mode</div>
-    )
-  }
-
-  renderColumnView = () => {
-    return (
-      this.renderListView()
-    )
-  }
-
-  render() {
-    let repoID = this.props.repoID;
-    const errMessage = (<div className="message err-tip">{gettext('Folder does not exist.')}</div>);
-    return (
-      <div className={`main-panel o-hidden ${this.props.currentMode === 'column' ? 'dir-main-content' : ''}`}>
-        <div className="main-panel-north border-left-show">
-          <div className="cur-view-toolbar">
-            <span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title={gettext('Side Nav Menu')} onClick={this.onSideNavMenuClick}></span>
-            <div className="dir-operation">
-              {this.props.isDirentSelected ?
-                <MutipleDirOperationToolbar
-                  repoID={repoID} 
-                  path={this.props.path}
-                  selectedDirentList={this.props.selectedDirentList}
-                  onItemsMove={this.props.onItemsMove}
-                  onItemsCopy={this.props.onItemsCopy}
-                  onItemsDelete={this.props.onItemsDelete}
-                /> :
-                <DirOperationToolBar 
-                  path={this.props.path}
-                  repoID={repoID}
-                  repoName={this.props.repoName}
-                  repoEncrypted={this.props.repoEncrypted}
-                  direntList={this.props.direntList}
-                  showShareBtn={this.props.showShareBtn}
-                  enableDirPrivateShare={this.props.enableDirPrivateShare}
-                  userPerm={this.props.userPerm}
-                  isAdmin={this.props.isAdmin}
-                  isGroupOwnedRepo={this.props.isGroupOwnedRepo}
-                  onAddFile={this.props.onAddFile}
-                  onAddFolder={this.props.onAddFolder}
-                  onUploadFile={this.onUploadFile}
-                  onUploadFolder={this.onUploadFolder}
-                />
-              }
-            </div>
-            <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.switchViewMode}/>
-          </div>
-          <CommonToolbar repoID={repoID} onSearchedClick={this.props.onSearchedClick} searchPlaceholder={gettext('Search files in this library')}/>
-        </div>
-        <div className="main-panel-center flex-row">
-          <div className="cur-view-container">
-            <div className="cur-view-path">
-              {this.props.currentRepoInfo && (
-                <CurDirPath 
-                  repoID={repoID}
-                  repoName={this.props.currentRepoInfo.repo_name}
-                  pathPrefix={this.props.pathPrefix}
-                  currentPath={this.props.path} 
-                  permission={this.props.repoPermission} 
-                  onPathClick={this.props.onMainNavBarClick}
-                  onTabNavClick={this.props.onTabNavClick}
-                />
-              )}
-            </div>
-            <div className="cur-view-content">
-              {!this.props.pathExist && errMessage }
-              {(this.props.pathExist && (
-                <Fragment>
-                  {this.props.currentMode === 'list' && this.renderListView()}
-                  {this.props.currentMode === 'grid' && this.renderGridView()}
-                  {this.props.currentMode === 'column' && this.renderColumnView()}
-                  <FileUploader
-                    ref={uploader => this.uploader = uploader}
-                    dragAndDrop={true}
-                    path={this.props.path}
-                    repoID={repoID}
-                    direntList={this.props.direntList}
-                    onFileUploadSuccess={this.onFileUploadSuccess}
-                  />
-                </Fragment>
-              ))}
-            </div>
-          </div>
-          {this.state.isDirentDetailShow && (
-            <div className="cur-view-detail">
-              <DirentDetail
-                repoID={repoID}
-                path={this.props.path}
-                dirent={this.state.currentDirent}
-                direntPath={this.state.direntPath}
-                onItemDetailsClose={this.onItemDetailsClose}
-                onFileTagChanged={this.props.onFileTagChanged}
-              />
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  }
-}
-
-LibContentMain.propTypes = propTypes;
-
-export default LibContentMain;

frontend/src/pages/lib-content-view/lib-content-toolbar.js

@@ -0,0 +1,130 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Utils } from '../../utils/utils';
+import { gettext, siteRoot } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import CommonToolbar from '../../components/toolbar/common-toolbar';
+import ViewModeToolbar from '../../components/toolbar/view-mode-toolbar';
+import DirOperationToolBar from '../../components/toolbar/dir-operation-toolbar';
+import MutipleDirOperationToolbar from '../../components/toolbar/mutilple-dir-operation-toolbar';
+
+const propTypes = {
+  isViewFile: PropTypes.bool.isRequired,
+  filePermission: PropTypes.bool.isRequired, // ture = 'rw'
+  isDraft: PropTypes.bool.isRequired,
+  hasDraft: PropTypes.bool.isRequired,
+  // side-panel
+  onSideNavMenuClick: PropTypes.func.isRequired,
+  // mutiple-dir
+  isDirentSelected: PropTypes.bool.isRequired,
+  repoID: PropTypes.string.isRequired,
+  path: PropTypes.string.isRequired,
+  selectedDirentList: PropTypes.array.isRequired,
+  onItemsMove: PropTypes.func.isRequired,
+  onItemsCopy: PropTypes.func.isRequired,
+  onItemsDelete: PropTypes.func.isRequired,
+  // dir
+  direntList: PropTypes.array.isRequired,
+  repoName: PropTypes.string.isRequired,
+  repoEncrypted: PropTypes.bool.isRequired,
+  isAdmin: PropTypes.bool.isRequired,
+  isGroupOwnedRepo: PropTypes.bool.isRequired,
+  userPerm: PropTypes.string.isRequired,
+  showShareBtn: PropTypes.bool.isRequired,
+  enableDirPrivateShare: PropTypes.bool.isRequired,
+  onAddFile: PropTypes.func.isRequired,
+  onAddFolder: PropTypes.func.isRequired,
+  onUploadFile: PropTypes.func.isRequired,
+  onUploadFolder: PropTypes.func.isRequired,
+  // view-mode
+  currentMode: PropTypes.string.isRequired,
+  switchViewMode: PropTypes.func.isRequired,
+  // search
+  onSearchedClick: PropTypes.func.isRequired,
+};
+
+class LibContentToolbar extends React.Component {
+
+  onEditClick = (e) => {
+    e.preventDefault();
+    let { path, repoID } = this.props;
+    let url = siteRoot + 'lib/' + repoID + '/file' + Utils.encodePath(path) + '?mode=edit';
+    window.open(url);
+  }
+
+  onNewDraft = (e) => {
+    e.preventDefault();
+    let { path, repoID } = this.props;
+    seafileAPI.createDraft(repoID, path).then(res => {
+      window.location.href = siteRoot + 'lib/' + res.data.origin_repo_id + '/file' + res.data.draft_file_path + '?mode=edit';
+    });
+  }
+
+  render() {
+
+    if (this.props.isViewFile) {
+      return (
+        <Fragment>
+          <div className="cur-view-toolbar">
+            <span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title={gettext('Side Nav Menu')} onClick={this.props.onSideNavMenuClick}></span>
+            <div className="dir-operation">
+              {(this.props.filePermission && !this.props.hasDraft) && (
+                <Fragment>
+                  <button className="btn btn-secondary operation-item" title={gettext('Edit File')} onClick={this.onEditClick}>{gettext('Edit')}</button>
+                </Fragment>
+              )}
+              {/* default have read priv */}
+              {(!this.props.isDraft && !this.props.hasDraft) && (
+                <button className="btn btn-secondary operation-item" title={gettext('New Draft')} onClick={this.onNewDraft}>{gettext('New Draft')}</button>
+              )}
+            </div>
+            <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode}/>
+          </div>
+          <CommonToolbar repoID={this.props.repoID} onSearchedClick={this.props.onSearchedClick} searchPlaceholder={gettext('Search files in this library')}/>
+        </Fragment>
+      );
+    }
+
+    return (
+      <Fragment>
+        <div className="cur-view-toolbar">
+          <span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title={gettext('Side Nav Menu')} onClick={this.props.onSideNavMenuClick}></span>
+          <div className="dir-operation">
+            {this.props.isDirentSelected ?
+              <MutipleDirOperationToolbar
+                repoID={this.props.repoID} 
+                path={this.props.path}
+                selectedDirentList={this.props.selectedDirentList}
+                onItemsMove={this.props.onItemsMove}
+                onItemsCopy={this.props.onItemsCopy}
+                onItemsDelete={this.props.onItemsDelete}
+              /> :
+              <DirOperationToolBar 
+                path={this.props.path}
+                repoID={this.props.repoID}
+                repoName={this.props.repoName}
+                repoEncrypted={this.props.repoEncrypted}
+                direntList={this.props.direntList}
+                showShareBtn={this.props.showShareBtn}
+                enableDirPrivateShare={this.props.enableDirPrivateShare}
+                userPerm={this.props.userPerm}
+                isAdmin={this.props.isAdmin}
+                isGroupOwnedRepo={this.props.isGroupOwnedRepo}
+                onAddFile={this.props.onAddFile}
+                onAddFolder={this.props.onAddFolder}
+                onUploadFile={this.props.onUploadFile}
+                onUploadFolder={this.props.onUploadFolder}
+              />
+            }
+          </div>
+          <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode}/>
+        </div>
+        <CommonToolbar repoID={this.props.repoID} onSearchedClick={this.props.onSearchedClick} searchPlaceholder={gettext('Search files in this library')}/>
+      </Fragment>
+    );
+  }
+}
+
+LibContentToolbar.propTypes = propTypes;
+
+export default LibContentToolbar;

frontend/src/pages/lib-content-view/lib-content-view.js

@@ -15,16 +15,15 @@ import treeHelper from '../../components/tree-view/tree-helper';
 import toaster from '../../components/toast';
 import ModalPortal from '../../components/modal-portal';
 import LibDecryptDialog from '../../components/dialog/lib-decrypt-dialog';
-import FileContentView from '../../components/file-content-view';
-import LibContentNav from './lib-content-nav';
-import LibContentMain from './lib-content-main';
-
-import '../../css/lib-content-view.css';
+import LibContentToolbar from './lib-content-toolbar';
+import LibContentContainer from './lib-content-container';
+import FileUploader from '../../components/file-uploader/file-uploader';
 
 const propTypes = {
   pathPrefix: PropTypes.array.isRequired,
   onTabNavClick: PropTypes.func.isRequired,
   onMenuClick: PropTypes.func.isRequired,
+  repoID: PropTypes.string,
 };
 
 class LibContentView extends React.Component {
@@ -62,6 +61,7 @@ class LibContentView extends React.Component {
       treeData: treeHelper.buildTree(),
       currentNode: null,
       isFileLoading: true,
+      isFileLoadedErr: false,
       filePermission: true,
       content: '',
       lastModified: '',
@@ -72,7 +72,7 @@ class LibContentView extends React.Component {
       sortBy: 'name', // 'name' or 'time'
       sortOrder: 'asc', // 'asc' or 'desc'
       isAllDirentSelected: false,
-      dirID: '',
+      dirID: '',  // for update dir list
       errorMsg: '',
     };
 
@@ -83,7 +83,7 @@ class LibContentView extends React.Component {
   componentWillMount() {
     const hash = window.location.hash;
     if (hash.slice(0, 1) === '#') {
-      this.state.hash = hash;
+      this.setState({hash: hash});
     }
   }
 
@@ -316,6 +316,7 @@ class LibContentView extends React.Component {
             latestContributor: last_modifier_name,
             lastModified: moment.unix(mtime).fromNow(),
             isFileLoading: false,
+            isFileLoadedErr: false,
             isDraft: is_draft,
             hasDraft: has_draft,
             reviewStatus: review_status,
@@ -324,6 +325,11 @@ class LibContentView extends React.Component {
           });
         });
       });
+    }).catch(() => {
+      this.setState({
+        isFileLoading: false,
+        isFileLoadedErr: true,
+      });
     });
 
     // update location
@@ -980,6 +986,7 @@ class LibContentView extends React.Component {
     }
 
     if (node.object.isDir()) {
+      let isLoaded = node.isLoaded;
       if (!node.isLoaded) {
         let tree = this.state.treeData.clone();
         node = tree.getNodeByPath(node.path);
@@ -989,7 +996,7 @@ class LibContentView extends React.Component {
           this.setState({treeData: tree});
         });
       }
-      if (node.path === this.state.path) {
+      if (isLoaded && node.path === this.state.path) {
         if (node.isExpanded) {
           let tree = treeHelper.collapseNode(this.state.treeData, node);
           this.setState({treeData: tree});
@@ -1147,7 +1154,18 @@ class LibContentView extends React.Component {
     });
   }
 
+  onUploadFile = (e) => {
+    e.nativeEvent.stopImmediatePropagation();
+    this.uploader.onFileUpload();
+  }
+
+  onUploadFolder = (e) => {
+    e.nativeEvent.stopImmediatePropagation();
+    this.uploader.onFolderUpload();
+  }
+
   render() {
+
     if (this.state.libNeedDecrypt) {
       return (
         <ModalPortal>
@@ -1159,6 +1177,10 @@ class LibContentView extends React.Component {
       );
     }
 
+    if (!this.state.currentRepoInfo) {
+      return '';
+    }
+
     let showShareBtn = false;
     let enableDirPrivateShare = false;
     const { repoEncrypted, isAdmin, ownerEmail, userPerm, isVirtual, isDepartmentAdmin } = this.state;
@@ -1173,12 +1195,70 @@ class LibContentView extends React.Component {
     }
 
     return (
-      <div className="main-panel o-hidden view-mode-container">
-        {this.state.currentMode === 'column' && 
-          <LibContentNav 
-            repoPermission={this.state.repoPermission}
-            currentPath={this.state.path}
+      <div className="main-panel o-hidden">
+        <div className="main-panel-north border-left-show">
+          <LibContentToolbar
+            isViewFile={this.state.isViewFile}
+            filePermission={this.state.filePermission}
+            isDraft={this.state.isDraft}
+            hasDraft={this.state.hasDraft}
+            onSideNavMenuClick={this.props.onMenuClick}
+            repoID={this.props.repoID}
+            path={this.state.path}
+            isDirentSelected={this.state.isDirentSelected}
+            selectedDirentList={this.state.selectedDirentList}
+            onItemsMove={this.onMoveItems}
+            onItemsCopy={this.onCopyItems}
+            onItemsDelete={this.onDeleteItems}
+            direntList={this.state.direntList}
+            repoName={this.state.repoName}
+            repoEncrypted={this.state.repoEncrypted}
+            isAdmin={this.state.isAdmin}
+            isGroupOwnedRepo={this.state.isGroupOwnedRepo}
+            userPerm={this.state.userPerm}
+            showShareBtn={showShareBtn}
+            enableDirPrivateShare={enableDirPrivateShare}
+            onAddFile={this.onAddFile}
+            onAddFolder={this.onAddFolder}
+            onUploadFile={this.onUploadFile}
+            onUploadFolder={this.onUploadFolder}
+            currentMode={this.state.currentMode}
+            switchViewMode={this.switchViewMode}
+            onSearchedClick={this.onSearchedClick}
+          />
+        </div>
+        <div className="main-panel-center flex-row">
+          <LibContentContainer 
+            pathPrefix={this.props.pathPrefix}
+            currentMode={this.state.currentMode}
+            path={this.state.path}
+            pathExist={this.state.pathExist}
             currentRepoInfo={this.state.currentRepoInfo}
+            repoID={this.props.repoID}
+            repoName={this.state.repoName}
+            repoPermission={this.state.repoPermission}
+            repoEncrypted={this.state.repoEncrypted}
+            enableDirPrivateShare={enableDirPrivateShare}
+            userPerm={userPerm}
+            isAdmin={isAdmin}
+            isRepoOwner={isRepoOwner}
+            isGroupOwnedRepo={this.state.isGroupOwnedRepo}
+            onTabNavClick={this.props.onTabNavClick}
+            onMainNavBarClick={this.onMainNavBarClick}
+            isViewFile={this.state.isViewFile}
+            hash={this.state.hash}
+            isDraft={this.state.isDraft}
+            hasDraft={this.state.hasDraft}
+            goDraftPage={this.goDraftPage}
+            reviewStatus={this.state.reviewStatus}
+            goReviewPage={this.goReviewPage}
+            isFileLoading={this.state.isFileLoading}
+            isFileLoadedErr={this.state.isFileLoadedErr}
+            filePermission={this.state.filePermission}
+            content={this.state.content}
+            lastModified={this.state.lastModified}
+            latestContributor={this.state.latestContributor}
+            onLinkClick={this.onLinkClick}
             isTreeDataLoading={this.state.isTreeDataLoading}
             treeData={this.state.treeData}
             currentNode={this.state.currentNode}
@@ -1189,60 +1269,6 @@ class LibContentView extends React.Component {
             onAddFileNode={this.onAddFile}
             onRenameNode={this.onRenameTreeNode}
             onDeleteNode={this.onDeleteTreeNode}
-          />
-        }
-        {this.state.isViewFile && 
-          <FileContentView 
-            pathPrefix={this.props.pathPrefix}
-            currentMode={this.state.currentMode}
-            path={this.state.path}
-            hash={this.state.hash}
-            onTabNavClick={this.props.onTabNavClick}
-            onSideNavMenuClick={this.props.onMenuClick}
-            onSearchedClick={this.onSearchedClick}
-            onMainNavBarClick={this.onMainNavBarClick}
-            repoID={this.props.repoID}
-            currentRepoInfo={this.state.currentRepoInfo}
-            repoPermission={this.state.repoPermission}
-            isDraft={this.state.isDraft}
-            hasDraft={this.state.hasDraft}
-            goDraftPage={this.goDraftPage}
-            reviewStatus={this.state.reviewStatus}
-            goReviewPage={this.goReviewPage}
-            isFileLoading={this.state.isFileLoading}
-            filePermission={this.state.filePermission}
-            content={this.state.content}
-            lastModified={this.state.lastModified}
-            latestContributor={this.state.latestContributor}
-            onLinkClick={this.onLinkClick}
-          />
-        }
-        {!this.state.isViewFile && (
-          <LibContentMain 
-            pathPrefix={this.props.pathPrefix}
-            currentMode={this.state.currentMode}
-            path={this.state.path}
-            pathExist={this.state.pathExist}
-            currentRepoInfo={this.state.currentRepoInfo}
-            repoID={this.props.repoID}
-            repoName={this.state.repoName}
-            repoPermission={this.state.repoPermission}
-            repoEncrypted={this.state.repoEncrypted}
-            showShareBtn={showShareBtn}
-            enableDirPrivateShare={enableDirPrivateShare}
-            userPerm={userPerm}
-            isRepoOwner={isRepoOwner}
-            isAdmin={isAdmin}
-            isGroupOwnedRepo={this.state.isGroupOwnedRepo}
-            onTabNavClick={this.props.onTabNavClick}
-            onSideNavMenuClick={this.props.onMenuClick}
-            selectedDirentList={this.state.selectedDirentList}
-            onItemsMove={this.onMoveItems}
-            onItemsCopy={this.onCopyItems}
-            onItemsDelete={this.onDeleteItems}
-            switchViewMode={this.switchViewMode}
-            onSearchedClick={this.onSearchedClick}
-            onMainNavBarClick={this.onMainNavBarClick}
             draftCounts={this.state.draftCounts}
             reviewCounts={this.state.reviewCounts}
             usedRepoTags={this.state.usedRepoTags}
@@ -1266,10 +1292,19 @@ class LibContentView extends React.Component {
             isDirentSelected={this.state.isDirentSelected}
             isAllDirentSelected={this.state.isAllDirentSelected}
             onAllDirentSelected={this.onAllDirentSelected}
+          />
+          {this.state.pathExist && !this.state.isViewFile && (
+            <FileUploader
+              ref={uploader => this.uploader = uploader}
+              dragAndDrop={true}
+              path={this.state.path}
+              repoID={this.props.repoID}
+              direntList={this.state.direntList}
               onFileUploadSuccess={this.onFileUploadSuccess}
             />
           )}
         </div>
+      </div>
     );
   }
 }