From 386229d884b71a78198c3e1cfac2bddb2125f3dc Mon Sep 17 00:00:00 2001
From: Artem Dychenko <s192441@student.pg.edu.pl>
Date: Mon, 24 Feb 2025 23:11:31 +0100
Subject: [PATCH 1/3] add expansion panel for statistics and charts
---
.../dashboard/dashboard.component.html | 16 +++++++--
.../dashboard/dashboard.component.scss | 36 +++++++++++++++++++
.../dashboard/dashboard.component.ts | 15 +++++++-
3 files changed, 64 insertions(+), 3 deletions(-)
diff --git a/src/app/components/dashboard/dashboard.component.html b/src/app/components/dashboard/dashboard.component.html
index cb0f201..99042da 100644
--- a/src/app/components/dashboard/dashboard.component.html
+++ b/src/app/components/dashboard/dashboard.component.html
@@ -1,6 +1,18 @@
<app-page-wrapper>
<div header>Monitoring and Analysis</div>
-
- Dashboard content goes here
+ <mat-accordion class="accordion__header" multi>
+ <mat-expansion-panel class="accordion__panel">
+ <mat-expansion-panel-header class="accordion__panel-header">
+ <mat-panel-title class="accordion__panel-title"> Statistics </mat-panel-title>
+ </mat-expansion-panel-header>
+ <p>Statistics info</p>
+ </mat-expansion-panel>
+ <mat-expansion-panel class="accordion__panel">
+ <mat-expansion-panel-header class="accordion__panel-header">
+ <mat-panel-title class="accordion__panel-title"> Charts </mat-panel-title>
+ </mat-expansion-panel-header>
+ <p>Charts info</p>
+ </mat-expansion-panel>
+ </mat-accordion>
<p-skeleton height="10rem" width="100%" />
</app-page-wrapper>
diff --git a/src/app/components/dashboard/dashboard.component.scss b/src/app/components/dashboard/dashboard.component.scss
index 2995308..23599fd 100644
--- a/src/app/components/dashboard/dashboard.component.scss
+++ b/src/app/components/dashboard/dashboard.component.scss
@@ -1,4 +1,40 @@
+@use '../../../vars';
+@use 'sass:map';
+
:host {
height: 100%;
width: 100%;
+
+ .actions {
+ display: flex;
+ gap: map.get(vars.$spacing, 'md');
+ }
+
+ .accordion__panel {
+ border-radius: map.get(vars.$radius, 'xs');
+ background-color: map.get(vars.$grey, 10);
+ padding: map.get(vars.$spacing, 'xs') map.get(vars.$spacing, 'xs');
+
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+
+ border-bottom: 1px solid map.get(vars.$grey, 30);
+
+ &:last-child {
+ border-bottom: none;
+ }
+
+ &-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ transition: background-color 0.3s ease-in-out;
+
+ &:hover {
+ background-color: map.get(vars.$grey, 30);
+ }
+ }
+ }
+
}
+
+
diff --git a/src/app/components/dashboard/dashboard.component.ts b/src/app/components/dashboard/dashboard.component.ts
index ad068b9..3357fa5 100644
--- a/src/app/components/dashboard/dashboard.component.ts
+++ b/src/app/components/dashboard/dashboard.component.ts
@@ -1,10 +1,23 @@
import { Component } 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';
@Component({
selector: 'app-dashboard',
- imports: [PageWrapperComponent, Skeleton],
+ imports: [
+ PageWrapperComponent,
+ Skeleton,
+ MatExpansionPanel,
+ MatExpansionPanelTitle,
+ MatExpansionPanelDescription,
+ MatExpansionModule,
+ ],
templateUrl: './dashboard.component.html',
styleUrl: './dashboard.component.scss',
})
--
GitLab
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 2/3] 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
From 3a39e285e7091186623c354516741c70fe3d0796 Mon Sep 17 00:00:00 2001
From: Artem Dychenko <s192441@student.pg.edu.pl>
Date: Tue, 25 Feb 2025 17:58:20 +0100
Subject: [PATCH 3/3] review changes
---
.../dashboard/dashboard.component.html | 2 +-
.../dashboard/dashboard.component.scss | 28 ++-----------------
.../dashboard/dashboard.component.ts | 10 ++-----
src/vars.scss | 2 +-
4 files changed, 7 insertions(+), 35 deletions(-)
diff --git a/src/app/components/dashboard/dashboard.component.html b/src/app/components/dashboard/dashboard.component.html
index 750b51c..3545ab2 100644
--- a/src/app/components/dashboard/dashboard.component.html
+++ b/src/app/components/dashboard/dashboard.component.html
@@ -2,7 +2,7 @@
<div title>Monitoring and Analysis</div>
<div actions class="actions">
- <button mat-fab class="settings-button" (click)="doNothing()">
+ <button mat-fab class="settings-button" (click)="openSettings()">
<mat-icon>settings</mat-icon>
</button>
</div>
diff --git a/src/app/components/dashboard/dashboard.component.scss b/src/app/components/dashboard/dashboard.component.scss
index ce81b2a..1938814 100644
--- a/src/app/components/dashboard/dashboard.component.scss
+++ b/src/app/components/dashboard/dashboard.component.scss
@@ -10,12 +10,11 @@
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');
+ box-shadow: none;
mat-icon {
- font-size: 1.5rem;
- color: white;
+ font-size: map.get(vars.$text, 'xl');
+ color: map.get(vars.$grey, 0);
}
}
@@ -24,35 +23,14 @@
}
}
-
-
-
-
.accordion__panel {
- border-radius: map.get(vars.$radius, 'xs');
background-color: map.get(vars.$grey, 10);
- padding: map.get(vars.$spacing, 'xs') map.get(vars.$spacing, 'xs');
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-
border-bottom: 1px solid map.get(vars.$grey, 30);
&:last-child {
border-bottom: none;
}
-
- &-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- transition: background-color 0.3s ease-in-out;
-
- &:hover {
- background-color: map.get(vars.$grey, 30);
- }
- }
}
-
}
-
-
diff --git a/src/app/components/dashboard/dashboard.component.ts b/src/app/components/dashboard/dashboard.component.ts
index 72f611c..f7bc6d7 100644
--- a/src/app/components/dashboard/dashboard.component.ts
+++ b/src/app/components/dashboard/dashboard.component.ts
@@ -1,11 +1,7 @@
-import { Component, signal } from '@angular/core';
+import { Component } from '@angular/core';
import { PageWrapperComponent } from '../page-wrapper/page-wrapper.component';
import { Skeleton } from 'primeng/skeleton';
import { MatExpansionModule } from '@angular/material/expansion';
-import {
- MatExpansionPanel,
- MatExpansionPanelTitle,
-} from '@angular/material/expansion';
import { MatIcon } from '@angular/material/icon';
import { MatFabButton } from '@angular/material/button';
@@ -13,8 +9,6 @@ import { MatFabButton } from '@angular/material/button';
selector: 'app-dashboard',
imports: [
Skeleton,
- MatExpansionPanel,
- MatExpansionPanelTitle,
MatExpansionModule,
MatIcon,
PageWrapperComponent,
@@ -24,5 +18,5 @@ import { MatFabButton } from '@angular/material/button';
styleUrl: './dashboard.component.scss',
})
export class DashboardComponent {
- doNothing() {}
+ openSettings() {}
}
diff --git a/src/vars.scss b/src/vars.scss
index 86e2872..4cdf01f 100644
--- a/src/vars.scss
+++ b/src/vars.scss
@@ -1,4 +1,4 @@
-$textPrimary: #9c0c0c;
+$textPrimary: #520000;
$error: #ff2525;
$sidenavWidth: 256px;
$headerHeight: 68px;
--
GitLab