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/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-nav.js

@@ -1,234 +0,0 @@
-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';
-import Delete from '../../components/dialog/delete-dialog';
-import Rename from '../../components/dialog/rename-dialog';
-import CreateFolder from '../../components/dialog/create-folder-dialog';
-import CreateFile from '../../components/dialog/create-file-dialog';
-
-const propTypes = {
-  repoPermission: PropTypes.bool.isRequired,
-  currentPath: PropTypes.string,
-  currentRepoInfo: PropTypes.object,  // Initially not loaded
-  isTreeDataLoading: PropTypes.bool.isRequired,
-  treeData: PropTypes.object.isRequired,
-  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,
-};
-
-class LibContentNav 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,
-      isRenameDialogShow: false,
-    };
-    this.isNodeMenuShow = true;
-  }
-
-  onDropdownToggleClick = (e) => {
-    e.preventDefault();
-    this.toggleOperationMenu();
-  }
-
-  toggleOperationMenu = () => {
-    this.setState({isHeaderMenuShow: !this.state.isHeaderMenuShow});
-  }
-
-  onNodeClick = (node) => {
-    this.setState({opNode: node});
-    this.props.onNodeClick(node);
-  }
-
-  onMenuItemClick = (operation, node) => {
-    this.setState({opNode: node});
-    switch (operation) {
-      case 'New Folder':
-        this.onAddFolderToggle();
-        break;
-      case 'New File':
-        this.onAddFileToggle();
-        break;
-      case 'Rename':
-        this.onRenameToggle();
-        break;
-      case 'Delete':
-        this.onDeleteToggle();
-        break;
-    }
-  }
-
-  onAddFileToggle = (type) => {
-    if (type === 'root') {
-      let root = this.props.treeData.root;
-      this.setState({
-        isAddFileDialogShow: !this.state.isAddFileDialogShow,
-        opNode: root,
-      });
-    } else {
-      this.setState({isAddFileDialogShow: !this.state.isAddFileDialogShow});
-    }
-  }
-  
-  onAddFolderToggle = (type) => {
-    if (type === 'root') {
-      let root = this.props.treeData.root;
-      this.setState({
-        isAddFolderDialogShow: !this.state.isAddFolderDialogShow,
-        opNode: root,
-      });
-    } else {
-      this.setState({isAddFolderDialogShow: !this.state.isAddFolderDialogShow});
-    }
-  }
-
-  onRenameToggle = () => {
-    this.setState({isRenameDialogShow: !this.state.isRenameDialogShow});
-  }
-
-  onDeleteToggle = () => {
-    this.setState({isDeleteDialogShow: !this.state.isDeleteDialogShow});
-  }
-
-  onAddFolderNode = (dirPath) => {
-    this.setState({isAddFolderDialogShow: !this.state.isAddFolderDialogShow});
-    this.props.onAddFolderNode(dirPath);
-  }
-
-  onAddFileNode = (filePath, isDraft) => {
-    this.setState({isAddFileDialogShow: !this.state.isAddFileDialogShow});
-    this.props.onAddFileNode(filePath, isDraft);
-  }
-
-  onRenameNode = (newName) => {
-    this.setState({isRenameDialogShow: !this.state.isRenameDialogShow});
-    let node = this.state.opNode;
-    this.props.onRenameNode(node, newName);
-  }
-
-  onDeleteNode = () => {
-    this.setState({isDeleteDialogShow: !this.state.isDeleteDialogShow});
-    let node = this.state.opNode;
-    this.props.onDeleteNode(node);
-  }
-
-  checkDuplicatedName = (newName) => {
-    let node = this.state.opNode;
-    // root node to new node conditions: parentNode is null, 
-    let parentNode = node.parentNode ? node.parentNode : node;
-    let childrenObject = parentNode.children.map(item => {
-      return item.object;
-    });
-    let isDuplicated = childrenObject.some(object => {
-      return object.name === newName;
-    });
-    return isDuplicated;
-  }
-
-  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">
-            {this.props.isTreeDataLoading ? 
-              (<Loading/>) :
-              (<TreeView
-                repoPermission={this.props.repoPermission}
-                isNodeMenuShow={this.isNodeMenuShow}
-                treeData={this.props.treeData}
-                currentPath={this.props.currentPath}
-                onNodeClick={this.onNodeClick}
-                onNodeExpanded={this.props.onNodeExpanded}
-                onNodeCollapse={this.props.onNodeCollapse}
-                onMenuItemClick={this.onMenuItemClick}
-                onFreezedItem={this.onFreezedItem}
-                onUnFreezedItem={this.onUnFreezedItem}
-              />)
-            }
-          </div>
-        </div>
-        {this.state.isAddFolderDialogShow && (
-          <ModalPortal>
-            <CreateFolder
-              parentPath={this.state.opNode.path}
-              onAddFolder={this.onAddFolderNode}
-              checkDuplicatedName={this.checkDuplicatedName}
-              addFolderCancel={this.onAddFolderToggle}
-            />
-          </ModalPortal>
-        )}
-        {this.state.isAddFileDialogShow && (
-          <ModalPortal>
-            <CreateFile
-              parentPath={this.state.opNode.path}
-              onAddFile={this.onAddFileNode}
-              checkDuplicatedName={this.checkDuplicatedName}
-              addFileCancel={this.onAddFileToggle}
-            />
-          </ModalPortal>
-        )}
-        {this.state.isRenameDialogShow && (
-          <ModalPortal>
-            <Rename
-              currentNode={this.state.opNode}
-              onRename={this.onRenameNode}
-              checkDuplicatedName={this.checkDuplicatedName}
-              toggleCancel={this.onRenameToggle}
-            />
-          </ModalPortal>
-        )}
-        {this.state.isDeleteDialogShow && (
-          <ModalPortal>
-            <Delete
-              currentNode={this.state.opNode}
-              handleSubmit={this.onDeleteNode}
-              toggleCancel={this.onDeleteToggle}
-            />
-          </ModalPortal>
-        )}
-      </Fragment>
-    );
-  }
-}
-
-LibContentNav.propTypes = propTypes;
-
-export default LibContentNav;

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,9 +1292,18 @@ class LibContentView extends React.Component {
             isDirentSelected={this.state.isDirentSelected}
             isAllDirentSelected={this.state.isAllDirentSelected}
             onAllDirentSelected={this.onAllDirentSelected}
-            onFileUploadSuccess={this.onFileUploadSuccess}
           />
-        )}
+          {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>
     );
   }
@@ -1276,4 +1311,4 @@ class LibContentView extends React.Component {
 
 LibContentView.propTypes = propTypes;
 
-export default LibContentView;
+export default LibContentView;