Implement wiki mode menu function (#2461)

frontend/src/components/dialog/copy-dirent-dialog.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal, ModalHeader, ModalFooter, ModalBody, Alert } from 'reactstrap';
+import { gettext, repoID } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+import FileChooser from '../file-chooser/file-chooser';
+
+const propTypes = {
+  direntPath: PropTypes.string,
+  dirent: PropTypes.object.isRequired,
+  onItemCopy: PropTypes.func.isRequired,
+  onCancelCopy: PropTypes.func.isRequired,
+};
+
+// need dirent file Path；
+class CopyDirent extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      repo: null,
+      filePath: '',
+      errMessage: '',
+    };
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    if (this.state.errMessage === nextState.errMessage) {
+      return false;
+    }
+    return true;
+  }
+
+  handleSubmit = () => {
+    let { direntPath } = this.props;
+    let { repo, filePath } = this.state; 
+    let message = 'Invalid destination path';
+
+    if (!repo || (repo.repo_id === repoID && filePath === '')) {
+      this.setState({errMessage: message});
+      return;
+    }
+
+    if (filePath && direntPath === filePath) {
+      this.setState({errMessage: message});
+      return;
+    }
+
+    
+    if (filePath && direntPath.length > filePath.length && direntPath.indexOf(filePath) > -1) {
+      this.setState({errMessage: message});
+      return;
+    }
+    
+    if ( filePath && filePath.length > direntPath.length && filePath.indexOf(direntPath) > -1) {
+      message = gettext('Can not copy directory %(src)s to its subdirectory %(des)s')
+      message = message.replace('%(src)s', direntPath);
+      message = message.replace('%(des)s', filePath);
+      this.setState({errMessage: message});
+      return;
+    }
+
+    if (filePath === '') {
+      filePath = '/';
+    }
+    this.props.onItemCopy(repo, direntPath, filePath);
+    this.toggle();
+  }
+
+  toggle = () => {
+    this.props.onCancelCopy();
+  }
+
+  onDirentItemClick = (repo, filePath) => {
+    this.setState({
+      repo: repo,
+      filePath: filePath,
+      errMessage: '',
+    });
+  }
+
+  onRepoItemClick = (repo) => {
+    this.setState({
+      repo: repo,
+      filePath: '',
+      errMessage: ''
+    });
+  }
+
+  render() {
+    let title = gettext("Copy {placeholder} to:");
+    title = title.replace('{placeholder}', '<span class="sf-font">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
+    return (
+      <Modal isOpen={true} toggle={this.toggle}>
+        <ModalHeader toggle={this.toggle}><div dangerouslySetInnerHTML={{__html: title}}></div></ModalHeader>
+        <ModalBody>
+          <FileChooser 
+            onDirentItemClick={this.onDirentItemClick}
+            onRepoItemClick={this.onRepoItemClick}
+          />
+          {this.state.errMessage && <Alert color="danger" style={{margin: '0.5rem'}}>{this.state.errMessage}</Alert>}
+        </ModalBody>
+        <ModalFooter>
+          <Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
+          <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+CopyDirent.propTypes = propTypes;
+
+export default CopyDirent;

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

@@ -40,7 +40,7 @@ class CreateFile extends React.Component {
   }
 
   handleCheck = () => {
-    let pos = this.state.childName.lastIndexOf(".");
+    let pos = this.state.childName.lastIndexOf('.');
     
     if (this.state.isDraft) {
       // from draft to not draft
@@ -54,12 +54,12 @@ class CreateFile extends React.Component {
         this.setState({
           childName: fileName + fileType, 
           isDraft: !this.state.isDraft
-        })
+        });
       } else {
         // don't change file name
         this.setState({
           isDraft: !this.state.isDraft
-        })
+        });
       }
     }
     
@@ -74,16 +74,16 @@ class CreateFile extends React.Component {
         this.setState({
           childName: fileName + '(draft)' + fileType,
           isDraft: !this.state.isDraft
-        })
+        });
       } else if (pos === 0 ) {
         this.setState({
           childName: '(draft)' + this.state.childname, 
           isDraft: !this.state.isdraft
-        })
+        });
       } else {
-         this.setState({
+        this.setState({
           isDraft: !this.state.isdraft
-        })
+        });
       } 
     }
   }
