bugfix(z-index): Fixed several z-index problems, progress-bar inside nya deltagare is now hidden behind the header when scrolling. (TV-551)

Squashed commit of the following:

commit 87b53c3d03f71b5cfd6e632e39a3f2723deecdee
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Sep 16 10:57:12 2021 +0200

    Fixed issue with z-indexes

apps/mina-sidor-fa/src/app/components/toast-list/toast-list.component.scss

@@ -1,9 +1,10 @@
 @import 'mixins/list';
+@import 'variables/z-index';
 
 .toast-list {
   position: fixed;
   pointer-events: none;
-  z-index: 9999;
+  z-index: $msfa__z-index-toast;
   margin: var(--digi--layout--gutter);
   top: 0;
   right: 0;

apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.component.scss

@@ -2,6 +2,8 @@
 @import 'variables/gutters';
 
 .employee-form {
+  position: relative;
+
   &__header {
     display: flex;
     justify-content: space-between;

apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.component.html

@@ -1,5 +1,5 @@
 <div class="employees-list">
-  <msfa-loader *ngIf="employeesLoading" [fullScreen]="true"></msfa-loader>
+  <msfa-loader *ngIf="employeesLoading" type="absolute"></msfa-loader>
   <digi-table af-variation="secondary">
     <table>
       <thead>

apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.scss

@@ -1,4 +1,5 @@
 @import 'variables/gutters';
+@import 'variables/z-index';
 
 .avrop {
   &__header {
@@ -16,6 +17,10 @@
     margin-bottom: $digi--layout--gutter--xl;
   }
 
+  &__progress-bar {
+    z-index: $msfa__z-index-default;
+  }
+
   &__select-handledare {
     max-width: var(--digi--typography--text--max-width);
     margin-bottom: $digi--layout--gutter--xl;

apps/mina-sidor-fa/src/app/pages/start/start.component.html

@@ -3,7 +3,6 @@
     <section class="start">
       <header class="start__header">
         <div class="start__image-wrapper">
-          <h1 class="start__heading">Välkommen {{ userFullName$ | async }}</h1>
           <digi-media-image
             af-src="/assets/images/start_1280w.jpg"
             af-srcset="
@@ -15,6 +14,7 @@
             af-width="1000"
             af-height="465"
           ></digi-media-image>
+          <h1 class="start__heading">Välkommen {{ userFullName$ | async }}</h1>
         </div>
         <ng-container *ngIf="isAuthorizedUser(userRoles); else unauthorizedRef">
           <p>
@@ -36,5 +36,5 @@
 </msfa-layout>
 
 <ng-template #loadingRef>
-  <msfa-loader [fullScreen]="true"></msfa-loader>
+  <msfa-loader type="full-screen"></msfa-loader>
 </ng-template>

apps/mina-sidor-fa/src/app/pages/start/start.component.scss

@@ -15,6 +15,5 @@
     background-color: var(--digi--ui--color--complementary-alt);
     color: var(--digi--typography--color--text--light);
     padding: $digi--layout--gutter--s $digi--layout--gutter--l;
-    z-index: 1;
   }
 }

apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.scss

@@ -1,14 +1,15 @@
+@import 'mixins/list';
 @import 'variables/colors';
 @import 'variables/gutters';
 @import 'variables/navigation';
-@import 'mixins/list';
+@import 'variables/z-index';
 
 .sidebar {
   display: flex;
   flex-direction: column;
   position: sticky;
   top: $msfa__navigation-height;
-  z-index: 1;
+  z-index: $msfa__z-index-sidebar;
 
   &__list {
     @include msfa__reset-list;

apps/mina-sidor-fa/src/app/shared/components/layout/components/skip-to-content/skip-to-content.component.scss

@@ -1,4 +1,5 @@
 @import 'variables/colors';
+@import 'variables/z-index';
 
 .skip-to-content {
   position: absolute;
@@ -8,7 +9,7 @@
   width: 0;
   height: 0;
   overflow: hidden;
-  z-index: 1000;
+  z-index: $msfa__z-index-skip-to-content;
   text-align: center;
   padding: var(--digi--layout--gutter--xs) var(--digi--layout--gutter);
   display: block;

apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.html

@@ -19,4 +19,4 @@
   <msfa-footer class="msfa__footer"></msfa-footer>
 </div>
 
-<msfa-loader *ngIf="(userLoading$ | async) || (rolesLoading$ | async)" [fullScreen]="true"></msfa-loader>
+<msfa-loader *ngIf="(userLoading$ | async) || (rolesLoading$ | async)" type="full-screen"></msfa-loader>

apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.scss

@@ -1,6 +1,7 @@
-@import 'variables/navigation';
 @import 'variables/breakpoints';
 @import 'variables/gutters';
+@import 'variables/navigation';
+@import 'variables/z-index';
 
 .msfa {
   position: relative;
@@ -17,7 +18,7 @@
     grid-area: header;
     position: sticky;
     top: 0;
-    z-index: 1;
+    z-index: $msfa__z-index-header;
   }
 
   &__sidebar {

apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.scss

@@ -1,4 +1,5 @@
 @import 'mixins/backdrop';
+@import 'variables/z-index';
 
 @keyframes spinning {
   to {
@@ -11,8 +12,12 @@
   align-items: center;
   justify-content: center;
 
+  &--absolute {
+    @include msfa__backdrop($msfa__z-index-backdrop, false);
+  }
+
   &--full-screen {
-    @include msfa__backdrop(1000);
+    @include msfa__backdrop($msfa__z-index-backdrop);
   }
 
   &__spinner {

apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { LoaderType } from '@msfa-enums/loader-type.enum';
 
 @Component({
   selector: 'msfa-loader',
@@ -8,11 +9,11 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 })
 export class LoaderComponent {
   private readonly _defaultClass = 'loader';
-  @Input() fullScreen = false;
+  @Input() type: LoaderType;
 
   get classes(): string {
-    if (this.fullScreen) {
+    if (this.type) {
-      return `${this._defaultClass} ${this._defaultClass}--full-screen`;
+      return `${this._defaultClass} ${this._defaultClass}--${this.type as string}`;
     }
     return this._defaultClass;
   }

apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.scss

@@ -30,7 +30,6 @@
 
   &__clear-btn {
     position: absolute;
-    z-index: 20;
     right: 0;
     top: 0;
     display: block;

apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.scss

@@ -1,11 +1,11 @@
-@import 'variables/colors';
 @import 'mixins/list';
+@import 'variables/colors';
 @import 'variables/gutters';
+@import 'variables/z-index';
 
 .tree-nodes-selector {
   &__panel-wrapper {
     position: relative;
-    z-index: 1;
   }
 
   &__toggle-panel-btn {
@@ -21,7 +21,6 @@
     font-size: var(--digi--typography--font-size--m);
     color: var(--digi--ui--color--background--overlay--opaque);
     background-color: var(--digi--ui--color--background);
-    z-index: 1;
 
     &:focus {
       border-color: var(--digi--ui--color--focus--light);
@@ -60,7 +59,7 @@
 
   &__panel {
     position: absolute;
-    z-index: 10;
+    z-index: $msfa__z-index-selector-panel;
     top: 100%;
     left: 0;
     margin-top: $digi--layout--gutter--xs;

apps/mina-sidor-fa/src/app/shared/enums/loader-type.enum.ts

@@ -0,0 +1,4 @@
+export enum LoaderType {
+  FULL_SCREEN = 'fullscreen',
+  ABSOLUTE = 'absolute',
+}

apps/mina-sidor-fa/src/styles/mixins/_backdrop.scss

@@ -1,9 +1,16 @@
-@mixin msfa__backdrop($zIndex: 0) {
+@import 'variables/z-index';
-  position: absolute;
+
+@mixin msfa__backdrop($zIndex: $msfa__z-index-default, $fullScreen: true) {
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: $zIndex;
   background-color: rgba(255, 255, 255, 0.4);
+
+  @if $fullScreen {
+    position: fixed;
+  } @else {
+    position: absolute;
+  }
 }

apps/mina-sidor-fa/src/styles/styles.scss

@@ -3,6 +3,7 @@
 @import 'mixins/backdrop';
 @import 'mixins/icon';
 @import 'mixins/link';
+@import 'variables/z-index';
 
 * {
   font-family: var(--digi--typography--font-family);
@@ -65,7 +66,11 @@ dl {
   }
 
   &__backdrop {
-    @include msfa__backdrop;
+    @include msfa__backdrop($msfa__z-index-default, false);
+
+    &--full-screen {
+      @include msfa__backdrop($msfa__z-index-backdrop);
+    }
   }
 
   &__digi-icon {

apps/mina-sidor-fa/src/styles/variables/_z-index.scss

@@ -0,0 +1,8 @@
+$msfa__z-index-default: 0;
+$msfa__z-index-header: 1;
+$msfa__z-index-sidebar: 1;
+$msfa__z-index-footer: 0;
+$msfa__z-index-selector-panel: 1;
+$msfa__z-index-backdrop: 1000;
+$msfa__z-index-skip-to-content: 2;
+$msfa__z-index-toast: 9999;