Merge pull request #262 from FlowFuse/248-notification-color

Allow definition of ui-notification colour
FlowFuse · Oct 12, 2023 · 94c70d6 · 94c70d6
2 parents d70eec9 + c8717ac
commit 94c70d6
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 3 deletions.
diff --git a/nodes/widgets/ui_notification.html b/nodes/widgets/ui_notification.html
@@ -1,3 +1,13 @@
+<style>
+    #ui-chart-colors input[type="color"] {
+        font-weight: bold;
+    }
+    #ui-chart-colors input[type="color"]::-webkit-color-swatch,
+    #ui-chart-colors input[type="color"]::-moz-color-swatch {
+        border: none;
+    }
+</style>
+
 <script type="text/javascript">
     (function () {
         RED.nodes.registerType('ui-notification', {
@@ -6,6 +16,8 @@
             defaults: {
                 ui: { type: 'ui-base', value: '', required: true },
                 position: { value: 'top right' },
+                colorDefault: { value: true },
+                color: { value: null },
                 displayTime: { value: '3' },
                 showCountdown: { value: true },
                 outputs: { value: 0 },
@@ -37,6 +49,16 @@
                         $('#node-notification-dismissText').hide()
                     }
                 })
+
+                $('#node-input-colorDefault').on('change', function () {
+                    const defaultColor = $('#node-input-colorDefault').is(':checked')
+                    console.log(defaultColor)
+                    if (defaultColor) {
+                        $('#node-input-color').hide()
+                    } else {
+                        $('#node-input-color').show()
+                    }
+                })
 
                 // use jQuery UI tooltip to convert the plain old title attribute to a nice tooltip
                 $('.ui-node-popover-title').tooltip({
@@ -71,6 +93,14 @@
             <option value="center center">Center</option>
         </select>
     </div>
+    <div class="form-row">
+        <label for="node-input-color"><i class="fa fa-paint-brush"></i> Color</label>
+        <div style="display: inline-flex; gap: 8px; align-items: center;">
+            <input type="checkbox" id="node-input-colorDefault" style="width: auto; margin: 0;">
+            <label for="node-input-colorDefault" style="margin: 0; line-height: 34px;">Default</label>
+            <input type="color" id="node-input-color" placeholder="#FFFFFF">
+        </div>
+    </div>
     <div class="form-row" id="node-toast-displaytime">
         <label for="node-input-displayTime"><i class="fa fa-clock-o"></i> Timeout (S)</label>
         <input type="text" id="node-input-displayTime" placeholder="[msg.timeout]">

diff --git a/ui/src/widgets/ui-notification/UINotification.vue b/ui/src/widgets/ui-notification/UINotification.vue
@@ -6,9 +6,10 @@
         multi-line
         :timeout="-1"
         :location="props.position"
+        :style="{'--nrdb-ui-notification-color': color}"
     >
         <div v-if="props.showCountdown" class="nrdb-ui-notification-countdown">
-            <v-progress-linear v-model="countdown" color="primary" style="display: block; width: 100%" />
+            <v-progress-linear v-model="countdown" :color="messages[id]?.color || (props.colorDefault ? 'primary' : color)" style="display: block; width: 100%" />
         </div>
         <div v-if="!props.raw">{{ value }}</div>
         <!-- eslint-disable-next-line vue/no-v-html -->
@@ -51,6 +52,15 @@ export default {
         ...mapState('data', ['messages']),
         value: function () {
             return this.messages[this.id]?.payload
+        },
+        color: function () {
+            if (this.messages[this.id]?.color) {
+                return this.messages[this.id]?.color
+            } else if (this.props.colorDefault) {
+                return 'rgb(var(--v-theme-group-background))'
+            } else {
+                return this.props.color
+            }
         }
     },
     created () {
@@ -99,15 +109,34 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
 .nrdb-ui-notification {
     padding-top: 64px;
 }
 
+.nrdb-ui-notification .v-snackbar__wrapper {
+    background-color: rgb(var(--v-theme-group-background));
+    color: rgb(var(--v-theme-on-group-background));
+    border-left: 6px solid var(--nrdb-ui-notification-color);
+}
+.nrdb-ui-notification .v-snackbar__content {
+    padding-left: 8px;
+}
+
 .nrdb-ui-notification-countdown {
     position: absolute;
-    width: 100%;
+    width: calc(100% + 6px);
     top: 0;
     left: 0;
+    margin-left: -6px;
+    border-top-left-radius: 4px;
+}
+
+.nrdb-ui-notification h1,
+.nrdb-ui-notification h2,
+.nrdb-ui-notification h3,
+.nrdb-ui-notification h4 {
+    margin: 0.5rem 0;
 }
+
 </style>