Add custom style to notification (project-chip#1135)

* Add custom style to notification * Modify popup window in zcldomainclusterview * Modify list style and position in popup
SiliconLabs · Sep 20, 2023 · 7818be8 · 7818be8
1 parent e9dbfc5
commit 7818be8
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 52 deletions.
diff --git a/src/components/ZclCustomZclView.vue b/src/components/ZclCustomZclView.vue
@@ -73,11 +73,13 @@ limitations under the License.
               </q-item-section>
               <q-item-section side>
                 <q-icon
-                  :class="{'cursor-pointer': 
-                          iconName(sessionPackage.pkg.id) == 'error' 
-                       || iconName(sessionPackage.pkg.id) == 'warning'}"
-                  :name="iconName(sessionPackage.pkg.id)" 
-                  :color="iconColor(sessionPackage.pkg.id)" 
+                  :class="{
+                    'cursor-pointer':
+                      iconName(sessionPackage.pkg.id) == 'error' ||
+                      iconName(sessionPackage.pkg.id) == 'warning',
+                  }"
+                  :name="iconName(sessionPackage.pkg.id)"
+                  :color="iconColor(sessionPackage.pkg.id)"
                   size="2em"
                   @click="() => handleIconClick(sessionPackage.pkg.id)"
                 />
@@ -88,13 +90,13 @@ limitations under the License.
                     <div class="row items-center">
                       <div class="col-1">
                         <q-icon
-                          :name="iconName(sessionPackage.pkg.id)" 
-                          :color="iconColor(sessionPackage.pkg.id)" 
+                          :name="iconName(sessionPackage.pkg.id)"
+                          :color="iconColor(sessionPackage.pkg.id)"
                           size="2em"
                         ></q-icon>
                       </div>
                       <div class="text-h6 col">
-                        {{ sessionPackage.pkg.path }} 
+                        {{ sessionPackage.pkg.path }}
                       </div>
                       <div class="col-1 text-right">
                         <q-btn dense flat icon="close" v-close-popup>
@@ -103,18 +105,18 @@ limitations under the License.
                       </div>
                     </div>
                     <div v-if="notisData[sessionPackage.pkg.id]?.hasError">
-                      <div 
-                        class="text-h6" 
-                        style="margin-top: 15px; 
-                              padding-left: 20px"
+                      <div
+                        class="text-h6"
+                        style="margin-top: 15px; padding-left: 20px"
                       >
                         Errors
                       </div>
                       <ul>
-                        <li 
-                          v-for="(error, index) in 
-                                populateNotifications(sessionPackage.pkg.id, 
-                                'ERROR')" 
+                        <li
+                          v-for="(error, index) in populateNotifications(
+                            sessionPackage.pkg.id,
+                            'ERROR'
+                          )"
                           :key="'error' + index"
                           style="margin-bottom: 10px"
                         >
@@ -123,21 +125,21 @@ limitations under the License.
                       </ul>
                     </div>
                     <div v-if="notisData[sessionPackage.pkg.id]?.hasWarning">
-                      <div 
-                        class="text-h6" 
-                        style="margin-top: 15px; 
-                        padding-left: 20px"
+                      <div
+                        class="text-h6"
+                        style="margin-top: 15px; padding-left: 20px"
                       >
                         Warnings
                       </div>
                       <ul>
-                        <li 
-                          v-for="(warning, index) in 
-                                populateNotifications(sessionPackage.pkg.id, 
-                                'WARNING')" 
+                        <li
+                          v-for="(warning, index) in populateNotifications(
+                            sessionPackage.pkg.id,
+                            'WARNING'
+                          )"
                           :key="index"
                           style="margin-bottom: 10px"
-                          >
+                        >
                           {{ warning.message }}
                         </li>
                       </ul>
