Merge pull request #31538 from phillip-kruger/dev-ui-warning-color

quarkusio · Mar 3, 2023 · c9e2085 · c9e2085
2 parents 9579d9d + db6bb46
commit c9e2085
Show file tree

Hide file tree

Showing 5 changed files with 237 additions and 167 deletions.
diff --git a/...ions/datasource/deployment/src/main/resources/dev-ui/datasources/qwc-datasources-reset.js b/...ions/datasource/deployment/src/main/resources/dev-ui/datasources/qwc-datasources-reset.js
@@ -9,7 +9,7 @@ import '@vaadin/progress-bar';
 import '@vaadin/checkbox';
 import { until } from 'lit/directives/until.js';
 import '@vaadin/grid';
-import 'qui/qui-alert.js';
+import 'qui-alert';
 import { columnBodyRenderer } from '@vaadin/grid/lit.js';
 import '@vaadin/grid/vaadin-grid-sort-column.js';
 
@@ -90,7 +90,9 @@ export class QwcDatasourcesReset extends LitElement {
             if (ds === "<default>") {
                 ds = "default"
             }
-            this._message = html`<qui-alert theme="success" content="The datasource <code>${ds}</code> has been cleared." dismissible icon></qui-alert>`
+            this._message = html`<qui-alert level="success" showIcon>
+                                    <span>The datasource <code>${ds}</code> has been cleared.</span>
+                                 </qui-alert>`
         });
     }
 

