From: Nizamudeen A <nia@redhat.com>
Date: Thu, 22 Oct 2020 13:28:19 +0000 (+0530)
Subject: mgr/dashboard: Adding more style to the notification sidebar
X-Git-Tag: v16.1.0~769^2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=d2bb9269f8e536f99d906b91de278b288a1780f9;p=ceph.git

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 d22069c98418..6f55a882a3d1 100644
--- 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 8bbb3b95feca..f307edd4be67 100644
--- 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 da06cd3df8a7..c283c5d801d2 100644
--- 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 576320f5badf..04f365e6daac 100644
--- 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;
+}