browser: Modal Dialog fixed display issues

eclipse-theia · Oct 13, 2021 · 0e98755 · 0e98755
1 parent 6abc784
commit 0e98755
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 13 deletions.
diff --git a/packages/core/src/browser/style/dialog.css b/packages/core/src/browser/style/dialog.css
@@ -127,3 +127,39 @@
     align-content: center;
     margin-right: calc(var(--theia-ui-padding)*1.5);
 }
+
+.p-Widget.dialogOverlay .dialogBlock .dialogContent .modal-Notification .icon .codicon.codicon-info.info {
+    color: var(--theia-editorInfo-foreground);
+    font-size: 2em;
+}
+
+.p-Widget.dialogOverlay .dialogBlock .dialogContent .modal-Notification .icon .codicon.codicon-warning.warning {
+    color: var(--theia-editorWarning-foreground);
+    font-size: 2em;
+}
+
+.p-Widget.dialogOverlay .dialogBlock .dialogContent .modal-Notification .icon .codicon.codicon-error.error {
+    color: var(--theia-editorError-foreground);
+    font-size: 2em;
+}
+
+.p-Widget.dialogOverlay .dialogBlock .dialogContent .modal-Notification .detail {
+    align-self: center;
+    order: 3;
+    max-width: 100px;
+    font-size: 11px;
+    flex: 1 100%;
+    position: absolute;
+    right: 232px;
+    bottom: -20px;
+    color: var(--theia-descriptionForeground);
+}
+
+.p-Widget.dialogOverlay .dialogBlock .dialogContent .modal-Notification .text {
+    padding: 10px;
+}
+
+.p-Widget.dialogOverlay .dialogBlock .dialogContent .modal-Notification .icon {
+    font-size: 17px;
+    padding: 5px 10px;
+}
diff --git a/packages/plugin-ext/src/common/plugin-api-rpc.ts b/packages/plugin-ext/src/common/plugin-api-rpc.ts
@@ -383,6 +383,7 @@ export enum MainMessageType {
 }
 
 export interface MainMessageOptions {
+    detail?: string;
     modal?: boolean
     onCloseActionHandle?: number
 }

diff --git a/packages/plugin-ext/src/main/browser/dialogs/modal-notification.ts b/packages/plugin-ext/src/main/browser/dialogs/modal-notification.ts
@@ -18,7 +18,8 @@ import { Message } from '@theia/core/shared/@phosphor/messaging';
 import { codiconArray, Key } from '@theia/core/lib/browser';
 import { AbstractDialog } from '@theia/core/lib/browser/dialogs';
 import '../../../../src/main/browser/dialogs/style/modal-notification.css';
-import { MainMessageItem } from '../../../common/plugin-api-rpc';
+import { MainMessageItem, MainMessageOptions } from '../../../common/plugin-api-rpc';
+import { FrontendApplicationConfigProvider } from '@theia/core/lib/browser/frontend-application-config-provider';
 
 export enum MessageType {
     Error = 'error',
@@ -29,14 +30,15 @@ export enum MessageType {
 const NOTIFICATION = 'modal-Notification';
 const ICON = 'icon';
 const TEXT = 'text';
+const DETAIL = 'detail';
 
 @injectable()
 export class ModalNotification extends AbstractDialog<string | undefined> {
 
     protected actionTitle: string | undefined;
 
     constructor() {
-        super({ title: 'Theia' });
+        super({ title: FrontendApplicationConfigProvider.get().applicationName });
     }
 
     protected onCloseRequest(msg: Message): void {
@@ -48,12 +50,12 @@ export class ModalNotification extends AbstractDialog<string | undefined> {
         return this.actionTitle;
     }
 
-    showDialog(messageType: MessageType, text: string, actions: MainMessageItem[]): Promise<string | undefined> {
-        this.contentNode.appendChild(this.createMessageNode(messageType, text, actions));
+    showDialog(messageType: MessageType, text: string, options: MainMessageOptions, actions: MainMessageItem[]): Promise<string | undefined> {
+        this.contentNode.appendChild(this.createMessageNode(messageType, text, options, actions));
         return this.open();
     }
 
-    protected createMessageNode(messageType: MessageType, text: string, actions: MainMessageItem[]): HTMLElement {
+    protected createMessageNode(messageType: MessageType, text: string, options: MainMessageOptions, actions: MainMessageItem[]): HTMLElement {
         const messageNode = document.createElement('div');
         messageNode.classList.add(NOTIFICATION);
 
@@ -67,6 +69,13 @@ export class ModalNotification extends AbstractDialog<string | undefined> {
         const textElement = textContainer.appendChild(document.createElement('p'));
         textElement.textContent = text;
 
+        if (options.detail) {
+            const detailContainer = messageNode.appendChild(document.createElement('div'));
+            detailContainer.classList.add(DETAIL);
+            const detailElement = detailContainer.appendChild(document.createElement('p'));
+            detailElement.textContent = options.detail;
+        }
+
         actions.forEach((action: MainMessageItem) => {
             const button = this.createButton(action.title);
             button.classList.add('main');
@@ -80,7 +89,7 @@ export class ModalNotification extends AbstractDialog<string | undefined> {
                 'click');
         });
         if (!actions.some(action => action.isCloseAffordance === true)) {
-            this.appendCloseButton('close');
+            this.appendCloseButton('Cancel');
         }
 
         return messageNode;

diff --git a/packages/plugin-ext/src/main/browser/message-registry-main.ts b/packages/plugin-ext/src/main/browser/message-registry-main.ts
@@ -40,7 +40,7 @@ export class MessageRegistryMainImpl implements MessageRegistryMain {
                 type === MainMessageType.Warning ? MessageType.Warning :
                     MessageType.Info;
             const modalNotification = new ModalNotification();
-            return modalNotification.showDialog(messageType, message, actions);
+            return modalNotification.showDialog(messageType, message, options, actions);
         }
         switch (type) {
             case MainMessageType.Info:

diff --git a/packages/plugin-ext/src/plugin/message-registry.ts b/packages/plugin-ext/src/plugin/message-registry.ts
@@ -50,14 +50,17 @@ export class MessageRegistryExt {
             } else {
                 if ('modal' in optionsOrFirstItem) {
                     options.modal = optionsOrFirstItem.modal;
+                    if ('detail' in optionsOrFirstItem) {
+                        options.detail = optionsOrFirstItem.detail;
+                    }
                 }
             }
+            for (const item of rest) {
+                pushItem(item);
+            }
+            const actionHandle = await this.proxy.$showMessage(type, message, options, actions);
+            return actionHandle !== undefined ? items[actionHandle] : undefined;
         }
-        for (const item of rest) {
-            pushItem(item);
-        }
-        const actionHandle = await this.proxy.$showMessage(type, message, options, actions);
-        return actionHandle !== undefined ? items[actionHandle] : undefined;
-    }
 
+    }
 }
diff --git a/packages/plugin/src/theia.d.ts b/packages/plugin/src/theia.d.ts
@@ -2395,6 +2395,13 @@ declare module '@theia/plugin' {
      */
     export interface MessageOptions {
 
+        /*
+         * Human-readable detail message that is rendered
+         * less prominent. Note that detail is only shown
+         * for modal messages.
+         */
+        detail?: string;
+
         /**
          * Indicates that this message should be modal.
          */