mgr/dashboard: Added cdsGrid to header

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

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts
index 70e60684cd2195cb4aa80816939ffbf2568e10e8..2c79c71aa237f213c34c5b183045812872eaf614 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts
@@ -86,7 +86,7 @@ import { NotificationFooterComponent } from './notification-panel/notification-f
     PlaceholderModule,
     TagModule,
     StructuredListModule,
-    SearchModule
+    SearchModule,
   ],
   declarations: [
     AboutComponent,

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts
index 2864776c94c6f5994db79e214305370fcf5aff6c..3759bd2a45ec744a508ad69c37bee0c22c3eaf57 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts
@@ -33,7 +33,7 @@ export class NavigationComponent implements OnInit, OnDestroy {
   clusterTokenStatus: object = {};
   summaryData: any;
 
-  isNotifPanelOpen = false;
+  isNotifPanelOpen = true;
   showMenuSidebar = true;
 
   simplebar = {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.html
index 0038d3c8ae8b4c6a99488f0e077341a2cda03e04..89267f69081bfc5dd65a30e869f0bbccd47bba8a 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.html
@@ -1,21 +1,32 @@
-<div class="notification-header">
-  <div class="notification-header__top">
-    <div class="notification-header__title">
-      <cds-text i18n>Tasks and Notifications</cds-text>
+<div cdsGrid
+     class="notification-header"
+     [useCssGrid]="true"
+     [fullWidth]="true">
+  <div cdsCol
+       [columnNumbers]="{sm: 8, md: 8, lg: 16}">
+    <div cdsRow>
+      <div cdsGrid
+           [useCssGrid]="true"
+           [fullWidth]="true">
+         <cds-text
+              [columnNumbers]="{sm: 8, md: 8, lg: 11}"
+              i18n
+              cdsCol
+              class="notification-header__title">Tasks and Notifications</cds-text>
+          <button
+            cdsCol
+            [columnNumbers]="{sm: 8, md: 8, lg: 5}"
+            class="notification-header__dismiss-btn"
+            i18n
+            cdsButton="ghost"
+            size="sm"
+            (click)="onDismissAll()">
+            Dismiss all
+          </button>    
+      </div>
     </div>
-
-    <button
-      i18n
-      cdsButton="ghost"
-      size="sm"
-      (click)="onDismissAll()"
-      class="notification-header__dismiss-btn">
-      Dismiss all
-    </button>
-  </div>
-
-  <div class="notification-header__toggle">
     <cds-toggle
+      cdsRow
       [checked]="isMuted"
       size="sm"
       (checkedChange)="onToggleMute()"
@@ -24,4 +35,4 @@
       hideLabel="true"> <!--hides the toggle state values (like "On/Off" in the toggle button)-->
     </cds-toggle>
   </div>
-</div>
+</div>
\ No newline at end of file

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 c8ab9aa30cbbb384cf86254e1b67504dd87fffd3..d903bf860d62be9e0f664d9f371ccae06f1e7daf 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
@@ -3,55 +3,21 @@
 @use '@carbon/styles/scss/theme';
 
 .notification-header {
-  display: flex;
-  flex-direction: column;
-  padding: spacing.$spacing-04;
-  border-bottom: 1px solid theme.$border-subtle-01;
-  background-color: theme.$layer-01;
-  flex-shrink: 0;
+   position: sticky;
+    z-index: 2;
+    padding: spacing.$spacing-03 spacing.$spacing-05;
+    background-color: theme.$layer-01;
+    border-block-end: 1px solid theme.$border-subtle-01;
+    inset-block-start: 0;
 
-  &__top {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    margin-bottom: spacing.$spacing-03;
-  }
 
   &__title {
-    h4 {
-      @include type.type-style('heading-compact-01');
-
-      color: theme.$text-primary;
-      margin: 0;
-    }
+    @include type.type-style('heading-compact-01');
+    margin-top: 0.4rem;
   }
 
   &__dismiss-btn {
     color: theme.$text-primary;
-
-    &:hover {
-      color: theme.$link-primary;
-    }
   }
 
-  &__toggle {
-    cds-toggle {
-      margin: 0;
-
-      ::ng-deep {
-        .cds--toggle__label-text {
-          color: theme.$text-primary;
-        }
-
-        .cds--toggle__label {
-          color: theme.$text-primary;
-        }
-
-        .cds--toggle__text {
-          color: theme.$text-primary;
-        }
-      }
-    }
-  }
 }