@@ -121,7 +121,7 @@ class CreateFile extends React.Component {
             <FormGroup row>
               <Label sm={3} check />
               <Col sm={9}>
-                <Input type="checkbox" onChange={this.handleCheck}/>{'  '}{gettext("This is a draft.")}
+                <Input type="checkbox" onChange={this.handleCheck}/>{'  '}{gettext('This is a draft.')}
               </Col>
             </FormGroup>
 

frontend/src/components/dialog/move-dirent-dialog.js

@@ -0,0 +1,113 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal, ModalHeader, ModalFooter, ModalBody, Alert } from 'reactstrap';
+import { gettext, repoID } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+import FileChooser from '../file-chooser/file-chooser';
+
+const propTypes = {
+  direntPath: PropTypes.string,
+  dirent: PropTypes.object.isRequired,
+  onItemMove: PropTypes.func.isRequired,
+  onCancelMove: PropTypes.func.isRequired,
+};
+
+// need dirent file Path；
+class MoveDirent extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      repo: null,
+      filePath: '',
+      errMessage: '',
+    };
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    if (this.state.errMessage === nextState.errMessage) {
+      return false;
+    }
+    return true;
+  }
+
+  handleSubmit = () => {
+    let { direntPath } = this.props;
+    let { repo, filePath } = this.state; 
+    let message = gettext('Invalid destination path');
+
+    if (!repo || (repo.repo_id === repoID && filePath === '')) {
+      this.setState({errMessage: message});
+      return;
+    }
+    
+    if (filePath && direntPath === filePath) {
+      this.setState({errMessage: message});
+      return;
+    }
+    
+    
+    if (filePath && direntPath.length > filePath.length && direntPath.indexOf(filePath) > -1) {
+      this.setState({errMessage: message});
+      return;
+    }
+    
+    if ( filePath && filePath.length > direntPath.length && filePath.indexOf(direntPath) > -1) {
+      message = gettext('Can not move directory %(src)s to its subdirectory %(des)s')
+      message = message.replace('%(src)s', direntPath);
+      message = message.replace('%(des)s', filePath);
+      this.setState({errMessage: message});
+      return;
+    }
+    if (filePath === '') {
+      filePath = '/';
+    }
+    this.props.onItemMove(repo, direntPath, filePath);
+    this.toggle();
+  }
+
+  toggle = () => {
+    this.props.onCancelMove();
+  }
+
+  onDirentItemClick = (repo, filePath) => {
+    this.setState({
+      repo: repo,
+      filePath: filePath,
+      errMessage: '',
+    });
+  }
+
+  onRepoItemClick = (repo) => {
+    this.setState({
+      repo: repo,
+      filePath: '',
+      errMessage: ''
+    });
+  }
+
+  render() {
+    let title = gettext("Move {placeholder} to:");
+    title = title.replace('{placeholder}', '<span class="sf-font">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
+    return (
+      <Modal isOpen={true} toggle={this.toggle}>
+        <ModalHeader toggle={this.toggle}><div dangerouslySetInnerHTML={{__html: title}}></div></ModalHeader>
+        <ModalBody>
+          <FileChooser 
+            onDirentItemClick={this.onDirentItemClick}
+            onRepoItemClick={this.onRepoItemClick}
+          />
+          {this.state.errMessage && <Alert color="danger" style={{margin: '0.5rem'}}>{this.state.errMessage}</Alert>}
+        </ModalBody>
+        <ModalFooter>
+          <Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
+          <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+MoveDirent.propTypes = propTypes;
+
+export default MoveDirent;

frontend/src/components/dialog/zip-download-dialog.js

@@ -4,7 +4,7 @@ import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 
 const propTypes = {
   onCancelDownload: PropTypes.func.isRequired,
-  progress: PropTypes.string.isRequired,
+  progress: PropTypes.number.isRequired,
 };
 
 class ZipDownloadDialog extends React.Component {
@@ -18,7 +18,7 @@ class ZipDownloadDialog extends React.Component {
       <Modal isOpen={true} toggle={this.toggle}>
         <ModalHeader toggle={this.toggle}></ModalHeader>
         <ModalBody>
-          <div>{this.props.progress}</div>
+          <div>{this.props.progress + '%'}</div>
         </ModalBody>
       </Modal>
     );

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import { gettext } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+
+const propTypes = {
+  repo: PropTypes.object.isRequired,
+  direntType: PropTypes.string.isRequired,
+  direntDetail: PropTypes.object.isRequired,
+  direntPath: PropTypes.string.isRequired,
+};
+
+class DetailListView extends React.Component {
+
+  getDirentPostion = () => {
+    let { repo, direntPath } = this.props;
+    let position = repo.repo_name + '/';
+    if (direntPath !== '/') {
+      let index = direntPath.lastIndexOf('/');
+      let path = direntPath.slice(0, index);
+      position = position + path;
+    }
+    return position;
+  }
+
+  render() {
+    let { direntType, direntDetail } = this.props;
+    let position = this.getDirentPostion();
+    if (direntType === 'dir') {
+      return (
+        <div className="dirent-table-container">
+          <table>
+            <tbody>
+              <tr><th width="35%"></th><td width="65%"></td></tr>
+              <tr><th>{gettext('Folder')}</th><td>{direntDetail.dir_count}</td></tr>
+              <tr><th>{gettext('File')}</th><td>{direntDetail.file_count}</td></tr>
+              <tr><th>{gettext('Size')}</th><td>{Utils.bytesToSize(direntDetail.size)}</td></tr>
+              <tr><th>{gettext('Position')}</th><td>{position}</td></tr>
+              <tr><th>{gettext('Last Update')}</th><td>{moment(direntDetail.mtime).format('YYYY-MM-DD')}</td></tr>
+            </tbody>
+          </table>
+        </div>
+      );
+    } else {
+      return (
+        <div className="dirent-table-container">
+          <table>
+            <tbody>
+              <tr><th width="35%"></th><td width="65%"></td></tr>
+              <tr><th>{gettext('Size')}</th><td>{direntDetail.size}</td></tr>
+              <tr><th>{gettext('Position')}</th><td>{position}</td></tr>
+              <tr><th>{gettext('Last Update')}</th><td>{moment(direntDetail.mtime).format('YYYY-MM-DD')}</td></tr>
+            </tbody>
+          </table>
+        </div>
+      );
+    }
+  }
+}
+
+DetailListView.propTypes = propTypes;
+
+export default DetailListView;

frontend/src/components/dirent-detail/dirent-details.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { seafileAPI } from '../../utils/seafile-api';
+import { serviceUrl, repoID } from '../../utils/constants';
+import DetailListView from './detail-list-view';
+import Repo from '../../models/repo';
+import '../../css/dirent-detail.css';
+
+const propTypes = {
+  dirent: PropTypes.object.isRequired,
+  direntPath: PropTypes.string.isRequired,
+  onItemDetailsClose: PropTypes.func.isRequired,
+};
+
+class DirentDetail extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      direntType: '',
+      direntDetail: '',
+      repo: null,
+    };
+  }
+
+  componentDidMount() {
+    let { dirent, direntPath } = this.props;
+    seafileAPI.getRepoInfo(repoID).then(res => {
+      let repo = new Repo(res.data);
+      this.setState({repo: repo});
+      this.updateDetailView(dirent, direntPath);
+    });
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.updateDetailView(nextProps.dirent, nextProps.direntPath);
+  }
+
+  updateDetailView = (dirent, direntPath) => {
+    if (dirent.type === 'file') {
+      seafileAPI.getFileInfo(repoID, direntPath).then(res => {
+        this.setState({
+          direntType: 'file',
+          direntDetail: res.data,
+        });
+      });
+    } else {
+      seafileAPI.getDirInfo(repoID, direntPath).then(res => {
+        this.setState({
+          direntType: 'dir',
+          direntDetail: res.data
+        });
+      });
+    }
+  }
+
+  render() {
+    let { dirent } = this.props;
+    return (
+      <div className="detail-container">
+        <div className="detail-header">
+          <div className="detail-control sf2-icon-x1" onClick={this.props.onItemDetailsClose}></div>
+          <div className="detail-title dirent-title">
+            <img src={dirent.type === 'dir' ? serviceUrl + '/media/img/folder-192.png' : serviceUrl + '/media/img/file/192/txt.png'} alt="icon"></img>
+            <span className="name">{dirent.name}</span>
+          </div>
+        </div>
+        <div className="detail-body dirent-info">
+          <div className="img">
+            <img src={dirent.type === 'dir' ? serviceUrl + '/media/img/folder-192.png' : serviceUrl + '/media/img/file/192/txt.png'} alt="icon"></img>
+          </div>
+          {this.state.direntDetail && 
+            <DetailListView 
+              repo={this.state.repo}
+              direntPath={this.props.direntPath}
+              direntType={this.state.direntType}
+              direntDetail={this.state.direntDetail} 
+            />
+          }
+        </div>
+      </div>
+    );
+  }
+}
+
+DirentDetail.propTypes = propTypes;
+
+export default DirentDetail;

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

@@ -1,17 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { serviceUrl, gettext } from '../../utils/constants';
-import OperationGroup from '../dirent-operation/operation-group';
+import { serviceUrl, gettext, repoID } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import URLDecorator from '../../utils/url-decorator';
+import Toast from '../toast';
+import DirentMenu from './dirent-menu';
+import DirentRename from './dirent-rename';
 
 const propTypes = {
+  filePath: PropTypes.string.isRequired,
   isItemFreezed: PropTypes.bool.isRequired,
   dirent: PropTypes.object.isRequired,
   onItemClick: PropTypes.func.isRequired,
-  onItemMenuShow: PropTypes.func.isRequired,
-  onItemMenuHide: PropTypes.func.isRequired,
+  onFreezedItem: PropTypes.func.isRequired,
+  onUnfreezedItem: PropTypes.func.isRequired,
+  onRenameMenuItemClick: PropTypes.func.isRequired,
   onItemDelete: PropTypes.func.isRequired,
-  onItemStarred: PropTypes.func.isRequired,
+  onItemRename: PropTypes.func.isRequired,
   onItemDownload: PropTypes.func.isRequired,
+  onDirentItemMove: PropTypes.func.isRequired,
+  onDirentItemCopy: PropTypes.func.isRequired,
+  onItemDetails: PropTypes.func.isRequired,
+  updateViewList: PropTypes.func.isRequired,
 };
 
 class DirentListItem extends React.Component {
@@ -20,10 +30,20 @@ class DirentListItem extends React.Component {
     super(props);
     this.state = {
       isOperationShow: false,
-      highlight: false
+      highlight: false,
+      isItemMenuShow: false,
+      menuPosition: {top: 0, left: 0 },
     };
   }
 
+  componentDidMount() {
+    document.addEventListener('click', this.onItemMenuHide);
+  }
+  
+  componentWillUnmount() {
+    document.removeEventListener('click', this.onItemMenuHide);
+  }
+
   //UI Interactive
   onMouseEnter = () => {
     if (!this.props.isItemFreezed) {
@@ -52,38 +72,234 @@ class DirentListItem extends React.Component {
     }
   }
 
-  onItemMenuShow = () => {
-    this.props.onItemMenuShow();
+  onItemMenuToggle = (e) => {
+    e.stopPropagation();
+    e.nativeEvent.stopImmediatePropagation();
+
+    if (!this.state.isItemMenuShow) {
+      this.onItemMenuShow(e);
+    } else {
+      this.onItemMenuHide();
+    }
+  }
+
+  onItemMenuShow = (e) => {
+    let left = e.clientX - 8*16;
+    let top  = e.clientY + 15;
+    let position = Object.assign({},this.state.menuPosition, {left: left, top: top});
+    this.setState({
+      menuPosition: position,
+      isItemMenuShow: true,
+    });
+    this.props.onFreezedItem();
   }
 
   onItemMenuHide = () => {
     this.setState({
       isOperationShow: false,
-      highlight: ''
+      highlight: '',
+      isItemMenuShow: false,
+      isRenameing: false,
     });
-    this.props.onItemMenuHide();
+    this.props.onUnfreezedItem();
   }
 
   //buiness handler
   onItemSelected = () => {
     //todos;
   }
-
+  
   onItemStarred = () => {
-    this.props.onItemStarred(this.props.dirent);
+    let dirent = this.props.dirent;
+    let filePath = this.getDirentPath(dirent);
+    if (dirent.starred) {
+      seafileAPI.unStarFile(repoID, filePath).then(() => {
+        this.props.updateViewList(this.props.filePath);
+      });
+    } else {
+      seafileAPI.starFile(repoID, filePath).then(() => {
+        this.props.updateViewList(this.props.filePath);
+      });
+    }
   }
-
+  
   onItemClick = () => {
-    this.props.onItemClick(this.props.dirent);
+    let direntPath = this.getDirentPath(this.props.dirent);
+    this.props.onItemClick(direntPath);
   }
 
-
-  onItemDownload = () => {
-    this.props.onItemDownload(this.props.dirent);
+  onItemDownload = (e) => {
+    e.nativeEvent.stopImmediatePropagation();
+    let direntPath = this.getDirentPath(this.props.dirent);
+    this.props.onItemDownload(this.props.dirent, direntPath);
   }
 
-  onItemDelete = () => {
-    this.props.onItemDelete(this.props.dirent);
+  onItemDelete = (e) => {
+    e.nativeEvent.stopImmediatePropagation(); //for document event
+    let direntPath = this.getDirentPath(this.props.dirent);
+    this.props.onItemDelete(direntPath);
+  }
+
+  onItemMenuItemClick = (operation) => {
+    switch(operation) {
+    case 'Rename': 
+      this.onRenameMenuItemClick();
+      break;
+    case 'Move':
+      this.onDirentItemMove();
+      break;
+    case 'Copy':
+      this.onDirentItemCopy();
+      break;
+    case 'Permission':
+      this.onPermissionItem();
+      break;
+    case 'Details':
+      this.onDetailsItem();
+      break;
+    case 'Unlock':
+      this.onUnlockItem();
+      break;
+    case 'Lock':
+      this.onLockItem();
+      break;
+    case 'New Draft':
+      this.onNewDraft();
+      break;
+    case 'Comment':
+      this.onComnentItem();
+      break;
+    case 'History':
+      this.onHistory();
+      break;
+    case 'Access Log':
+      this.onAccessLog();
+      break;
+    case 'Open via Client':
+      this.onOpenViaClient();
+      break;
+    default:
+      break;
+    }
+  }
+
+  onRenameMenuItemClick = () => {
+    this.setState({
+      isOperationShow: false,
+      isItemMenuShow: false,
+      isRenameing: true,
+    });
+    this.props.onRenameMenuItemClick(this.props.dirent);
+  }
+
+  onRenameConfirm = (newName) => {
+    if (newName === this.props.dirent.name) {
+      this.onRenameCancel();
+      return false;
+    }
+    
+    if (!newName) {
+      let errMessage = 'It is required.';
+      Toast.error(gettext(errMessage));
+      return false;
+    }
+    
+    if (newName.indexOf('/') > -1) {
+      let errMessage = 'Name should not include "/".';
+      Toast.error(gettext(errMessage));
+      return false;
+    }
+
+    let direntPath = this.getDirentPath(this.props.dirent);
+    this.props.onItemRename(direntPath, newName);
+    this.onRenameCancel();
+  }
+
+  onRenameCancel = () => {
+    this.setState({
+      isRenameing: false,
+    });
+    this.props.onUnfreezedItem();
+  }
+  
+  onDirentItemMove = () => {
+    let direntPath = this.getDirentPath(this.props.dirent);
+    this.props.onDirentItemMove(this.props.dirent, direntPath);
+    this.onItemMenuHide();
+  }
+
+  onDirentItemCopy = () => {
+    let direntPath = this.getDirentPath(this.props.dirent);
+    this.props.onDirentItemCopy(this.props.dirent, direntPath);
+    this.onItemMenuHide();
+  }
+
+  onPermissionItem = () => {
+
+  }
+
+  onDetailsItem = () => {
+    let direntPath = this.getDirentPath(this.props.dirent);
+    this.props.onItemDetails(this.props.dirent, direntPath);
+    this.onItemMenuHide();
+  }
+
+  onLockItem = () => {
+    let filePath = this.getDirentPath(this.props.dirent);
+    seafileAPI.lockfile(repoID, filePath).then(() => {
+      this.props.updateViewList(this.props.filePath);
+    });
+    this.onItemMenuHide();
+  }
+
+  onUnlockItem = () => {
+    let filePath = this.getDirentPath(this.props.dirent);
+    seafileAPI.unlockfile(repoID, filePath).then(() => {
+      this.props.updateViewList(this.props.filePath);
+    });
+    this.onItemMenuHide();
+  }
+
+  onNewDraft = () => {
+    let filePath = this.getDirentPath(this.props.dirent);
+    seafileAPI.createDraft(repoID,filePath).then(res => {
+      let draft_file_Path = res.data.draft_file_path;
+      let draftId = res.data.id;
+      let url = URLDecorator.getUrl({type: 'draft_view', repoID: repoID, filePath: draft_file_Path, draftId: draftId});
+      let newWindow = window.open('draft');
+      newWindow.location.href = url;
+    }).catch(() => {
+      Toast.error('Create draft failed.');
+    });
+    this.onItemMenuHide();
+  }
+
+  onComnentItem = () => {
+
+  }
+
+  onHistory = () => {
+    let filePath = this.getDirentPath(this.props.dirent);
+    let referer = location.href;
+    let url = URLDecorator.getUrl({type: 'file_revisions', repoID: repoID, filePath: filePath, referer: referer});
+    location.href = url;
+    this.onItemMenuHide();
+  }
+
+  onAccessLog = () => {
+
+  }
+
+  onOpenViaClient = () => {
+    let filePath = this.getDirentPath(this.props.dirent);
+    let url = URLDecorator.getUrl({type: 'open_via_client', repoID: repoID, filePath: filePath});
+    location.href = url;
+    this.onItemMenuHide();
+  }
+
+  getDirentPath = (dirent) => {
+    let path = this.props.filePath;
+    return path === '/' ? path + dirent.name : path + '/' + dirent.name;
   }
 
   render() {
@@ -98,19 +314,44 @@ class DirentListItem extends React.Component {
           {dirent.starred !== undefined && dirent.starred && <i className="fas fa-star"></i>}
         </td>
         <td className="icon">
-          <img src={dirent.type === 'dir' ? serviceUrl + '/media/img/folder-192.png' : serviceUrl + '/media/img/file/192/txt.png'} alt={gettext('file icon')}></img>
+          <div className="dir-icon">
+            <img src={dirent.type === 'dir' ? serviceUrl + '/media/img/folder-192.png' : serviceUrl + '/media/img/file/192/txt.png'} alt={gettext('file icon')}></img>
+            {dirent.is_locked && <img className="locked" src={serviceUrl + '/media/img/file-locked-32.png'} alt={gettext('locked')}></img>}
+          </div>
+        </td>
+        <td className="name a-simulate">
+          {this.state.isRenameing ?
+            <DirentRename dirent={dirent} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel}/> :
+            <span onClick={this.onItemClick}>{dirent.name}</span>
+          }
         </td>
-        <td className="name a-simulate" onClick={this.onItemClick}>{dirent.name}</td>
         <td className="operation">
           {
             this.state.isOperationShow && 
-            <OperationGroup 
-              dirent={dirent} 
-              onItemMenuShow={this.onItemMenuShow}
-              onItemMenuHide={this.onItemMenuHide}
-              onDownload={this.onItemDownload}
-              onDelete={this.onItemDelete}
-            />
+            <div className="operations">
+              <ul className="operation-group">
+                <li className="operation-group-item">
+                  <i className="sf2-icon-download" title={gettext('Download')} onClick={this.onItemDownload}></i>
+                </li>
+                <li className="operation-group-item">
+                  <i className="sf2-icon-share" title={gettext('Share')} onClick={this.onItemShare}></i>
+                </li>
+                <li className="operation-group-item">
+                  <i className="sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemDelete}></i>
+                </li>
+                <li className="operation-group-item">
+                  <i className="sf2-icon-caret-down sf-dropdown-toggle" title={gettext('More Operation')} onClick={this.onItemMenuToggle}></i>
+                </li>
+              </ul>
+              {
+                this.state.isItemMenuShow && 
+                <DirentMenu 
+                  dirent={this.props.dirent}
+                  menuPosition={this.state.menuPosition}
+                  onMenuItemClick={this.onItemMenuItemClick}
+                />
+              }
+            </div>
           }
         </td>
         <td className="file-size">{dirent.size && dirent.size}</td>

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

@@ -3,16 +3,23 @@ import PropTypes from 'prop-types';
 import { gettext, repoID } from '../../utils/constants';
 import URLDecorator from '../../utils/url-decorator';
 import editorUtilities from '../../utils/editor-utilties';
-import { seafileAPI } from '../../utils/seafile-api';
+import Loading from '../loading';
 import DirentListItem from './dirent-list-item';
 import ZipDownloadDialog from '../dialog/zip-download-dialog';
+import MoveDirentDialog from '../dialog/move-dirent-dialog';
+import CopyDirentDialog from '../dialog/copy-dirent-dialog';
 
 const propTypes = {
   filePath: PropTypes.string.isRequired,
   direntList: PropTypes.array.isRequired,
   onItemDelete: PropTypes.func.isRequired,
+  onItemRename: PropTypes.func.isRequired,
   onItemClick: PropTypes.func.isRequired,
+  onItemMove: PropTypes.func.isRequired,
+  onItemCopy: PropTypes.func.isRequired,
+  onItemDetails: PropTypes.func.isRequired,
   updateViewList: PropTypes.func.isRequired,
+  isDirentListLoading: PropTypes.bool.isRequired,
 };
 
 class DirentListView extends React.Component {
@@ -20,54 +27,74 @@ class DirentListView extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      progress: 0,
       isItemFreezed: false,
       isProgressDialogShow: false,
-      progress: '0%',
+      isMoveDialogShow: false,
+      isCopyDialogShow: false,
+      currentDirent: false,
+      direntPath: '',
     };
   }
 
-  onItemMenuShow = () => {
+  onFreezedItem = () => {
     this.setState({isItemFreezed: true});
   }
   
-  onItemMenuHide = () => {
+  onUnfreezedItem = () => {
     this.setState({isItemFreezed: false});
   }
 
-  onItemClick = (dirent) => {
-    let direntPath = this.getDirentPath(dirent);
-    this.props.onItemClick(direntPath);
+  onRenameMenuItemClick = () => {
+    this.onFreezedItem();
   }
 
-  onItemDelete = (dirent) => {
-    let direntPath = this.getDirentPath(dirent);
-    this.props.onItemDelete(direntPath);
+  onDirentItemMove = (dirent, direntPath) => {
+    this.setState({
+      isMoveDialogShow: true,
+      currentDirent: dirent,
+      direntPath: direntPath
+    });
   }
 
-  onItemStarred = (dirent) => {
-    let filePath = this.getDirentPath(dirent);
-    if (dirent.starred) {
-      seafileAPI.unStarFile(repoID, filePath).then(() => {
-        this.props.updateViewList(this.props.filePath);
-      });
-    } else {
-      seafileAPI.starFile(repoID, filePath).then(() => {
-        this.props.updateViewList(this.props.filePath);
-      });
-    }
+  onDirentItemCopy = (dirent, direntPath) => {
+    this.setState({
+      isCopyDialogShow: true,
+      currentDirent: dirent,
+      direntPath: direntPath
+    });
   }
 
-  onItemDownload = (dirent) => {
+  onItemMove = (repo, direntPath, moveToDirentPath) => {
+    this.props.onItemMove(repo, direntPath, moveToDirentPath);
+  }
+  
+  onCancelMove = () => {
+    this.setState({isMoveDialogShow: false});
+  }
+  
+  onItemCopy = (repo, direntPath, copyToDirentPath) => {
+    this.props.onItemCopy(repo, direntPath, copyToDirentPath);
+  }
+  
+  onCancelCopy = () => {
+    this.setState({isCopyDialogShow: false});
+  }
+
+  onItemDetails = (dirent, direntPath) => {
+    this.props.onItemDetails(dirent, direntPath);
+  }
+
+  onItemDownload = (dirent, direntPath) => {
     if (dirent.type === 'dir') {
-      this.setState({isProgressDialogShow: true, progress: '0%'});
+      this.setState({isProgressDialogShow: true, progress: 0});
       editorUtilities.zipDownload(this.props.filePath, dirent.name).then(res => {
         this.zip_token = res.data['zip_token'];
         this.addDownloadAnimation();
         this.interval = setInterval(this.addDownloadAnimation, 1000);
       });
     } else {
-      let path = this.getDirentPath(dirent);
-      let url = URLDecorator.getUrl({type: 'download_file_url', repoID: repoID, filePath: path});
+      let url = URLDecorator.getUrl({type: 'download_file_url', repoID: repoID, filePath: direntPath});
       location.href = url;
     }
   }
@@ -77,12 +104,12 @@ class DirentListView extends React.Component {
     let token = this.zip_token;
     editorUtilities.queryZipProgress(token).then(res => {
       let data = res.data;
-      let progress = data.total === 0 ? '100%' : (data.zipped / data.total * 100).toFixed(0) + '%';
-      this.setState({progress: progress});
+      let progress = data.total === 0 ? 100 : (data.zipped / data.total * 100).toFixed(0);
+      this.setState({progress: parseInt(progress)});
 
       if (data['total'] === data['zipped']) {
         this.setState({
-          progress: '100%'
+          progress: 100
         });
         clearInterval(this.interval);
         location.href = URLDecorator.getUrl({type: 'download_dir_zip_url', token: token});
@@ -103,13 +130,13 @@ class DirentListView extends React.Component {
     });
   }
 
-  getDirentPath = (dirent) => {
-    let path = this.props.filePath;
-    return path === '/' ? path + dirent.name : path + '/' + dirent.name;
-  }
-
   render() {
     const { direntList } = this.props;
+
+    if (this.props.isDirentListLoading) {
+      return (<Loading />);
+    }
+
     return (
       <div className="table-container">
         <table>
@@ -131,22 +158,44 @@ class DirentListView extends React.Component {
                   <DirentListItem
                     key={index}
                     dirent={dirent}
+                    filePath={this.props.filePath}
+                    onItemClick={this.props.onItemClick}
+                    onRenameMenuItemClick={this.onRenameMenuItemClick}
+                    onItemDelete={this.props.onItemDelete}
+                    onItemRename={this.props.onItemRename}
+                    updateViewList={this.props.updateViewList}
                     isItemFreezed={this.state.isItemFreezed}
-                    onItemMenuShow={this.onItemMenuShow}
-                    onItemMenuHide={this.onItemMenuHide}
-                    onItemDelete={this.onItemDelete}
-                    onItemStarred={this.onItemStarred}
+                    onFreezedItem={this.onFreezedItem}
+                    onUnfreezedItem={this.onUnfreezedItem}
                     onItemDownload={this.onItemDownload}
-                    onItemClick={this.onItemClick}
+                    onDirentItemMove={this.onDirentItemMove}
+                    onDirentItemCopy={this.onDirentItemCopy}
+                    onItemDetails={this.onItemDetails}
                   />
                 );
               })
             }
           </tbody>
         </table>
-        {
-          this.state.isProgressDialogShow && 
-          <ZipDownloadDialog progress={this.state.progress} onCancelDownload={this.onCancelDownload}/>
+        {this.state.isProgressDialogShow && 
+          <ZipDownloadDialog progress={this.state.progress} onCancelDownload={this.onCancelDownload}
+          />
+        }
+        {this.state.isMoveDialogShow &&
+          <MoveDirentDialog 
+            dirent={this.state.currentDirent} 
+            direntPath={this.state.direntPath} 
+            onItemMove={this.props.onItemMove}
+            onCancelMove={this.onCancelMove}
+          />
+        }
+        {this.state.isCopyDialogShow &&
+          <CopyDirentDialog 
+            dirent={this.state.currentDirent} 
+            direntPath={this.state.direntPath} 
+            onItemCopy={this.props.onItemCopy}
+            onCancelCopy={this.onCancelCopy} 
+          />
         }
       </div>
     );

frontend/src/components/dirent-list-view/dirent-menu-item.js

@@ -0,0 +1,36 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../../utils/constants';
+
+const propTypes = {
+  item: PropTypes.string.isRequired,
+  onItemClick: PropTypes.func.isRequired,
+};
+
+class DirentMenuItem extends React.Component {
+
+  onClick = (e) => {
+    e.nativeEvent.stopImmediatePropagation();
+    let operation = e.target.dataset.type;
+    this.props.onItemClick(operation);
+  }
+
+  render() {
+    let operationName = gettext(this.props.item);
+    return (
+      <Fragment>
+        {
+          operationName !== 'Divider' ?
+            <li className="dropdown-item operation-menu-item" data-type={operationName} onClick={this.onClick}>
+              <span className="user-select-none" data-type={operationName} title={operationName} aria-label={operationName}>{operationName}</span>
+            </li> :
+            <li className="dropdown-divider"></li>
+        }
+      </Fragment>
+    );
+  }
+}
+
+DirentMenuItem.propTypes = propTypes;
+
+export default DirentMenuItem;

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

@@ -0,0 +1,127 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { seafileAPI } from '../../utils/seafile-api';
+import { repoID, isPro, enableFileComment, fileAuditEnabled, folderPermEnabled} from '../../utils/constants';
+import Repo from '../../models/repo';
+import DirentMenuItem from './dirent-menu-item';
+
+const propTypes = {
+  dirent: PropTypes.object.isRequired,
+  menuPosition: PropTypes.object.isRequired, 
+  onMenuItemClick: PropTypes.func.isRequired,
+};
+
+class DirentMenu extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      repo: null,
+      menuList: [],
+    };
+    this.is_repo_owner = false;
+  }
+
+  componentDidMount() {
+    seafileAPI.getRepoInfo(repoID).then(res => {
+      let repo = new Repo(res.data);
+      seafileAPI.getAccountInfo().then(res => {
+        let user_email = res.data.email;
+        this.is_repo_owner = repo.owner_email === user_email;
+        let menuList = this.calculateMenuList(repo);
+        this.setState({
+          repo: repo,
+          menuList: menuList
+        });
+      });
+    });
+  }
+
+  calculateMenuList(repoInfo) {
+    let dirent = this.props.dirent;
+    let type = dirent.type;
+    let permission = dirent.permission;
+    let can_set_folder_perm = folderPermEnabled  && ((this.is_repo_owner && repoInfo.has_been_shared_out) || repoInfo.is_admin);
+    if (type === 'dir' && permission === 'rw') {
+      let menuList = [];
+      if (can_set_folder_perm) {
+        menuList = ['Rename', 'Move', 'Copy', 'Divider', 'Permission', 'Details', 'Divider', 'Open via Client'];
+      } else {
+        menuList = ['Rename', 'Move', 'Copy', 'Divider', 'Details', 'Divider', 'Open via Client'];
+      }
+      return menuList;
+    }
+
+    if (type === 'dir' && permission === 'r') {
+      let menuList = repoInfo.encrypted ? ['Copy', 'Details'] : ['Details'];
+      return menuList;
+    }
+
+    if (type === 'file' && permission === 'rw') {
+      let menuList = [];
+      if (!dirent.is_locked || (dirent.is_locked && dirent.locked_by_me)) {
+        menuList.push('Rename');
+        menuList.push('Move');
+      }
+      menuList.push('Copy');
+      if (isPro) {
+        if (dirent.is_locked && dirent.locked_by_me) {
+          menuList.push('Unlock');
+        } else {
+          menuList.push('Lock');
+        }
+      }
+      menuList.push('New Draft');
+      menuList.push('Divider');
+      if (enableFileComment) {
+        menuList.push('Comment');
+      }
+      menuList.push('History');
+      if (fileAuditEnabled) {
+        menuList.push('Access Log');
+      }
+      menuList.push('Details');
+      menuList.push('Divider');
+      menuList.push('Open via Client');
+      return menuList;
+    }
+
+    if (type === 'file' && permission === 'r') {
+      let menuList = [];
+      if (!repoInfo.encrypted) {
+        menuList.push('Copy');
+      }
+      if (enableFileComment) {
+        menuList.push('Comment');
+      }
+      menuList.push('History');
+      menuList.push('Details');
+      return menuList;
+    }
+  }
+
+  onMenuItemClick = (operation) => {
+    this.props.onMenuItemClick(operation);
+  }
+
+  render() {
+    let position = this.props.menuPosition;
+    let style = {position: 'fixed', left: position.left, top: position.top, display: 'block'};
+    if (this.state.menuList.length) {
+      return (
+        <ul className="dropdown-menu operation-menu" style={style}>
+          {this.state.menuList.map((item, index) => {
+            return (
+              <DirentMenuItem key={index} item={item} onItemClick={this.onMenuItemClick}/>
+            );
+          })}
+        </ul>
+      );
+    }
+    return '';
+  }
+}
+
+DirentMenu.propTypes = propTypes;
+
+export default DirentMenu;

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  dirent: PropTypes.object.isRequired,
+  onRenameConfirm: PropTypes.func.isRequired,
+  onRenameCancel: PropTypes.func.isRequired,
+};
+class DirentRename extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: props.dirent.name
+    };
+  }
+
+  componentDidMount() {
+    this.refs.renameInput.focus();
+    if (this.props.dirent.type === 'file') {
+      var endIndex = this.props.dirent.name.lastIndexOf('.');
+      this.refs.renameInput.setSelectionRange(0, endIndex, 'forward');
+    } else {
+      this.refs.renameInput.setSelectionRange(0, -1);
+    }
+  }
+
+  onChange = (e) => {
+    this.setState({name: e.target.value});
+  }
+
+  onClick = (e) => {
+    e.nativeEvent.stopImmediatePropagation();
+  }
+
+  onKeyPress = (e) => {
+    if (e.key === 'Enter') {
+      this.onRenameConfirm(e);
+    }
+  }
+
+  onRenameConfirm = (e) => {
+    e.nativeEvent.stopImmediatePropagation();
+    this.props.onRenameConfirm(this.state.name);
+  }
+
+  onRenameCancel = (e) => {
+    e.nativeEvent.stopImmediatePropagation();
+    this.props.onRenameCancel();
+  }
+
+  render() {
+    return (
+      <div className="rename-container">
+        <input 
+          ref="renameInput" 
+          value={this.state.name} 
+          onChange={this.onChange} 
+          onKeyPress={this.onKeyPress} 
+          onClick={this.onClick} 
+        />
+        <button className="btn btn-secondary sf2-icon-confirm confirm" onClick={this.onRenameConfirm}></button>
+        <button className="btn btn-secondary sf2-icon-cancel cancel" onClick={this.onRenameCancel}></button>
+      </div>
+    );
+  }
+}
+
+DirentRename.propTypes = propTypes;
+
+export default DirentRename;

frontend/src/components/dirent-operation/operation-group.js

@@ -1,116 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { gettext } from '../../utils/constants';
-import OperationMenu from './operation-menu';
-
-const propTypes = {
-  dirent: PropTypes.object.isRequired,
-  onItemMenuShow: PropTypes.func.isRequired,
-  onItemMenuHide: PropTypes.func.isRequired,
-  onDelete: PropTypes.func.isRequired,
-  onDownload: PropTypes.func.isRequired,
-};
-
-class OperationGroup extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isItemMenuShow: false,
-      menuPosition: {top: 0, left: 0 },
-    };
-  }
-
-  componentDidMount() {
-    document.addEventListener('click', this.onItemMenuHide);
-  }
-  
-  componentWillUnmount() {
-    document.removeEventListener('click', this.onItemMenuHide);
-  }
-
-  onDownload = (e) => {
-    e.nativeEvent.stopImmediatePropagation();
-    this.props.onDownload();
-  }
-
-  onShare = (e) => {
-    //todos::
-  }
-
-  onDelete = (e) => {
-    e.nativeEvent.stopImmediatePropagation(); //for document event
-    this.props.onDelete();
-  }
-
-  onItemMenuToggle = (e) => {
-    e.stopPropagation();
-    e.nativeEvent.stopImmediatePropagation();
-
-    if (!this.state.isItemMenuShow) {
-      this.onItemMenuShow(e);
-    } else {
-      this.onItemMenuHide();
-    }
-  }
-
-  onItemMenuShow = (e) => {
-    let left = e.clientX - 8*16;
-    let top  = e.clientY + 15;
-    let position = Object.assign({},this.state.menuPosition, {left: left, top: top});
-    this.setState({
-      menuPosition: position,
-      isItemMenuShow: true,
-    });
-    this.props.onItemMenuShow();
-  }
-
-  onItemMenuHide = () => {
-    this.setState({
-      isItemMenuShow: false,
-    });
-    this.props.onItemMenuHide();
-  }
-
-  onRename = () => {
-    //todos:
-  }
-
-  onCopy = () => {
-    //todos
-  }
-
-  render() {
-    return (
-      <div className="operations">
-        <ul className="operation-group">
-          <li className="operation-group-item">
-            <i className="sf2-icon-download" title={gettext('Download')} onClick={this.onDownload}></i>
-          </li>
-          <li className="operation-group-item">
-            <i className="sf2-icon-share" title={gettext('Share')} onClick={this.onShare}></i>
-          </li>
-          <li className="operation-group-item">
-            <i className="sf2-icon-delete" title={gettext('Delete')} onClick={this.onDelete}></i>
-          </li>
-          <li className="operation-group-item">
-            <i className="sf2-icon-caret-down sf-dropdown-toggle" title={gettext('More Operation')} onClick={this.onItemMenuToggle}></i>
-          </li>
-        </ul>
-        {
-          this.state.isItemMenuShow && 
-          <OperationMenu 
-            dirent={this.props.dirent}
-            menuPosition={this.state.menuPosition}
-            onRename={this.onRename}
-            onCopy={this.onCopy}
-          />
-        }
-      </div>
-    );
-  }
-}
-
-OperationGroup.propTypes = propTypes;
-
-export default OperationGroup;

frontend/src/components/dirent-operation/operation-menu.js

@@ -1,173 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { gettext, repoID } from '../../utils/constants';
-import { seafileAPI } from '../../utils/seafile-api';
-import Repo from '../../models/repo';
-
-const propTypes = {
-  dirent: PropTypes.object.isRequired,
-  menuPosition: PropTypes.object.isRequired, 
-};
-
-class OperationMenu extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      repo: null,
-      is_repo_owner: false,
-    };
-  }
-
-  componentDidMount() {
-    seafileAPI.getRepoInfo(repoID).then(res => {
-      let repo = new Repo(res.data);
-      seafileAPI.getAccountInfo().then(res => {
-        let user_email = res.data.email;
-        let is_repo_owner = repo.owner_email === user_email;
-        this.setState({
-          repo: repo,
-          is_repo_owner: is_repo_owner
-        });
-      });
-    });
-  }
-
-  getItemType() {
-    let type = this.props.dirent.is_dir ? 'dir' : 'file';
-    return type;
-  }
-
-  renderDirentDirMenu() {
-    let position = this.props.menuPosition;
-    let style = {position: 'fixed', left: position.left, top: position.top, display: 'block'};
-    if (this.props.dirent.permission === 'rw') {
-      return (
-        <ul className="dropdown-menu operation-menu" style={style}>
-          <li className="dropdown-item operation-menu-item">
-            <span className="user-select-none" title={gettext('Rename')} aria-label={gettext('Rename')}>{gettext('Rename')}</span>
-          </li>
-          <li className="dropdown-item operation-menu-item">
-            <span className="user-select-none" title={gettext('Move')} aria-label={gettext('Move')}>{gettext('Move')}</span>
-          </li>
-          <li className="dropdown-item operation-menu-item">
-            <span className="user-select-none" title={gettext('Copy')} aria-label={gettext('Copy')}>{gettext('Copy')}</span>
-          </li>
-          <li className="dropdown-item menu-inner-divider"></li>
-
-          <li className="dropdown-item operation-menu-item">
-            <span className="user-select-none" title={gettext('Permission')} aria-label={gettext('Permission')}>{gettext('Permission')}</span>
-          </li>
-          <li className="dropdown-item operation-menu-item">
-            <span className="user-select-none" title={gettext('Details')} aria-label={gettext('Details')}>{gettext('Details')}</span>
-          </li>
-          <li className="dropdown-item menu-inner-divider"></li>
-          <li className="dropdown-item operation-menu-item">
-            <span className="user-select-none" title={gettext('Open via Client')} aria-label={gettext('Open via Client')}>{gettext('Open via Client')}</span>
-          </li>
-        </ul>
-      );
-    }
-
-    if (this.props.dirent.permission === 'r') {
-      return (
-        <ul className="dropdown-menu operation-menu" style={style}>
-          <li className="dropdown-item operation-menu-item">
-            <span className="user-select-none" title={gettext('Copy')} aria-label={gettext('Copy')}>{gettext('Copy')}</span>
-          </li>
-          <li className="dropdown-item operation-menu-item">
-            <span className="user-select-none" title={gettext('Details')} aria-label={gettext('Details')}>{gettext('Details')}</span>
-          </li>
-        </ul>
-      );
-    }
-
-  }
-
-  renderDirentFileMenu() {
-    let position = this.props.menuPosition;
-    let style = {position: 'fixed', left: position.left, top: position.top, display: 'block'};
-    if (this.props.dirent.permission === 'rw') {
-      return (
-        <ul className="dropdown-menu operation-menu" style={style}>
-          <li className="dropdown-item operation-menu-item">
-            <span className="user-select-none" title={gettext('Rename')} aria-label={gettext('Rename')}>{gettext('Rename')}</span>
-          </li>
-          <li className="dropdown-item operation-menu-item">
-            <span className="user-select-none" title={gettext('Move')} aria-label={gettext('Move')}>{gettext('Move')}</span>
-          </li>
-          <li className="dropdown-item operation-menu-item">
-            <span className="user-select-none" title={gettext('Copy')} aria-label={gettext('Copy')}>{gettext('Copy')}</span>
-          </li>
-          <li className="dropdown-item operation-menu-item">
-            <span className="user-select-none" title={gettext('Lock')} aria-label={gettext('Lock')}>{gettext('Lock')}</span>
-          </li>
-          <li className="dropdown-item operation-menu-item">
-            <span className="user-select-none" title={gettext('Unlock')} aria-label={gettext('Unlock')}>{gettext('Unlock')}</span>
-          </li>
-          <li className="dropdown-item operation-menu-item">
-            <span className="user-select-none" title={gettext('New Draft')} aria-label={gettext('New Draft')}>{gettext('New Draft')}</span>
-          </li>
-          <li className="dropdown-item menu-inner-divider"></li>
-          <li className="dropdown-item operation-menu-item">
-            <span className="user-select-none" title={gettext('Comment')} aria-label={gettext('Comment')}>{gettext('Comment')}</span>
-          </li>
-          <li className="dropdown-item operation-menu-item">
-            <span className="" title={gettext('History')} aria-label={gettext('History')}>{gettext('History')}</span>
-          </li>
-          <li className="dropdown-item operation-menu-item">
-            <span className="user-select-none" title={gettext('Access Log')} aria-label={gettext('Access Log')}>{gettext('Access Log')}</span>
-          </li>
-          <li className="dropdown-item operation-menu-item">
-            <span className="user-select-none" title={gettext('Details')} aria-label={gettext('Details')}>{gettext('Details')}</span>
-          </li>
-          <li className="dropdown-item menu-inner-divider"></li>
-
-          <li className="dropdown-item operation-menu-item">
-            <span className="user-select-none" title={gettext('Open via Client')} aria-label={gettext('Open via Client')}>{gettext('Open via Client')}</span>
-          </li>
-        </ul>
-      );
-    }
-
-    if (this.props.dirent.permission === 'r') {
-      return (
-        <ul className="dropdown-menu operation-menu" style={style}>
-          <li className="dropdown-item operation-menu-item">
-            <span className="user-select-none" title={gettext('Copy')} aria-label={gettext('Copy')}>{gettext('Copy')}</span>
-          </li>
-          <li className="dropdown-item operation-menu-item">
-            <span className="user-select-none" title={gettext('Comment')} aria-label={gettext('Comment')}>{gettext('Comment')}</span>
-          </li>
-          <li className="dropdown-item operation-menu-item">
-            <span className="user-select-none" title={gettext('History')} aria-label={gettext('History')}>{gettext('History')}</span>
-          </li>
-          <li className="dropdown-item operation-menu-item">
-            <span className="user-select-none" title={gettext('Details')} aria-label={gettext('Details')}>{gettext('Details')}</span>
-          </li>
-        </ul>
-      );
-    }
-
-  }
-
-  render() {
-    let type = this.getItemType();
-    let menu = null;
-    switch(type) {
-    case 'file':
-      menu = this.renderDirentFileMenu();
-      break;
-    case 'dir':
-      menu = this.renderDirentDirMenu();
-      break;
-    default:
-      break;
-    }
-    return menu;
-  }
-}
-
-OperationMenu.propTypes = propTypes;
-
-export default OperationMenu;

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

