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>
     );
   }

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

@@ -1,11 +1,12 @@
 import React, { Component } from 'react';
 import { gettext, siteRoot, logoPath, mediaUrl, siteTitle, logoWidth, logoHeight } from '../../utils/constants';
 import TreeView from '../../components/tree-view/tree-view';
-import NodeMenu from '../../components/menu-component/node-menu';
-import MenuControl from '../../components/menu-component/node-menu-control';
-import Delete from '../../components/menu-component/menu-dialog/delete-dialog';
-import Rename from '../../components/menu-component/menu-dialog/rename-dialog';
-import CreateFlieFolder from '../../components/menu-component/menu-dialog/create-fileforder-dialog';
+import NodeMenu from '../../components/tree-view/node-menu';
+import MenuControl from '../../components/menu-control';
+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';
 
 class SidePanel extends Component {
 
@@ -22,7 +23,8 @@ class SidePanel extends Component {
       isLoadFailed: false,
       isMenuIconShow: false,
       showDelete: false,
-      showAddFileFolder: false,
+      showFile: false,
+      showFolder: false,
       showRename: false,
       isFile: false
     };
@@ -85,12 +87,13 @@ class SidePanel extends Component {
     });
   }
 
-  toggleAddFileFolder = (flag) => {
-    let isFile = flag === true ? true : false;
-    this.setState({
-      showAddFileFolder: !this.state.showAddFileFolder,
-      isFile: isFile
-    });
+  toggleAddFile = () => {
+    this.setState({showFile: !this.state.showFile});
+    this.onHideContextMenu();
+  }
+
+  toggleAddFolder = () => {
+    this.setState({showFolder: !this.state.showFolder});
     this.onHideContextMenu();
   }
   
@@ -105,12 +108,12 @@ class SidePanel extends Component {
   }
 
   onAddFolderNode = (dirPath) => {
-    this.setState({showAddFileFolder: !this.state.showAddFileFolder});
+    this.setState({showFolder: !this.state.showFolder});
     this.props.onAddFolderNode(dirPath);
   }
   
   onAddFileNode = (filePath) => {
-    this.setState({showAddFileFolder: !this.state.showAddFileFolder});
+    this.setState({showFile: !this.state.showFile});
     this.props.onAddFileNode(filePath);
   }
   
@@ -141,11 +144,11 @@ class SidePanel extends Component {
   }
 
   addFolderCancel = () => {
-    this.setState({showAddFileFolder: !this.state.showAddFileFolder});
+    this.setState({showFolder: !this.state.showFolder});
   }
 
   addFileCancel = () => {
-    this.setState({showAddFileFolder: !this.state.showAddFileFolder});
+    this.setState({showFile: !this.state.showFile});
   }
 
   deleteCancel = () => {
@@ -195,7 +198,8 @@ class SidePanel extends Component {
             <NodeMenu 
               menuPosition={this.state.menuPosition}
               currentNode={this.state.currentNode}
-              toggleAddFileFolder={this.toggleAddFileFolder}
+              toggleAddFile={this.toggleAddFile}
+              toggleAddFolder={this.toggleAddFolder}
               toggleRename={this.toggleRename}
               toggleDelete={this.toggleDelete}
             />
@@ -207,16 +211,21 @@ class SidePanel extends Component {
               toggleCancel={this.deleteCancel}
             />
             }
-            {this.state.showAddFileFolder && 
-            <CreateFlieFolder 
-              isFile={this.state.isFile}
-              currentNode={this.state.currentNode}
-              onAddFolder={this.onAddFolderNode}
-              addFolderCancel={this.addFolderCancel}
+            {this.state.showFile && 
+            <CreateFile
+              fileType={'.md'}
+              parentPath={this.state.currentNode.path}
               onAddFile={this.onAddFileNode}
               addFileCancel={this.addFileCancel}
             />
             }
+            {this.state.showFolder &&
+            <CreateFolder 
+              parentPath={this.state.currentNode.path}
+              onAddFolder={this.onAddFolderNode}
+              addFolderCancel={this.addFolderCancel}
+            />
+            }
             {this.state.showRename &&
             <Rename 
               currentNode={this.state.currentNode}