feat(navigation): Updated css to match the scetches. (TV-349)

Squashed commit of the following: commit 07b76ab978ee3e5244e413dfa79cde279a5f3bbb Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se> Date: Thu Aug 12 15:23:15 2021 +0200 Updated navigation and sidebar to somehow match the scetches
2021-08-12 15:34:51 +02:00
parent b4b71efe2c
commit 466abd1dee
12 changed files with 63 additions and 54 deletions
--- a/apps/dafa-web/src/app/components/toast-list/toast/toast.component.scss
+++ b/apps/dafa-web/src/app/components/toast-list/toast/toast.component.scss
@@ -35,6 +35,7 @@

  &__content {
    display: flex;
+    width: 100%;
    background-color: var(--digi--ui--color--background);
    flex-direction: column;
    justify-content: center;
--- a/apps/dafa-web/src/app/shared/components/icon/icon.component.html
+++ b/apps/dafa-web/src/app/shared/components/icon/icon.component.html
@@ -24,6 +24,19 @@
      d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
    ></path>
  </svg>
+
+  <svg
+    *ngIf="icon === iconType.CLIPBOARD"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 384 512"
+    width="25"
+    height="25"
+  >
+    <path
+      fill="currentColor"
+      d="M384 112v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h80c0-35.29 28.71-64 64-64s64 28.71 64 64h80c26.51 0 48 21.49 48 48zM192 40c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24m96 114v-20a6 6 0 0 0-6-6H102a6 6 0 0 0-6 6v20a6 6 0 0 0 6 6h180a6 6 0 0 0 6-6z"
+    ></path>
+  </svg>
 </digi-ng-icon-custom>

 <ng-template #DigiNgIcon>
--- a/apps/dafa-web/src/app/shared/components/icon/icon.component.scss
+++ b/apps/dafa-web/src/app/shared/components/icon/icon.component.scss
@@ -17,4 +17,7 @@
  &--xl {
    @include dafa__digi-ng-icon(1.5em);
  }
+  &--xxl {
+    @include dafa__digi-ng-icon(2em);
+  }
 }
--- a/apps/dafa-web/src/app/shared/components/icon/icon.component.ts
+++ b/apps/dafa-web/src/app/shared/components/icon/icon.component.ts
@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/c
 import { IconSize } from '@dafa-enums/icon-size.enum';
 import { IconType } from '@dafa-enums/icon-type.enum';

-const CUSTOM_ICONS: IconType[] = [IconType.HOME, IconType.SETTINGS, IconType.PLUS];
+const CUSTOM_ICONS: IconType[] = [IconType.HOME, IconType.SETTINGS, IconType.PLUS, IconType.CLIPBOARD];