@@ -0,0 +1,100 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { seafileAPI } from '../../utils/seafile-api';
+import Dirent from '../../models/dirent';
+
+const propTypes = {
+  filePath: PropTypes.string,
+  selectedPath: PropTypes.string,
+  dirent: PropTypes.object.isRequired,
+  repo: PropTypes.object.isRequired,
+  onDirentItemClick: PropTypes.func.isRequired,
+};
+
+class DirentListItem extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    let filePath = this.props.filePath ?  this.props.filePath +  '/' + this.props.dirent.name : '/' + this.props.dirent.name;
+    
+    this.state = {
+      isShowChildren: false,
+      hasRequest: false,
+      hasChildren: true,
+      filePath: filePath,
+      direntList: [],
+    };
+  }
+
+  onItemClick = () => {
+    this.props.onDirentItemClick(this.state.filePath);
+  }
+
+  onToggleClick = () => {
+    if (!this.state.hasRequest) {
+      seafileAPI.listDir(this.props.repo.repo_id, this.state.filePath).then(res => {
+        let direntList = [];
+        res.data.forEach(item => {
+          if (item.type === 'dir') {
+            let dirent = new Dirent(item);
+            direntList.push(dirent);
+          }
+          this.setState({
+            hasRequest: true,
+            direntList: direntList,
+          });
+        });
+        if (res.data.length === 0 || direntList.length === 0) {
+          this.setState({
+            hasRequest: true,
+            direntList: [],
+            hasChildren: false
+          });
+        }
+      });
+    }
+    
+    this.setState({isShowChildren: !this.state.isShowChildren});
+  }
+
+  renderChildren = () => {
+    return (
+      <ul className="list-view-content">
+        {this.state.direntList.map((dirent, index) => {
+          return (
+            <DirentListItem 
+              key={index} 
+              dirent={dirent}
+              repo={this.props.repo}
+              filePath={this.state.filePath}
+              onItemClick={this.onItemClick}
+              selectedPath={this.props.selectedPath}
+              onDirentItemClick={this.props.onDirentItemClick}
+            />
+          );
+        })}
+      </ul>
+    );
+  }
+
+  render() {
+    return (
+      <li className="file-chooser-item">
+        {
+          this.state.hasChildren &&
+          <span className={`item-toggle fa ${this.state.isShowChildren ? 'fa-caret-down' : 'fa-caret-right'}`} onClick={this.onToggleClick}></span>
+        }
+        <span className={`item-info ${this.state.filePath === this.props.selectedPath ? 'item-active' : ''}`} onClick={this.onItemClick}>
+          <span className="icon far fa-folder"></span>
+          <span className="name">{this.props.dirent && this.props.dirent.name}</span>
+        </span>
+        {this.state.isShowChildren && this.renderChildren()}
+      </li>
+    );
+  }
+}
+
+DirentListItem.propTypes = propTypes;
+
+export default DirentListItem;

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { seafileAPI } from '../../utils/seafile-api';
+import Dirent from '../../models/dirent';
+import DirentListItem from './dirent-list-item';
+
+const propTypes = {
+  selectedPath: PropTypes.string,
+  repo: PropTypes.object.isRequired,
+  isShowChildren: PropTypes.bool.isRequired,
+  onDirentItemClick: PropTypes.func.isRequired
+};
+
+class DirentListView extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      direntList: [],
+    };
+  }
+
+  componentDidMount() {
+    let repo = this.props.repo;
+    seafileAPI.listDir(repo.repo_id, '/').then(res => {
+      let direntList = [];
+      res.data.forEach(item => {
+        if (item.type === 'dir') {
+          let dirent = new Dirent(item);
+          direntList.push(dirent);
+        }
+        this.setState({
+          direntList: direntList,
+        });
+      });
+    });
+  }
+
+  render() {
+    let { direntList } = this.state;
+    return (
+      <ul className={`list-view-content ${this.props.isShowChildren ? '' : 'hide'}`}>
+        { direntList.map((dirent, index) => {
+          return (
+            <DirentListItem 
+              key={index} 
+              repo={this.props.repo} 
+              dirent={dirent}
+              onDirentItemClick={this.props.onDirentItemClick}
+              selectedPath={this.props.selectedPath}
+            />
+          );
+        })}
+      </ul>
+    );
+  }
+}
+
+DirentListView.propTypes = propTypes;
+
+export default DirentListView;

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

