Merge branch 'main' into feature/remove-legeacy-mat-checkbox

Energinet-DataHub · Aug 25, 2023 · 067531a · 067531a
2 parents 0380ede + f5826e1
commit 067531a
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 5 deletions.
diff --git a/...dh/market-participant/actors/feature-actors/src/lib/drawer/dh-actor-drawer.component.html b/...dh/market-participant/actors/feature-actors/src/lib/drawer/dh-actor-drawer.component.html
@@ -21,7 +21,7 @@
     </watt-drawer-topbar>
 
     <watt-drawer-heading>
-      <h2 class="actor-heading">{{ actor?.name }}</h2>
+      <h2 class="actor-heading">{{ actor?.glnOrEicNumber }} {{ actor?.name }}</h2>
 
       <div class="actor-metadata">
         <div class="actor-metadata__item">

diff --git a/libs/ui-watt/src/lib/components/drawer/watt-drawer.component.ts b/libs/ui-watt/src/lib/components/drawer/watt-drawer.component.ts
@@ -30,10 +30,12 @@ import {
   Input,
   ElementRef,
   ViewChild,
+  inject,
 } from '@angular/core';
 
 import { WattButtonComponent } from '../button';
 import { WattSpinnerComponent } from '../spinner';
+import { WattCssCustomPropertiesService } from '../../utils/css-custom-properties.service';
 
 import { WattDrawerTopbarComponent } from './watt-drawer-topbar.component';
 import { WattDrawerActionsComponent } from './watt-drawer-actions.component';
@@ -51,6 +53,7 @@ export type WattDrawerSize = 'small' | 'normal' | 'large';
   imports: [A11yModule, MatSidenavModule, WattButtonComponent, WattSpinnerComponent, CommonModule],
 })
 export class WattDrawerComponent implements OnDestroy {
+  private cssCustomPropertiesService = inject(WattCssCustomPropertiesService);
   private static currentDrawer?: WattDrawerComponent;
 
   /** Used to adjust drawer size to best fit the content. */
@@ -133,6 +136,12 @@ export class WattDrawerComponent implements OnDestroy {
       WattDrawerComponent.currentDrawer = this;
       this.isOpen = true;
       this.cdr.detectChanges();
+
+      const value = this.cssCustomPropertiesService.getPropertyValue(
+        '--watt-toolbar-z-index-when-drawer-is-open'
+      );
+
+      this.cssCustomPropertiesService.setPropertyValue('--watt-toolbar-z-index', value);
     }
   }
 
@@ -144,6 +153,12 @@ export class WattDrawerComponent implements OnDestroy {
       WattDrawerComponent.currentDrawer = undefined;
       this.isOpen = false;
       this.closed.emit();
+
+      const value = this.cssCustomPropertiesService.getPropertyValue(
+        '--watt-toolbar-z-index-when-drawer-is-closed'
+      );
+
+      this.cssCustomPropertiesService.setPropertyValue('--watt-toolbar-z-index', value);
     }
   }
 }

diff --git a/libs/ui-watt/src/lib/components/shell/shell.component.scss b/libs/ui-watt/src/lib/components/shell/shell.component.scss
@@ -85,5 +85,5 @@
   background-color: var(--watt-color-neutral-white);
   border-bottom: 1px solid var(--watt-color-neutral-grey-300);
   height: var(--watt-space-xl);
-  z-index: 2;
+  z-index: var(--watt-toolbar-z-index);
 }
diff --git a/libs/ui-watt/src/lib/foundations/_variables.scss b/libs/ui-watt/src/lib/foundations/_variables.scss
@@ -97,4 +97,10 @@
 
   // shadows
   --watt-bottom-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.08);
+
+  // Topbar z-index
+  --watt-toolbar-z-index-when-drawer-is-open: "auto";
+  --watt-toolbar-z-index-when-drawer-is-closed: 2;
+
+  --watt-toolbar-z-index: var(--watt-toolbar-z-index-when-drawer-is-closed);
 }
diff --git a/libs/ui-watt/src/lib/utils/css-custom-properties.service.ts b/libs/ui-watt/src/lib/utils/css-custom-properties.service.ts
@@ -19,13 +19,17 @@ import { Inject, Injectable } from '@angular/core';
 
 @Injectable({ providedIn: 'root' })
 export class WattCssCustomPropertiesService {
+  private get rootElement() {
+    return this.document.documentElement;
+  }
+
   constructor(@Inject(DOCUMENT) private document: Document) {}
 
   public getPropertyValue(name: string): string {
-    return this.getComputedStyle().getPropertyValue(name);
+    return getComputedStyle(this.rootElement).getPropertyValue(name);
   }
 
-  private getComputedStyle() {
-    return getComputedStyle(this.document.documentElement);
+  public setPropertyValue(name: string, value: string): void {
+    this.rootElement.style.setProperty(name, value);
   }
 }