@Component({
  selector: 'dafa-icon',
--- a/apps/dafa-web/src/app/shared/components/layout/components/navigation/navigation.component.html
+++ b/apps/dafa-web/src/app/shared/components/layout/components/navigation/navigation.component.html
@@ -1,4 +1,3 @@
-<!-- <digi-layout-block af-variation="${LayoutBlockVariation.PROFILE}"> -->
 <div class="navigation">
  <div class="navigation__logo-wrapper">
    <a [routerLink]="['/']" aria-label="Till startsidan för FA Mina sidor">
@@ -6,22 +5,17 @@
    </a>
  </div>
  <ul class="navigation__list dafa__hide-on-print">
-    <li class="navigation__item navigation__item--user">
-      <span *ngIf="user" class="navigation__text">{{ user.fullName }}</span>
-      <dafa-icon [icon]="iconType.USER" size="l"></dafa-icon>
+    <li *ngIf="user" class="navigation__item">
+      <div class="navigation__user">
+        <dafa-icon [icon]="iconType.USER" size="l"></dafa-icon>
+        <span class="navigation__text">{{ user.fullName }}</span>
+      </div>
    </li>
    <li class="navigation__item">
      <a routerLink="/" class="navigation__link">
        <dafa-icon [icon]="iconType.BELL" size="l"></dafa-icon>
-        <span class="dafa__a11y-sr-only">Notifieringar</span>
-      </a>
-    </li>
-    <li class="navigation__item">
-      <a routerLink="installningar" class="navigation__link">
-        <dafa-icon [icon]="iconType.SETTINGS" size="l"></dafa-icon>
-        <span class="dafa__a11y-sr-only">Inställningar</span>
+        <span class="navigation__text">Notiser</span>
      </a>
    </li>
  </ul>
 </div>
-<!-- </digi-layout-block> -->
--- a/apps/dafa-web/src/app/shared/components/layout/components/navigation/navigation.component.scss
+++ b/apps/dafa-web/src/app/shared/components/layout/components/navigation/navigation.component.scss
@@ -44,28 +44,24 @@

  &__item {
    display: flex;
-    align-items: center;
+  }

-    &--user {
-      padding: var(--digi--layout--gutter--s);
-    }
+  &__user,
+  &__link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    padding: var(--digi--layout--gutter--s) var(--digi--layout--gutter);
  }

  &__link {
    text-decoration: none;
-    display: flex;
    color: var(--digi--typography--color--text--light);
-    padding: var(--digi--layout--gutter--s);
-  }
-
-  &__link {
-    &:hover {
-    }
  }

  &__text {
-    margin-right: var(--digi--layout--gutter);
-    font-size: var(--digi--typography--font-size--xs);
-    // margin-top: var(--digi--layout--gutter--xs);
+    font-size: 0.75rem;
+    margin-top: var(--digi--layout--gutter--s);
  }
 }
--- a/apps/dafa-web/src/app/shared/components/layout/components/sidebar/sidebar.component.html
+++ b/apps/dafa-web/src/app/shared/components/layout/components/sidebar/sidebar.component.html
@@ -7,44 +7,38 @@
        [routerLinkActiveOptions]="{ exact: true }"
        class="sidebar__link"
      >
-        <dafa-icon class="sidebar__icon" [icon]="iconType.HOME"></dafa-icon>
+        <dafa-icon class="sidebar__icon" [icon]="iconType.HOME" size="xl"></dafa-icon>
        Hem
      </a>
    </li>
-    <li class="sidebar__item">
-      <a [routerLink]="['/administration']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
-        <dafa-icon class="sidebar__icon" [icon]="iconType.EDIT"></dafa-icon>
-        Administration
-      </a>
-    </li>
-    <li class="sidebar__item">
-      <a [routerLink]="['/deltagare']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
-        <dafa-icon class="sidebar__icon" [icon]="iconType.USERS"></dafa-icon>
-        Mina deltagare
-      </a>
-    </li>
    <li class="sidebar__item">
      <a [routerLink]="['/avrop']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
-        <dafa-icon class="sidebar__icon" [icon]="iconType.CALENDAR"></dafa-icon>
+        <dafa-icon class="sidebar__icon" [icon]="iconType.CLIPBOARD" size="xl"></dafa-icon>
        Avrop
      </a>
    </li>
    <li class="sidebar__item">
-      <a [routerLink]="['/meddelanden']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
-        <dafa-icon class="sidebar__icon" [icon]="iconType.ENVELOPE"></dafa-icon>
-        Meddelanden
+      <a [routerLink]="['/deltagare']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
+        <dafa-icon class="sidebar__icon" [icon]="iconType.SOK_KANDIDAT" size="xl"></dafa-icon>
+        Mina deltagare
      </a>
    </li>
    <li class="sidebar__item">
-      <a [routerLink]="['/statistik']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
-        <dafa-icon class="sidebar__icon" [icon]="iconType.SOK_KANDIDAT"></dafa-icon>
-        Statistik
+      <a [routerLink]="['/planera-aktiviteter']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
+        <dafa-icon class="sidebar__icon" [icon]="iconType.USERS" size="xxl"></dafa-icon>
+        Planera aktiviteter
      </a>
    </li>
    <li class="sidebar__item">
