[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
haiwen · Dec 11, 2023 · 8712b7d · 8712b7d
1 parent 7efe677
commit 8712b7d
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 43 deletions.
diff --git a/frontend/src/components/dialog/convert-markdown-dialog.js b/frontend/src/components/dialog/convert-markdown-dialog.js
diff --git a/frontend/src/components/toast/alert.js b/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' };
     }

diff --git a/frontend/src/components/toast/toast.js b/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.

diff --git a/frontend/src/components/toast/toaster.js b/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' });
   };

diff --git a/frontend/src/css/convert-markdown.css b/frontend/src/css/convert-markdown.css
diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/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>
     );
   }