mgr/dashboard: Adding more style to the notification sidebar

This commit improves the notification sidebar styling by adding a border on the left side and the color of the border aligns with the type of the warning (succes, info or danger).

Fixes: https://tracker.ceph.com/issues/47950
Signed-off-by: Nizamudeen A <nia@redhat.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html
index d22069c9841856078bd659640a5de9c6e821ad27..6f55a882a3d1a32d6e3933e7e57b853b3bfcc5d0 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html
@@ -53,7 +53,8 @@
 
     <hr>
 
-    <div *ngFor="let notification of notifications; let i = index">
+    <div *ngFor="let notification of notifications; let i = index"
+         [ngClass]="notification.borderClass">
       <div class="card tc_notification border-0">
         <div class="row no-gutters">
           <div class="col-md-2 text-center">

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss
index 8bbb3b95feca76c4f88053a187b3dd43668e1fb4..f307edd4be6706cd27ec33a86fb6028dc89bb4ba 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss
@@ -23,7 +23,9 @@
 }
 
 .card-body {
-  padding-left: 5px;
+  padding-left: 0;
+  padding-right: 5px;
+  padding-top: 3px;
 }
 
 ngx-simplebar {
@@ -37,6 +39,10 @@ ngx-simplebar {
   padding: 5px 12px;
 }
 
+.btn-block {
+  width: 98%;
+}
+
 .btn-link .fa-trash-o {
   color: vv.$black;
 }
@@ -48,8 +54,11 @@ table {
 .row {
   margin-left: 0;
   margin-right: 0;
+  padding-bottom: 1rem;
+  padding-top: 1rem;
 }
 
-.fa-times {
-  margin-right: 10px;
+hr {
+  margin-bottom: 2px;
+  margin-top: 2px;
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-notification.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-notification.ts
index da06cd3df8a79035e9bfa87e79a531ce9ea7f77d..c283c5d801d23f86272aa83dd7cd8abb4b38147b 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-notification.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-notification.ts
@@ -28,9 +28,11 @@ export class CdNotification extends CdNotificationConfig {
   textClass: string;
   iconClass: string;
   duration: number;
+  borderClass: string;
 
   private textClasses = ['text-danger', 'text-info', 'text-success'];
   private iconClasses = [Icons.warning, Icons.info, Icons.check];
+  private borderClasses = ['border-danger', 'border-info', 'border-success'];
 
   constructor(private config: CdNotificationConfig = new CdNotificationConfig()) {
     super(config.type, config.title, config.message, config.options, config.application);
@@ -40,6 +42,7 @@ export class CdNotification extends CdNotificationConfig {
     this.timestamp = new Date().toJSON();
     this.iconClass = this.iconClasses[this.type];
     this.textClass = this.textClasses[this.type];
+    this.borderClass = this.borderClasses[this.type];
     this.isFinishedTask = config.isFinishedTask;
   }
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss
index 576320f5badf489b57fc2587ef75d3f2530cee97..04f365e6daacd253073bda62c1a687573e6eb4b6 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss
@@ -73,3 +73,15 @@ option {
 .text-pre {
   white-space: pre;
 }
+
+.border-danger {
+  border-left: 4px solid vv.$danger;
+}
+
+.border-info {
+  border-left: 4px solid vv.$info;
+}
+
+.border-success {
+  border-left: 4px solid vv.$success;
+}