✨ feat: show error message

xiangechen · May 16, 2024 · 9101e7d · 9101e7d
1 parent 4bd9315
commit 9101e7d
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 5 deletions.
diff --git a/packages/chili-core/src/foundation/pubsub.ts b/packages/chili-core/src/foundation/pubsub.ts
@@ -35,6 +35,7 @@ export interface PubSubEventMap {
     displayHome: (show: boolean) => void;
     showProperties(document: IDocument, nodes: INode[]): void;
     showToast: (message: I18nKeys, ...args: any[]) => void;
+    displayError: (message: string) => void;
     showPermanent: (action: () => Promise<void>, message: I18nKeys, ...args: any[]) => void;
     showDialog: (title: I18nKeys, context: IPropertyChanged, callback: () => void) => void;
     viewCursor: (cursor: CursorType) => void;

diff --git a/packages/chili-ui/src/mainWindow.ts b/packages/chili-ui/src/mainWindow.ts
@@ -30,7 +30,8 @@ export class MainWindow implements IWindow {
 
     private _initSubs(app: IApplication) {
         const displayHome = debounce(this.displayHome, 100);
-        PubSub.default.sub("showToast", Toast.show);
+        PubSub.default.sub("showToast", Toast.info);
+        PubSub.default.sub("displayError", Toast.error);
         PubSub.default.sub("showDialog", Dialog.show);
         PubSub.default.sub("showPermanent", Permanent.show);
         PubSub.default.sub("activeViewChanged", (view) => displayHome(app, view === undefined));

diff --git a/packages/chili-ui/src/toast/toast.module.css b/packages/chili-ui/src/toast/toast.module.css
@@ -6,7 +6,18 @@
     z-index: 10000;
     border-radius: 0.8em;
     background-color: rgba(0, 0, 0, 0.75);
-    color: #fff;
     font-size: 1.2em;
     padding: 1em;
 }
+
+.info {
+    color: #fff;
+}
+
+.error {
+    color: #ff0000;
+}
+
+.warning {
+    color: #ffc107;
+}
diff --git a/packages/chili-ui/src/toast/toast.ts b/packages/chili-ui/src/toast/toast.ts
@@ -7,13 +7,25 @@ import style from "./toast.module.css";
 export class Toast {
     private static _lastToast: [number, HTMLElement] | undefined;
 
-    static readonly show = (message: I18nKeys, ...args: any[]) => {
+    static readonly info = (message: I18nKeys, ...args: any[]) => {
+        Toast.display(style.info, I18n.translate(message, ...args));
+    };
+
+    static readonly error = (message: string) => {
+        Toast.display(style.error, message);
+    };
+
+    static readonly warn = (message: string) => {
+        Toast.display(style.warning, message);
+    };
+
+    private static display(type: string, message: string) {
         if (this._lastToast) {
             clearTimeout(this._lastToast[0]);
             this._lastToast[1].remove();
         }
 
-        const toast = label({ className: style.toast, textContent: I18n.translate(message, ...args) });
+        const toast = label({ className: `${style.toast} ${type}`, textContent: message });
         document.body.appendChild(toast);
         this._lastToast = [
             window.setTimeout(() => {
@@ -22,5 +34,5 @@ export class Toast {
             }, 2000),
             toast,
         ];
-    };
+    }
 }
diff --git a/packages/chili/src/services/commandService.ts b/packages/chili/src/services/commandService.ts
@@ -54,6 +54,7 @@ export class CommandService implements IService {
         await command
             .execute(this.app)
             .catch((err) => {
+                PubSub.default.pub("displayError", err);
                 Logger.error(err);
             })
             .finally(() => {