New file/folder menu on toolbar (#2452)

frontend/package-lock.json

@@ -87,7 +87,7 @@
       "dependencies": {
         "reactstrap": {
           "version": "5.0.0",
-          "resolved": "http://registry.npmjs.org/reactstrap/-/reactstrap-5.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-5.0.0.tgz",
           "integrity": "sha512-y0eju/LAK7gbEaTFfq2iW92MF7/5Qh0tc1LgYr2mg92IX8NodGc03a+I+cp7bJ0VXHAiLy0bFL9UP89oSm4cBg==",
           "requires": {
             "classnames": "^2.2.3",
@@ -10175,9 +10175,9 @@
       }
     },
     "seafile-js": {
-      "version": "0.2.25",
-      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.25.tgz",
-      "integrity": "sha512-XVJ6qvFeSv6tfihBvNscBS+rmnb+TkhyXvEYKBa13PipZbJdxbzVeWRhCXiR82fQwWLzYdAAv2rclSeURyCe5Q==",
+      "version": "0.2.26",
+      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.26.tgz",
+      "integrity": "sha512-iKP2nLBCDE2G4MoiVdtQ4JlKY3vUByb7dwbwOV/pC8OdSxYcpu1zmCFl45TLnhz8B6wOlc7EC00ByZAvyTaZOQ==",
       "requires": {
         "axios": "^0.18.0",
         "form-data": "^2.3.2"

frontend/package.json

@@ -25,7 +25,7 @@
     "react-dom": "^16.5.2",
     "react-moment": "^0.7.9",
     "reactstrap": "^6.4.0",
-    "seafile-js": "^0.2.25",
+    "seafile-js": "^0.2.26",
     "seafile-ui": "^0.1.10",
     "sw-precache-webpack-plugin": "0.11.4",
     "url-loader": "0.6.2",

frontend/src/components/dialog/create-file-dialog.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Col, FormText } from 'reactstrap';
+import { gettext } from '../../utils/constants';
+
+class CreateFile extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      parentPath: '',
+      childName: props.fileType,
+    };
+    this.newInput = React.createRef()
+  }
+
+  handleChange = (e) => {
+    this.setState({
+      childName: e.target.value, 
+    }) 
+  }
+
+  handleSubmit = () => {
+    let path = this.state.parentPath + this.state.childName
+    this.props.onAddFile(path);
+  } 
+
+  handleKeyPress = (e) => {
+    if (e.key === 'Enter') {
+      this.handleSubmit();
+    }
+  }
+
+  toggle = () => {
+    this.props.addFileCancel();
+  }
+
+  componentDidMount() {
+    if (this.props.parentPath === "/") {
+      this.setState({parentPath: this.props.parentPath});
+    } else {
+      this.setState({parentPath: this.props.parentPath + "/"});
+    }
+    this.newInput.focus();
+    this.newInput.setSelectionRange(0,0);
+  }
+
+  render() {
+    return (
+      <Modal isOpen={true} toggle={this.toggle}>
+        <ModalHeader toggle={this.toggle}>{gettext("New File")}</ModalHeader>
+        <ModalBody>
+          <Form>
+            <FormGroup row>
+              <Label sm={3}>Parent path: </Label>
+              <Col sm={9} className="parent-path"><FormText>{this.state.parentPath}</FormText></Col>
+            </FormGroup>
+            <FormGroup row>
+              <Label for="fileName" sm={3}>{gettext("Name")}: </Label>
+              <Col sm={9}>
+                <Input onKeyPress={this.handleKeyPress} innerRef={input => {this.newInput = input}} id="fileName" placeholder={gettext("newName")} value={this.state.childName} onChange={this.handleChange}/>
+              </Col>
+            </FormGroup>
+          </Form>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="primary" onClick={this.handleSubmit}>{gettext("Submit")}</Button>
+          <Button color="secondary" onClick={this.toggle}>{gettext("Cancel")}</Button>
+        </ModalFooter>
+      </Modal>
+    )
+  }
+}
+
+export default CreateFile;

frontend/src/components/dialog/create-folder-dialog.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { gettext } from '../../../utils/constants';
 import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Col, FormText } from 'reactstrap';
+import { gettext } from '../../utils/constants';
 