@@ -0,0 +1,125 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import RepoListView from './repo-list-view';
+import { seafileAPI } from '../../utils/seafile-api';
+import { gettext, repoID } from '../../utils/constants';
+import Repo from '../../models/repo';
+
+import '../../css/file-chooser.css';
+
+const propTypes = {
+  onDirentItemClick: PropTypes.func,
+  onRepoItemClick: PropTypes.func,
+};
+
+class FileChooser extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasRequest: false,
+      isOtherRepoShow: false,
+      repoList: [],
+      currentRepo: null,
+      selectedRepo: null,
+      selectedPath: '',
+    };
+  }
+
+  componentDidMount() {
+    seafileAPI.getRepoInfo(repoID).then(res => {
+      let repo = new Repo(res.data);
+      this.setState({
+        currentRepo: repo,
+      });
+    });
+  }
+
+  onOtherRepoToggle = () => {
+    if (!this.state.hasRequest) {
+      let { currentRepo } = this.state;
+      seafileAPI.listRepos().then(res => {
+        let repos = res.data.repos;
+        let repoList = [];
+        let repoIdList = [];
+        for(let i = 0; i < repos.length; i++) {
+          if (repos[i].repo_name === currentRepo.repo_name || repos[i].permission !== 'rw') {
+            continue;
+          }
+          if (repoIdList.indexOf(repos[i].repo_id) > -1) {
+            continue;
+          }
+          repoList.push(repos[i]);
+          repoIdList.push(repos[i].repo_id);
+        }
+        this.setState({
+          repoList: repoList,
+          isOtherRepoShow: !this.state.isOtherRepoShow,
+        });
+      });
+    } else {
+      this.setState({isOtherRepoShow: !this.state.isOtherRepoShow});
+    }
+  }
+
+  onDirentItemClick = (repo, filePath) => {
+    this.props.onDirentItemClick(repo, filePath);
+    this.setState({
+      selectedRepo: repo,
+      selectedPath: filePath
+    });
+  }
+
+  onRepoItemClick = (repo) => {
+    this.props.onRepoItemClick(repo);
+    this.setState({
+      selectedRepo: repo,
+      selectedPath: '',
+    });
+  }
+
+  render() {
+    return (
+      <div className="file-chooser-container">
+        <div className="list-view">
+          <div className="list-view-header">
+            <span className="item-toggle fa fa-caret-down"></span>
+            <span className="library">{gettext('Current Library')}</span>
+          </div>
+          {
+            this.state.currentRepo &&
+            <RepoListView 
+              initToShowChildren={true}
+              repo={this.state.currentRepo}
+              selectedRepo={this.state.selectedRepo}
+              selectedPath={this.state.selectedPath}
+              onRepoItemClick={this.onRepoItemClick} 
+              onDirentItemClick={this.onDirentItemClick}
+            />
+          }
+        </div>
+        <div className="list-view">
+          <div className="list-view-header">
+            <span className={`item-toggle fa ${this.state.isOtherRepoShow ? 'fa-caret-down' : 'fa-caret-right'}`} onClick={this.onOtherRepoToggle}></span>
+            <span className="library">{gettext('Other Libraries')}</span>
+          </div>
+          {
+            this.state.isOtherRepoShow && 
+            <RepoListView 
+              initToShowChildren={false}
+              repoList={this.state.repoList}
+              selectedRepo={this.state.selectedRepo}
+              selectedPath={this.state.selectedPath}
+              onRepoItemClick={this.onRepoItemClick} 
+              onDirentItemClick={this.onDirentItemClick}
+            /> 
+          }
+        </div>
+      </div>
+    );
+  }
+}
+
+FileChooser.propTypes = propTypes;
+
+export default FileChooser;

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import DirentListView from './dirent-list-view';
+
+const propTypes = {
+  selectedPath: PropTypes.string,
+  selectedRepo: PropTypes.object,
+  repo: PropTypes.object.isRequired,
+  initToShowChildren: PropTypes.bool.isRequired,
+  onDirentItemClick: PropTypes.func.isRequired,
+  onRepoItemClick: PropTypes.func.isRequired,
+};
+
+class RepoListItem extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isShowChildren: this.props.initToShowChildren,
+    };
+  }
+
+  onToggleClick = () => {
+    this.setState({isShowChildren: !this.state.isShowChildren});
+  }
+
+  onDirentItemClick = (filePath) => {
+    let repo = this.props.repo;
+    this.props.onDirentItemClick(repo, filePath);
+  }
+
+  onRepoItemClick = () => {
+    this.props.onRepoItemClick(this.props.repo);
+  }
+
+  render() {
+    let repoActive = false;
+    let isCurrentRepo = this.props.selectedRepo && (this.props.repo.repo_id === this.props.selectedRepo.repo_id);
+    if (isCurrentRepo && !this.props.selectedPath) {
+      repoActive = true;
+    }
+    return (
+      <li className="file-chooser-item">
+        <span className={`item-toggle fa ${this.state.isShowChildren ? 'fa-caret-down' : 'fa-caret-right'}`} onClick={this.onToggleClick}></span>
+        <span className={`item-info ${repoActive ? 'item-active' : ''}`} onClick={this.onRepoItemClick}>
+          <span className="icon far fa-folder"></span>
+          <span className="name">{this.props.repo.repo_name}</span>
+        </span>
+        {
+          <DirentListView 
+            repo={this.props.repo} 
+            isShowChildren={this.state.isShowChildren} 
+            onDirentItemClick={this.onDirentItemClick}
+            selectedPath={this.props.selectedPath}
+          />
+        }
+      </li>
+    );
+  }
+}
+
+RepoListItem.propTypes = propTypes;
+
+export default RepoListItem;

