arbetsformedlingen/mina-sidor-fa-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Erik Tiekstra
2021-08-12 15:34:51 +02:00
parent b4b71efe2c
commit 466abd1dee
12 changed files with 63 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/dafa-web/src/app/components/toast-list/toast/toast.component.scss
View File

@@ -35,6 +35,7 @@
&__content { &__content {
display: flex; display: flex;
width: 100%;
background-color: var(--digi--ui--color--background); background-color: var(--digi--ui--color--background);
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;

13
apps/dafa-web/src/app/shared/components/icon/icon.component.html
View File

@@ -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" 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> ></path>
</svg> </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> </digi-ng-icon-custom>
<ng-template #DigiNgIcon> <ng-template #DigiNgIcon>

3
apps/dafa-web/src/app/shared/components/icon/icon.component.scss
View File

@@ -17,4 +17,7 @@
&--xl { &--xl {
@include dafa__digi-ng-icon(1.5em); @include dafa__digi-ng-icon(1.5em);
} }
&--xxl {
@include dafa__digi-ng-icon(2em);
}
} }

2
apps/dafa-web/src/app/shared/components/icon/icon.component.ts
View File

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/c
import { IconSize } from '@dafa-enums/icon-size.enum'; import { IconSize } from '@dafa-enums/icon-size.enum';
import { IconType } from '@dafa-enums/icon-type.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({ @Component({
selector: 'dafa-icon', selector: 'dafa-icon',

18
apps/dafa-web/src/app/shared/components/layout/components/navigation/navigation.component.html
View File

@@ -1,4 +1,3 @@
<!-- <digi-layout-block af-variation="${LayoutBlockVariation.PROFILE}"> -->
<div class="navigation"> <div class="navigation">
<div class="navigation__logo-wrapper"> <div class="navigation__logo-wrapper">
<a [routerLink]="['/']" aria-label="Till startsidan för FA Mina sidor"> <a [routerLink]="['/']" aria-label="Till startsidan för FA Mina sidor">
@@ -6,22 +5,17 @@
</a> </a>
</div> </div>
<ul class="navigation__list dafa__hide-on-print"> <ul class="navigation__list dafa__hide-on-print">
<li class="navigation__item navigation__item--user"> <li *ngIf="user" class="navigation__item">
<span *ngIf="user" class="navigation__text">{{ user.fullName }}</span> <div class="navigation__user">
<dafa-icon [icon]="iconType.USER" size="l"></dafa-icon> <dafa-icon [icon]="iconType.USER" size="l"></dafa-icon>
<span class="navigation__text">{{ user.fullName }}</span>
</div>
</li> </li>
<li class="navigation__item"> <li class="navigation__item">
<a routerLink="/" class="navigation__link"> <a routerLink="/" class="navigation__link">
<dafa-icon [icon]="iconType.BELL" size="l"></dafa-icon> <dafa-icon [icon]="iconType.BELL" size="l"></dafa-icon>
<span class="dafa__a11y-sr-only">Notifieringar</span> <span class="navigation__text">Notiser</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>
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
<!-- </digi-layout-block> -->

24
apps/dafa-web/src/app/shared/components/layout/components/navigation/navigation.component.scss
View File

@@ -44,28 +44,24 @@
&__item { &__item {
display: flex; display: flex;
align-items: center; }
&--user { &__user,
padding: var(--digi--layout--gutter--s); &__link {
} display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: var(--digi--layout--gutter--s) var(--digi--layout--gutter);
} }
&__link { &__link {
text-decoration: none; text-decoration: none;
display: flex;
color: var(--digi--typography--color--text--light); color: var(--digi--typography--color--text--light);
padding: var(--digi--layout--gutter--s);
}
&__link {
&:hover {
}
} }
&__text { &__text {
margin-right: var(--digi--layout--gutter); font-size: 0.75rem;
font-size: var(--digi--typography--font-size--xs); margin-top: var(--digi--layout--gutter--s);
// margin-top: var(--digi--layout--gutter--xs);
} }
} }

40
apps/dafa-web/src/app/shared/components/layout/components/sidebar/sidebar.component.html
View File

