From 42ccd5b2f9c1e9324e6ce5d9d3e2ba677ab4f5fe Mon Sep 17 00:00:00 2001
From: Artem Dychenko <s192441@student.pg.edu.pl>
Date: Tue, 25 Feb 2025 16:26:47 +0100
Subject: [PATCH] add setting button
---
.../dashboard/dashboard.component.html | 9 +++++++-
.../dashboard/dashboard.component.scss | 18 +++++++++++++++
.../dashboard/dashboard.component.ts | 14 +++++++----
.../page-wrapper/page-wrapper.component.html | 5 +++-
.../page-wrapper/page-wrapper.component.scss | 19 +++++++++------
.../page-wrapper.component.spec.ts | 23 -------------------
src/vars.scss | 2 +-
7 files changed, 52 insertions(+), 38 deletions(-)
delete mode 100644 src/app/components/page-wrapper/page-wrapper.component.spec.ts
diff --git a/src/app/components/dashboard/dashboard.component.html b/src/app/components/dashboard/dashboard.component.html
index 99042da..750b51c 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 23599fd..ce81b2a 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 3357fa5..72f611c 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 60cb6e2..fae4904 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 1a83647..cbaee29 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 73525cc..0000000
--- 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 4cdf01f..86e2872 100644
--- a/src/vars.scss
+++ b/src/vars.scss
@@ -1,4 +1,4 @@
-$textPrimary: #520000;
+$textPrimary: #9c0c0c;
$error: #ff2525;
$sidenavWidth: 256px;
$headerHeight: 68px;
--
GitLab