Wiki mutiple chioce (#2559)

frontend/package-lock.json

@@ -180,7 +180,7 @@
       "dependencies": {
         "reactstrap": {
           "version": "5.0.0",
-          "resolved": "http://registry.npmjs.org/reactstrap/-/reactstrap-5.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-5.0.0.tgz",
           "integrity": "sha512-y0eju/LAK7gbEaTFfq2iW92MF7/5Qh0tc1LgYr2mg92IX8NodGc03a+I+cp7bJ0VXHAiLy0bFL9UP89oSm4cBg==",
           "requires": {
             "classnames": "^2.2.3",
@@ -3506,7 +3506,7 @@
     },
     "engine.io-client": {
       "version": "3.2.1",
-      "resolved": "http://registry.npmjs.org/engine.io-client/-/engine.io-client-3.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-3.2.1.tgz",
       "integrity": "sha512-y5AbkytWeM4jQr7m/koQLc5AxpRKC1hEVUb/s1FUAWEJq5AzJJ4NLvzuKPuxtDi5Mq755WuDvZ6Iv2rXj4PTzw==",
       "requires": {
         "component-emitter": "1.2.1",
@@ -4478,9 +4478,9 @@
       "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I="
     },
     "follow-redirects": {
-      "version": "1.5.9",
+      "version": "1.5.10",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.9.tgz",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
-      "integrity": "sha512-Bh65EZI/RU8nx0wbYF9shkFZlqLP+6WT/5FnA3cE/djNSuKNHJEinGGZgu/cQEkeeb2GdFOgenAmn8qaqYke2w==",
+      "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
       "requires": {
         "debug": "=3.1.0"
       },
@@ -9917,7 +9917,7 @@
     },
     "react-popper": {
       "version": "0.8.3",
-      "resolved": "http://registry.npmjs.org/react-popper/-/react-popper-0.8.3.tgz",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-0.8.3.tgz",
       "integrity": "sha1-D3MzMTfJ+wr27EB00tBYWgoEYeE=",
       "requires": {
         "popper.js": "^1.12.9",
@@ -10753,9 +10753,9 @@
       }
     },
     "seafile-js": {
-      "version": "0.2.38",
+      "version": "0.2.39",
-      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.38.tgz",
+      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.39.tgz",
-      "integrity": "sha512-MBRa/Pw5UYX8W4Mf3y7xTJ0FLDmDSSIb/rr37FeMO8h+iXk1ZNBUPq+zkV8azL40mNeMYSrU0L9Sp5ETQ+owIw==",
+      "integrity": "sha512-qb6mNzcGCgv+iCuR3eya0aW/JWN17xrTBRc1xyutQwFFptasJzOfbsmVJXtqHfFVe/EbLHSw85nQzmaJqsCVJA==",
       "requires": {
         "axios": "^0.18.0",
         "form-data": "^2.3.2",
@@ -11070,7 +11070,7 @@
     },
     "socket.io-parser": {
       "version": "3.2.0",
-      "resolved": "http://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.2.0.tgz",
       "integrity": "sha512-FYiBx7rc/KORMJlgsXysflWx/RIvtqZbyGLlHZvjfmPTPeuD/I8MaW7cfFrj5tRltICJdgwflhfZ3NVVbVLFQA==",
       "requires": {
         "component-emitter": "1.2.1",

frontend/package.json

@@ -28,7 +28,7 @@
     "react-moment": "^0.7.9",
     "react-select": "^2.1.1",
     "reactstrap": "^6.4.0",
-    "seafile-js": "^0.2.38",
+    "seafile-js": "^0.2.39",
     "seafile-ui": "^0.1.10",
     "sw-precache-webpack-plugin": "0.11.4",
     "unified": "^7.0.0",

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

@@ -6,9 +6,13 @@ import { Utils } from '../../utils/utils';
 import FileChooser from '../file-chooser/file-chooser';
 
 const propTypes = {
+  path: PropTypes.string.isRequired,
   direntPath: PropTypes.string,
-  dirent: PropTypes.object.isRequired,
+  dirent: PropTypes.object,
+  isMutipleOperation: PropTypes.bool.isRequired,
+  selectedDirentList: PropTypes.array.isRequired,
   onItemCopy: PropTypes.func.isRequired,
+  onItemsCopy: PropTypes.func.isRequired,
   onCancelCopy: PropTypes.func.isRequired,
 };
 
@@ -19,7 +23,7 @@ class CopyDirent extends React.Component {
     super(props);
     this.state = {
       repo: null,
-      filePath: '',
+      selectedPath: '',
       errMessage: '',
     };
   }
@@ -32,38 +36,95 @@ class CopyDirent extends React.Component {
   }
 
   handleSubmit = () => {
+    if (this.props.isMutipleOperation) {
+      this.copyItems();
+    } else {
+      this.copyItem();
+    }
+  }
+
+  copyItems = () => {
+    let { repo, selectedPath } = this.state;
+    let message = gettext('Invalid destination path');
+    
+    if (!repo || (repo.repo_id === repoID) && selectedPath === '') {
+      this.setState({errMessage: message});
+      return;
+    }
+
+    let selectedDirentList = this.props.selectedDirentList;
+    let direntPaths = [];
+    selectedDirentList.forEach(dirent => {
+      let path = Utils.joinPath(this.props.path, dirent.name);
+      direntPaths.push(path);
+    });
+    
+    // copy dirents to one of them. eg: A/B, A/C -> A/B
+    if (direntPaths.some(direntPath => { return direntPath === selectedPath})) {
+      this.setState({errMessage: message});
+      return;
+    }
+
+    // copy dirents to current path
+    if (selectedPath && selectedPath === this.props.path) {
+      this.setState({errMessage: message});
+      return;
+    }
+
+    // copy dirents to one of their child. eg: A/B, A/D -> A/B/C
+    let copyDirentPath = '';
+    let isChildPath = direntPaths.some(direntPath => {
+      let flag = selectedPath.length > direntPath.length && selectedPath.indexOf(direntPath) > -1;
+      if (flag) {
+        copyDirentPath = direntPath;
+      }
+      return flag;
+    })
+
+    if (isChildPath) {
+      message = gettext('Can not move directory %(src)s to its subdirectory %(des)s');
+      message = message.replace('%(src)s', copyDirentPath);
+      message = message.replace('%(des)s', selectedPath);
+      this.setState({errMessage: message});
+      return;
+    }
+    
+    this.props.onItemsCopy(repo, selectedPath);
+    this.toggle();
+  }
+
+  copyItem = () => {
     let { direntPath } = this.props;
-    let { repo, filePath } = this.state; 
+    let { repo, selectedPath } = this.state; 
     let message = 'Invalid destination path';
 
-    if (!repo || (repo.repo_id === repoID && filePath === '')) {
+    if (!repo || (repo.repo_id === repoID && selectedPath === '')) {
       this.setState({errMessage: message});
       return;
     }
 
-    if (filePath && direntPath === filePath) {
+    // copy the dirent to itself. eg: A/B -> A/B
+    if (selectedPath && direntPath === selectedPath) {
       this.setState({errMessage: message});
       return;
     }
     
-    
+    // copy the dirent to current path
-    if (filePath && direntPath.length > filePath.length && direntPath.indexOf(filePath) > -1) {
+    if (selectedPath && this.props.path === selectedPath) {
       this.setState({errMessage: message});
       return;
     }
     
-    if ( filePath && filePath.length > direntPath.length && filePath.indexOf(direntPath) > -1) {
+    // copy the dirent to it's child. eg: A/B -> A/B/C
+    if ( selectedPath && selectedPath.length > direntPath.length && selectedPath.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);
+      message = message.replace('%(des)s', selectedPath);
       this.setState({errMessage: message});
       return;
     }
 
-    if (filePath === '') {
+    this.props.onItemCopy(repo, direntPath, selectedPath);
-      filePath = '/';
-    }
-    this.props.onItemCopy(repo, direntPath, filePath);
     this.toggle();
   }
 
@@ -71,10 +132,10 @@ class CopyDirent extends React.Component {
     this.props.onCancelCopy();
   }
 
-  onDirentItemClick = (repo, filePath) => {
+  onDirentItemClick = (repo, selectedPath) => {
     this.setState({
       repo: repo,
-      filePath: filePath,
+      selectedPath: selectedPath,
       errMessage: '',
     });
   }
@@ -82,14 +143,18 @@ class CopyDirent extends React.Component {
   onRepoItemClick = (repo) => {
     this.setState({
       repo: repo,
-      filePath: '',
+      selectedPath: '/',
       errMessage: ''
     });
   }
 
   render() {
     let title = gettext('Copy {placeholder} to:');
+    if (!this.props.isMutipleOperation) {
       title = title.replace('{placeholder}', '<span class="sf-font">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
+    } else {
+      title = gettext("Copy selected item(s) to:");
+    }
     return (
       <Modal isOpen={true} toggle={this.toggle}>
         <ModalHeader toggle={this.toggle}><div dangerouslySetInnerHTML={{__html: title}}></div></ModalHeader>

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

@@ -6,9 +6,13 @@ import { Utils } from '../../utils/utils';
 import FileChooser from '../file-chooser/file-chooser';
 
 const propTypes = {
+  path: PropTypes.string.isRequired,
   direntPath: PropTypes.string,
-  dirent: PropTypes.object.isRequired,
+  dirent: PropTypes.object,
+  isMutipleOperation: PropTypes.bool.isRequired,
+  selectedDirentList: PropTypes.array.isRequired,
   onItemMove: PropTypes.func.isRequired,
+  onItemsMove: PropTypes.func.isRequired,
   onCancelMove: PropTypes.func.isRequired,
 };
 
@@ -19,7 +23,7 @@ class MoveDirent extends React.Component {
     super(props);
     this.state = {
       repo: null,
-      filePath: '',
+      selectedPath: '',
       errMessage: '',
     };
   }
@@ -32,37 +36,95 @@ class MoveDirent extends React.Component {
   }
 
   handleSubmit = () => {
-    let { direntPath } = this.props;
+    if (this.props.isMutipleOperation) {
-    let { repo, filePath } = this.state; 
+      this.moveItems();
+    } else {
+      this.moveItem();
+    }
+  }
+
+  moveItems = () => {
+    let { repo, selectedPath } = this.state;
     let message = gettext('Invalid destination path');
     
-    if (!repo || (repo.repo_id === repoID && filePath === '')) {
+    if (!repo || (repo.repo_id === repoID) && selectedPath === '') {
       this.setState({errMessage: message});
       return;
     }
 
-    if (filePath && direntPath === filePath) {
+    let selectedDirentList = this.props.selectedDirentList;
+    let direntPaths = [];
+    selectedDirentList.forEach(dirent => {
+      let path = Utils.joinPath(this.props.path, dirent.name);
+      direntPaths.push(path);
+    });
+    
+    // copy dirents to one of them. eg: A/B, A/C -> A/B
+    if (direntPaths.some(direntPath => { return direntPath === selectedPath})) {
       this.setState({errMessage: message});
       return;
     }
 
-    
+    // copy dirents to current path
-    if (filePath && direntPath.length > filePath.length && direntPath.indexOf(filePath) > -1) {
+    if (selectedPath && selectedPath === this.props.path) {
       this.setState({errMessage: message});
       return;
     }
 
-    if ( filePath && filePath.length > direntPath.length && filePath.indexOf(direntPath) > -1) {
+    // copy dirents to one of their child. eg: A/B, A/D -> A/B/C
+    let moveDirentPath = '';
+    let isChildPath = direntPaths.some(direntPath => {
+      let flag = selectedPath.length > direntPath.length && selectedPath.indexOf(direntPath) > -1;
+      if (flag) {
+        moveDirentPath = direntPath;
+      }
+      return flag;
+    })
+
+    if (isChildPath) {
+      message = gettext('Can not move directory %(src)s to its subdirectory %(des)s');
+      message = message.replace('%(src)s', moveDirentPath);
+      message = message.replace('%(des)s', selectedPath);
+      this.setState({errMessage: message});
+      return;
+    }
+
+    this.props.onItemsMove(repo, selectedPath);
+    this.toggle();
+  }
+
+  moveItem = () => {
+    let { direntPath } = this.props;
+    let { repo, selectedPath } = this.state; 
+    let message = gettext('Invalid destination path');
+
+    if (!repo || (repo.repo_id === repoID && selectedPath === '')) {
+      this.setState({errMessage: message});
+      return;
+    }
+    
+    // copy the dirent to itself. eg: A/B -> A/B
+    if (selectedPath && direntPath === selectedPath) {
+      this.setState({errMessage: message});
+      return;
+    }
+    
+    // copy the dirent to current path
+    if (selectedPath && Utils.getDirName(direntPath) === selectedPath) {
+      this.setState({errMessage: message});
+      return;
+    }
+    
+    // copy the dirent to it's child. eg: A/B -> A/B/C
+    if ( selectedPath && selectedPath.length > direntPath.length && selectedPath.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);
+      message = message.replace('%(des)s', selectedPath);
       this.setState({errMessage: message});
       return;
     }
-    if (filePath === '') {
+
-      filePath = '/';
+    this.props.onItemMove(repo, direntPath, selectedPath);
-    }
-    this.props.onItemMove(repo, direntPath, filePath);
     this.toggle();
   }
 
@@ -70,10 +132,10 @@ class MoveDirent extends React.Component {
     this.props.onCancelMove();
   }
 
-  onDirentItemClick = (repo, filePath) => {
+  onDirentItemClick = (repo, selectedPath) => {
     this.setState({
       repo: repo,
-      filePath: filePath,
+      selectedPath: selectedPath,
       errMessage: '',
     });
   }
@@ -81,14 +143,18 @@ class MoveDirent extends React.Component {
   onRepoItemClick = (repo) => {
     this.setState({
       repo: repo,
-      filePath: '',
+      selectedPath: '/',
       errMessage: ''
     });
   }
 
   render() {
     let title = gettext('Move {placeholder} to:');
+    if (!this.props.isMutipleOperation) {
       title = title.replace('{placeholder}', '<span class="sf-font">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
+    } else {
+      title = gettext("Move selected item(s) to:");
+    }
     return (
       <Modal isOpen={true} toggle={this.toggle}>
         <ModalHeader toggle={this.toggle}><div dangerouslySetInnerHTML={{__html: title}}></div></ModalHeader>

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

@@ -14,12 +14,13 @@ const propTypes = {
   onItemClick: PropTypes.func.isRequired,
   onFreezedItem: PropTypes.func.isRequired,
   onUnfreezedItem: PropTypes.func.isRequired,
-  onRenameMenuItemClick: PropTypes.func.isRequired,
+  onItemRenameToggle: PropTypes.func.isRequired,
+  onItemSelected: PropTypes.func.isRequired,
   onItemDelete: PropTypes.func.isRequired,
   onItemRename: PropTypes.func.isRequired,
   onItemDownload: PropTypes.func.isRequired,
-  onDirentItemMove: PropTypes.func.isRequired,
+  onItemMoveToggle: PropTypes.func.isRequired,
-  onDirentItemCopy: PropTypes.func.isRequired,
+  onItemCopyToggle: PropTypes.func.isRequired,
   onItemDetails: PropTypes.func.isRequired,
   updateDirent: PropTypes.func.isRequired,
   currentRepo: PropTypes.object,
@@ -108,7 +109,7 @@ class DirentListItem extends React.Component {
 
   //buiness handler
   onItemSelected = () => {
-    //todos;
+    this.props.onItemSelected(this.props.dirent);
   }
 
   onItemStarred = () => {
@@ -141,16 +142,16 @@ class DirentListItem extends React.Component {
     this.props.onItemDelete(this.props.dirent);
   }
 
-  onItemMenuItemClick = (operation) => {
+  onMenuItemClick = (operation) => {
     switch(operation) {
     case 'Rename':
-      this.onRenameMenuItemClick();
+      this.onItemRenameToggle();
       break;
     case 'Move':
-      this.onDirentItemMove();
+      this.onItemMoveToggle();
       break;
     case 'Copy':
-      this.onDirentItemCopy();
+      this.onItemCopyToggle();
       break;
     case 'Permission':
       this.onPermissionItem();
@@ -184,8 +185,8 @@ class DirentListItem extends React.Component {
     }
   }
 
-  onRenameMenuItemClick = () => {
+  onItemRenameToggle = () => {
-    this.props.onRenameMenuItemClick(this.props.dirent);
+    this.props.onItemRenameToggle(this.props.dirent);
     this.setState({
       isOperationShow: false,
       isItemMenuShow: false,
@@ -222,15 +223,15 @@ class DirentListItem extends React.Component {
     this.props.onUnfreezedItem();
   }
 
-  onDirentItemMove = () => {
+  onItemMoveToggle = () => {
     let direntPath = this.getDirentPath(this.props.dirent);
-    this.props.onDirentItemMove(this.props.dirent, direntPath);
+    this.props.onItemMoveToggle(this.props.dirent, direntPath);
     this.onItemMenuHide();
   }
 
-  onDirentItemCopy = () => {
+  onItemCopyToggle = () => {
     let direntPath = this.getDirentPath(this.props.dirent);
-    this.props.onDirentItemCopy(this.props.dirent, direntPath);
+    this.props.onItemCopyToggle(this.props.dirent, direntPath);
     this.onItemMenuHide();
   }
 
@@ -309,7 +310,7 @@ class DirentListItem extends React.Component {
     return (
       <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
         <td className="select">
-          <input type="checkbox" className="vam" />
+          <input type="checkbox" className="vam" onChange={this.onItemSelected} checked={dirent.isSelected}/>
         </td>
         <td className="star" onClick={this.onItemStarred}>
           {dirent.starred !== undefined && !dirent.starred && <i className="far fa-star empty"></i>}
@@ -359,7 +360,7 @@ class DirentListItem extends React.Component {
                 <DirentMenu
                   dirent={this.props.dirent}
                   menuPosition={this.state.menuPosition}
-                  onMenuItemClick={this.onItemMenuItemClick}
+                  onMenuItemClick={this.onMenuItemClick}
                   currentRepo={this.props.currentRepo}
                   isRepoOwner={this.props.isRepoOwner}
                 />

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

@@ -1,27 +1,25 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { gettext, repoID } from '../../utils/constants';
+import { gettext } from '../../utils/constants';
-import URLDecorator from '../../utils/url-decorator';
-import editorUtilities from '../../utils/editor-utilties';
 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 = {
   path: PropTypes.string.isRequired,
   direntList: PropTypes.array.isRequired,
   onItemDelete: PropTypes.func.isRequired,
+  onAllItemSelected: PropTypes.func.isRequired,
+  onItemSelected: PropTypes.func.isRequired,
   onItemRename: PropTypes.func.isRequired,
   onItemClick: PropTypes.func.isRequired,
-  onItemMove: PropTypes.func.isRequired,
+  onItemMoveToggle: PropTypes.func.isRequired,
-  onItemCopy: PropTypes.func.isRequired,
+  onItemCopyToggle: PropTypes.func.isRequired,
   onItemDetails: PropTypes.func.isRequired,
   updateDirent: PropTypes.func.isRequired,
   isDirentListLoading: PropTypes.bool.isRequired,
   isRepoOwner: PropTypes.bool,
   currentRepo: PropTypes.object,
+  isAllItemSelected: PropTypes.bool.isRequired,
 };
 
 class DirentListView extends React.Component {
@@ -29,13 +27,7 @@ class DirentListView extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      progress: 0,
       isItemFreezed: false,
-      isProgressDialogShow: false,
-      isMoveDialogShow: false,
-      isCopyDialogShow: false,
-      currentDirent: false,
-      direntPath: '',
     };
   }
 
@@ -47,91 +39,14 @@ class DirentListView extends React.Component {
     this.setState({isItemFreezed: false});
   }
 
-  onRenameMenuItemClick = () => {
+  onItemRenameToggle = () => {
     this.onFreezedItem();
   }
 
-  onDirentItemMove = (dirent, direntPath) => {
-    this.setState({
-      isMoveDialogShow: true,
-      currentDirent: dirent,
-      direntPath: direntPath
-    });
-  }
-
-  onDirentItemCopy = (dirent, direntPath) => {
-    this.setState({
-      isCopyDialogShow: true,
-      currentDirent: dirent,
-      direntPath: direntPath
-    });
-  }
-
-  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});
-      editorUtilities.zipDownload(this.props.path, dirent.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: direntPath});
-      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: parseInt(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,
-      });
-    });
-  }
-
   render() {
     const { direntList } = this.props;
 
@@ -140,11 +55,12 @@ class DirentListView extends React.Component {
     }
 
     return (
-      <Fragment>
       <table>
         <thead>
           <tr>
-              <th width="3%" className="select"><input type="checkbox" className="vam" /></th>
+            <th width="3%" className="select">
+              <input type="checkbox" className="vam" onChange={this.props.onAllItemSelected} checked={this.props.isAllItemSelected}/>
+            </th>
             <th width="3%"></th>
             <th width="5%"></th>
             <th width="35%">{gettext('Name')}</th>
@@ -165,44 +81,24 @@ class DirentListView extends React.Component {
                   currentRepo={this.props.currentRepo}
                   isRepoOwner={this.props.isRepoOwner}
                   onItemClick={this.props.onItemClick}
-                    onRenameMenuItemClick={this.onRenameMenuItemClick}
+                  onItemRenameToggle={this.onItemRenameToggle}
+                  onItemSelected={this.props.onItemSelected}
                   onItemDelete={this.props.onItemDelete}
                   onItemRename={this.props.onItemRename}
+                  onItemMoveToggle={this.props.onItemMoveToggle}
+                  onItemCopyToggle={this.props.onItemCopyToggle}
+                  onItemDownload={this.props.onItemDownload}
+                  updateDirent={this.props.updateDirent}
                   isItemFreezed={this.state.isItemFreezed}
                   onFreezedItem={this.onFreezedItem}
                   onUnfreezedItem={this.onUnfreezedItem}
-                    onItemDownload={this.onItemDownload}
-                    onDirentItemMove={this.onDirentItemMove}
-                    onDirentItemCopy={this.onDirentItemCopy}
                   onItemDetails={this.onItemDetails}
-                    updateDirent={this.props.updateDirent}
                 />
               );
             })
           }
         </tbody>
       </table>
-        {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}
-          />
-        }
-      </Fragment>
     );
   }
 }

frontend/src/models/dirent.js

@@ -9,6 +9,7 @@ class Dirent {
     this.type = json.type;
     this.mtime = moment.unix(json.mtime).fromNow();
     this.permission = json.permission;
+    this.isSelected = false;
     if (json.type === 'file') {
       this.size = Utils.bytesToSize(json.size);
       this.starred = json.starred;

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { gettext, repoID, serviceUrl, slug, siteRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
+import URLDecorator from '../../utils/url-decorator';
 import Repo from '../../models/repo';
 import CommonToolbar from '../../components/toolbar/common-toolbar';
 import PathToolbar from '../../components/toolbar/path-toolbar';
@@ -11,6 +12,9 @@ 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';
+import ZipDownloadDialog from '../../components/dialog/zip-download-dialog';
+import MoveDirentDialog from '../../components/dialog/move-dirent-dialog';
+import CopyDirentDialog from '../../components/dialog/copy-dirent-dialog';
 import FileUploader from '../../components/file-uploader/file-uploader';
 
 const propTypes = {
@@ -24,13 +28,18 @@ const propTypes = {
   isFileLoading: PropTypes.bool.isRequired,
   isViewFile: PropTypes.bool.isRequired,
   isDirentListLoading: PropTypes.bool.isRequired,
+  isDirentSelected: PropTypes.bool.isRequired,
+  isAllDirentSelected: PropTypes.bool.isRequired,
   direntList: PropTypes.array.isRequired,
+  selectedDirentList: PropTypes.array.isRequired,
   updateDirent: PropTypes.func.isRequired,
   onSideNavMenuClick: PropTypes.func.isRequired,
   onSearchedClick: PropTypes.func.isRequired,
   onMainNavBarClick: PropTypes.func.isRequired,
   onLinkClick: PropTypes.func.isRequired,
   onItemClick: PropTypes.func.isRequired,
+  onAllDirentSelected: PropTypes.func.isRequired,
+  onItemSelected: PropTypes.func.isRequired,
   onItemDelete: PropTypes.func.isRequired,
   onItemRename: PropTypes.func.isRequired,
   onItemMove: PropTypes.func.isRequired,
@@ -39,6 +48,9 @@ const propTypes = {
   onAddFolder: PropTypes.func.isRequired,
   switchViewMode: PropTypes.func.isRequired,
   onFileTagChanged: PropTypes.func.isRequired,
+  onItemsMove: PropTypes.func.isRequired,
+  onItemsCopy: PropTypes.func.isRequired,
+  onItemsDelete: PropTypes.func.isRequired,
 };
 
 class MainPanel extends Component {
@@ -54,10 +66,16 @@ class MainPanel extends Component {
       createFileType: '',
       isDirentDetailShow: false,
       currentDirent: null,
-      currentFilePath: '',
+      direntPath: '',
       currentRepo: null,
       isRepoOwner: false,
+      progress: 0,
+      isProgressDialogShow: false,
+      isMoveDialogShow: false,
+      isCopyDialogShow: false,
+      isMutipleOperation: false,
     };
+    this.zip_token = null;
   }
 
   componentDidMount() {
@@ -75,12 +93,6 @@ class MainPanel extends Component {
     document.addEventListener('click', this.hideOperationMenu);
   }
 
-  componentWillReceiveProps(nextProps) {
-    // if (nextProps.path !== this.props.path) {
-    //   this.setState({isDirentDetailShow: false});
-    // }
-  }
-
   componentWillUnmount() {
     document.removeEventListener('click', this.hideOperationMenu);
   }
@@ -182,7 +194,7 @@ class MainPanel extends Component {
   onItemDetails = (dirent, direntPath) => {
     this.setState({
       currentDirent: dirent,
-      currentFilePath: direntPath,
+      direntPath: direntPath,
       isDirentDetailShow: true,
     });
   }
@@ -210,6 +222,120 @@ class MainPanel extends Component {
 
   }
 
+  onSelectedMoveToggle = () => {
+    this.setState({
+      isMutipleOperation: true,
+      isMoveDialogShow: true,
+      currentDirent: null,
+      direntPath: '',
+    });
+  }
+
+  onSelectedCopyToggle = () => {
+    this.setState({
+      isMutipleOperation: true,
+      isCopyDialogShow: true,
+      currentDirent: null,
+      direntPath: '',
+    });
+  }
+
+  onItemMoveToggle = (dirent, direntPath) => {
+    this.setState({
+      isMutipleOperation: false,
+      isMoveDialogShow: true,
+      currentDirent: dirent,
+      direntPath: direntPath,
+    });
+  }
+  
+  onItemCopyToggle = (dirent, direntPath) => {
+    this.setState({
+      isMutipleOperation: false,
+      isCopyDialogShow: true,
+      currentDirent: dirent,
+      direntPath: direntPath
+    });
+  }
+
+  onCancelMove = () => {
+    this.setState({isMoveDialogShow: false});
+  }
+
+  onCancelCopy = () => {
+    this.setState({isCopyDialogShow: false});
+  }
+
+  onItemsDownload = () => {
+    let selectedDirentList = this.props.selectedDirentList;
+    if (selectedDirentList.length) {
+      if (selectedDirentList.length === 1 && !selectedDirentList[0].isDir()) {
+        let direntPath = Utils.joinPath(this.props.path, selectedDirentList[0].name);
+        let url = URLDecorator.getUrl({type: 'download_file_url', repoID: repoID, filePath: direntPath});
+        location.href= url;
+        return;
+      }
+      let selectedDirentNames = selectedDirentList.map(dirent => {
+        return dirent.name;
+      });
+      this.setState({isProgressDialogShow: true, progress: 0});
+      seafileAPI.zipDownload(repoID, this.props.path, selectedDirentNames).then(res => {
+        this.zip_token = res.data['zip_token'];
+        this.addDownloadAnimation();
+        this.interval = setInterval(this.addDownloadAnimation, 1000);
+      });
+    }
+  }
+
+  onItemDownload = (dirent, direntPath) => {
+    if (dirent.type === 'dir') {
+      this.setState({isProgressDialogShow: true, progress: 0});
+      seafileAPI.zipDownload(repoID, this.props.path, dirent.name).then(res => {
+        this.zip_token = res.data['zip_token'];
+        this.addDownloadAnimation();
+        this.interval = setInterval(this.addDownloadAnimation, 1000);
+      }).catch(() => {
+        clearInterval(this.interval);
+        // Toast.error(gettext(''));
+        //todo;
+      });
+    } else {
+      let url = URLDecorator.getUrl({type: 'download_file_url', repoID: repoID, filePath: direntPath});
+      location.href = url;
+    }
+  }
+
+  addDownloadAnimation = () => {
+    let _this = this;
+    let token = this.zip_token;
+    seafileAPI.queryZipProgress(token).then(res => {
+      let data = res.data;
+      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
+        });
+        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;
+    seafileAPI.cancelZipTask(zip_token).then(res => {
+      this.setState({
+        isProgressDialogShow: false,
+      });
+    });
+  }
+
   render() {
     let path = this.props.path;
     path = path[path.length - 1] === '/' ? path.slice(0, path.length - 1) : path;
@@ -244,7 +370,16 @@ class MainPanel extends Component {
         <div className="main-panel-top panel-top">
           <div className="cur-view-toolbar border-left-show">
             <span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title={gettext('Side Nav Menu')} onClick={this.onSideNavMenuClick}></span>
-            <div className="file-operation">
+            <div className="dir-operation">
+              {this.props.isDirentSelected &&
+                <div className="operation mutiple-dirents-operation">
+                  <button className="btn btn-secondary operation-item op-icon sf2-icon-move" title={gettext('Move')} onClick={this.onSelectedMoveToggle}></button>
+                  <button className="btn btn-secondary operation-item op-icon sf2-icon-copy" title={gettext('Copy')} onClick={this.onSelectedCopyToggle}></button>
+                  <button className="btn btn-secondary operation-item op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.props.onItemsDelete}></button>
+                  <button className="btn btn-secondary operation-item op-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemsDownload}></button>
+                </div>
+              }
+              {!this.props.isDirentSelected &&
                 <div className="operation">
                   {
                     this.props.permission === 'rw' &&
@@ -263,6 +398,7 @@ class MainPanel extends Component {
                     </Fragment>
                   }
                 </div>
+              }
               {
                 this.state.uploadMenuShow &&
                 <ul className="menu dropdown-menu" style={this.state.operationMenuStyle}>
@@ -321,13 +457,17 @@ class MainPanel extends Component {
                         onItemClick={this.props.onItemClick}
                         onItemDelete={this.props.onItemDelete}
                         onItemRename={this.props.onItemRename}
-                        onItemMove={this.props.onItemMove}
+                        onItemDownload={this.onItemDownload}
-                        onItemCopy={this.props.onItemCopy}
+                        onItemMoveToggle={this.onItemMoveToggle}
+                        onItemCopyToggle={this.onItemCopyToggle}
                         onItemDetails={this.onItemDetails}
                         isDirentListLoading={this.props.isDirentListLoading}
                         updateDirent={this.props.updateDirent}
                         currentRepo={this.state.currentRepo}
                         isRepoOwner={this.state.isRepoOwner}
+                        isAllItemSelected={this.props.isAllDirentSelected}
+                        onAllItemSelected={this.props.onAllDirentSelected}
+                        onItemSelected={this.props.onItemSelected}
                       />
                       <FileUploader
                         ref={uploader => this.uploader = uploader}
@@ -346,7 +486,7 @@ class MainPanel extends Component {
             <div className="cur-view-detail">
               <DirentDetail
                 dirent={this.state.currentDirent}
-                direntPath={this.state.currentFilePath}
+                direntPath={this.state.direntPath}
                 onItemDetailsClose={this.onItemDetailsClose}
                 onFileTagChanged={this.onFileTagChanged}
               />
@@ -368,6 +508,34 @@ class MainPanel extends Component {
             onAddFolder={this.onAddFolder}
           />
         }
+        {this.state.isMoveDialogShow &&
+          <MoveDirentDialog
+            path={this.props.path}
+            isMutipleOperation={this.state.isMutipleOperation}
+            selectedDirentList={this.props.selectedDirentList}
+            dirent={this.state.currentDirent}
+            direntPath={this.state.direntPath}
+            onItemMove={this.props.onItemMove}
+            onItemsMove={this.props.onItemsMove}
+            onCancelMove={this.onCancelMove}
+          />
+        }
+        {this.state.isCopyDialogShow &&
+          <CopyDirentDialog
+            path={this.props.path}
+            isMutipleOperation={this.state.isMutipleOperation}
+            selectedDirentList={this.props.selectedDirentList}
+            dirent={this.state.currentDirent}
+            direntPath={this.state.direntPath}
+            onItemCopy={this.props.onItemCopy}
+            onItemsCopy={this.props.onItemsCopy}
+            onCancelCopy={this.onCancelCopy}
+          />
+        }
+        {this.state.isProgressDialogShow &&
+          <ZipDownloadDialog progress={this.state.progress} onCancelDownload={this.onCancelDownload}
+          />
+        }
       </div>
     );
   }

frontend/src/repo-wiki-mode.js

@@ -39,6 +39,9 @@ class Wiki extends Component {
       lastModified: '',
       latestContributor: '',
       permission: '',
+      isDirentSelected: false,
+      isAllDirentSelected: false,
+      selectedDirentList: [],
     };
     window.onpopstate = this.onpopstate;
   }
@@ -156,7 +159,7 @@ class Wiki extends Component {
     let index   = direntPath.lastIndexOf('/');
     let dirPath = direntPath.slice(0, index + 1);
     let dirName = direntPath.slice(index + 1);
-    seafileAPI.moveDir(repoID, repo.repo_id, copyToDirentPath, dirPath, dirName).then(() => {
+    seafileAPI.copyDir(repoID, repo.repo_id, copyToDirentPath, dirPath, dirName).then(() => {
       this.copyTreeNode(direntPath, copyToDirentPath, repo);
       let message = gettext('Successfully copied %(name)s.');
       message = message.replace('%(name)s', dirName);
@@ -171,12 +174,12 @@ class Wiki extends Component {
   switchViewMode = (mode) => {
     let dirPath;
     let tree = this.state.treeData;
-    let node = tree.getNodeByPath(this.state.filePath);
+    let node = tree.getNodeByPath(this.state.path);
     if (node.isDir()) {
-      dirPath = this.state.filePath;
+      dirPath = this.state.path;
     } else {
-      const index = this.state.filePath.lastIndexOf('/');
+      const index = this.state.path.lastIndexOf('/');
-      dirPath = this.state.filePath.substring(0, index);
+      dirPath = this.state.path.substring(0, index);
     }
 
     cookie.save('view_mode', mode, { path: '/' });
@@ -276,7 +279,7 @@ class Wiki extends Component {
       }
       return item;
     });
-    this.setState({direnList: newDirentList});
+    this.setState({direntList: newDirentList});
   }
 
   onLinkClick = (event) => {
@@ -317,6 +320,7 @@ class Wiki extends Component {
 
   onMainNavBarClick = (nodePath) => {
     //just for dir
+    this.resetSelected();
     let tree = this.state.treeData.clone();
     let node = tree.getNodeByPath(nodePath);
     tree.expandNode(node);
@@ -326,6 +330,7 @@ class Wiki extends Component {
   }
 
   onDirentClick = (direntPath) => {
+    this.resetSelected();
     let tree = this.state.treeData.clone();
     let node = tree.getNodeByPath(direntPath);
     let parentNode = tree.findNodeParentFromTree(node);
@@ -344,6 +349,68 @@ class Wiki extends Component {
     }
   }
 
+  onDirentSelected = (dirent) => {
+    let direntList = this.state.direntList.map(item => {
+      if (item.name === dirent.name) {
+        item.isSelected = !item.isSelected;
+      }
+      return item;
+    });
+    let selectedDirentList = direntList.filter(item => {
+      return item.isSelected;
+    });
+
+    if (selectedDirentList.length) {
+      this.setState({isDirentSelected: true});
+      if (selectedDirentList.length === direntList.length) {
+        this.setState({
+          isAllDirentSelected: true,
+          direntList: direntList,
+          selectedDirentList: selectedDirentList,
+        });
+      } else {
+        this.setState({
+          isAllDirentSelected: false,
+          direntList: direntList,
+          selectedDirentList: selectedDirentList
+        });
+      }
+    } else {
+      this.setState({
+        isDirentSelected: false,
+        isAllDirentSelected: false,
+        direntList: direntList,
+        selectedDirentList: []
+      })
+    }
+  }
+
+  onAllDirentSelected = () => {
+    if (this.state.isAllDirentSelected) {
+      let direntList = this.state.direntList.map(item => {
+        item.isSelected = false;
+        return item;
+      });
+      this.setState({
+        isDirentSelected: false,
+        isAllDirentSelected: false,
+        direntList: direntList,
+        selectedDirentList: [],
+      });
+    } else {
+      let direntList = this.state.direntList.map(item => {
+        item.isSelected = true;
+        return item;
+      });
+      this.setState({
+        isDirentSelected: true,
+        isAllDirentSelected: true,
+        direntList: direntList,
+        selectedDirentList: direntList,
+      });
+    }
+  }
+
   onMainPanelItemRename = (dirent, newName) => {
     let path = Utils.joinPath(this.state.path, dirent.name);
     this.renameItem(path, dirent.isDir(), newName);
@@ -379,7 +446,6 @@ class Wiki extends Component {
   }
 
   deleteDirent(direntPath) {
-    let newPath = '';
     if (direntPath === this.state.path) {
       // The deleted item is current item
       let parentPath = Utils.getDirName(direntPath);
@@ -418,28 +484,79 @@ class Wiki extends Component {
     this.setState({direntList: direntList});
   }
 
+  onMoveItems = (destRepo, destDirentPath) => {
+    let direntPaths = this.getSelectedDirentPaths();
+    let dirNames = this.getSelectedDirentNames();
+
+    seafileAPI.moveDir(repoID, destRepo.repo_id, destDirentPath, this.state.path, dirNames).then(() => {
+      direntPaths.forEach(direntPath => {
+        this.moveTreeNode(direntPath, destDirentPath, destRepo);
+        this.moveDirent(direntPath);
+      });
+      let message = gettext('Successfully moved %(name)s.');
+      message = message.replace('%(name)s', dirNames);
+      Toast.success(message);
+    }).catch(() => {
+      let message = gettext('Failed to move %(name)s');
+      message = message.replace('%(name)s', dirNames);
+      Toast.error(message);
+    })
+  }
+
+  onCopyItems = (destRepo, destDirentPath) => {
+    let direntPaths = this.getSelectedDirentPaths();
+    let dirNames = this.getSelectedDirentNames();
+
+    seafileAPI.copyDir(repoID, destRepo.repo_id, destDirentPath, this.state.path, dirNames).then(() => {
+      direntPaths.forEach(direntPath => {
+        this.copyTreeNode(direntPath, destDirentPath, destRepo);
+      });
+      let message = gettext('Successfully copied %(name)s.');
+      message = message.replace('%(name)s', dirNames);
+      Toast.success(message);
+    }).catch(() => {
+      let message = gettext('Failed to copy %(name)s');
+      message = message.replace('%(name)s', dirNames);
+      Toast.error(message);
+    })
+  }
+
+  onDeleteItems = () => {
+    let direntPaths = this.getSelectedDirentPaths();
+    let dirNames = this.getSelectedDirentNames();
+
+    seafileAPI.deleteMutipleDirents(repoID, this.state.path, dirNames).then(res => {
+      direntPaths.forEach(direntPath => {
+        let node = this.state.treeData.getNodeByPath(direntPath);
+        this.deleteTreeNode(node);
+        this.deleteDirent(direntPath);
+      });
+    });
+  }
+
   onFileTagChanged = (dirent, direntPath) => {
     seafileAPI.listFileTags(repoID, direntPath).then(res => {
       let fileTags = res.data.file_tags.map(item => {
         return new FileTag(item);
-      })
+      });
       this.updateDirent(dirent, 'file_tags', fileTags);
-    })
+    });
   }
 
   onTreeNodeClick = (node) => {
+    this.resetSelected();
     if (!this.state.pathExist) {
       this.setState({pathExist: true});
     }
     if (node instanceof Node && node.isMarkdown()) {
       let tree = this.state.treeData.clone();
       this.setState({treeData: tree});
-      if (node.path !== this.state.filePath) {
+      if (node.path !== this.state.path) {
         this.showFile(node.path);
       }
     } else if (node instanceof Node && node.isDir()) {
       let tree = this.state.treeData.clone();
-      if (this.state.filePath === node.path) {
+      if (this.state.path === node.path) {
         if (node.isExpanded) {
           tree.collapseNode(node);
         } else {
@@ -447,7 +564,7 @@ class Wiki extends Component {
         }
       }
       this.setState({treeData: tree});
-      if (node.path !== this.state.filePath) {
+      if (node.path !== this.state.path) {
         this.showDir(node.path);
       }
     } else {
@@ -617,6 +734,29 @@ class Wiki extends Component {
     return path;
   }
 
+  getSelectedDirentPaths = () => {
+    let paths = [];
+    this.state.selectedDirentList.forEach(selectedDirent => {
+      paths.push(Utils.joinPath(this.state.path, selectedDirent.name));
+    });
+    return paths;
+  }
+
+  getSelectedDirentNames = () => {
+    let names = [];
+    this.state.selectedDirentList.forEach(selectedDirent => {
+      names.push(selectedDirent.name);
+    });
+    return names;
+  }
+
+  resetSelected = () => {
+    this.setState({
+      isDirentSelected: false,
+      isAllDirentSelected: false,
+    });
+  }
+
   render() {
     return (
       <div id="main" className="wiki-main">
@@ -644,6 +784,7 @@ class Wiki extends Component {
           lastModified={this.state.lastModified}
           latestContributor={this.state.latestContributor}
           direntList={this.state.direntList}
+          selectedDirentList={this.state.selectedDirentList}
           switchViewMode={this.switchViewMode}
           updateDirent={this.updateDirent}
           onLinkClick={this.onLinkClick}
@@ -651,6 +792,7 @@ class Wiki extends Component {
           onSearchedClick={this.onSearchedClick}
           onMainNavBarClick={this.onMainNavBarClick}
           onItemClick={this.onDirentClick}
+          onItemSelected={this.onDirentSelected}
           onItemDelete={this.onMainPanelItemDelete}
           onItemRename={this.onMainPanelItemRename}
           onItemMove={this.onMoveItem}
@@ -658,6 +800,12 @@ class Wiki extends Component {
           onAddFile={this.onAddFile}
           onAddFolder={this.onAddFolder}
           onFileTagChanged={this.onFileTagChanged}
+          isDirentSelected={this.state.isDirentSelected}
+          isAllDirentSelected={this.state.isAllDirentSelected}
+          onAllDirentSelected={this.onAllDirentSelected}
+          onItemsMove={this.onMoveItems}
+          onItemsCopy={this.onCopyItems}
+          onItemsDelete={this.onDeleteItems}
         />
       </div>
     );

media/css/seahub_react.css

@@ -78,6 +78,8 @@
 .sf2-icon-cancel:before {content:"\e01f"}
 .sf2-icon-tag:before {content:"\e037"}
 .sf2-icon-minus:before {content:"\e01c"}
+.sf2-icon-move:before {content:"\e029"}
+.sf2-icon-copy:before {content:"\e028"}
 
 /* common class and element style*/
 a { color:#eb8205; }