diff --git a/src/app/components/dashboard-settings/dashboard-settings.component.html b/src/app/components/dashboard-settings/dashboard-settings.component.html
index 3f428bb8b5680ed8dfc6e004957fbf4b5d41e53c..3f7c6f89925c53533849961ecf6f5da2fa961b94 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 1b093d6f2e1db95c2f83cf4f68da62745a0184dc..ac32f2e75508cf89ae561728dae3cc35f34412f5 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 da7902cb87fc2e8b45a3d39db4749f849ba38933..f3df6d311ef0caccbd91e169b1aa3ced7ca7037e 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 0000000000000000000000000000000000000000..edb1a241e29ff5a38e3a9205508cbc6f76a93012
--- /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 0000000000000000000000000000000000000000..88ed7b52196ec5a5f84cf60fd9d5a8670652dc1a
--- /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 0000000000000000000000000000000000000000..05f96f82e910c789889113c37421da36b117db0d
--- /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 {}