-      <a [routerLink]="['/installningar']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
-        <dafa-icon class="sidebar__icon" [icon]="iconType.SETTINGS"></dafa-icon>
-        Inställningar
+      <a [routerLink]="['/rapportera']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
+        <dafa-icon class="sidebar__icon" [icon]="iconType.EDIT" size="xl"></dafa-icon>
+        Rapportera
+      </a>
+    </li>
+    <li class="sidebar__item">
+      <a [routerLink]="['/administration']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
+        <dafa-icon class="sidebar__icon" [icon]="iconType.SETTINGS" size="xl"></dafa-icon>
+        Administration
      </a>
    </li>
  </ul>
--- a/apps/dafa-web/src/app/shared/components/layout/components/sidebar/sidebar.component.scss
+++ b/apps/dafa-web/src/app/shared/components/layout/components/sidebar/sidebar.component.scss
@@ -1,4 +1,5 @@
@import 'variables/colors';
+@import 'variables/gutters';
@import 'variables/navigation';
@import 'mixins/list';

@@ -15,20 +16,24 @@
  &__link {
    position: relative;
    display: flex;
+    flex-direction: column;
+    gap: var(--digi--layout--gutter--xs);
    align-items: center;
    width: 100%;
-    padding: var(--digi--layout--gutter) var(--digi--layout--gutter);
+    padding: $digi--layout--gutter--m var(--digi--layout--gutter);
    border-bottom: 1px solid var(--digi--ui--color--background--off);
    color: var(--digi--typography--color--text) !important;
    text-decoration: none;
    font-weight: var(--digi--typography--font-weight);
+    font-size: var(--digi--typography--font-size--s);
+    text-align: center;

    &:hover {
      background-color: var(--digi--ui--color--background--tertiary);
    }

    &--active {
-      font-weight: var(--digi--typography--font-weight--semibold);
+      background-color: var(--digi--ui--color--background--tertiary);

      &::before {
        content: '';
@@ -43,6 +48,6 @@
  }

  &__icon {
-    margin-right: 0.875rem;
+    color: var(--digi--typography--color--link);
  }
 }
--- a/apps/dafa-web/src/app/shared/components/layout/layout.component.scss
+++ b/apps/dafa-web/src/app/shared/components/layout/layout.component.scss
@@ -5,7 +5,7 @@
 .dafa {
  display: grid;
  height: 100vh;
-  grid-template-columns: 15rem 1fr;
+  grid-template-columns: 12rem 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    'header header'
--- a/apps/dafa-web/src/app/shared/enums/icon-size.enum.ts
+++ b/apps/dafa-web/src/app/shared/enums/icon-size.enum.ts
@@ -3,4 +3,5 @@ export enum IconSize {
  M = 'm',
  L = 'l',
  XL = 'xl',
+  XXL = 'xxl',
 }
--- a/apps/dafa-web/src/app/shared/enums/icon-type.enum.ts
+++ b/apps/dafa-web/src/app/shared/enums/icon-type.enum.ts
@@ -2,6 +2,7 @@ export enum IconType {
  HOME = 'home', // Custom
  SETTINGS = 'settings', // Custom
  PLUS = 'plus', // Custom
+  CLIPBOARD = 'clipboard', // Custom
  USER = 'user',
  USERS = 'users',
  BELL = 'bell',
--- a/apps/dafa-web/src/styles/variables/_gutters.scss
+++ b/apps/dafa-web/src/styles/variables/_gutters.scss
@@ -2,6 +2,7 @@
@import 'functions/rem';

 // AF DIGI Variables
+$digi--layout--gutter--m: rem(12);
 $digi--layout--gutter--l: rem(25);
 $digi--layout--gutter--xl: rem(40);
 $digi--layout--gutter--xxl: rem(60);