diff --git a/src/app/components/dashboard/dashboard.component.html b/src/app/components/dashboard/dashboard.component.html index 99042da00977457ca86e97a31861758af457d8fa..750b51ca0e93a087980009ca419e2954be389799 100644 --- a/src/app/components/dashboard/dashboard.component.html +++ b/src/app/components/dashboard/dashboard.component.html @@ -1,5 +1,12 @@ <app-page-wrapper> - <div header>Monitoring and Analysis</div> + <div title>Monitoring and Analysis</div> + + <div actions class="actions"> + <button mat-fab class="settings-button" (click)="doNothing()"> + <mat-icon>settings</mat-icon> + </button> + </div> + <mat-accordion class="accordion__header" multi> <mat-expansion-panel class="accordion__panel"> <mat-expansion-panel-header class="accordion__panel-header"> diff --git a/src/app/components/dashboard/dashboard.component.scss b/src/app/components/dashboard/dashboard.component.scss index 23599fd944a4c552c9f7bbac172d3f3a3a7a34f5..ce81b2a7c7e869312bc85ea9e260e5ab939bceae 100644 --- a/src/app/components/dashboard/dashboard.component.scss +++ b/src/app/components/dashboard/dashboard.component.scss @@ -8,8 +8,26 @@ .actions { display: flex; gap: map.get(vars.$spacing, 'md'); + + .settings-button { + border-radius: map.get(vars.$radius, 'xs'); + padding: map.get(vars.$spacing, 'xs') map.get(vars.$spacing, 'xs'); + + mat-icon { + font-size: 1.5rem; + color: white; + } + } + + * { + background-color: vars.$textPrimary; + } } + + + + .accordion__panel { border-radius: map.get(vars.$radius, 'xs'); background-color: map.get(vars.$grey, 10); diff --git a/src/app/components/dashboard/dashboard.component.ts b/src/app/components/dashboard/dashboard.component.ts index 3357fa5a2a966390d79be995f7091f515d5e9e73..72f611c21c4dc63b28f9089b6b15fa722406d99d 100644 --- a/src/app/components/dashboard/dashboard.component.ts +++ b/src/app/components/dashboard/dashboard.component.ts @@ -1,24 +1,28 @@ -import { Component } from '@angular/core'; +import { Component, signal } from '@angular/core'; import { PageWrapperComponent } from '../page-wrapper/page-wrapper.component'; import { Skeleton } from 'primeng/skeleton'; import { MatExpansionModule } from '@angular/material/expansion'; import { MatExpansionPanel, - MatExpansionPanelDescription, MatExpansionPanelTitle, } from '@angular/material/expansion'; +import { MatIcon } from '@angular/material/icon'; +import { MatFabButton } from '@angular/material/button'; @Component({ selector: 'app-dashboard', imports: [ - PageWrapperComponent, Skeleton, MatExpansionPanel, MatExpansionPanelTitle, - MatExpansionPanelDescription, MatExpansionModule, + MatIcon, + PageWrapperComponent, + MatFabButton, ], templateUrl: './dashboard.component.html', styleUrl: './dashboard.component.scss', }) -export class DashboardComponent {} +export class DashboardComponent { + doNothing() {} +} diff --git a/src/app/components/page-wrapper/page-wrapper.component.html b/src/app/components/page-wrapper/page-wrapper.component.html index 60cb6e288d65ee39b7e4e70d39666827f3ec1ca7..fae4904e34fac12ee085461926655beb2b7366aa 100644 --- a/src/app/components/page-wrapper/page-wrapper.component.html +++ b/src/app/components/page-wrapper/page-wrapper.component.html @@ -1,5 +1,8 @@ <div class="page-header"> - <ng-content select="[header]"></ng-content> + <div class="page-header__title"> + <ng-content select="[title]"></ng-content> + </div> + <ng-content select="[actions]"></ng-content> </div> <mat-divider /> <div class="page-body"> diff --git a/src/app/components/page-wrapper/page-wrapper.component.scss b/src/app/components/page-wrapper/page-wrapper.component.scss index 1a8364713177fdbf9d329e860999f5b009ca4a94..cbaee29e3056fc3a67f567da82831dc6f0e414b8 100644 --- a/src/app/components/page-wrapper/page-wrapper.component.scss +++ b/src/app/components/page-wrapper/page-wrapper.component.scss @@ -5,21 +5,26 @@ display: block; min-height: calc(100% - 2 * map.get(vars.$spacing, 'lg')); - margin: map.get(vars.$spacing, 'lg'); + margin: map.get(vars.$spacing, 'xl'); background-color: map.get(vars.$grey, 0); border-radius: map.get(vars.$radius, 'xs'); .page { &-header { - padding: map.get(vars.$spacing, 'lg') map.get(vars.$spacing, 'lg') - map.get(vars.$spacing, 'xs'); - font-family: Monoton, cursive; - font-size: map.get(vars.$text, 'xxl'); + display: flex; + justify-content: space-between; + align-items: center; + padding: map.get(vars.$spacing, 'lg') map.get(vars.$spacing, 'xxl') + map.get(vars.$spacing, 'xs'); + + &__title { + font-family: Monoton, cursive; + font-size: map.get(vars.$text, 'xxl'); + } } &-body { - padding: map.get(vars.$spacing, 'xl') map.get(vars.$spacing, 'lg') - map.get(vars.$spacing, 'lg'); + padding: map.get(vars.$spacing, 'xxl'); } } } diff --git a/src/app/components/page-wrapper/page-wrapper.component.spec.ts b/src/app/components/page-wrapper/page-wrapper.component.spec.ts deleted file mode 100644 index 73525cc5b2ec289ef51c9f3d96b9ac8995d23f3b..0000000000000000000000000000000000000000 --- a/src/app/components/page-wrapper/page-wrapper.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { PageWrapperComponent } from './page-wrapper.component'; - -describe('PageWrapperComponent', () => { - let component: PageWrapperComponent; - let fixture: ComponentFixture<PageWrapperComponent>; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [PageWrapperComponent] - }) - .compileComponents(); - - fixture = TestBed.createComponent(PageWrapperComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/vars.scss b/src/vars.scss index 4cdf01f51db35fe3ea0c2cba5cdaf3c28c598b9a..86e287263a3e13256664196274f3009c237fc78f 100644 --- a/src/vars.scss +++ b/src/vars.scss @@ -1,4 +1,4 @@ -$textPrimary: #520000; +$textPrimary: #9c0c0c; $error: #ff2525; $sidenavWidth: 256px; $headerHeight: 68px;