New file/folder menu on toolbar (#2452)

frontend/src/pages/repo-wiki-mode/main-panel.js

@@ -2,11 +2,13 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { gettext, repoID, serviceUrl, slug, siteRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
+import Dirent from '../../models/dirent';
 import CommonToolbar from '../../components/toolbar/common-toolbar';
 import PathToolbar from '../../components/toolbar/path-toolbar';
 import MarkdownViewer from '../../components/markdown-viewer';
 import DirentListView from '../../components/dirent-list-view/dirent-list-view';
-import Dirent from '../../models/dirent';
+import CreateFolder from '../../components/dialog/create-folder-dialog';
+import CreateFile from '../../components/dialog/create-file-dialog';
 
 const propTypes = {
   content: PropTypes.string,
@@ -29,10 +31,19 @@ class MainPanel extends Component {
     super(props);
     this.state = {
       isWikiMode: true,
-      direntList: []
+      direntList: [],
+      newMenuShow: false,
+      uploadMenuShow: false,
+      showFileDialog: false,
+      showFolderDialog: false,
+      createFileType: '',
     };
   }
 
+  componentDidMount() {
+    document.addEventListener('click', this.hideOperationMenu);
+  }
+
   componentWillReceiveProps(nextProps) {
     let node = nextProps.changedNode;
     if (node && node.isDir()) {
@@ -41,6 +52,10 @@ class MainPanel extends Component {
     }
   }
 
+  componentWillUnmount() {
+    document.removeEventListener('click', this.hideOperationMenu);
+  }
+
   updateViewList = (filePath) => {
     seafileAPI.listDir(repoID, filePath, 48).then(res => {
       let direntList = [];
@@ -76,6 +91,78 @@ class MainPanel extends Component {
     window.location.href= serviceUrl + '/lib/' + repoID + '/file' + this.props.filePath + '?mode=edit';
   }
 
+  onUploadClick = (e) => {
+    this.toggleOperationMenu(e);
+    this.setState({
+      newMenuShow: false,
+      uploadMenuShow: !this.state.uploadMenuShow,
+    });
+  }
+
+  onNewClick = (e) => {
+    this.toggleOperationMenu(e);
+    this.setState({
+      newMenuShow: !this.state.newMenuShow,
+      uploadMenuShow: false,
+    });
+  }
+
+  onShareClick = () => {
+    alert('share btn clicked');
+  }
+
+  toggleOperationMenu = (e) => {
+    e.nativeEvent.stopImmediatePropagation();
+    let targetRect = e.target.getClientRects()[0];
+    let left = targetRect.x;
+    let top  = targetRect.y + targetRect.height;
+    let style = {position: 'fixed', display: 'block', left: left, top: top};
+    this.setState({operationMenuStyle: style});
+  }
+
+  hideOperationMenu = () => {
+    this.setState({
+      uploadMenuShow: false,
+      newMenuShow: false,
+    });
+  }
+
+  addFolder = () => {
+    this.setState({showFolderDialog: !this.showFolderDialog});
+  }
+
+  addFile = () => {
+    this.setState({
+      showFileDialog: !this.showFileDialog,
+      createFileType: '',
+    });
+  }
+
+  addMarkdownFile = () => {
+    this.setState({
+      showFileDialog: !this.showFileDialog,
+      createFileType: '.md',
+    });
+  }
+
+  addFolderCancel = () => {
+    this.setState({showFolderDialog: !this.state.showFolderDialog});
+  }
+
+  addFileCancel = () => {
+    this.setState({showFileDialog: !this.state.showFileDialog});
+  }
+
+  onMainAddFile = (filePath) => {
+    this.setState({showFileDialog: !this.state.showFileDialog});
+    this.props.onMainAddFile(filePath);
+  }
+
+  onMainAddFolder = (dirPath) => {
+    this.setState({showFolderDialog: !this.state.showFolderDialog});
+    this.props.onMainAddFolder(dirPath);
+  }
+
   render() {
     let filePathList = this.props.filePath.split('/');
     let nodePath = '';
@@ -108,14 +195,37 @@ class MainPanel extends Component {
         <div className="main-panel-top panel-top">
           <div className="cur-view-toolbar border-left-show">
             <span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title={gettext('Side Nav Menu')} onClick={this.onMenuClick}></span>
-            { 
-              this.props.permission === 'rw' && 
-              <button className="btn btn-secondary top-toolbar-btn" title={gettext('Edit File')} onClick={this.onEditClick}>{gettext('Edit')}</button>
-            }
-            <div className="btn-group">
-              <button className="btn btn-secondary btn-icon sf-view-mode-change-btn sf2-icon-list-view" id='list' title={gettext('List')} onClick={this.switchViewMode}></button>
-              <button className="btn btn-secondary btn-icon sf-view-mode-change-btn sf2-icon-grid-view" id='grid' title={gettext('Grid')} onClick={this.switchViewMode}></button>
-              <button className={`btn btn-secondary btn-icon sf-view-mode-change-btn sf2-icon-two-columns ${this.state.isWikiMode ? 'current-mode' : ''}`} id='wiki' title={gettext('wiki')} onClick={this.switchViewMode}></button>
+            <div className="file-operation">
+              <div className="operation">
+                { 
+                  this.props.permission === 'rw' &&
+                  <button className="btn btn-secondary operation-item" title={gettext('Edit File')} onClick={this.onEditClick}>{gettext('Edit')}</button>
+                }
+                <button className="btn btn-secondary operation-item" title={gettext('Edit File')} onClick={this.onUploadClick}>{gettext('Upload')}</button>
+                <button className="btn btn-secondary operation-item" title={gettext('Edit File')} onClick={this.onNewClick}>{gettext('New')}</button>
+                <button className="btn btn-secondary operation-item" title={gettext('Edit File')} onClick={this.onShareClick}>{gettext('Share')}</button>
+              </div>
+              {
+                this.state.uploadMenuShow && 
+                <ul className="menu dropdown-menu" style={this.state.operationMenuStyle}>
+                  <li className="dropdown-item">{gettext('Upload Files')}</li>
+                  <li className="dropdown-item">{gettext('Upload Folder')}</li>
+                </ul>
+              }
+              {
+                this.state.newMenuShow &&
+                <ul className="menu dropdown-menu" style={this.state.operationMenuStyle}>
+                    <li className="dropdown-item" onClick={this.addFolder}>{gettext('New Folder')}</li>
+                    <li className="dropdown-item" onClick={this.addFile}>{gettext('New File')}</li>
+                    <li className="dropdown-item menu-inner-divider"></li>
+                    <li className="dropdown-item" onClick={this.addMarkdownFile}>{gettext('New Markdown File')}</li>
+                </ul>
+              }
+            </div>
+            <div className="view-mode btn-group">
+              <button className="btn btn-secondary btn-icon sf-view-mode-btn sf2-icon-list-view" id='list' title={gettext('List')} onClick={this.switchViewMode}></button>
+              <button className="btn btn-secondary btn-icon sf-view-mode-btn sf2-icon-grid-view" id='grid' title={gettext('Grid')} onClick={this.switchViewMode}></button>
+              <button className={`btn btn-secondary btn-icon sf-view-mode-btn sf2-icon-two-columns ${this.state.isWikiMode ? 'current-mode' : ''}`} id='wiki' title={gettext('wiki')} onClick={this.switchViewMode}></button>
             </div>
           </div>
           <CommonToolbar onSearchedClick={this.props.onSearchedClick} searchPlaceholder={'Search files in this library'}/>
@@ -153,6 +263,21 @@ class MainPanel extends Component {
             }
           </div>
         </div>
+        {this.state.showFileDialog && 
+          <CreateFile
+            fileType={this.state.createFileType}
+            parentPath={this.props.filePath}
+            addFileCancel={this.addFileCancel}
+            onAddFile={this.onMainAddFile}
+          />
+        }
+        {this.state.showFolderDialog &&
+          <CreateFolder 
+            parentPath={this.props.filePath}
+            addFolderCancel={this.addFolderCancel}
+            onAddFolder={this.onMainAddFolder}
+          />
+        }
       </div>
     );
   }