From 3f187e1d1f034a4f358a2d8f70486429fdeee628 Mon Sep 17 00:00:00 2001
From: Artem Dychenko <s192441@student.pg.edu.pl>
Date: Sat, 22 Mar 2025 22:11:32 +0100
Subject: [PATCH] feat: add slide-toggle component, fix color in
dashboard-settings styles
---
.../dashboard-settings.component.html | 26 +++++++++----------
.../dashboard-settings.component.scss | 24 ++++++++++++-----
.../dashboard-settings.component.ts | 6 +++--
.../slide-toggle/slide-toggle.component.html | 4 +++
.../slide-toggle/slide-toggle.component.scss | 19 ++++++++++++++
.../slide-toggle/slide-toggle.component.ts | 10 +++++++
6 files changed, 68 insertions(+), 21 deletions(-)
create mode 100644 src/app/components/slide-toggle/slide-toggle.component.html
create mode 100644 src/app/components/slide-toggle/slide-toggle.component.scss
create mode 100644 src/app/components/slide-toggle/slide-toggle.component.ts
diff --git a/src/app/components/dashboard-settings/dashboard-settings.component.html b/src/app/components/dashboard-settings/dashboard-settings.component.html
index 3f428bb..3f7c6f8 100644
--- a/src/app/components/dashboard-settings/dashboard-settings.component.html
+++ b/src/app/components/dashboard-settings/dashboard-settings.component.html
@@ -6,10 +6,10 @@
Statistics columns
</div>
<div class="dialog__content__statistics__columns-content">
- <mat-slide-toggle [(ngModel)]="isChecked">Total packets</mat-slide-toggle>
- <mat-slide-toggle [(ngModel)]="isChecked">Packets per seconds</mat-slide-toggle>
- <mat-slide-toggle [(ngModel)]="isChecked">Total bytes</mat-slide-toggle>
- <mat-slide-toggle [(ngModel)]="isChecked">Bytes per second</mat-slide-toggle>
+ <app-slide-toggle>Total packets</app-slide-toggle>
+ <app-slide-toggle>Packets per seconds</app-slide-toggle>
+ <app-slide-toggle>Total bytes</app-slide-toggle>
+ <app-slide-toggle>Bytes per second</app-slide-toggle>
</div>
</div>
<div class="dialog__content__statistics__rows">
@@ -17,10 +17,10 @@
Statistics rows & charts
</div>
<div class="dialog__content__statistics__rows-content">
- <mat-slide-toggle [(ngModel)]="isChecked">ETH</mat-slide-toggle>
- <mat-slide-toggle [(ngModel)]="isChecked">IPv4</mat-slide-toggle>
- <mat-slide-toggle [(ngModel)]="isChecked">IPv6</mat-slide-toggle>
- <mat-slide-toggle [(ngModel)]="isChecked">TCP</mat-slide-toggle>
+ <app-slide-toggle>ETH</app-slide-toggle>
+ <app-slide-toggle>IPv4</app-slide-toggle>
+ <app-slide-toggle >IPv6</app-slide-toggle>
+ <app-slide-toggle >TCP</app-slide-toggle>
</div>
</div>
<div class="dialog__content__statistics__ir">
@@ -28,15 +28,15 @@
Information Rate
</div>
<div class="dialog__content__statistics__ir-content">
- <mat-slide-toggle [(ngModel)]="isChecked">Min value</mat-slide-toggle>
- <mat-slide-toggle [(ngModel)]="isChecked">Max value</mat-slide-toggle>
- <mat-slide-toggle [(ngModel)]="isChecked">Current value</mat-slide-toggle>
+ <app-slide-toggle class="custom" >Min value</app-slide-toggle>
+ <app-slide-toggle >Max value</app-slide-toggle>
+ <app-slide-toggle >Current value</app-slide-toggle>
</div>
</div>
</mat-dialog-content>
<mat-dialog-actions class="dialog__actions">
- <button mat-flat-button mat-dialog-close>CANCEL</button>
- <button mat-flat-button mat-dialog-close>SAVE</button>
+ <app-button secondary class="cancel-button">CANCEL</app-button>
+ <app-button class="save-button">SAVE</app-button>
</mat-dialog-actions>
</div>
diff --git a/src/app/components/dashboard-settings/dashboard-settings.component.scss b/src/app/components/dashboard-settings/dashboard-settings.component.scss
index 1b093d6..ac32f2e 100644
--- a/src/app/components/dashboard-settings/dashboard-settings.component.scss
+++ b/src/app/components/dashboard-settings/dashboard-settings.component.scss
@@ -29,18 +29,30 @@
}
}
}
- mat-slide-toggle {
- width: 25%;
+ ::ng-deep app-slide-toggle {
+ mat-slide-toggle {
+ width: 25% !important;
+ }
}
}
&__actions {
border-radius: map.get(vars.$radius, 'xs');
padding: map.get(vars.$spacing, 'xxl') 0 map.get(vars.$spacing, 'xl') 0;
- button {
- width: 40%;
- border-radius: map.get(vars.$radius, 'sm');
- margin: map.get(vars.$spacing, 'xs') map.get(vars.$spacing, 'xxxl') 0 map.get(vars.$radius, 'xl');
+ display: flex;
+ justify-content: center;
+ gap: 150px;
+
+ ::ng-deep app-button {
+ button {
+ width: 450px;
+ }
+ margin: map.get(vars.$spacing, 'md') 0 0 0;
}
}
}
+
+
+
+
+
diff --git a/src/app/components/dashboard-settings/dashboard-settings.component.ts b/src/app/components/dashboard-settings/dashboard-settings.component.ts
index da7902c..f3df6d3 100644
--- a/src/app/components/dashboard-settings/dashboard-settings.component.ts
+++ b/src/app/components/dashboard-settings/dashboard-settings.component.ts
@@ -2,8 +2,9 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
import { MatDialogModule } from '@angular/material/dialog';
import { ToggleSwitchModule } from 'primeng/toggleswitch';
import { FormsModule } from '@angular/forms';
-import { MatSlideToggle } from '@angular/material/slide-toggle';
import { MatButtonModule } from '@angular/material/button';
+import { ButtonComponent } from '../button/button.component';
+import { SlideToggleComponent } from '../slide-toggle/slide-toggle.component';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
@@ -11,8 +12,9 @@ import { MatButtonModule } from '@angular/material/button';
MatDialogModule,
ToggleSwitchModule,
FormsModule,
- MatSlideToggle,
MatButtonModule,
+ ButtonComponent,
+ SlideToggleComponent,
],
selector: 'app-dashboard-settings',
styleUrl: './dashboard-settings.component.scss',
diff --git a/src/app/components/slide-toggle/slide-toggle.component.html b/src/app/components/slide-toggle/slide-toggle.component.html
new file mode 100644
index 0000000..edb1a24
--- /dev/null
+++ b/src/app/components/slide-toggle/slide-toggle.component.html
@@ -0,0 +1,4 @@
+<mat-slide-toggle
+ [hideIcon]="true">
+ <ng-content />
+</mat-slide-toggle>
diff --git a/src/app/components/slide-toggle/slide-toggle.component.scss b/src/app/components/slide-toggle/slide-toggle.component.scss
new file mode 100644
index 0000000..88ed7b5
--- /dev/null
+++ b/src/app/components/slide-toggle/slide-toggle.component.scss
@@ -0,0 +1,19 @@
+@use '../../../vars';
+@use 'sass:map';
+
+::ng-deep .mat-mdc-slide-toggle.mat-mdc-slide-toggle-checked:not(.mat-disabled) .mdc-switch__shadow {
+ background-color: map.get(vars.$grey, 10);
+}
+
+::ng-deep .mat-mdc-slide-toggle.mat-mdc-slide-toggle-checked:not(.mat-disabled) .mdc-switch__track::after {
+ background-color: vars.$textPrimary !important;
+}
+
+::ng-deep .mdc-switch__track::before {
+ background-color: map.get(vars.$grey, 30) !important;
+}
+
+//.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb:before {
+// content: "" !important;
+// font: normal normal normal 14px/1 FontAwesome !important;
+//}
diff --git a/src/app/components/slide-toggle/slide-toggle.component.ts b/src/app/components/slide-toggle/slide-toggle.component.ts
new file mode 100644
index 0000000..05f96f8
--- /dev/null
+++ b/src/app/components/slide-toggle/slide-toggle.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+
+@Component({
+ selector: 'app-slide-toggle',
+ imports: [MatSlideToggle],
+ templateUrl: './slide-toggle.component.html',
+ styleUrl: './slide-toggle.component.scss',
+})
+export class SlideToggleComponent {}
--
GitLab