diff --git a/...-http/deployment/src/main/java/io/quarkus/devui/deployment/BuildTimeContentProcessor.java b/...-http/deployment/src/main/java/io/quarkus/devui/deployment/BuildTimeContentProcessor.java
@@ -79,6 +79,7 @@ InternalImportMapBuildItem createKnownInternalImportMap(NonApplicationRootPathBu
         internalImportMapBuildItem.add("qwc/", contextRoot + "qwc/");
         internalImportMapBuildItem.add("qui/", contextRoot + "qui/");
         internalImportMapBuildItem.add("qui-badge", contextRoot + "qui/qui-badge.js");
+        internalImportMapBuildItem.add("qui-alert", contextRoot + "qui/qui-alert.js");
         internalImportMapBuildItem.add("icon/", contextRoot + "icon/");
         internalImportMapBuildItem.add("font/", contextRoot + "font/");
         internalImportMapBuildItem.add("controller/", contextRoot + "controller/");
@@ -462,6 +463,18 @@ private static void computeColors(Map<String, Map<String, String>> themes, Map<S
         light.put("--lumo-error-contrast-color", Color.from(0, 100, 100).toString());
         dark.put("--lumo-error-contrast-color", Color.from(0, 100, 100).toString());
 
+        // Warning
+        light.put("--lumo-warning-color-10pct", Color.from(30, 100, 50, 0.1).toString());
+        dark.put("--lumo-warning-color-10pct", Color.from(30, 100, 50, 0.1).toString());
+        light.put("--lumo-warning-color-50pct", Color.from(30, 100, 50, 0.5).toString());
+        dark.put("--lumo-warning-color-50pct", Color.from(30, 100, 50, 0.5).toString());
+        light.put("--lumo-warning-color", Color.from(30, 100, 50).toString());
+        dark.put("--lumo-warning-color", Color.from(30, 100, 50).toString());
+        light.put("--lumo-warning-text-color", Color.from(30, 89, 42).toString());
+        dark.put("--lumo-warning-text-color", Color.from(30, 100, 67).toString());
+        light.put("--lumo-warning-contrast-color", Color.from(0, 100, 100).toString());
+        dark.put("--lumo-warning-contrast-color", Color.from(0, 100, 100).toString());
+
         // Success
         light.put("--lumo-success-color-10pct", Color.from(145, 72, 31, 0.1).toString());
         dark.put("--lumo-success-color-10pct", Color.from(145, 65, 42, 0.1).toString());

diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/controller/notifier.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/controller/notifier.js
@@ -9,30 +9,65 @@ import '@vaadin/horizontal-layout';
  */
 class Notifier {
 
-    showInfoMessage(message, position = "bottom-start", duration = 5) {
-        this.showMessage("font-awesome-solid:circle-info", "primary", message, position, duration);
+    showPrimaryInfoMessage(message, position, duration = 5) {
+        if(position === null)position = "bottom-start";
+        let color = "var(--lumo-primary-contrast-color)";
+        this.showMessage("font-awesome-solid:circle-info", "primary", message, color, duration, position);
     }
 
-    showSuccessMessage(message, position = "bottom-start", duration = 5) {
-        this.showMessage("font-awesome-solid:circle-check", "success", message, position, duration);
+    showInfoMessage(message, position, duration = 5) {
+        if(position === null)position = "bottom-start";
+        let color = "var(--lumo-primary-text-color)";
+        this.showMessage("font-awesome-solid:circle-info", "contrast", message, color, duration, position);
     }
 
-    showWarningMessage(message, position = "bottom-start", duration = 5) {
-        this.showMessage("font-awesome-solid:triangle-exclamation", "contrast", message, position, duration);
+    showPrimarySuccessMessage(message, position, duration = 5) {
+        if(position === null)position = "bottom-start";
+        let color = "var(--lumo-primary-contrast-color)";
+        this.showMessage("font-awesome-solid:circle-check", "success", message, color, duration, position);
+    }
+
+    showSuccessMessage(message, position, duration = 5) {
+        if(position === null)position = "bottom-start";
+        let color = "var(--lumo-success-text-color)";
+        this.showMessage("font-awesome-solid:circle-check", "contrast", message, color, duration, position);
+    }
+
+    showPrimaryWarningMessage(message, position, duration = 5) {
+        if(position === null)position = "bottom-start";
+        let color = "var(--lumo-primary-contrast-color)";
+        this.showMessage("font-awesome-solid:triangle-exclamation", "contrast", message, color, duration, position);
+    }
+
+    showWarningMessage(message, position, duration = 5) {
+        if(position === null)position = "bottom-start";
+        let color = "var(--lumo-warning-text-color)";
+        this.showMessage("font-awesome-solid:triangle-exclamation", "contrast", message, color, duration, position);
     }
 
-    showErrorMessage(message, position = "bottom-start", duration = 5) {
-        this.showMessage("font-awesome-solid:circle-exclamation", "error", message, position, duration);
+    showPrimaryErrorMessage(message, position, duration = 5) {
+        if(position === null)position = "bottom-start";
+        let color = "var(--lumo-primary-contrast-color)";
+        this.showMessage("font-awesome-solid:circle-exclamation", "error", message, color, duration, position);
     }
 
-    showMessage(icon, theme, message, position = "bottom-start") {
+    showErrorMessage(message, position, duration = 5) {
+        if(position === null)position = "bottom-start";
+        let color = "var(--lumo-error-text-color)";
+        this.showMessage("font-awesome-solid:circle-exclamation", "contrast", message, color, duration, position);
+    }
+
+    showMessage(icon, theme, message, color, duration, position = "bottom-start") {
 
-        const notification = Notification.show(html`<vaadin-horizontal-layout theme="spacing" style="align-items: center;">
-                                                        <vaadin-icon icon="${icon}"></vaadin-icon> <span>${message}</span></vaadin-horizontal-layout>`, {
+        let d = duration * 1000;
+
+        const notification = Notification.show(html`<vaadin-horizontal-layout theme="spacing" style="align-items: center;color:${color};">
+                                                        <vaadin-icon icon="${icon}"></vaadin-icon> <span>${message}</span>
+                                                    </vaadin-horizontal-layout>`, {
             position: position,
+            duration: d,
+            theme: theme,
         });
-
-        notification.setAttribute('theme', theme);
     }
 }