mgr/dashboard: Add footer

Signed-off-by: Afreen Misbah <afreen@ibm.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.scss
index f6767694ad95e2322b3814b3ebc318ee5015c04d..bcf211a394e84c63d17f25d9d615cae9a10e8806 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.scss
@@ -10,9 +10,8 @@
   padding: $spacing-05 $spacing-05 $spacing-03;
   background-color: $layer-01;
   position: sticky;
-  top: 0;
   z-index: 2;
-  display: block;
+  inset-block-start: 3.6125rem;
 }
 
 .notification-timestamp {
@@ -110,9 +109,3 @@
   border-bottom: 1px solid $border-subtle-01;
 }
 
-:host {
-  display: block;
-  height: 100%;
-  overflow-y: auto;
-  background-color: $layer-01;
-}

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.html
index 4d6475a55e86badb0a4cb97252c9b008bf46414d..3afd57c71bdb3521edcb4a1a2aaacffff82eb256 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.html
@@ -2,6 +2,7 @@
   <cds-button
     kind="ghost"
     size="sm"
+    class="notification-footer__view-all-button"
     [routerLink]="['/notifications']"
     (click)="closePanel($event)"
     i18n>View all</cds-button>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.scss
index 0a513f7475a1fa6be2dd498a000e21582b114265..a2209232581e1d5266131249ee6168fc6df1fa6c 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.scss
@@ -2,16 +2,17 @@
 @use '@carbon/styles/scss/theme';
 
 .notification-footer {
+  position: sticky;
+  z-index: 2;
   display: flex;
-  justify-content: flex-start;
-  padding: spacing.$spacing-03;
-  border-top: 1px solid theme.$border-subtle-01;
-
-  cds-button {
+  align-items: center;
+  background-color: theme.$layer-01;
+  block-size: 2.5rem;
+  border-block-start: 1px solid theme.$border-subtle-01;
+  inset-block-end: 0;
+  min-block-size: 2.5rem;
+  &__view-all-button {
     color: theme.$text-primary;
-
-    &:hover {
-      color: theme.$link-primary;
-    }
+    padding: spacing.$spacing-03 spacing.$spacing-05;
   }
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.ts
index 5dcf0d39c367438208b4d46d090f13254a93fa3c..d62ff40fc2de23992d51ae390f48cc4c7402bdf4 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.ts
@@ -14,4 +14,5 @@ export class NotificationFooterComponent {
     event.stopPropagation();
     this.notificationService.toggleSidebar(false, true);
   }
+
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.scss
index d903bf860d62be9e0f664d9f371ccae06f1e7daf..87f8cb4a71f9691fb292f61e9ddb2837c4dd7502 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.scss
@@ -19,5 +19,4 @@
   &__dismiss-btn {
     color: theme.$text-primary;
   }
-
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.html
index 826957a020679f71585a054a1c693f0295b7b501..f23d47b02fac2e8dc240b825a1cda6464c5acc32 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.html
@@ -4,13 +4,14 @@
   cdsTheme="g10"
   class="notification-panel__container"
   hasScrollingContent="true"
+  (dismissAll)="handleDismissAll"
   @panelAnimation>
   <cds-modal-header
     [showCloseButton]="true">
     <cd-notification-header></cd-notification-header>
   </cds-modal-header>
-  <cd-notification-area></cd-notification-area>
-  <cds-modal-footer>
-      <cd-notification-footer></cd-notification-footer>
+    <cd-notification-area></cd-notification-area>
+  <cds-modal-footer *ngIf="showFooter">
+    <cd-notification-footer></cd-notification-footer>
   </cds-modal-footer>
 </cds-modal>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.ts
index 1eb245f4c84a3519e5991d7a9beebf38c74b79e1..f82a6a798a831d0267d8a382ccdf92b2ab2c7c0c 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.ts
@@ -21,6 +21,12 @@ import { trigger, transition, style, animate } from '@angular/animations';
 })
 export class NotificationPanelComponent {
   @Input() isPanelOpen: boolean = true;
+  showFooter = true;
 
   constructor(public notificationService: NotificationService) {}
+
+  handleDismissAll() {
+    this.showFooter = false;
+    // TODO: Also hoide if there is  afooter
+  }
 }