-class CreateFileForder extends React.Component {
+class CreateForder extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -20,12 +20,8 @@ class CreateFileForder extends React.Component {
 
   handleSubmit = () => {
     let path = this.state.parentPath + this.state.childName
-    if (this.props.isFile) {
-      this.props.onAddFile(path);
-    } else {
     this.props.onAddFolder(path);
   } 
-  } 
 
   handleKeyPress = (e) => {
     if (e.key === 'Enter') {
@@ -34,44 +30,23 @@ class CreateFileForder extends React.Component {
   }
 
   toggle = () => {
-    if (this.props.isFile) {
-      this.props.addFileCancel();
-    } else {
     this.props.addFolderCancel();
   }
-  }
-  
-  componentWillMount() {
-    this.changeState(this.props.isFile);
-  }
 
   componentDidMount() {
-    if (this.props.currentNode.path === "/") {
-      this.setState({parentPath: this.props.currentNode.path});
+    if (this.props.parentPath === "/") {
+      this.setState({parentPath: this.props.parentPath});
     } else {
-      this.setState({parentPath: this.props.currentNode.path + "/"});
+      this.setState({parentPath: this.props.parentPath + "/"});
     }
     this.newInput.focus();
     this.newInput.setSelectionRange(0,0);
   }
 
-  componentWillReceiveProps(nextProps) {
-    this.changeState(nextProps.isFile);
-  }
-
-  changeState(isFile) {
-    if (isFile) {
-      this.setState({childName: '.md'});
-    } else{
-      this.setState({childName: ""});
-    }
-  }
-
-
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{this.props.isFile ? gettext("New File") : gettext("New Folder")}</ModalHeader>
+        <ModalHeader toggle={this.toggle}>{gettext("New Folder")}</ModalHeader>
         <ModalBody>
           <Form>
             <FormGroup row>
@@ -95,4 +70,4 @@ class CreateFileForder extends React.Component {
   }
 }
 
-export default CreateFileForder;
+export default CreateForder;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { gettext } from '../../../utils/constants';
+import { gettext } from '../../utils/constants';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 
 const propTypes = {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { gettext } from '../../../utils/constants';
+import { gettext } from '../../utils/constants';
 import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter } from 'reactstrap';
 
 class Rename extends React.Component {

frontend/src/components/draft-list-view/draft-list-item.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { siteRoot, lang } from '../../utils/constants';
-import NodeMenuControl from '../menu-component/node-menu-control';
+import MenuControl from '../menu-control';
 import moment from 'moment';
 
 moment.locale(lang);
@@ -87,7 +87,7 @@ class DraftListItem extends React.Component {
         <td className="menu-toggle">
           { 
             this.props.draft.review_status !== 'open' &&
-            <NodeMenuControl
+            <MenuControl
               isShow={this.state.isMenuControlShow}
               onClick={this.onMenuToggleClick}
             />

frontend/src/components/history-list-view/history-list-item.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
-import NodeMenuControl from '../menu-component/node-menu-control';
+import MenuControl from '../menu-control';
 
 moment.locale(window.app.config.lang);
 const propTypes = {
@@ -70,7 +70,7 @@ class HistoryListItem extends React.Component {
           </div>
         </div>
         <div className="history-operation">
-          <NodeMenuControl
+          <MenuControl
             isShow={this.state.isShowOperationIcon || isHigtlightItem}
             onClick={this.onMenuControlClick}
           />

frontend/src/components/menu-component/node-menu-control.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const propTypes = {
-  isShow: PropTypes.bool.isRequired,
-  currentNode: PropTypes.object,
-  onClick: PropTypes.func.isRequired,
-};
-
-class NodeMenuControl extends React.Component {
-
-  onClick = (e) => {
-    let node = this.props.currentNode;
-    this.props.onClick(e, node);
-  }
-  
-  render() {
-    return (
-      <i 
-        className={`fas fa-ellipsis-v ${this.props.isShow ? '' : 'hide'}`}
-        onClick={this.onClick}
-      >
-      </i>
-    );
-  }
-}
-
-NodeMenuControl.propTypes = propTypes;
-
-export default NodeMenuControl;

frontend/src/components/menu-control.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  isShow: PropTypes.bool.isRequired,
+};
+
+class MenuControl extends React.Component {
+ 
+  render() {
+    return (
+      <i className={`fas fa-ellipsis-v ${this.props.isShow ? '' : 'hide'}`} onClick={this.props.onClick}></i>
+    );
+  }
+}
+
+MenuControl.propTypes = propTypes;
+
+export default MenuControl;

frontend/src/components/review-list-view/review-list-item.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { siteRoot, lang } from '../../utils/constants';
 import moment from 'moment';
+import { siteRoot, lang } from '../../utils/constants';
 
 moment.locale(lang);
 const propTypes = {

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

@@ -3,8 +3,12 @@ import { gettext } from '../../utils/constants';
 
 class NodeMenu extends React.Component {
 
-  toggleAddFileFolder = (ev, flag) => {
-    this.props.toggleAddFileFolder(flag);
+  toggleAddFile = () => {
+    this.props.toggleAddFile();
+  }
+  
+  toggleAddFolder = () => {
+    this.props.toggleAddFolder();
   }
 
   toggleRename = () => {
@@ -23,16 +27,16 @@ class NodeMenu extends React.Component {
       if (this.props.currentNode.name === '/') {
         return (
           <ul className="dropdown-menu" style={style}>
-            <li className="dropdown-item" onClick={this.toggleAddFileFolder}>{gettext('New Folder')}</li>
-            <li className="dropdown-item" onClick={(ev,flag) => this.toggleAddFileFolder(ev,true)}>{gettext('New File')}</li>
+            <li className="dropdown-item" onClick={this.toggleAddFolder}>{gettext('New Folder')}</li>
+            <li className="dropdown-item" onClick={this.toggleAddFile}>{gettext('New File')}</li>
           </ul>
         );
       }
       
       return (
         <ul className="dropdown-menu" style={style}>
-          <li className="dropdown-item" onClick={this.toggleAddFileFolder}>{gettext('New Folder')}</li>
-          <li className="dropdown-item" onClick={(ev,flag) => this.toggleAddFileFolder(ev,true)}>{gettext('New File')}</li>
+          <li className="dropdown-item" onClick={this.toggleAddFolder}>{gettext('New Folder')}</li>
+          <li className="dropdown-item" onClick={this.toggleAddFile}>{gettext('New File')}</li>
           <li className="dropdown-item" onClick={this.toggleRename}>{gettext('Rename')}</li>
           <li className="dropdown-item" onClick={this.toggleDelete}>{gettext('Delete')}</li>
         </ul>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import MenuControl from '../menu-component/node-menu-control';
+import MenuControl from '../menu-control';
 import { permission } from '../../utils/constants';
 
 function sortByType(a, b) {

frontend/src/css/toolbar.css

@@ -1,5 +1,5 @@
 
-/* begin current-module-toobar */
+/* begin toobar-container */
 .cur-view-toolbar {
   position: relative;
   display: flex;
@@ -15,7 +15,10 @@
   content: '';
 }
 
-.top-toolbar-btn {
+/* end toolbar-container */
+
+/* file-operation toolbar eg: edit, upload, new, share*/
+.operation-item  {
   padding: 0 0.25rem;
   margin-right: 0.25rem;
   height: 30px;
@@ -29,7 +32,10 @@
   border-radius: 2px;
 }
 
-.sf-view-mode-change-btn {
+/* end file-operation toolbar */
+
+/* begin view-mode toolbar */
+.sf-view-mode-btn {
   padding: 0;
   height: 30px;
   min-width: 2rem;
@@ -41,12 +47,11 @@
   border-radius: 0 !important;
 }
 
-.sf-view-mode-change-btn.current-mode {
+.sf-view-mode-btn.current-mode {
   background-color: #ccc !important;
   color: #fff !important;
 }
-
-/* end current-module-toobar */
+/* end view-mode toolbar */
 
 /* begin common-toolbar */
 .common-toolbar {
@@ -81,3 +86,4 @@
   text-decoration:none;
 }
 /* end path toolbar */
+

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>
+            <div className="file-operation">
+              <div className="operation">
                 { 
                   this.props.permission === 'rw' &&
-              <button className="btn btn-secondary top-toolbar-btn" title={gettext('Edit File')} onClick={this.onEditClick}>{gettext('Edit')}</button>
+                  <button className="btn btn-secondary operation-item" 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>
+                <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}

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

@@ -62,7 +62,7 @@ class MainPanel extends Component {
             <span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title="Side Nav Menu" onClick={this.onMenuClick}></span>
             { 
               this.props.permission === 'rw' && 
-              <button className="btn btn-secondary top-toolbar-btn" title="Edit File" onClick={this.onEditClick}>{gettext('Edit Page')}</button>
+              <button className="btn btn-secondary operation-item" title="Edit File" onClick={this.onEditClick}>{gettext('Edit Page')}</button>
             }
           </div>
           <CommonToolbar onSearchedClick={this.props.onSearchedClick} searchPlaceholder={'Search files in this library'}/>

frontend/src/pages/wiki/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,9 +23,9 @@ class SidePanel extends Component {
       isLoadFailed: false,
       isMenuIconShow: false,
       showDelete: false,
-      showAddFileFolder: false,
+      showFile: false,
+      showFolder: false,
       showRename: false,
-      isFile: false
     };
     this.searchedPath = null;
   }
@@ -85,12 +86,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 +107,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 +143,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 +197,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 +210,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}

frontend/src/repo-wiki-mode.js

@@ -537,6 +537,8 @@ class Wiki extends Component {
           onMainNavBarClick={this.onMainNavBarClick}
           onMainItemClick={this.onMainItemClick}
           onMainItemDelete={this.onMainItemDelete}
+          onMainAddFile={this.onAddFileNode}
+          onMainAddFolder={this.onAddFolderNode}
         />
       </div>
     );