@@ -166,7 +168,7 @@ export default {
   watch: {
     packages(newPackages) {
       this.loadPackageNotification(newPackages)
-    }
+    },
   },
   methods: {
     getFileName(path) {
@@ -194,7 +196,8 @@ export default {
             this.error = packageStatus.err
             Notify.create({
               message: this.error,
-              color: 'negative',
+              type: 'warning',
+              classes: 'custom-notification notification-warning',
               position: 'top',
               html: true,
             })
@@ -233,11 +236,10 @@ export default {
           errors: [],
         }
         notifications.forEach((notification) => {
-          if (notification.type == "ERROR") {
+          if (notification.type == 'ERROR') {
             currentPackage.hasError = true
             currentPackage.errors.push(notification)
-          }
-          else {
+          } else {
             currentPackage.warnings.push(notification)
           }
         })
@@ -263,15 +265,15 @@ export default {
       }
     },
     handleIconClick(packageId) {
-      let iconName = this.iconName(packageId);
+      let iconName = this.iconName(packageId)
       if (iconName === 'error' || iconName === 'warning') {
-        this.dialogData[packageId] = true;
+        this.dialogData[packageId] = true
       }
     },
     populateNotifications(packageId, type) {
-      let key = type == "ERROR" ? "errors" : "warnings"
+      let key = type == 'ERROR' ? 'errors' : 'warnings'
       return this.notisData[packageId][key]
-    }
+    },
   },
   mounted() {
     if (this.$serverGet != null) {
@@ -287,7 +289,7 @@ export default {
           }
         }
       )
-    }  
+    }
   },
   data() {
     return {

diff --git a/src/components/ZclDomainClusterView.vue b/src/components/ZclDomainClusterView.vue
@@ -47,8 +47,8 @@ limitations under the License.
               :cover="false"
               :offset="[0, -54]"
               v-model="uc_label"
-              class="bg-white text-black"
-              style="overflow-wrap: break-word; padding: 0px"
+              class="custom-notification notification-warning q-p-lg"
+              style="overflow-wrap: break-word"
             >
               <div v-show="missingRequiredUcComponents(props.row).length">
                 <div class="row items-center" items-center style="padding: 0px">
@@ -57,18 +57,13 @@ limitations under the License.
                     class="text-amber q-mr-sm"
                     style="font-size: 1.5rem"
                   ></q-icon>
-                  <div class="vertical-middle text-subtitle2">
-                    Required SLC Component not installed
-                  </div>
-                </div>
-
-                <div class="row no-wrap">
-                  Install following components to continue endpoint
-                  configuration.
-                </div>
-
-                <div class="row no-wrap">
-                  <div class="col justify-start">
+                  <div>
+                    <strong class="vertical-middle text-subtitle2">
+                      Required SLC Component not installed
+                    </strong>
+                    <br />
+                    Install following components to continue endpoint
+                    configuration.
                     <ul style="list-style-type: none; padding-left: 0px">
                       <li
                         v-for="id in missingRequiredUcComponents(props.row)"
@@ -78,8 +73,10 @@ limitations under the License.
                       </li>
                     </ul>
                   </div>
+                </div>
 
-                  <div class="justify-end">
+                <div class="row no-wrap justify-end">
+                  <div class="col-2">
                     <q-btn
                       unelevated
                       text-color="primary"

diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
@@ -207,6 +207,43 @@ $warning: #f2c037;
       }
     }
   }
+  .custom-notification {
+    background-color: rgba(253, 253, 253, 0.8) !important;
+    -webkit-backdrop-filter: blur(10px) !important;
+    backdrop-filter: blur(10px) !important;
+    border-radius: 12px !important;
+    color: black !important;
+    ul {
+      padding-left: 15px;
+      margin-top: 0px;
+      margin-bottom: 0px;
+      list-style: circle;
+    }
+  }
+  .notification-positive {
+    border: 2px solid #29c20b !important;
+    .q-notification__icon--additional,
+    .text-positive,
+    strong {
+      color: #29c20b !important;
+    }
+  }
+  .notification-warning {
+    border: 2px solid #f5ac0e !important;
+    .q-notification__icon--additional,
+    .text-warning,
+    strong {
+      color: #f5ac0e !important;
+    }
+  }
+  .notification-negative {
+    border: 2px solid #f90e0e !important;
+    .q-notification__icon--additional,
+    .text-negative,
+    strong {
+      color: #f90e0e !important;
+    }
+  }
 }
 
 .body--dark {
@@ -393,6 +430,43 @@ $warning: #f2c037;
       }
     }
   }
+  .custom-notification {
+    background-color: rgba(25, 25, 25, 0.8) !important;
+    -webkit-backdrop-filter: blur(10px) !important;
+    backdrop-filter: blur(10px) !important;
+    border-radius: 12px !important;
+    color: white !important;
+    ul {
+      padding-left: 15px;
+      margin-top: 0px;
+      margin-bottom: 0px;
+      list-style: circle;
+    }
+  }
+  .notification-positive {
+    border: 2px solid #0ef917 !important;
+    .q-notification__icon--additional,
+    .text-positive,
+    strong {
+      color: #0ef917 !important;
+    }
+  }
+  .notification-warning {
+    border: 2px solid #f9c80e !important;
+    .q-notification__icon--additional,
+    .text-warning,
+    strong {
+      color: #f9c80e !important;
+    }
+  }
+  .notification-negative {
+    border: 2px solid #f90e0e !important;
+    .q-notification__icon--additional,
+    .text-negative,
+    strong {
+      color: #f90e0e !important;
+    }
+  }
 }
 
 h2 {

diff --git a/src/util/util.js b/src/util/util.js
@@ -64,9 +64,10 @@ export function notifyComponentUpdateStatus(componentIdStates, added) {
     }
 
     if (Array.isArray(components) && components.length) {
-      let color = updated ? 'positive' : 'negative'
+      let type = updated ? 'positive' : 'negative'
       let verb = updated ? 'were' : "couldn't be"
       let action = added ? 'added' : 'removed'
+      let classes = `custom-notification notification-${type}`
 
       let msg = `<div><strong>The following components ${verb} ${action}.</strong></div>`
       msg += `<div><span style="text-transform: capitalize"><ul>`
@@ -100,7 +101,8 @@ export function notifyComponentUpdateStatus(componentIdStates, added) {
       // notify ui
       Notify.create({
         message: msg,
-        color,
+        type: type,
+        classes: classes,
         position: 'top',
         html: true,
       })