frontend/src/components/file-chooser/repo-list-view.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import RepoListItem from './repo-list-item';
+
+const propTypes = {
+  repo: PropTypes.object,
+  repoList: PropTypes.array,
+  selectedRepo: PropTypes.object,
+  initToShowChildren: PropTypes.bool.isRequired,
+  selectedPath: PropTypes.string,
+  onDirentItemClick: PropTypes.func.isRequired,
+  onRepoItemClick: PropTypes.func.isRequired,
+};
+
+class RepoListView extends React.Component {
+
+  render() {
+    let { repo, repoList } = this.props;
+    if (repo) {
+      repoList = [];
+      repoList.push(repo);
+    }
+    return (
+      <ul className="list-view-content file-chooser-item">
+        {repoList.length > 0 && repoList.map((repoItem, index) => {
+          return (
+            <RepoListItem 
+              key={index} 
+              repo={repoItem}
+              initToShowChildren={this.props.initToShowChildren}
+              selectedRepo={this.props.selectedRepo}
+              selectedPath={this.props.selectedPath}
+              onRepoItemClick={this.props.onRepoItemClick} 
+              onDirentItemClick={this.props.onDirentItemClick}
+            />
+          );
+        })}
+      </ul>
+    );
+  }
+}
+
+RepoListView.propTypes = propTypes;
+
+export default RepoListView;

