Implement wiki mode menu function (#2461)

2025-09-01 23:20:51 +00:00 · 2018-10-25 13:36:06 +08:00
parent 91cbfc508e
commit f3e0284751
39 changed files with 1995 additions and 610 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10225,9 +10225,9 @@
      }
    },
    "seafile-js": {
-      "version": "0.2.28",
-      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.28.tgz",
-      "integrity": "sha512-+QA16BLpNVrvYIHfvrU/0D0x90bb1gCzW31U2BeFdL1CT3vgdLXaVc+j0XAtDahBYTyKtu7YKGPR6UO0ZdlXdw==",
+      "version": "0.2.29",
+      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.29.tgz",
+      "integrity": "sha512-fsWHcTWZk2iV/Ah3lRmnO5vyB0AFoxVyV3Z7FQ7k8aAYQtWcf07hxbFIhFpGU6cpmaq2mtnJQBUNU9zQdKtGRA==",
      "requires": {
        "axios": "^0.18.0",
        "form-data": "^2.3.2"
--- a/frontend/package.json
+++ b/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.28",
+    "seafile-js": "^0.2.29",
    "seafile-ui": "^0.1.10",
    "sw-precache-webpack-plugin": "0.11.4",
    "unified": "^7.0.0",
--- a/frontend/src/components/dialog/copy-dirent-dialog.js
+++ b/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;
--- a/frontend/src/components/dialog/create-file-dialog.js
+++ b/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({
          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>

--- a/frontend/src/components/dialog/move-dirent-dialog.js
+++ b/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;
--- a/frontend/src/components/dialog/zip-download-dialog.js
+++ b/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>
    );
--- a/frontend/src/components/dirent-detail/detail-list-view.js
+++ b/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;
--- a/frontend/src/components/dirent-detail/dirent-details.js
+++ b/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;
--- a/frontend/src/components/dirent-list-view/dirent-list-item.js
+++ b/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,16 +72,36 @@ 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
@@ -70,20 +110,196 @@ class DirentListItem extends React.Component {
  }
  
  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,20 +314,45 @@ class DirentListItem extends React.Component {
          {dirent.starred !== undefined && dirent.starred && <i className="fas fa-star"></i>}
        </td>
        <td className="icon">
+          <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>
        <td className="last-update" dangerouslySetInnerHTML={{__html: dirent.mtime}}></td>
--- a/frontend/src/components/dirent-list-view/dirent-list-view.js
+++ b/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);
-  }
-
-  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);
+  onDirentItemMove = (dirent, direntPath) => {
+    this.setState({
+      isMoveDialogShow: true,
+      currentDirent: dirent,
+      direntPath: direntPath
    });
  }
+
+  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>
    );
--- a/frontend/src/components/dirent-list-view/dirent-menu-item.js
+++ b/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;
--- a/frontend/src/components/dirent-list-view/dirent-menu.js
+++ b/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;
--- a/frontend/src/components/dirent-list-view/dirent-rename.js
+++ b/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;
--- a/frontend/src/components/dirent-operation/operation-group.js
+++ b/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;
--- a/frontend/src/components/dirent-operation/operation-menu.js
+++ b/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;
--- a/frontend/src/components/file-chooser/dirent-list-item.js
+++ b/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;
--- a/frontend/src/components/file-chooser/dirent-list-view.js
+++ b/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;
--- a/frontend/src/components/file-chooser/file-chooser.js
+++ b/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;
--- a/frontend/src/components/file-chooser/repo-list-item.js
+++ b/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;
--- a/frontend/src/components/file-chooser/repo-list-view.js
+++ b/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;
--- a/frontend/src/components/main-side-nav.js
+++ b/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>
--- a/frontend/src/components/tree-dir-view/tree-dir-list.js
+++ b/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>
--- a/frontend/src/components/tree-dir-view/tree-dir-view.js
+++ b/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>
-            }
          </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>
    );
  }
