[dir view, toast] redesigned the 'converting' tip for md & sdoc file … (#5822)

* [dir view, toast] redesigned the 'converting' tip for md & sdoc file items; added a new type of toast

* [toast] updated the loading icon of the 'notify-in-progress' toast

frontend/src/components/dialog/convert-markdown-dialog.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import { Modal, ModalBody } from 'reactstrap';
-import Loading from '../loading';
-import { gettext } from '../../utils/constants';
-
-import '../../css/convert-markdown.css';
-
-function ConvertMarkdownDialog() {
-  return (
-    <Modal isOpen={true} centered={true} className="container-markdown-container">
-      <ModalBody className='container-markdown-content'>
-        <Loading />
-        <div className='d-flex justify-content-center'>{gettext('Converting')}...</div>
-      </ModalBody>
-    </Modal>
-  );
-}
-
-export default ConvertMarkdownDialog;

frontend/src/components/toast/alert.js

@@ -78,6 +78,8 @@ class Alert extends React.PureComponent {
         return { borderStyle: this.containerBorderWarn, iconColor: css({color: 'rgb(217, 130, 43)'}) , iconClass: 'fa fa-exclamation-triangle' };
       case 'none':
         return { borderStyle: this.containerBorderNotify, iconColor: css({color: 'rgb(16, 112, 202)'}), iconClass: 'fa fa-exclamation-circle' };
+      case 'notify-in-progress':
+        return { borderStyle: this.containerBorderNotify, iconColor: css({width: '15px', height: '15px', margin: '3px'}), iconClass: 'loading-icon' };
       case  'danger':
         return { borderStyle: this.containerBorderDanger, iconColor: css({color: 'rgb(236, 76, 71)'}), iconClass: 'fa fa-exclamation-circle' };
     }

frontend/src/components/toast/toast.js

@@ -67,7 +67,7 @@ export default class Toast extends React.PureComponent {
     /**
      * The type of the alert.
      */
-    intent: PropTypes.oneOf(['none', 'success', 'warning', 'danger']).isRequired,
+    intent: PropTypes.oneOf(['none', 'notify-in-progress', 'success', 'warning', 'danger']).isRequired,
 
     /**
      * The title of the alert.

frontend/src/components/toast/toaster.js

@@ -51,6 +51,10 @@ export default class Toaster {
     return this.notifyHandler(title, { ...settings, intent: 'none' });
   };
 
+  notifyInProgress = (title, settings = {}) => {
+    return this.notifyHandler(title, { ...settings, intent: 'notify-in-progress' });
+  };
+
   success = (title, settings = {}) => {
     return this.notifyHandler(title, { ...settings, intent: 'success' });
   };

frontend/src/css/convert-markdown.css

@@ -1,14 +0,0 @@
-.container-markdown-container {
-  width: 150px !important;
-}
-
-.container-markdown-container .modal-content {
-  height: 150px;
-}
-
-.container-markdown-container .modal-content .modal-body {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}

frontend/src/pages/lib-content-view/lib-content-view.js

@@ -21,7 +21,6 @@ import LibContentContainer from './lib-content-container';
 import FileUploader from '../../components/file-uploader/file-uploader';
 import CopyMoveDirentProgressDialog from '../../components/dialog/copy-move-dirent-progress-dialog';
 import DeleteFolderDialog from '../../components/dialog/delete-folder-dialog';
-import ConvertMarkdownDialog from '../../components/dialog/convert-markdown-dialog';
 
 const propTypes = {
   pathPrefix: PropTypes.array.isRequired,
@@ -81,7 +80,6 @@ class LibContentView extends React.Component {
       asyncOperationType: 'move',
       asyncOperationProgress: 0,
       asyncOperatedFilesLength: 0,
-      isConvertLoading: false,
     };
 
     this.oldonpopstate = window.onpopstate;
@@ -1263,7 +1261,7 @@ class LibContentView extends React.Component {
   onConvertItem = (dirent, dstType) => {
     let path = Utils.joinPath(this.state.path, dirent.name);
     let repoID = this.props.repoID;
-    this.setState({isConvertLoading: true});
+    toaster.notifyInProgress(gettext('Converting, please wait...'));
     seafileAPI.convertFile(repoID, path, dstType).then((res) => {
       let newFileName = res.data.obj_name;
       let parentDir = res.data.parent_dir;
@@ -1275,13 +1273,11 @@ class LibContentView extends React.Component {
       }
 
       this.addDirent(newFileName, 'file', res.data.size);
-      this.setState({isConvertLoading: false});
       let message = gettext('Successfully converted the file.');
       toaster.success(message);
 
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
-      this.setState({isConvertLoading: false});
       if (errMessage === gettext('Error')) {
         let name = Utils.getFileName(path);
         errMessage = gettext('Failed to convert {name}.').replace('{name}', name);
@@ -1963,7 +1959,7 @@ class LibContentView extends React.Component {
     }
 
     let enableDirPrivateShare = false;
-    let { currentRepoInfo, userPerm, isCopyMoveProgressDialogShow, isDeleteFolderDialogOpen, isConvertLoading } = this.state;
+    let { currentRepoInfo, userPerm, isCopyMoveProgressDialogShow, isDeleteFolderDialogOpen } = this.state;
     let showShareBtn = Utils.isHasPermissionToShare(currentRepoInfo, userPerm);
     let isRepoOwner = currentRepoInfo.owner_email === username;
     let isVirtual = currentRepoInfo.is_virtual;
@@ -2127,9 +2123,6 @@ class LibContentView extends React.Component {
             toggleDialog={this.toggleDeleteFolderDialog}
           />
         )}
-        {isConvertLoading && (
-          <ConvertMarkdownDialog />
-        )}
       </Fragment>
     );
   }