frontend/src/components/main-side-nav.js

@@ -152,7 +152,7 @@ class MainSideNav extends React.Component {
           <h3 className="sf-heading">Tools</h3>
           <ul className="side-tabnav-tabs">
             <li className={`tab ${this.state.currentTab === 'starred' ? 'tab-cur' : ''}`}>
-              <Link to={siteRoot + 'starred/'} title={gettext('Favorites')} onClick={() => this.tabItemClick('favorites')}>
+              <Link to={siteRoot + 'starred/'} title={gettext('Favorites')} onClick={() => this.tabItemClick('starred')}>
                 <span className="sf2-icon-star" aria-hidden="true"></span>
                 {gettext('Favorites')}
               </Link>

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

@@ -1,17 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { serviceUrl } from '../../utils/constants';
-import OperationGroup from '../dirent-operation/operation-group';
 
 const propTypes = {
-  isItemFreezed: PropTypes.bool.isRequired,
   node: PropTypes.object.isRequired,
-  needOperationGroup: PropTypes.bool.isRequired,
-  onItemMenuHide: PropTypes.func.isRequired,
-  onItemMenuShow: PropTypes.func.isRequired,
   onMainNodeClick: PropTypes.func.isRequired,
-  onDelete: PropTypes.func.isRequired,
-  onDownload: PropTypes.func.isRequired,
 };
 
 class TreeDirList extends React.Component {
@@ -25,79 +18,26 @@ class TreeDirList extends React.Component {
   }
 
   onMouseEnter = () => {
-    if (!this.props.isItemFreezed) {
-      this.setState({
-        highlight: true,
-        isOperationShow: true,
-      });
-    }
+    this.setState({highlight: true});
   }
 
-  onMouseOver = () => {
-    if (!this.props.isItemFreezed) {
-      this.setState({
-        highlight: true,
-        isOperationShow: true,
-      });
-    }
-  }
 
   onMouseLeave = () => {
-    if (!this.props.isItemFreezed) {
-      this.setState({
-        highlight: false,
-        isOperationShow: false
-      });
-    }
-  }
-
-  onItemMenuShow = () => {
-    this.props.onItemMenuShow();
-  }
-
-  onItemMenuHide = () => {
-    this.setState({
-      isOperationShow: false,
-      highlight: ''
-    });
-    this.props.onItemMenuHide();
+    this.setState({highlight: false});
   }
 
   onMainNodeClick = () => {
     this.props.onMainNodeClick(this.props.node);
   }
 
-  onDownload = () => {
-    this.props.onDownload(this.props.node);
-  }
-
-  onDelete = () => {
-    this.props.onDelete(this.props.node);
-  }
-
   render() {
     let node = this.props.node;
     return (
-      <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onMouseOver={this.onMouseOver}>
+      <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
         <td className="icon">
           <img src={node.type === 'dir' ? serviceUrl + '/media/img/folder-192.png' : serviceUrl + '/media/img/file/192/txt.png'} alt='icon'></img>
         </td>
         <td className="name a-simulate" onClick={this.onMainNodeClick}>{node.name}</td>
-        {
-          this.props.needOperationGroup &&
-          <td>
-            {
-              this.state.isOperationShow && 
-              <OperationGroup 
-                item={node} 
-                onItemMenuShow={this.onItemMenuShow}
-                onItemMenuHide={this.onItemMenuHide}
-                onDownload={this.onDownload}
-                onDelete={this.onDelete}
-              />
-            }
-          </td>
-        }
         <td>{node.size}</td>
         <td title={node.last_update_time}>{node.last_update_time}</td>
       </tr>

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

@@ -1,88 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { gettext, repoID } from '../../utils/constants';
-import editorUtilities from '../../utils/editor-utilties';
-import URLDecorator from '../../utils/url-decorator';
-import ZipDownloadDialog from '../dialog/zip-download-dialog';
+import { gettext } from '../../utils/constants';
 import TreeDirList from './tree-dir-list';
 
 const propTypes = {
-  needOperationGroup: PropTypes.bool.isRequired,
   node: PropTypes.object.isRequired,
   onMainNodeClick: PropTypes.func.isRequired,
-  onDeleteItem: PropTypes.func.isRequired,
 };
 
 class TreeDirView extends React.Component {
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      isProgressDialogShow: false,
-      progress: '0%',
-      isItemFreezed: false
-    };
-    this.zip_token = null;
-    this.interval = null;
-  }
-
-  onDownload = (item) => {
-    if (item.isDir()) {
-      this.setState({isProgressDialogShow: true, progress: '0%'});
-      editorUtilities.zipDownload(item.parent_path, item.name).then(res => {
-        this.zip_token = res.data['zip_token'];
-        this.addDownloadAnimation();
-        this.interval = setInterval(this.addDownloadAnimation, 1000);
-      });
-    } else {
-      let url = URLDecorator.getUrl({type:'download_file_url', repoID: repoID, filePath: item.path});
-      location.href = url;
-    }
-  }
-
-  addDownloadAnimation = () => {
-    let _this = this;
-    let token = this.zip_token;
-    editorUtilities.queryZipProgress(token).then(res => {
-      let data = res.data;
-      let progress = data.total === 0 ? '100%' : (data.zipped / data.total * 100).toFixed(0) + '%';
-      this.setState({progress: progress});
-
-      if (data['total'] === data['zipped']) {
-        this.setState({
-          progress: '100%'
-        });
-        clearInterval(this.interval);
-        location.href = URLDecorator.getUrl({type: 'download_dir_zip_url', token: token});
-        setTimeout(function() {
-          _this.setState({isProgressDialogShow: false});
-        }, 500);
-      }
-
-    });
-  }
-
-  onCancelDownload = () => {
-    let zip_token = this.zip_token;
-    editorUtilities.cancelZipTask(zip_token).then(res => {
-      this.setState({
-        isProgressDialogShow: false,
-      });
-    });
-  }
-
-  onItemMenuShow = () => {
-    this.setState({
-      isItemFreezed: true,
-    });
-  }
-
-  onItemMenuHide = () => {
-    this.setState({
-      isItemFreezed: false,
-    });
-  }
-
   render() {
     let node = this.props.node;
     let children = node.hasChildren() ? node.children : null;
@@ -91,45 +18,21 @@ class TreeDirView extends React.Component {
       <div className="table-container">
         <table>
           <thead>
-            {this.props.needOperationGroup ? 
-              <tr>
-                <th style={{width: '4%'}}></th>
-                <th style={{width: '46%'}}>{gettext('Name')}</th>
-                <th style={{width: '20%'}}></th>
-                <th style={{width: '15%'}}>{gettext('Size')}</th>
-                <th style={{width: '15%'}}>{gettext('Last Update')}</th>
-              </tr>
-              :
-              <tr>
-                <th style={{width: '4%'}}></th>
-                <th style={{width: '66%'}}>{gettext('Name')}</th>
-                <th style={{width: '15%'}}>{gettext('Size')}</th>
-                <th style={{width: '15%'}}>{gettext('Last Update')}</th>
-              </tr>
-            }
+            <tr>
+              <th style={{width: '4%'}}></th>
+              <th style={{width: '66%'}}>{gettext('Name')}</th>
+              <th style={{width: '15%'}}>{gettext('Size')}</th>
+              <th style={{width: '15%'}}>{gettext('Last Update')}</th>
+            </tr>
           </thead>
           <tbody>
             {children && children.map((node, index) => {
               return (
-                <TreeDirList 
-                  key={index} 
-                  node={node} 
-                  isItemFreezed={this.state.isItemFreezed}
-                  onMainNodeClick={this.props.onMainNodeClick}
-                  onItemMenuShow={this.onItemMenuShow}
-                  onItemMenuHide={this.onItemMenuHide}
-                  onDownload={this.onDownload}
-                  onDelete={this.props.onDeleteItem}
-                  needOperationGroup={this.props.needOperationGroup}
-                />
+                <TreeDirList key={index} node={node} onMainNodeClick={this.props.onMainNodeClick}/>
               );
             })}
           </tbody>
         </table>
-        {
-          this.state.isProgressDialogShow && 
-          <ZipDownloadDialog progress={this.state.progress} onCancleDownload={this.onCancelDownload}/>
-        }
       </div>
     );
   }