--- a/frontend/src/css/dirent-detail.css
+++ b/frontend/src/css/dirent-detail.css
@@ -0,0 +1,84 @@
+.detail-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid #e8e8e8;
+}
+
+.detail-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 2.5rem;
+  background-color: #f9f9f9;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.detail-header .detail-control {
+  position: absolute;
+  font-size: 16px;
+  color: #b9b9b9;
+  left: 0.5rem;
+}
+
+.detail-header .detail-control:hover {
+  color: #888;
+}
+
+.detail-header .detail-title img{
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.detail-header .detail-title .name {
+  font-size: 1rem;
+  color: #322;
+}
+
+.detail-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.dirent-info .img {
+  height: 10rem;
+  padding: 0.5rem 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.dirent-info .img img {
+  width: 6rem;
+  height: 6rem;
+}
+
+.dirent-table-container {
+  padding: 10px 20px;
+  display: flex;
+}
+
+.dirent-table-container table {
+  flex: 1;
+}
+
+.dirent-table-container th,
+.dirent-table-container td {
+  padding: 5px 3px;
+  border: none;
+}
+
+.dirent-table-container th {
+  font-size: 13px;
+  text-align: left;
+  font-weight: normal;
+  color: #9c9c9c;
+}
+
+.dirent-table-container td {
+  font-size: 14px;
+  color: #333;
+  word-break: break-all;
+}
--- a/frontend/src/css/file-chooser.css
+++ b/frontend/src/css/file-chooser.css
@@ -0,0 +1,70 @@
+.file-chooser-container {
+  padding: 0.5rem;
+  height: 20rem;
+  border: 1px solid #eee;
+  overflow: auto;
+  font-size: 1rem;
+}
+
+.item-toggle{
+  position: absolute;
+  height: 1.5rem;
+  width: 1.5rem;
+  left: 0;
+  top: 0;
+  line-height: 1.5rem !important;
+  text-align: center;
+  cursor: pointer;
+  color: #c0c0c0;
+}
+
+.file-chooser-container .list-view {
+  margin-top: 0.25rem;
+}
+
+.list-view-header {
+  position: relative;
+  padding-left: 1.5rem;
+}
+
+.list-view-header .name {
+  color: #eb8205;
+}
+
+.list-view-content {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.file-chooser-item {
+  position: relative;
+  padding-left: 1.5rem;
+}
+
+.file-chooser-item .item-info {
+  display: inline-block;
+  height: 1.5rem;
+  cursor: pointer;
+}
+
+.file-chooser-item .item-info:hover {
+  background: #e7f4f9;
+  border-radius: 2px;
+  box-shadow: inset 0 0 1px #999;
+}
+
+.file-chooser-item .item-active {
+  background: #beebff !important;
+  border-radius: 2px;
+  box-shadow: inset 0 0 1px #999;
+}
+
+.file-chooser-item .item-info .icon {
+  color: #b0b0b0;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+
+
--- a/frontend/src/css/layout.css
+++ b/frontend/src/css/layout.css
@@ -58,6 +58,7 @@
  display: flex;
  flex-direction: column;
  flex: 1;
+  min-height: 0;
 }

 .side-panel-center,
@@ -108,6 +109,12 @@
  border-radius: 2px;
 }

+.cur-view-detail {
+  display: flex;
+  width: 20rem;
+}
+
+/* for reach/router */
 [role=group] {
  display: flex;
  flex: 1;
--- a/frontend/src/css/toolbar.css
+++ b/frontend/src/css/toolbar.css
@@ -19,7 +19,7 @@

 /* file-operation toolbar eg: edit, upload, new, share*/
 .operation-item  {
-  padding: 0 0.25rem;
+  padding: 0 0.5rem;
  margin-right: 0.25rem;
  height: 30px;
  min-width: 55px;
--- a/frontend/src/models/repo.js
+++ b/frontend/src/models/repo.js
@@ -3,7 +3,7 @@ import { Utils } from '../utils/utils';
 class Repo {
  constructor(object) {
    this.repo_id = object.repo_id;
-    this.repo_name = object.name;
+    this.repo_name = object.repo_name;
    this.permission = object.permission;
    this.size = Utils.bytesToSize(object.size);
    this.file_count = object.file_count;
--- a/frontend/src/pages/drafts/draft-content.js
+++ b/frontend/src/pages/drafts/draft-content.js
@@ -64,7 +64,7 @@ class DraftContent extends React.Component {
    let draft = this.state.currentDraft;

    editUtilties.createDraftReview(draft.id).then(res => {
-      const w = window.open()
+      const w = window.open();
      w.location = siteRoot + 'drafts/review/' + res.data.id;
    }).catch((error) => { 
      if (error.response.status == '409') {
--- a/frontend/src/pages/repo-wiki-mode/main-panel.js
+++ b/frontend/src/pages/repo-wiki-mode/main-panel.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { gettext, repoID, serviceUrl, slug, siteRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
@@ -7,6 +7,7 @@ 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 DirentDetail from '../../components/dirent-detail/dirent-details';
 import CreateFolder from '../../components/dialog/create-folder-dialog';
 import CreateFile from '../../components/dialog/create-file-dialog';

@@ -25,6 +26,9 @@ const propTypes = {
  onLinkClick: PropTypes.func.isRequired,
  onMainItemClick: PropTypes.func.isRequired,
  onMainItemDelete: PropTypes.func.isRequired,
+  onMainItemRename: PropTypes.func.isRequired,
+  onMainItemMove: PropTypes.func.isRequired,
+  onMainItemCopy: PropTypes.func.isRequired,
  onMainAddFile: PropTypes.func.isRequired,
  onMainAddFolder: PropTypes.func.isRequired,
  switchViewMode: PropTypes.func.isRequired,
@@ -42,6 +46,10 @@ class MainPanel extends Component {
      showFileDialog: false,
      showFolderDialog: false,
      createFileType: '',
+      isDirentDetailShow: false,
+      currentDirent: null,
+      currentFilePath: '',
+      isDirentListLoading: true,
    };
  }

@@ -62,7 +70,8 @@ class MainPanel extends Component {
  }

  updateViewList = (filePath) => {
-    seafileAPI.listDir(repoID, filePath, 48).then(res => {
+    this.setState({isDirentListLoading: true});
+    seafileAPI.listDir(repoID, filePath).then(res => {
      let direntList = [];
      res.data.forEach(item => {
        let dirent = new Dirent(item);
@@ -70,6 +79,7 @@ class MainPanel extends Component {
      });
      this.setState({
        direntList: direntList,
+        isDirentListLoading: false,
      });
    });
  }
@@ -168,6 +178,18 @@ class MainPanel extends Component {
    this.props.onMainAddFolder(dirPath);
  }

+  onItemDetails = (dirent, direntPath) => {
+    this.setState({
+      currentDirent: dirent,
+      currentFilePath: direntPath,
+      isDirentDetailShow: true,
+    });
+  }
+
+  onItemDetailsClose = () => {
+    this.setState({isDirentDetailShow: false});
+  }
+
  render() {
    let filePathList = this.props.filePath.split('/');
    let nodePath = '';
@@ -206,9 +228,14 @@ class MainPanel extends Component {
                  this.props.permission === 'rw' &&
                  <button className="btn btn-secondary operation-item" title={gettext('Edit File')} onClick={this.onEditClick}>{gettext('Edit')}</button>
                }
+                {
+                  !this.props.isViewFileState &&
+                  <Fragment>
                    <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>
+                  </Fragment>
+                }
              </div>
              {
                this.state.uploadMenuShow && 
@@ -222,7 +249,7 @@ class MainPanel extends Component {
                <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-divider"></li>
                  <li className="dropdown-item" onClick={this.addMarkdownFile}>{gettext('New Markdown File')}</li>
                </ul>
              }
@@ -235,6 +262,7 @@ class MainPanel extends Component {
          </div>
          <CommonToolbar onSearchedClick={this.props.onSearchedClick} searchPlaceholder={'Search files in this library'}/>
        </div>
+        <div className="main-panel-center flex-direction-row">
          <div className="cur-view-container">
            <div className="cur-view-path">
              <div className="path-containter">
@@ -262,11 +290,26 @@ class MainPanel extends Component {
                  filePath={this.props.filePath}
                  onItemClick={this.props.onMainItemClick}
                  onItemDelete={this.props.onMainItemDelete}
+                  onItemRename={this.props.onMainItemRename}
+                  onItemMove={this.props.onMainItemMove}
+                  onItemCopy={this.props.onMainItemCopy}
+                  onItemDetails={this.onItemDetails}
                  updateViewList={this.updateViewList}
+                  isDirentListLoading={this.state.isDirentListLoading}
                />
              }
            </div>
          </div>
+          { this.state.isDirentDetailShow &&
+            <div className="cur-view-detail">
+              <DirentDetail 
+                dirent={this.state.currentDirent}
+                direntPath={this.state.currentFilePath}
+                onItemDetailsClose={this.onItemDetailsClose}
+              />
+            </div>
+          }
+        </div>
        {this.state.showFileDialog && 
          <CreateFile
            fileType={this.state.createFileType}
--- a/frontend/src/pages/wiki/main-panel.js
+++ b/frontend/src/pages/wiki/main-panel.js
@@ -106,14 +106,7 @@ class MainPanel extends Component {
              />
            }
            { !this.props.isViewFileState && 
-              <TreeDirView 
-                node={this.props.changedNode}
-                needOperationGroup={this.state.needOperationGroup}
-                onMainNodeClick={this.props.onMainNodeClick}
-                onDeleteItem={this.props.onDeleteNode}
-                onRenameItem={this.props.onRenameNode}
-              >
-              </TreeDirView>
+              <TreeDirView node={this.props.changedNode} onMainNodeClick={this.props.onMainNodeClick} />
            }
          </div>
        </div>
--- a/frontend/src/repo-wiki-mode.js
+++ b/frontend/src/repo-wiki-mode.js
@@ -1,14 +1,15 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
+import moment from 'moment';
+import cookie from 'react-cookies';
+import { gettext, repoID, serviceUrl, initialFilePath } from './utils/constants';
+import { seafileAPI } from './utils/seafile-api';
+import editorUtilities from './utils/editor-utilties';
 import SidePanel from './pages/repo-wiki-mode/side-panel';
 import MainPanel from './pages/repo-wiki-mode/main-panel';
-import moment from 'moment';
-import { repoID, serviceUrl, initialFilePath } from './utils/constants';
-import editorUtilities from './utils/editor-utilties';
-import { seafileAPI } from './utils/seafile-api';
 import Node from './components/tree-view/node';
 import Tree from './components/tree-view/tree';
-import cookie from 'react-cookies';
+import Toast from './components/toast';
 import 'seafile-ui';
 import './assets/css/fa-solid.css';
 import './assets/css/fa-regular.css';
@@ -183,8 +184,57 @@ class Wiki extends Component {
    this.onDeleteNode(node);
  }
  
-  onMainItemRename = () => {
-    //todos:
+  onMainItemRename = (direntPath, newName) => {
+    let node = this.state.tree_data.getNodeByPath(direntPath);
+    this.onRenameNode(node, newName);
+  }
+
+  onMainItemMove = (repo, direntPath, moveToDirentPath) => {
+    let index   = direntPath.lastIndexOf('/');
+    let dirPath = direntPath.slice(0, index + 1);
+    let dirName = direntPath.slice(index + 1); 
+    seafileAPI.moveDir(repoID, repo.repo_id, moveToDirentPath, dirPath, dirName).then(() => {
+      let tree = this.state.tree_data.clone();
+      let moveNode = tree.getNodeByPath(direntPath);
+      let moveNodeParent = tree.findNodeParentFromTree(moveNode);
+      if (repoID === repo.repo_id) {
+        let moveToNode = tree.getNodeByPath(moveToDirentPath);
+        tree.addNodeToParent(moveNode, moveToNode);
+      }
+      tree.removeNodeFromParent(moveNode, moveNodeParent);
+
+      this.exitViewFileState(tree, moveNodeParent);
+      let message = gettext('Successfully moved %(name)s.');
+      message = message.replace('%(name)s', dirName);
+      Toast.success(message);
+    }).catch(() => {
+      let message = gettext('Failed to move %(name)s');
+      message = message.replace('%(name)s', dirName);
+      Toast.error(message);
+    });
+  }
+
+  onMainItemCopy = (repo, direntPath, copyToDirentPath) => {
+    let index   = direntPath.lastIndexOf('/');
+    let dirPath = direntPath.slice(0, index + 1);
+    let dirName = direntPath.slice(index + 1); 
+    seafileAPI.copyDir(repoID, repo.repo_id, copyToDirentPath, dirPath, dirName).then(() => {
+      if (repoID === repo.repo_id) {
+        let tree = this.state.tree_data.clone();
+        let copyNode = tree.getNodeByPath(direntPath);
+        let copyToNode = tree.getNodeByPath(copyToDirentPath);
+        tree.addNodeToParent(copyNode, copyToNode);
+        this.exitViewFileState(tree, this.state.changedNode);
+      }
+      
+      let message = gettext('Successfully copied %(name)s.');
+      message = message.replace('%(name)s', dirName);
+      Toast.success(message);
+    }).catch(() => {
+      let message = gettext('Failed to copy %(name)s');
+      message = message.replace('%(name)s', dirName);
+      Toast.error(message);
+    });
  }

  onNodeClick = (e, node) => {
@@ -537,6 +587,9 @@ class Wiki extends Component {
          onMainNavBarClick={this.onMainNavBarClick}
          onMainItemClick={this.onMainItemClick}
          onMainItemDelete={this.onMainItemDelete}
+          onMainItemRename={this.onMainItemRename}
+          onMainItemMove={this.onMainItemMove}
+          onMainItemCopy={this.onMainItemCopy}
          onMainAddFile={this.onAddFileNode}
          onMainAddFolder={this.onAddFolderNode}
        />
--- a/frontend/src/utils/constants.js
+++ b/frontend/src/utils/constants.js
@@ -13,6 +13,12 @@ export const isPro = window.app.config.isPro === 'True';
 export const lang = window.app.config.lang;
 export const fileServerRoot = window.app.config.fileServerRoot;

+//pageOptions
+export const canGenerateShareLink = window.app.pageOptions.canGenerateShareLink === 'True';
+export const canGenerateUploadLink = window.app.pageOptions.canGenerateUploadLink === 'True';
+export const fileAuditEnabled = window.app.pageOptions.fileAuditEnabled ? true : false;
+export const enableFileComment = window.app.pageOptions.enableFileComment ? true : false;
+export const folderPermEnabled = window.app.pageOptions.folderPermEnabled === 'True';
 // wiki
 export const slug = window.wiki ? window.wiki.config.slug : '';
 export const repoID = window.wiki ? window.wiki.config.repoId : '';
--- a/frontend/src/utils/url-decorator.js
+++ b/frontend/src/utils/url-decorator.js
@@ -16,6 +16,16 @@ class URLDecorator {
    case 'download_file_url':
      url = siteRoot + 'lib/' + options.repoID + '/file' + Utils.encodePath(options.filePath) + '?dl=1';
      break;
+    case 'file_revisions':
+      params = 'p=' + Utils.encodePath(options.filePath) + '&referer=' + Utils.encodePath(options.referer);
+      url = siteRoot + 'repo/file_revisions/' + options.repoID + '/?' + params;
+      break;
+    case 'open_via_client':
+      url = 'seafile://openfile?repo_id=' + options.repoID + '&path=' + Utils.encodePath(options.filePath);
+      break;
+    case 'draft_view':
+      url = siteRoot + 'lib/' + options.repoID + '/file' + options.filePath + '?mode=edit&draft_id=' + options.draftId;
+      break;
    default:
      url = '';
      break;
--- a/frontend/src/utils/utils.js
+++ b/frontend/src/utils/utils.js
@@ -154,5 +154,12 @@ export const Utils = {
      path_arr_.push(encodeURIComponent(path_arr[i]));
    }
    return path_arr_.join('/');
-  }
+  },
+
+  HTMLescape: function(html) {
+    return document.createElement('div')
+        .appendChild(document.createTextNode(html))
+        .parentNode
+        .innerHTML;
+  },
 };
--- a/media/css/seahub_react.css
+++ b/media/css/seahub_react.css
@@ -74,6 +74,8 @@
 .sf2-icon-delete:before { content:"\e006"; }
 .sf2-icon-caret-down:before { content:"\e01a"; }
 .sf2-icon-two-columns:before { content:"\e036"; }
+.sf2-icon-confirm:before {content:"\e01e"}
+.sf2-icon-cancel:before {content:"\e01f"}

 /* common class and element style*/
 a { color:#eb8205; }
@@ -109,26 +111,36 @@ ul,ol,li {
 }

 .text-left {
-text-align: left;
+    text-align: left;
 }

 .text-right {
-text-align: right;
+    text-align: right;
 }

 .a-simulate {
-color: #eb8205 !important;
-text-decoration: none;
-font-weight: normal;
-cursor: pointer;
+    color: #eb8205 !important;
+    text-decoration: none;
+    font-weight: normal;
+    cursor: pointer;
 }

 .a-simulate:hover {
-text-decoration: underline;
+    text-decoration: underline;
 }

 .flex-right {
-justify-content: flex-end;
+    justify-content: flex-end;
+}
+
+.flex-direction-row {
+    flex-direction: row;
+}
+
+.sf-font {
+    color: #eb8205 !important;
+    text-decoration: none;
+    font-weight: normal;
 }

 /* UI Widget */
@@ -783,9 +795,47 @@ a.op-icon:focus {
 .table-container table .select,
 .table-container table .star,
 .table-container table .icon {
+    position: relative;
    text-align: center;
 }

+.table-container table .star {
+    cursor: pointer;
+}
+
+.table-container table .rename-container input {
+    box-sizing: content-box;
+    padding: 2px 3px;
+    width: 16.25rem;
+    height: 22px;
+    line-height: 19px;
+    border-radius: 2px;
+    word-wrap: break-word;
+    vertical-align: middle;
+    border: 1px solid #ccc;
+}
+
+.table-container table .rename-container input:focus {
+    background-color: #fff;
+    border-color: #1991eb;
+    outline: 0;
+    box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
+}
+
+.table-container table .rename-container button {
+    margin-left: 0.25rem;
+    padding: 5px 6px;
+    font-size: 1rem;
+    line-height: 1;
+    color: #666;
+    min-width: 0;
+}
+
+.table-container table .rename-container .confirm {
+    color: green;
+}
+
+
 .table-container table .star .empty {
    color: #d0d0d0;
 }
@@ -794,6 +844,19 @@ a.op-icon:focus {
    width: 1.5rem;
    height: 1.5rem;
 }
+
+.table-container table .dir-icon {
+    position: relative;
+}
+
+.table-container table .dir-icon .locked {
+    position: absolute;
+    width: 1rem;
+    height: 1rem;
+    top: 50%;
+    left: 50%;
+}
+
 .table-container table .menu-toggle {
    text-align: center;
    cursor: pointer;
@@ -811,10 +874,6 @@ a.op-icon:focus {
 .dropdown-item {
    cursor: pointer;
 }
-.dropdown-item.menu-inner-divider {
-    margin: 0.25rem 0;
-    border-bottom: 1px solid #ddd;
-}
  
 /* end dropdown-menu style */
  
--- a/seahub/api2/endpoints/repos.py
+++ b/seahub/api2/endpoints/repos.py
@@ -15,12 +15,205 @@ from seahub.base.templatetags.seahub_tags import email2nickname, \
        email2contact_email
 from seahub.utils.repo import get_repo_owner, is_repo_admin, \
        repo_has_been_shared_out
-from seahub.views import check_folder_permission
+from seahub.views import check_folder_permission, list_inner_pub_repos
+from seahub.share.models import ExtraSharePermission
+from seahub.utils import is_org_context
+from seahub.utils.timeutils import timestamp_to_isoformat_timestr

 from seaserv import seafile_api

 logger = logging.getLogger(__name__)

+
+class ReposView(APIView):
+
+    authentication_classes = (TokenAuthentication, SessionAuthentication)
+    permission_classes = (IsAuthenticated, )
+    throttle_classes = (UserRateThrottle,)
+
+    def get(self, request):
+        """ Return repos user can access.
+
+        Permission checking:
+        1. all authenticated user can perform this action.
+        """
+
+        filter_by = {
+            'mine': False,
+            'shared': False,
+            'group': False,
+            'public': False,
+        }
+
+        request_type_list = request.GET.getlist('type', "")
+        if not request_type_list:
+            # set all to True, no filter applied
+            filter_by = filter_by.fromkeys(filter_by.iterkeys(), True)
+
+        for request_type in request_type_list:
+            request_type = request_type.strip()
+            filter_by[request_type] = True
+
+        email = request.user.username
+
+        # Use dict to reduce memcache fetch cost in large for-loop.
+        contact_email_dict = {}
+        nickname_dict = {}
+
+        org_id = None
+        if is_org_context(request):
+            org_id = request.user.org.org_id
+
+        repo_info_list = []
+        if filter_by['mine']:
+            if org_id:
+                owned_repos = seafile_api.get_org_owned_repo_list(org_id,
+                        email, ret_corrupted=True)
+            else:
+                owned_repos = seafile_api.get_owned_repo_list(email,
+                        ret_corrupted=True)
+
+            # Reduce memcache fetch ops.
+            modifiers_set = set([x.last_modifier for x in owned_repos])
+            for e in modifiers_set:
+                if e not in contact_email_dict:
+                    contact_email_dict[e] = email2contact_email(e)
+                if e not in nickname_dict:
+                    nickname_dict[e] = email2nickname(e)
+
+            owned_repos.sort(lambda x, y: cmp(y.last_modify, x.last_modify))
+            for r in owned_repos:
+
+                # do not return virtual repos
+                if r.is_virtual:
+                    continue
+
+                repo_info = {
+                    "type": "mine",
+                    "repo_id": r.id,
+                    "repo_name": r.name,
+                    "owner_email": email,
+                    "owner_name": email2nickname(email),
+                    "owner_contact_email": email2contact_email(email),
+                    "last_modified": timestamp_to_isoformat_timestr(r.last_modify),
+                    "modifier_email": r.last_modifier,
+                    "modifier_name": nickname_dict.get(r.last_modifier, ''),
+                    "modifier_contact_email": contact_email_dict.get(r.last_modifier, ''),
+                    "size": r.size,
+                    "encrypted": r.encrypted,
+                    "permission": 'rw',  # Always have read-write permission to owned repo
+                }
+                repo_info_list.append(repo_info)
+
+        if filter_by['shared']:
+
+            if org_id:
+                shared_repos = seafile_api.get_org_share_in_repo_list(org_id,
+                        email, -1, -1)
+            else:
+                shared_repos = seafile_api.get_share_in_repo_list(
+                        email, -1, -1)
+
+            repos_with_admin_share_to = ExtraSharePermission.objects.\
+                    get_repos_with_admin_permission(email)
+
+            # Reduce memcache fetch ops.
+            owners_set = set([x.user for x in shared_repos])
+            modifiers_set = set([x.last_modifier for x in shared_repos])
+            for e in owners_set | modifiers_set:
+                if e not in contact_email_dict:
+                    contact_email_dict[e] = email2contact_email(e)
+                if e not in nickname_dict:
+                    nickname_dict[e] = email2nickname(e)
+
+            shared_repos.sort(lambda x, y: cmp(y.last_modify, x.last_modify))
+            for r in shared_repos:
+
+                repo_info = {
+                    "type": "shared",
+                    "repo_id": r.repo_id,
+                    "repo_name": r.repo_name,
+                    "last_modified": timestamp_to_isoformat_timestr(r.last_modify),
+                    "modifier_email": r.last_modifier,
+                    "modifier_name": nickname_dict.get(r.last_modifier, ''),
+                    "modifier_contact_email": contact_email_dict.get(r.last_modifier, ''),
+                    "size": r.size,
+                    "encrypted": r.encrypted,
+                    "permission": r.permission,
+                }
+
+                if r.repo_id in repos_with_admin_share_to:
+                    repo_info['is_admin'] = True
+                else:
+                    repo_info['is_admin'] = False
+
+                repo_info_list.append(repo_info)
+
+        if filter_by['group']:
+
+            if org_id:
+                group_repos = seafile_api.get_org_group_repos_by_user(email, org_id)
+            else:
+                group_repos = seafile_api.get_group_repos_by_user(email)
+
+            group_repos.sort(lambda x, y: cmp(y.last_modify, x.last_modify))
+
+            # Reduce memcache fetch ops.
+            share_from_set = set([x.user for x in group_repos])
+            modifiers_set = set([x.last_modifier for x in group_repos])
+            for e in modifiers_set | share_from_set:
+                if e not in contact_email_dict:
+                    contact_email_dict[e] = email2contact_email(e)
+                if e not in nickname_dict:
+                    nickname_dict[e] = email2nickname(e)
+
+            for r in group_repos:
+                repo_info = {
+                    "type": "group",
+                    "group_id": r.group_id,
+                    "group_name": r.group_name,
+                    "repo_id": r.repo_id,
+                    "repo_name": r.repo_name,
+                    "last_modified": timestamp_to_isoformat_timestr(r.last_modify),
+                    "modifier_email": r.last_modifier,
+                    "modifier_name": nickname_dict.get(r.last_modifier, ''),
+                    "modifier_contact_email": contact_email_dict.get(r.last_modifier, ''),
+                    "size": r.size,
+                    "encrypted": r.encrypted,
+                    "permission": r.permission,
+                }
+                repo_info_list.append(repo_info)
+
+        if filter_by['public'] and request.user.permissions.can_view_org():
+            public_repos = list_inner_pub_repos(request)
+
+            # Reduce memcache fetch ops.
+            share_from_set = set([x.user for x in public_repos])
+            modifiers_set = set([x.last_modifier for x in public_repos])
+            for e in modifiers_set | share_from_set:
+                if e not in contact_email_dict:
+                    contact_email_dict[e] = email2contact_email(e)
+                if e not in nickname_dict:
+                    nickname_dict[e] = email2nickname(e)
+
+            for r in public_repos:
+                repo_info = {
+                    "type": "public",
+                    "repo_id": r.repo_id,
+                    "repo_name": r.repo_name,
+                    "last_modified": timestamp_to_isoformat_timestr(r.last_modify),
+                    "modifier_email": r.last_modifier,
+                    "modifier_name": nickname_dict.get(r.last_modifier, ''),
+                    "modifier_contact_email": contact_email_dict.get(r.last_modifier, ''),
+                    "size": r.size,
+                    "encrypted": r.encrypted,
+                    "permission": r.permission,
+                }
+                repo_info_list.append(repo_info)
+
+        return Response({'repos': repo_info_list})
+
+
 class RepoView(APIView):

    authentication_classes = (TokenAuthentication, SessionAuthentication)
--- a/seahub/templates/base_for_react.html
+++ b/seahub/templates/base_for_react.html
@@ -33,6 +33,13 @@
            isPro: '{{ is_pro }}',
            lang: '{{ LANGUAGE_CODE }}',
            fileServerRoot: '{{ FILE_SERVER_ROOT }}'
+        },
+        pageOptions: {
+            canGenerateShareLink: '{{ user.permissions.can_generate_share_link }}',
+            canGenerateUploadLink: '{{ user.permissions.can_generate_upload_link }}',
+            fileAuditEnabled: '{{ file_audit_enabled }}',
+            enableFileComment: '{{ enable_file_comment }}',
+            folderPermEnabled: '{{ folder_perm_enabled }}'
        }
     };
 </script>
--- a/seahub/urls.py
+++ b/seahub/urls.py
@@ -42,7 +42,7 @@ from seahub.api2.endpoints.upload_links import UploadLinks, UploadLink, \
 from seahub.api2.endpoints.repos_batch import ReposBatchView, \
        ReposBatchCopyDirView, ReposBatchCreateDirView, \
        ReposBatchCopyItemView, ReposBatchMoveItemView
-from seahub.api2.endpoints.repos import RepoView
+from seahub.api2.endpoints.repos import RepoView, ReposView
 from seahub.api2.endpoints.file import FileView
 from seahub.api2.endpoints.file_history import FileHistoryView, NewFileHistoryView
 from seahub.api2.endpoints.dir import DirView, DirDetailView
@@ -280,6 +280,7 @@ urlpatterns = [
    url(r'^api/v2.1/deleted-repos/$', DeletedRepos.as_view(), name='api2-v2.1-deleted-repos'),

    ## user::repos
+    url(r'^api/v2.1/repos/$', ReposView.as_view(), name='api-v2.1-repos-view'),
    url(r'^api/v2.1/repos/(?P<repo_id>[-0-9a-f]{36})/$', RepoView.as_view(), name='api-v2.1-repo-view'),
    url(r'^api/v2.1/repos/(?P<repo_id>[-0-9a-f]{36})/tags/$', FileTagsView.as_view(), name="api-v2.1-filetags-view"),
    url(r'^api/v2.1/repos/(?P<repo_id>[-0-9a-f]{36})/tags/(?P<name>.*?)/$',FileTagView.as_view(), name="api-v2.1-filetag-view"),