mgr/dashboard: side-panel enhancements

fixes: https://tracker.ceph.com/issues/74486

Signed-off-by: Naman Munet <naman.munet@ibm.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
index 947c80aece04432011a3c82f275a029bee6d3798..07d3ccea59c30c32a4678da7eaedd9f80f3e4bb3 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
@@ -43,7 +43,8 @@ import {
   InlineLoadingModule,
   TagModule,
   LinkModule,
-  LayerModule
+  LayerModule,
+  ThemeModule
 } from 'carbon-components-angular';
 import EditIcon from '@carbon/icons/es/edit/20';
 import CodeIcon from '@carbon/icons/es/code/16';
@@ -151,7 +152,8 @@ import { ProductiveCardComponent } from './productive-card/productive-card.compo
     InlineLoadingModule,
     TagModule,
     LinkModule,
-    LayerModule
+    LayerModule,
+    ThemeModule
   ],
   declarations: [
     SparklineComponent,

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.html
index 3d5ea03cd1dda26a3f740c72cbc3864f25142c7d..74bc95dd5cc0a14c9f13bb7551615a9443702fd8 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.html
@@ -3,7 +3,9 @@
      *ngIf="expanded && overlay"></div>
 
 <cds-panel [expanded]="expanded"
-           [attr.panel-size]="size">
+           [attr.panel-size]="size"
+           [cdsLayer]="layer"
+           [cdsTheme]="theme">
   <div>
     <cds-icon-button kind="ghost"
                      class="float-end"
@@ -11,7 +13,7 @@
                      (click)="close()">
       <svg cdsIcon="close"></svg>
     </cds-icon-button>
-    <div class="panel-header"
+    <div class="panel-header cds--type-heading-03"
          *ngIf="headerText">
     {{ headerText }}
     </div>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.scss
index 62cd221977acd9925da3e4c8e1571de383c6a669..f3c44c62d7196e034f6536c383a2bc29de462a15 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.scss
@@ -15,8 +15,15 @@
     inline-size: 40rem;
   }
 
+  &[panel-size='xl'] .cds--header-panel--expanded {
+    inline-size: 60rem;
+  }
+
+  &[panel-size='2xl'] .cds--header-panel--expanded {
+    inline-size: 80rem;
+  }
+
   .cds--header-panel--expanded {
-    background-color: vv.$white;
     max-inline-size: 100%;
     overflow: hidden;
     display: grid;
@@ -24,12 +31,12 @@
   }
 
   .panel-header {
-    padding: layout.$spacing-04 layout.$spacing-04 0 layout.$spacing-04;
+    padding: layout.$spacing-05 layout.$spacing-05 0 layout.$spacing-05;
   }
 
   .panel-content {
-    overflow: auto;
-    padding: 0 layout.$spacing-04 0 layout.$spacing-04;
+    overflow-x: hidden;
+    padding: 0 layout.$spacing-05 0 layout.$spacing-05;
   }
 
   .panel-footer {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.ts
index bd6c3d5f894b9d1b7c1374168c40ab7397ba3f8b..19661afad3cd5e29817a7c0057b6acf0fddab1fd 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.ts
@@ -10,7 +10,9 @@ export class SidePanelComponent {
   @Input() expanded = false;
   @Input() headerText = '';
   @Input() overlay = true;
-  @Input() size: 'sm' | 'md' | 'lg' = 'lg';
+  @Input() size: 'sm' | 'md' | 'lg' | 'xl' | '2xl' = 'lg';
+  @Input() layer: number;
+  @Input() theme: string;
 
   @Output() closed = new EventEmitter<void>();