@@ -7,44 +7,38 @@
[routerLinkActiveOptions]="{ exact: true }" [routerLinkActiveOptions]="{ exact: true }"
class="sidebar__link" 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 Hem
</a> </a>
</li> </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"> <li class="sidebar__item">
<a [routerLink]="['/avrop']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link"> <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 Avrop
</a> </a>
</li> </li>
<li class="sidebar__item"> <li class="sidebar__item">
<a [routerLink]="['/meddelanden']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link"> <a [routerLink]="['/deltagare']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
<dafa-icon class="sidebar__icon" [icon]="iconType.ENVELOPE"></dafa-icon> <dafa-icon class="sidebar__icon" [icon]="iconType.SOK_KANDIDAT" size="xl"></dafa-icon>
Meddelanden Mina deltagare
</a> </a>
</li> </li>
<li class="sidebar__item"> <li class="sidebar__item">
<a [routerLink]="['/statistik']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link"> <a [routerLink]="['/planera-aktiviteter']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
<dafa-icon class="sidebar__icon" [icon]="iconType.SOK_KANDIDAT"></dafa-icon> <dafa-icon class="sidebar__icon" [icon]="iconType.USERS" size="xxl"></dafa-icon>
Statistik Planera aktiviteter
</a> </a>
</li> </li>
<li class="sidebar__item"> <li class="sidebar__item">
<a [routerLink]="['/installningar']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link"> <a [routerLink]="['/rapportera']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
<dafa-icon class="sidebar__icon" [icon]="iconType.SETTINGS"></dafa-icon> <dafa-icon class="sidebar__icon" [icon]="iconType.EDIT" size="xl"></dafa-icon>
Inställningar 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> </a>
</li> </li>
</ul> </ul>

11
apps/dafa-web/src/app/shared/components/layout/components/sidebar/sidebar.component.scss
View File

@@ -1,4 +1,5 @@
@import 'variables/colors'; @import 'variables/colors';
@import 'variables/gutters';
@import 'variables/navigation'; @import 'variables/navigation';
@import 'mixins/list'; @import 'mixins/list';
@@ -15,20 +16,24 @@
&__link { &__link {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column;
gap: var(--digi--layout--gutter--xs);
align-items: center; align-items: center;
width: 100%; 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); border-bottom: 1px solid var(--digi--ui--color--background--off);
color: var(--digi--typography--color--text) !important; color: var(--digi--typography--color--text) !important;
text-decoration: none; text-decoration: none;
font-weight: var(--digi--typography--font-weight); font-weight: var(--digi--typography--font-weight);
font-size: var(--digi--typography--font-size--s);
text-align: center;
&:hover { &:hover {
background-color: var(--digi--ui--color--background--tertiary); background-color: var(--digi--ui--color--background--tertiary);
} }
&--active { &--active {
font-weight: var(--digi--typography--font-weight--semibold); background-color: var(--digi--ui--color--background--tertiary);
&::before { &::before {
content: ''; content: '';
@@ -43,6 +48,6 @@
} }
&__icon { &__icon {
margin-right: 0.875rem; color: var(--digi--typography--color--link);
} }
} }

2
apps/dafa-web/src/app/shared/components/layout/layout.component.scss
View File

@@ -5,7 +5,7 @@
.dafa { .dafa {
display: grid; display: grid;
height: 100vh; height: 100vh;
grid-template-columns: 15rem 1fr; grid-template-columns: 12rem 1fr;
grid-template-rows: auto 1fr auto; grid-template-rows: auto 1fr auto;
grid-template-areas: grid-template-areas:
'header header' 'header header'

1
apps/dafa-web/src/app/shared/enums/icon-size.enum.ts
View File

@@ -3,4 +3,5 @@ export enum IconSize {
M = 'm', M = 'm',
L = 'l', L = 'l',
XL = 'xl', XL = 'xl',
XXL = 'xxl',
} }

1
apps/dafa-web/src/app/shared/enums/icon-type.enum.ts
View File

@@ -2,6 +2,7 @@ export enum IconType {
HOME = 'home', // Custom HOME = 'home', // Custom
SETTINGS = 'settings', // Custom SETTINGS = 'settings', // Custom
PLUS = 'plus', // Custom PLUS = 'plus', // Custom
CLIPBOARD = 'clipboard', // Custom
USER = 'user', USER = 'user',
USERS = 'users', USERS = 'users',
BELL = 'bell', BELL = 'bell',

1
apps/dafa-web/src/styles/variables/_gutters.scss
View File

@@ -2,6 +2,7 @@
@import 'functions/rem'; @import 'functions/rem';
// AF DIGI Variables // AF DIGI Variables
$digi--layout--gutter--m: rem(12);
$digi--layout--gutter--l: rem(25); $digi--layout--gutter--l: rem(25);
$digi--layout--gutter--xl: rem(40); $digi--layout--gutter--xl: rem(40);
$digi--layout--gutter--xxl: rem(60); $digi--layout--gutter--xxl: rem(60);