From 6bc14799ad5df268b2c4bb6477326c151b3cdcd4 Mon Sep 17 00:00:00 2001 From: root Date: Wed, 1 May 2024 14:24:45 -0700 Subject: [PATCH 1/8] in progress dark mode --- .../df-service-details.component.html | 12 +- .../df-service-details.component.scss | 42 +++++ .../df-service-details.component.ts | 6 +- .../df-dynamic-field.componen.scss | 175 ++++++++++++++++++ .../df-dynamic-field.component.ts | 1 + .../df-manage-table.component.html | 9 +- .../df-manage-table.component.scss | 80 ++++++++ .../df-manage-table.component.ts | 4 + .../df-script-editor.component.html | 2 +- .../df-script-editor.component.scss | 10 + .../df-script-editor.component.ts | 8 +- 11 files changed, 337 insertions(+), 12 deletions(-) create mode 100644 src/app/shared/components/df-dynamic-field/df-dynamic-field.componen.scss diff --git a/src/app/adf-services/df-service-details/df-service-details.component.html b/src/app/adf-services/df-service-details/df-service-details.component.html index be8d81cb..771f8be5 100644 --- a/src/app/adf-services/df-service-details/df-service-details.component.html +++ b/src/app/adf-services/df-service-details/df-service-details.component.html @@ -1,4 +1,8 @@ -
+ @@ -329,12 +333,14 @@

{{ type.label }}

formControlName="isActive" color="primary" *ngIf="!subscriptionRequired" - >{{ 'active' | transloco }}{{ 'active' | transloco }} - + {{ 'services.options' | transloco }} diff --git a/src/app/adf-services/df-service-details/df-service-details.component.scss b/src/app/adf-services/df-service-details/df-service-details.component.scss index 3db27dc7..db51ee52 100644 --- a/src/app/adf-services/df-service-details/df-service-details.component.scss +++ b/src/app/adf-services/df-service-details/df-service-details.component.scss @@ -131,3 +131,45 @@ mat-icon { border-radius: 20px; } } + +::ng-deep .mat-expansion-panel-header> +.mat-expansion-indicator::after { + color: unset!important; +} + +.dark-theme { + ::ng-deep .mdc-notched-outline > * { + border-color: white !important; + } + .advanced-option { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1002 + ) !important; + border-color: white; + color: white !important; + } + input, + mat-label, + mat-select, + mat-option, + textarea, + span { + color: white; + } + .save-btn { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 200 + ) !important; + color: mat.get-color-from-palette($df-purple-palette, 700) !important; + } + .cancel-btn { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1002 + ) !important; + color: mat.get-color-from-palette($df-purple-palette, 200) !important; + border: 1px solid mat.get-color-from-palette($df-purple-palette, 200) !important; + } +} diff --git a/src/app/adf-services/df-service-details/df-service-details.component.ts b/src/app/adf-services/df-service-details/df-service-details.component.ts index b6e3b073..3586b7a3 100644 --- a/src/app/adf-services/df-service-details/df-service-details.component.ts +++ b/src/app/adf-services/df-service-details/df-service-details.component.ts @@ -49,6 +49,7 @@ import { CommonModule } from '@angular/common'; import { MatIconModule } from '@angular/material/icon'; import { HttpClient } from '@angular/common/http'; import { MatDialog, MatDialogModule } from '@angular/material/dialog'; +import { DfThemeService } from 'src/app/shared/services/df-theme.service'; @UntilDestroy({ checkProperties: true }) @Component({ @@ -104,7 +105,8 @@ export class DfServiceDetailsComponent implements OnInit { private router: Router, private systemConfigDataService: DfSystemConfigDataService, private http: HttpClient, - public dialog: MatDialog + public dialog: MatDialog, + private themeService: DfThemeService ) { this.serviceForm = this.fb.group({ type: ['', Validators.required], @@ -118,7 +120,7 @@ export class DfServiceDetailsComponent implements OnInit { this.edit = true; } } - + isDarkMode = this.themeService.darkMode$; ngOnInit(): void { this.http .get>('assets/img/databaseImages.json') diff --git a/src/app/shared/components/df-dynamic-field/df-dynamic-field.componen.scss b/src/app/shared/components/df-dynamic-field/df-dynamic-field.componen.scss new file mode 100644 index 00000000..db51ee52 --- /dev/null +++ b/src/app/shared/components/df-dynamic-field/df-dynamic-field.componen.scss @@ -0,0 +1,175 @@ +@use '@angular/material' as mat; +@use 'src/theme' as theme; +$df-purple-palette: mat.define-palette(theme.$df-purple-palette); + +.grid-wrapper { + display: flex; + flex-wrap: wrap; + gap: 20px; +} + +label.radio-card { + cursor: pointer; + + .card-content-wrapper { + background: #fff; + border-radius: 5px; + max-width: 200px; + min-height: 200px; + padding: 12px; + display: grid; + box-shadow: 0 2px 4px 0 rgba(219, 215, 215, 0.04); + border: 1px solid #e3e3e3; + background-size: contain; + background-repeat: no-repeat; + + &.not-included { + opacity: 0.5; + cursor: default !important; + pointer-events: none !important; + } + } + + .check-icon { + width: 20px; + height: 20px; + display: inline-block; + border: solid 2px #e3e3e3; + border-radius: 50%; + position: relative; + + &:before { + content: ''; + position: absolute; + inset: 0; + background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.93552 4.58423C0.890286 4.53718 0.854262 4.48209 0.829309 4.42179C0.779553 4.28741 0.779553 4.13965 0.829309 4.00527C0.853759 3.94471 0.889842 3.88952 0.93552 3.84283L1.68941 3.12018C1.73378 3.06821 1.7893 3.02692 1.85185 2.99939C1.91206 2.97215 1.97736 2.95796 2.04345 2.95774C2.11507 2.95635 2.18613 2.97056 2.2517 2.99939C2.31652 3.02822 2.3752 3.06922 2.42456 3.12018L4.69872 5.39851L9.58026 0.516971C9.62828 0.466328 9.68554 0.42533 9.74895 0.396182C9.81468 0.367844 9.88563 0.353653 9.95721 0.354531C10.0244 0.354903 10.0907 0.369582 10.1517 0.397592C10.2128 0.425602 10.2672 0.466298 10.3112 0.516971L11.0651 1.25003C11.1108 1.29672 11.1469 1.35191 11.1713 1.41247C11.2211 1.54686 11.2211 1.69461 11.1713 1.82899C11.1464 1.88929 11.1104 1.94439 11.0651 1.99143L5.06525 7.96007C5.02054 8.0122 4.96514 8.0541 4.90281 8.08294C4.76944 8.13802 4.61967 8.13802 4.4863 8.08294C4.42397 8.0541 4.36857 8.0122 4.32386 7.96007L0.93552 4.58423Z' fill='white'/%3E%3C/svg%3E%0A"); + background-repeat: no-repeat; + background-size: 12px; + background-position: center center; + transform: scale(1.6); + opacity: 0; + } + } + + input[type='radio'] { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + &:checked { + + .card-content-wrapper { + box-shadow: + 0 2px 4px 0 rgba(219, 215, 215, 0.5), + 0 0 0 2px; + opacity: 1; + + .check-icon { + transform: scale(1.2); + &:before { + transform: scale(1); + opacity: 1; + } + } + } + } + + &:focus { + + .card-content-wrapper { + .check-icon { + box-shadow: 0 0 0 4px rgba(48, 86, 213, 0.2); + border-color: #3056d5; + } + } + } + } + + .card-content { + width: 100%; + img { + margin-bottom: 10px; + width: 100%; + height: 110px; + } + } +} + +.details-section { + .section-header, + .action-container { + display: flex; + justify-content: space-between; + width: 100%; + } +} +mat-icon { + display: flex; + align-items: center; + justify-content: center; +} + +.calendly-inline-widget { + height: 500px; +} + +.unlock-btn { + position: relative; + top: -95px; + right: -55px; + color: red; +} + +.action-bar { + display: flex; + justify-content: flex-end; + .save-btn { + background-color: mat.get-color-from-palette($df-purple-palette, 500); + color: white; + border-radius: 20px; + } + .cancel-btn { + color: mat.get-color-from-palette($df-purple-palette, 1001); + border: 1px solid mat.get-color-from-palette($df-purple-palette, 1001); + border-radius: 20px; + } +} + +::ng-deep .mat-expansion-panel-header> +.mat-expansion-indicator::after { + color: unset!important; +} + +.dark-theme { + ::ng-deep .mdc-notched-outline > * { + border-color: white !important; + } + .advanced-option { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1002 + ) !important; + border-color: white; + color: white !important; + } + input, + mat-label, + mat-select, + mat-option, + textarea, + span { + color: white; + } + .save-btn { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 200 + ) !important; + color: mat.get-color-from-palette($df-purple-palette, 700) !important; + } + .cancel-btn { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1002 + ) !important; + color: mat.get-color-from-palette($df-purple-palette, 200) !important; + border: 1px solid mat.get-color-from-palette($df-purple-palette, 200) !important; + } +} diff --git a/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.ts b/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.ts index 813c1831..fc8fdc3d 100644 --- a/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.ts +++ b/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.ts @@ -33,6 +33,7 @@ import { addGroupEntries } from '../../utilities/eventScripts'; @Component({ selector: 'df-dynamic-field', templateUrl: './df-dynamic-field.component.html', + // styleUrls: ['./df-dynamic-field.component.scss'], standalone: true, imports: [ MatFormFieldModule, diff --git a/src/app/shared/components/df-manage-table/df-manage-table.component.html b/src/app/shared/components/df-manage-table/df-manage-table.component.html index a4880881..1340a692 100644 --- a/src/app/shared/components/df-manage-table/df-manage-table.component.html +++ b/src/app/shared/components/df-manage-table/df-manage-table.component.html @@ -1,8 +1,8 @@ -
+
-
+
+ {{ control.value ? control.value.name : ('noFileSelected' | transloco) }} + + - - - {{ option.label }} - - - - - - - {{ control.value ? control.value.name : ('noFileSelected' | transloco) }} - -{{ - schema.label - }} - - {{ schema.label }} - - - - {{ option }} - - - + [matTooltip]="schema.description ?? ''" + [attr.aria-label]="schema.label" + >{{ schema.label }} + + {{ schema.label }} + + + + {{ option }} + + + + diff --git a/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.scss b/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.scss new file mode 100644 index 00000000..54a4fe2c --- /dev/null +++ b/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.scss @@ -0,0 +1,17 @@ +@use '@angular/material' as mat; +@use 'src/theme' as theme; +$df-purple-palette: mat.define-palette(theme.$df-purple-palette); + +.dark-theme { + ::ng-deep .mdc-notched-outline > * { + border-color: white !important; + } + input, + mat-label, + mat-select, + mat-option, + textarea, + span { + color: white; + } +} diff --git a/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.ts b/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.ts index fc8fdc3d..bd680bca 100644 --- a/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.ts +++ b/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.ts @@ -29,11 +29,12 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete'; import { Observable, map, startWith } from 'rxjs'; import { ActivatedRoute } from '@angular/router'; import { addGroupEntries } from '../../utilities/eventScripts'; +import { DfThemeService } from '../../services/df-theme.service'; @UntilDestroy({ checkProperties: true }) @Component({ selector: 'df-dynamic-field', templateUrl: './df-dynamic-field.component.html', - // styleUrls: ['./df-dynamic-field.component.scss'], + styleUrls: ['./df-dynamic-field.component.scss'], standalone: true, imports: [ MatFormFieldModule, @@ -63,13 +64,15 @@ export class DfDynamicFieldComponent implements OnInit, DoCheck { constructor( @Optional() @Self() public controlDir: NgControl, - private activedRoute: ActivatedRoute + private activedRoute: ActivatedRoute, + private themeService: DfThemeService ) { controlDir.valueAccessor = this; } eventList: string[]; filteredEventList: Observable; + isDarkMode = this.themeService.darkMode$; ngOnInit(): void { if (this.schema.type === 'event_picklist') { diff --git a/src/app/shared/components/df-field-array/df-array-field.component.html b/src/app/shared/components/df-field-array/df-array-field.component.html index 0ccec4a5..a5161c76 100644 --- a/src/app/shared/components/df-field-array/df-array-field.component.html +++ b/src/app/shared/components/df-field-array/df-array-field.component.html @@ -1,4 +1,4 @@ - + {{ schema.label }}
- + Date: Thu, 2 May 2024 08:27:28 -0700 Subject: [PATCH 4/8] in progress --- .../df-service-details.component.scss | 12 +++++------ .../df-array-field.component.scss | 20 ++++++++++++------- .../df-manage-table.component.scss | 12 ++++++++--- 3 files changed, 28 insertions(+), 16 deletions(-) diff --git a/src/app/adf-services/df-service-details/df-service-details.component.scss b/src/app/adf-services/df-service-details/df-service-details.component.scss index 83eab3a5..dccc2ce5 100644 --- a/src/app/adf-services/df-service-details/df-service-details.component.scss +++ b/src/app/adf-services/df-service-details/df-service-details.component.scss @@ -136,7 +136,7 @@ mat-icon { color: unset !important; } ::ng-deep .mat-mdc-select-arrow { - color: unset!important; + color: unset !important; } .dark-theme { @@ -144,14 +144,14 @@ mat-icon { border-color: white !important; } .mat-accordion { - border: 1px solid white!important; + border: 1px solid white !important; } .advanced-option { background-color: mat.get-color-from-palette( $df-purple-palette, 1002 ) !important; - border: 1px soild white!important; + border: 1px soild white !important; color: white !important; } input, @@ -162,11 +162,11 @@ mat-icon { span { color: white; } - ::ng-deep .mat-mdc-select-disabled{ - color: #a3a1a1!important; + ::ng-deep .mat-mdc-select-disabled { + color: #a3a1a1 !important; } ::ng-deep .mat-mdc-form-field-required-marker { - color: white!important; + color: white !important; } .save-btn { background-color: mat.get-color-from-palette( diff --git a/src/app/shared/components/df-field-array/df-array-field.component.scss b/src/app/shared/components/df-field-array/df-array-field.component.scss index 6720f664..296c148c 100644 --- a/src/app/shared/components/df-field-array/df-array-field.component.scss +++ b/src/app/shared/components/df-field-array/df-array-field.component.scss @@ -25,7 +25,7 @@ $df-purple-palette: mat.define-palette(theme.$df-purple-palette); .dark-theme { &.mat-mdc-card { - border: 1px solid white!important; + border: 1px solid white !important; } mat-card-header { background-color: mat.get-color-from-palette( @@ -33,12 +33,18 @@ $df-purple-palette: mat.define-palette(theme.$df-purple-palette); 1002 ) !important; } - + table { - background-color: mat.get-color-from-palette($df-purple-palette, 1002) !important; + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1002 + ) !important; .mat-mdc-header-row { .mat-mdc-header-cell { - background-color: mat.get-color-from-palette($df-purple-palette, 1002) !important; + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1002 + ) !important; color: white !important; border-color: white !important; } @@ -59,9 +65,9 @@ $df-purple-palette: mat.define-palette(theme.$df-purple-palette); mat-option, textarea, span { - color: white!important; + color: white !important; } .table-td { - color: white!important; + color: white !important; } -} \ No newline at end of file +} diff --git a/src/app/shared/components/df-manage-table/df-manage-table.component.scss b/src/app/shared/components/df-manage-table/df-manage-table.component.scss index 22926406..61c44415 100644 --- a/src/app/shared/components/df-manage-table/df-manage-table.component.scss +++ b/src/app/shared/components/df-manage-table/df-manage-table.component.scss @@ -101,13 +101,19 @@ $red-palette: mat.define-palette(mat.$red-palette); color: white !important; } } - + table { - background-color: mat.get-color-from-palette($df-purple-palette,1002) !important; + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1002 + ) !important; border: 1px solid white !important; .mat-mdc-header-row { .mat-mdc-header-cell { - background-color: mat.get-color-from-palette($df-purple-palette, 1002) !important; + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1002 + ) !important; color: white !important; border-color: white !important; } From 224daf08ef01cf8af161a9ae37dd01215a38fada Mon Sep 17 00:00:00 2001 From: root Date: Thu, 2 May 2024 12:35:23 -0700 Subject: [PATCH 5/8] in progress --- .../df-manage-admins.component.html | 4 +++ .../df-manage-admins.component.scss | 17 +++++++++++ .../df-manage-admins.component.ts | 11 ++++--- .../df-files/df-files.component.html | 4 +++ .../df-files/df-files.component.scss | 17 +++++++++++ .../adf-files/df-files/df-files.component.ts | 5 +++- .../df-manage-users.component.html | 4 +++ .../df-manage-users.component.scss | 17 +++++++++++ .../df-manage-users.component.ts | 9 ++++-- .../df-manage-table.component.html | 3 +- .../df-manage-table.component.scss | 26 +++++++++++++++-- .../df-search-dialog.component.html | 2 +- .../df-search-dialog.component.scss | 29 +++++++++++++++---- 13 files changed, 131 insertions(+), 17 deletions(-) create mode 100644 src/app/adf-admins/df-manage-admins/df-manage-admins.component.scss create mode 100644 src/app/adf-users/df-manage-users/df-manage-users.component.scss diff --git a/src/app/adf-admins/df-manage-admins/df-manage-admins.component.html b/src/app/adf-admins/df-manage-admins/df-manage-admins.component.html index 434775b2..e03fa15a 100644 --- a/src/app/adf-admins/df-manage-admins/df-manage-admins.component.html +++ b/src/app/adf-admins/df-manage-admins/df-manage-admins.component.html @@ -7,6 +7,8 @@ (change)="uploadAdminList($event)" style="display: none" /> - diff --git a/src/app/adf-api-docs/df-api-docs/df-api-docs.component.ts b/src/app/adf-api-docs/df-api-docs/df-api-docs.component.ts index 54073781..d0e23a5d 100644 --- a/src/app/adf-api-docs/df-api-docs/df-api-docs.component.ts +++ b/src/app/adf-api-docs/df-api-docs/df-api-docs.component.ts @@ -14,6 +14,8 @@ import { UntilDestroy } from '@ngneat/until-destroy'; import { DfUserDataService } from 'src/app/shared/services/df-user-data.service'; import { SESSION_TOKEN_HEADER } from 'src/app/shared/constants/http-headers'; import { mapCamelToSnake } from 'src/app/shared/utilities/case'; +import { DfThemeService } from 'src/app/shared/services/df-theme.service'; +import { AsyncPipe } from '@angular/common'; @UntilDestroy({ checkProperties: true }) @Component({ @@ -21,7 +23,7 @@ import { mapCamelToSnake } from 'src/app/shared/utilities/case'; templateUrl: './df-api-docs.component.html', styleUrls: ['./df-api-docs.component.scss'], standalone: true, - imports: [MatButtonModule, TranslocoModule], + imports: [MatButtonModule, TranslocoModule, AsyncPipe], }) export class DfApiDocsComponent implements OnInit, AfterContentInit { @ViewChild('apiDocumentation', { static: true }) apiDocElement: @@ -33,9 +35,10 @@ export class DfApiDocsComponent implements OnInit, AfterContentInit { constructor( private activatedRoute: ActivatedRoute, private router: Router, - private userDataService: DfUserDataService + private userDataService: DfUserDataService, + private themeService: DfThemeService ) {} - + isDarkMode = this.themeService.darkMode$; ngOnInit(): void { this.activatedRoute.data.subscribe(({ data }) => { if (data) { diff --git a/src/app/adf-apps/df-app-details/df-app-details.component.html b/src/app/adf-apps/df-app-details/df-app-details.component.html index 59d9cd40..2cad7acd 100644 --- a/src/app/adf-apps/df-app-details/df-app-details.component.html +++ b/src/app/adf-apps/df-app-details/df-app-details.component.html @@ -1,292 +1,307 @@ - - {{ alertMsg }} - - - - - {{ 'apps.createApp.applicationName.label' | transloco }} - - - - - {{ 'apps.createApp.applicationName.error' | transloco }} - - - - {{ 'apps.createApp.defaultRole.label' | transloco }} - - - - - {{ role.name }} - - - - - {{ 'apps.createApp.description.label' | transloco }} - - - - {{ 'apps.createApp.active' | transloco }} - - - - {{ - 'apps.createApp.apiKey.label' | transloco - }} - - - {{ editApp.apiKey }} - - - - - - - -
-

- {{ 'apps.createApp.appLocation.label' | transloco - }} -

- - {{ - 'apps.createApp.appLocation.options.noStorage' | transloco - }} - {{ - 'apps.createApp.appLocation.options.fileStorage.label' | transloco - }} - {{ - 'apps.createApp.appLocation.options.webServer.label' | transloco - }} - {{ - 'apps.createApp.appLocation.options.remoteUrl.label' | transloco - }} - -
- -
+
+ + {{ alertMsg }} + + - {{ - 'apps.createApp.appLocation.options.fileStorage.storageService.label' - | transloco - }} - - - {{ - 'apps.createApp.appLocation.options.fileStorage.storageService.options.file' - | transloco - }} - - - {{ - 'apps.createApp.appLocation.options.fileStorage.storageService.options.log' - | transloco - }} - - - - - - {{ - 'apps.createApp.appLocation.options.fileStorage.storageFolder.label' - | transloco - }} + class="dynamic-width"> + + {{ 'apps.createApp.applicationName.label' | transloco }} + + placeholder="{{ 'apps.createApp.applicationName.label' | transloco }}" + formControlName="name" + required /> + [matTooltip]="'apps.createApp.applicationName.tooltip' | transloco" /> + + {{ 'apps.createApp.applicationName.error' | transloco }} + - - - {{ - 'apps.createApp.appLocation.options.fileStorage.launchPath.label' - | transloco - }} - - - {{ - 'apps.createApp.appLocation.options.webServer.pathToApp.label' - | transloco - }} - + class="dynamic-width"> + {{ + 'apps.createApp.defaultRole.label' | transloco + }} + formControlName="defaultRole" + [matAutocomplete]="auto" + (input)="filter()" + (focus)="filter()" /> + [matTooltip]="'apps.createApp.defaultRole.tooltip' | transloco" /> + + + {{ role.name }} + + - - {{ 'apps.createApp.appLocation.options.remoteUrl.label' | transloco }} - - + {{ + 'apps.createApp.description.label' | transloco + }} + + [matTooltip]="'apps.createApp.description.tooltip' | transloco" /> - + {{ 'apps.createApp.active' | transloco }} + + *ngIf="editApp" + class="full-width api-card" + [style]="{ 'word-break': 'break-all' }"> {{ - 'apps.createApp.appLocation.options.urlPath.label' | transloco + 'apps.createApp.apiKey.label' | transloco }} - {{ getAppLocationUrl() }} + {{ editApp.apiKey }} - + -
- -
- - -
- + +
+

+ {{ 'apps.createApp.appLocation.label' | transloco + }} +

+ + {{ + 'apps.createApp.appLocation.options.noStorage' | transloco + }} + {{ + 'apps.createApp.appLocation.options.fileStorage.label' | transloco + }} + {{ + 'apps.createApp.appLocation.options.webServer.label' | transloco + }} + {{ + 'apps.createApp.appLocation.options.remoteUrl.label' | transloco + }} + +
+ +
+ + {{ + 'apps.createApp.appLocation.options.fileStorage.storageService.label' + | transloco + }} + + + {{ + 'apps.createApp.appLocation.options.fileStorage.storageService.options.file' + | transloco + }} + + + {{ + 'apps.createApp.appLocation.options.fileStorage.storageService.options.log' + | transloco + }} + + + + + + {{ + 'apps.createApp.appLocation.options.fileStorage.storageFolder.label' + | transloco + }} + + + + + + + {{ + 'apps.createApp.appLocation.options.fileStorage.launchPath.label' + | transloco + }} + + + {{ + 'apps.createApp.appLocation.options.webServer.pathToApp.label' + | transloco + }} + + + + + + + {{ 'apps.createApp.appLocation.options.remoteUrl.label' | transloco }} + + + + + + + + {{ + 'apps.createApp.appLocation.options.urlPath.label' | transloco + }} + + + {{ getAppLocationUrl() }} + + + + + +
+ +
+ + +
+ +
diff --git a/src/app/adf-apps/df-app-details/df-app-details.component.scss b/src/app/adf-apps/df-app-details/df-app-details.component.scss index 1c18082d..fc684160 100644 --- a/src/app/adf-apps/df-app-details/df-app-details.component.scss +++ b/src/app/adf-apps/df-app-details/df-app-details.component.scss @@ -12,14 +12,4 @@ mat-card { .action-bar { display: flex; justify-content: flex-end; - .save-btn { - background-color: mat.get-color-from-palette($df-purple-palette, 500); - color: white; - border-radius: 20px; - } - .cancel-btn { - color: mat.get-color-from-palette($df-purple-palette, 1001); - border: 1px solid mat.get-color-from-palette($df-purple-palette, 1001); - border-radius: 20px; - } } diff --git a/src/app/adf-apps/df-app-details/df-app-details.component.ts b/src/app/adf-apps/df-app-details/df-app-details.component.ts index 9ac447f6..b23e2f77 100644 --- a/src/app/adf-apps/df-app-details/df-app-details.component.ts +++ b/src/app/adf-apps/df-app-details/df-app-details.component.ts @@ -24,7 +24,7 @@ import { MatCardModule } from '@angular/material/card'; import { MatSlideToggleModule } from '@angular/material/slide-toggle'; import { MatOptionModule } from '@angular/material/core'; import { MatAutocompleteModule } from '@angular/material/autocomplete'; -import { NgIf, NgFor } from '@angular/common'; +import { NgIf, NgFor, AsyncPipe } from '@angular/common'; import { MatInputModule } from '@angular/material/input'; import { MatFormFieldModule } from '@angular/material/form-field'; import { @@ -41,7 +41,7 @@ import { catchError, throwError } from 'rxjs'; import { AlertType } from 'src/app/shared/components/df-alert/df-alert.component'; import { DfAlertComponent } from 'src/app/shared/components/df-alert/df-alert.component'; import { RoleType } from 'src/app/shared/types/role'; - +import { DfThemeService } from 'src/app/shared/services/df-theme.service'; @UntilDestroy({ checkProperties: true }) @Component({ selector: 'df-app-details', @@ -65,6 +65,7 @@ import { RoleType } from 'src/app/shared/types/role'; TranslocoPipe, MatTooltipModule, DfAlertComponent, + AsyncPipe, ], }) export class DfAppDetailsComponent implements OnInit { @@ -87,7 +88,8 @@ export class DfAppDetailsComponent implements OnInit { private appsService: DfBaseCrudService, private systemConfigDataService: DfSystemConfigDataService, private activatedRoute: ActivatedRoute, - private router: Router + private router: Router, + private themeService: DfThemeService ) { this.urlOrigin = window.location.origin; @@ -103,7 +105,7 @@ export class DfAppDetailsComponent implements OnInit { url: [''], // type 2 }); } - + isDarkMode = this.themeService.darkMode$; ngOnInit(): void { this.activatedRoute.data.subscribe(({ roles, appData }) => { this.roles = roles.resource || []; diff --git a/src/app/adf-config/df-cache/df-cache.component.html b/src/app/adf-config/df-cache/df-cache.component.html index 2454499b..877468d7 100644 --- a/src/app/adf-config/df-cache/df-cache.component.html +++ b/src/app/adf-config/df-cache/df-cache.component.html @@ -6,7 +6,7 @@ - diff --git a/src/app/adf-config/df-cors/df-cors-config-details.component.ts b/src/app/adf-config/df-cors/df-cors-config-details.component.ts index a6c68dbe..321d6fb7 100644 --- a/src/app/adf-config/df-cors/df-cors-config-details.component.ts +++ b/src/app/adf-config/df-cors/df-cors-config-details.component.ts @@ -30,6 +30,8 @@ import { GenericUpdateResponse, } from 'src/app/shared/types/generic-http'; import { catchError, throwError } from 'rxjs'; +import { DfThemeService } from 'src/app/shared/services/df-theme.service'; +import { AsyncPipe } from '@angular/common'; @UntilDestroy({ checkProperties: true }) @Component({ @@ -52,6 +54,7 @@ import { catchError, throwError } from 'rxjs'; TranslocoPipe, DfVerbPickerComponent, DfAlertComponent, + AsyncPipe, ], }) export class DfCorsConfigDetailsComponent implements OnInit { @@ -68,7 +71,8 @@ export class DfCorsConfigDetailsComponent implements OnInit { private corsConfigService: DfBaseCrudService, private router: Router, private activatedRoute: ActivatedRoute, - private formBuilder: FormBuilder + private formBuilder: FormBuilder, + private themeService: DfThemeService ) { this.corsForm = this.formBuilder.group({ path: ['', Validators.required], @@ -82,6 +86,7 @@ export class DfCorsConfigDetailsComponent implements OnInit { enabled: [true], }); } + isDarkMode = this.themeService.darkMode$; ngOnInit(): void { this.activatedRoute.data.subscribe(data => { diff --git a/src/app/adf-config/df-email-template-details/df-email-template-details.component.html b/src/app/adf-config/df-email-template-details/df-email-template-details.component.html index 073fe00c..6f9a3762 100644 --- a/src/app/adf-config/df-email-template-details/df-email-template-details.component.html +++ b/src/app/adf-config/df-email-template-details/df-email-template-details.component.html @@ -6,12 +6,13 @@ + + + +
+

+ {{ 'scheduler.logs.statusCode' | transloco }}: + {{ scheduleToEdit?.taskLogByTaskId?.statusCode }} +

+ +
- - - -
-

- {{ 'scheduler.logs.statusCode' | transloco }}: - {{ scheduleToEdit?.taskLogByTaskId?.statusCode }} -

- - -
- - + + + diff --git a/src/app/adf-scheduler/df-scheduler-details/df-scheduler-details.component.ts b/src/app/adf-scheduler/df-scheduler-details/df-scheduler-details.component.ts index 4cf759ce..d0cb4684 100644 --- a/src/app/adf-scheduler/df-scheduler-details/df-scheduler-details.component.ts +++ b/src/app/adf-scheduler/df-scheduler-details/df-scheduler-details.component.ts @@ -30,6 +30,8 @@ import { AlertType, DfAlertComponent, } from 'src/app/shared/components/df-alert/df-alert.component'; +import { DfThemeService } from 'src/app/shared/services/df-theme.service'; + import { catchError, throwError } from 'rxjs'; @UntilDestroy({ checkProperties: true }) @Component({ @@ -75,9 +77,12 @@ export class DfSchedulerDetailsComponent implements OnInit { private activatedRoute: ActivatedRoute, private router: Router, @Inject(BASE_SERVICE_TOKEN) - private accessListService: DfBaseCrudService + private accessListService: DfBaseCrudService, + private themeService: DfThemeService ) {} + isDarkMode = this.themeService.darkMode$; + ngOnInit(): void { this.formGroup = this.formBuilder.group({ name: ['', Validators.required], diff --git a/src/app/adf-schema/df-field-details/df-field-details.component.html b/src/app/adf-schema/df-field-details/df-field-details.component.html index e0342193..0cef71d1 100644 --- a/src/app/adf-schema/df-field-details/df-field-details.component.html +++ b/src/app/adf-schema/df-field-details/df-field-details.component.html @@ -1,9 +1,13 @@
- + {{ 'schema.fieldDetailsForm.controls.name' | transloco }} @@ -15,7 +19,10 @@
- + {{ 'schema.fieldDetailsForm.controls.alias.label' | transloco }} @@ -28,7 +35,10 @@ 'schema.fieldDetailsForm.controls.alias.tooltip' | transloco " /> - + {{ 'schema.fieldDetailsForm.controls.label.label' | transloco }} @@ -42,7 +52,10 @@ " /> - + {{ 'schema.fieldDetailsForm.controls.type.label' | transloco }} @@ -61,7 +74,10 @@ 'schema.fieldDetailsForm.controls.type.tooltip' | transloco " /> - + {{ 'schema.fieldDetailsForm.controls.databaseType.label' | transloco }} @@ -74,63 +90,128 @@ 'schema.fieldDetailsForm.controls.databaseType.tooltip' | transloco " /> - + {{ 'schema.fieldDetailsForm.controls.length' | transloco }} - + {{ 'schema.fieldDetailsForm.controls.precision' | transloco }} - + {{ 'schema.fieldDetailsForm.controls.scale' | transloco }} - + {{ 'schema.fieldDetailsForm.controls.defaultValue' | transloco }} - {{ - 'schema.fieldDetailsForm.controls.isVirtual' | transloco - }} - {{ - 'schema.fieldDetailsForm.controls.isAggregate' | transloco - }} - {{ - 'schema.fieldDetailsForm.controls.fixedLength' | transloco - }} - {{ - 'schema.fieldDetailsForm.controls.supportsMultibyte' | transloco - }} - {{ - 'schema.fieldDetailsForm.controls.allowNull' | transloco - }} - {{ - 'schema.fieldDetailsForm.controls.autoIncrement' | transloco - }} + {{ + 'schema.fieldDetailsForm.controls.isVirtual' | transloco + }} + {{ + 'schema.fieldDetailsForm.controls.isAggregate' | transloco + }} + {{ + 'schema.fieldDetailsForm.controls.fixedLength' | transloco + }} + {{ + 'schema.fieldDetailsForm.controls.supportsMultibyte' | transloco + }} + {{ + 'schema.fieldDetailsForm.controls.allowNull' | transloco + }} + {{ + 'schema.fieldDetailsForm.controls.autoIncrement' | transloco + }} - {{ - 'schema.fieldDetailsForm.controls.isIndex' | transloco - }} - {{ - 'schema.fieldDetailsForm.controls.isUnique' | transloco - }} - {{ - 'schema.fieldDetailsForm.controls.isPrimaryKey' | transloco - }} - {{ - 'schema.fieldDetailsForm.controls.isForeignKey' | transloco - }} + {{ + 'schema.fieldDetailsForm.controls.isIndex' | transloco + }} + {{ + 'schema.fieldDetailsForm.controls.isUnique' | transloco + }} + {{ + 'schema.fieldDetailsForm.controls.isPrimaryKey' | transloco + }} + {{ + 'schema.fieldDetailsForm.controls.isForeignKey' | transloco + }} - + {{ 'schema.fieldDetailsForm.controls.refTable' | transloco }} @@ -142,7 +223,10 @@ - + {{ 'schema.fieldDetailsForm.controls.refField' | transloco }} @@ -154,7 +238,10 @@ > - + {{ 'schema.fieldDetailsForm.controls.validation.label' | transloco }} @@ -181,7 +268,10 @@ formArrayName="dbFunction" class="full-width"> + > {{ 'schema.fieldDetailsForm.controls.picklist' | transloco }} @@ -193,8 +283,14 @@
- - +
diff --git a/src/app/adf-schema/df-field-details/df-field-details.component.ts b/src/app/adf-schema/df-field-details/df-field-details.component.ts index 197319b4..287f3e1f 100644 --- a/src/app/adf-schema/df-field-details/df-field-details.component.ts +++ b/src/app/adf-schema/df-field-details/df-field-details.component.ts @@ -26,6 +26,7 @@ import { DatabaseSchemaFieldType } from './df-field-details.types'; import { CsvValidator } from '../validators/csv.validator'; import { faCircleInfo } from '@fortawesome/free-solid-svg-icons'; import { MatTooltipModule } from '@angular/material/tooltip'; +import { DfThemeService } from 'src/app/shared/services/df-theme.service'; @Component({ selector: 'df-field-details', @@ -95,7 +96,8 @@ export class DfFieldDetailsComponent implements OnInit { private service: DfBaseCrudService, private formBuilder: FormBuilder, private activatedRoute: ActivatedRoute, - private router: Router + private router: Router, + private themeService: DfThemeService ) { this.fieldDetailsForm = this.formBuilder.group({ name: ['', Validators.required], @@ -125,6 +127,8 @@ export class DfFieldDetailsComponent implements OnInit { }); } + isDarkMode = this.themeService.darkMode$; + ngOnInit(): void { this.activatedRoute.data.subscribe(data => { this.type = data['type']; diff --git a/src/app/adf-schema/df-table-details/df-table-details.component.html b/src/app/adf-schema/df-table-details/df-table-details.component.html index 1f46bc4a..cf805796 100644 --- a/src/app/adf-schema/df-table-details/df-table-details.component.html +++ b/src/app/adf-schema/df-table-details/df-table-details.component.html @@ -1,83 +1,93 @@ - - - - - - {{ 'schema.tableName' | transloco }} - - - - {{ 'schema.alerts.tableNameError' | transloco }} - - +
+ + + + + + {{ 'schema.tableName' | transloco }} + + + + {{ 'schema.alerts.tableNameError' | transloco }} + + - - - {{ 'schema.alias' | transloco }} - - - - - - {{ 'schema.label' | transloco }} - - - - - {{ 'schema.plural' | transloco }} - - - - {{ 'schema.description' | transloco }} - - + + + {{ 'schema.alias' | transloco }} + + + + + + {{ 'schema.label' | transloco }} + + + + + {{ 'schema.plural' | transloco }} + + + + {{ 'schema.description' | transloco }} + + -
-

{{ 'schema.fields' | transloco }}

- -
+
+

{{ 'schema.fields' | transloco }}

+ +
-
-

{{ 'schema.relationships.heading' | transloco }}

- -
+
+

{{ 'schema.relationships.heading' | transloco }}

+ +
+
+ + +
+ + + +
- -
- - - - -
- - -
- - + + +
diff --git a/src/app/adf-schema/df-table-details/df-table-details.component.ts b/src/app/adf-schema/df-table-details/df-table-details.component.ts index b0676ef1..df09dcf0 100644 --- a/src/app/adf-schema/df-table-details/df-table-details.component.ts +++ b/src/app/adf-schema/df-table-details/df-table-details.component.ts @@ -23,6 +23,8 @@ import { UntilDestroy } from '@ngneat/until-destroy'; import { AceEditorMode } from 'src/app/shared/types/scripts'; import { GenericListResponse } from 'src/app/shared/types/generic-http'; import { TableDetailsType } from './df-table-details.types'; +import { DfThemeService } from 'src/app/shared/services/df-theme.service'; + @UntilDestroy({ checkProperties: true }) @Component({ selector: 'df-table-details', @@ -59,7 +61,8 @@ export class DfTableDetailsComponent implements OnInit { private fb: FormBuilder, private activatedRoute: ActivatedRoute, public breakpointService: DfBreakpointService, - private router: Router + private router: Router, + private themeService: DfThemeService ) { this.tableDetailsForm = this.fb.group({ name: ['', Validators.required], @@ -69,6 +72,7 @@ export class DfTableDetailsComponent implements OnInit { description: [null], }); } + isDarkMode = this.themeService.darkMode$; ngOnInit(): void { this.activatedRoute.data.subscribe(data => { diff --git a/src/app/adf-services/df-service-details/df-service-details.component.html b/src/app/adf-services/df-service-details/df-service-details.component.html index 771f8be5..af9ee1b1 100644 --- a/src/app/adf-services/df-service-details/df-service-details.component.html +++ b/src/app/adf-services/df-service-details/df-service-details.component.html @@ -68,7 +68,9 @@

class="card-icon" [src]="getBackgroundImage(type.name)" [alt]="type.label" /> -

{{ type.label }}

+

+ {{ type.label }} +

@@ -88,7 +90,9 @@

{{ type.label }}

class="card-icon" [src]="getBackgroundImage(type.name)" [alt]="type.label" /> -

{{ type.label }}

+

+ {{ type.label }} +

@@ -168,6 +172,7 @@

{{ type.label }}
{{ 'active' | transloco }}{{ type.label }}
- -
@@ -338,9 +347,7 @@

{{ type.label }}

- + {{ 'services.options' | transloco }} diff --git a/src/app/adf-services/df-service-details/df-service-details.component.scss b/src/app/adf-services/df-service-details/df-service-details.component.scss index dccc2ce5..2addb97b 100644 --- a/src/app/adf-services/df-service-details/df-service-details.component.scss +++ b/src/app/adf-services/df-service-details/df-service-details.component.scss @@ -120,16 +120,7 @@ mat-icon { .action-bar { display: flex; justify-content: flex-end; - .save-btn { - background-color: mat.get-color-from-palette($df-purple-palette, 500); - color: white; - border-radius: 20px; - } - .cancel-btn { - color: mat.get-color-from-palette($df-purple-palette, 1001); - border: 1px solid mat.get-color-from-palette($df-purple-palette, 1001); - border-radius: 20px; - } + } ::ng-deep .mat-expansion-panel-header > .mat-expansion-indicator::after { @@ -139,48 +130,3 @@ mat-icon { color: unset !important; } -.dark-theme { - ::ng-deep .mdc-notched-outline > * { - border-color: white !important; - } - .mat-accordion { - border: 1px solid white !important; - } - .advanced-option { - background-color: mat.get-color-from-palette( - $df-purple-palette, - 1002 - ) !important; - border: 1px soild white !important; - color: white !important; - } - input, - mat-label, - mat-select, - mat-option, - textarea, - span { - color: white; - } - ::ng-deep .mat-mdc-select-disabled { - color: #a3a1a1 !important; - } - ::ng-deep .mat-mdc-form-field-required-marker { - color: white !important; - } - .save-btn { - background-color: mat.get-color-from-palette( - $df-purple-palette, - 200 - ) !important; - color: mat.get-color-from-palette($df-purple-palette, 700) !important; - } - .cancel-btn { - background-color: mat.get-color-from-palette( - $df-purple-palette, - 1002 - ) !important; - color: mat.get-color-from-palette($df-purple-palette, 200) !important; - border: 1px solid mat.get-color-from-palette($df-purple-palette, 200) !important; - } -} diff --git a/src/app/adf-users/df-manage-users/df-manage-users.component.html b/src/app/adf-users/df-manage-users/df-manage-users.component.html index 745e9fe6..31561647 100644 --- a/src/app/adf-users/df-manage-users/df-manage-users.component.html +++ b/src/app/adf-users/df-manage-users/df-manage-users.component.html @@ -7,7 +7,7 @@ (change)="uploadUserList($event)" style="display: none" />
+
diff --git a/src/app/shared/components/df-ace-editor/df-ace-editor.component.ts b/src/app/shared/components/df-ace-editor/df-ace-editor.component.ts index 11518bb3..ab8b84f8 100644 --- a/src/app/shared/components/df-ace-editor/df-ace-editor.component.ts +++ b/src/app/shared/components/df-ace-editor/df-ace-editor.component.ts @@ -11,15 +11,18 @@ import { SimpleChanges, ViewChild, forwardRef, + inject, } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { AceEditorMode } from '../../types/scripts'; - +import { DfThemeService } from '../../services/df-theme.service'; +import { AsyncPipe } from '@angular/common'; @Component({ selector: 'df-ace-editor', templateUrl: './df-ace-editor.component.html', styleUrls: ['./df-ace-editor.component.scss'], standalone: true, + imports: [AsyncPipe], providers: [ { provide: NG_VALUE_ACCESSOR, @@ -42,6 +45,8 @@ export class DfAceEditorComponent onChange: (value: string) => void; onTouched: () => void; + themeService = inject(DfThemeService); + isDarkMode = this.themeService.darkMode$; ngAfterViewInit(): void { this.init(this.elementRef, this.mode); diff --git a/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.scss b/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.scss deleted file mode 100644 index 54a4fe2c..00000000 --- a/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.scss +++ /dev/null @@ -1,17 +0,0 @@ -@use '@angular/material' as mat; -@use 'src/theme' as theme; -$df-purple-palette: mat.define-palette(theme.$df-purple-palette); - -.dark-theme { - ::ng-deep .mdc-notched-outline > * { - border-color: white !important; - } - input, - mat-label, - mat-select, - mat-option, - textarea, - span { - color: white; - } -} diff --git a/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.ts b/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.ts index bd680bca..abc28bb4 100644 --- a/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.ts +++ b/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.ts @@ -34,7 +34,6 @@ import { DfThemeService } from '../../services/df-theme.service'; @Component({ selector: 'df-dynamic-field', templateUrl: './df-dynamic-field.component.html', - styleUrls: ['./df-dynamic-field.component.scss'], standalone: true, imports: [ MatFormFieldModule, diff --git a/src/app/shared/components/df-field-array/df-array-field.component.html b/src/app/shared/components/df-field-array/df-array-field.component.html index a5161c76..dc1a7a4b 100644 --- a/src/app/shared/components/df-field-array/df-array-field.component.html +++ b/src/app/shared/components/df-field-array/df-array-field.component.html @@ -61,7 +61,7 @@
- diff --git a/src/app/shared/components/df-lookup-keys/df-lookup-keys.component.ts b/src/app/shared/components/df-lookup-keys/df-lookup-keys.component.ts index dd480bf7..76304fe6 100644 --- a/src/app/shared/components/df-lookup-keys/df-lookup-keys.component.ts +++ b/src/app/shared/components/df-lookup-keys/df-lookup-keys.component.ts @@ -19,6 +19,9 @@ import { MatExpansionModule } from '@angular/material/expansion'; import { faPlus, faTrashCan } from '@fortawesome/free-solid-svg-icons'; import { TranslocoPipe } from '@ngneat/transloco'; import { UntilDestroy } from '@ngneat/until-destroy'; +import { DfThemeService } from 'src/app/shared/services/df-theme.service'; +import { AsyncPipe } from '@angular/common'; + @UntilDestroy({ checkProperties: true }) @Component({ selector: 'df-lookup-keys', @@ -38,6 +41,7 @@ import { UntilDestroy } from '@ngneat/until-destroy'; FontAwesomeModule, MatExpansionModule, TranslocoPipe, + AsyncPipe, ], }) export class DfLookupKeysComponent implements OnInit { @@ -49,8 +53,11 @@ export class DfLookupKeysComponent implements OnInit { faPlus = faPlus; @Input() showAccordion = true; - constructor(private rootFormGroup: FormGroupDirective) {} - + constructor( + private rootFormGroup: FormGroupDirective, + private themeService: DfThemeService + ) {} + isDarkMode = this.themeService.darkMode$; ngOnInit() { this.rootForm = this.rootFormGroup.control; this.rootFormGroup.ngSubmit.subscribe(() => { diff --git a/src/app/shared/components/df-manage-table/df-manage-table.component.html b/src/app/shared/components/df-manage-table/df-manage-table.component.html index aa370ce1..480fd08c 100644 --- a/src/app/shared/components/df-manage-table/df-manage-table.component.html +++ b/src/app/shared/components/df-manage-table/df-manage-table.component.html @@ -2,7 +2,7 @@ + diff --git a/src/app/shared/components/df-search-dialog/df-search-dialog.component.scss b/src/app/shared/components/df-search-dialog/df-search-dialog.component.scss index 214e3d73..d8a63dc0 100644 --- a/src/app/shared/components/df-search-dialog/df-search-dialog.component.scss +++ b/src/app/shared/components/df-search-dialog/df-search-dialog.component.scss @@ -28,25 +28,7 @@ $df-purple-palette: mat.define-palette(theme.$df-purple-palette); .dark-theme { &.search-dialog { - background-color: mat.get-color-from-palette( - $df-purple-palette, - 1003 - ) !important; + background-color: mat.get-color-from-palette($df-purple-palette, 1003) !important; border: 1px solid white; } - ::ng-deep .mdc-notched-outline > * { - border-color: white !important; - } - input, - mat-label, - mat-select, - mat-option, - textarea, - span { - color: white; - } - button { - color: mat.get-color-from-palette($df-purple-palette, 200) !important; - border: 1px solid mat.get-color-from-palette($df-purple-palette, 200) !important; - } } diff --git a/src/app/shared/components/df-side-nav/df-side-nav.component.html b/src/app/shared/components/df-side-nav/df-side-nav.component.html index c748c638..589f3283 100644 --- a/src/app/shared/components/df-side-nav/df-side-nav.component.html +++ b/src/app/shared/components/df-side-nav/df-side-nav.component.html @@ -87,7 +87,7 @@

API Scripting

- - diff --git a/src/app/shared/components/df-user-details/df-user-details-base.component.ts b/src/app/shared/components/df-user-details/df-user-details-base.component.ts index 665541b5..5d2442d2 100644 --- a/src/app/shared/components/df-user-details/df-user-details-base.component.ts +++ b/src/app/shared/components/df-user-details/df-user-details-base.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { FormArray, FormBuilder, @@ -21,6 +21,7 @@ import { faEnvelope } from '@fortawesome/free-solid-svg-icons'; import { UntilDestroy } from '@ngneat/until-destroy'; import { DfPaywallService } from '../../services/df-paywall.service'; import { of, switchMap } from 'rxjs'; +import { DfThemeService } from '../../services/df-theme.service'; @UntilDestroy({ checkProperties: true }) @Component({ @@ -77,6 +78,8 @@ export abstract class DfUserDetailsBaseComponent implements OnInit { appRoles: this.fb.array([]), }); } + themeService = inject(DfThemeService); + isDarkMode = this.themeService.darkMode$; get cancelRoute() { let route = `/${ROUTES.ADMIN_SETTINGS}/`; diff --git a/src/app/shared/components/df-verb-picker/df-verb-picker.component.html b/src/app/shared/components/df-verb-picker/df-verb-picker.component.html index 5c94abaf..bae179a9 100644 --- a/src/app/shared/components/df-verb-picker/df-verb-picker.component.html +++ b/src/app/shared/components/df-verb-picker/df-verb-picker.component.html @@ -1,17 +1,19 @@ - - {{ schema.label }} - - - {{ verb.label }} - - - - +
+ + {{ schema.label }} + + + {{ verb.label }} + + + + +
diff --git a/src/app/shared/components/df-verb-picker/df-verb-picker.component.ts b/src/app/shared/components/df-verb-picker/df-verb-picker.component.ts index 9b75b3ff..941b51c7 100644 --- a/src/app/shared/components/df-verb-picker/df-verb-picker.component.ts +++ b/src/app/shared/components/df-verb-picker/df-verb-picker.component.ts @@ -15,7 +15,8 @@ import { MatTooltipModule } from '@angular/material/tooltip'; import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; import { faCircleInfo } from '@fortawesome/free-solid-svg-icons'; import { UntilDestroy } from '@ngneat/until-destroy'; - +import { DfThemeService } from 'src/app/shared/services/df-theme.service'; +import { AsyncPipe } from '@angular/common'; type Verb = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE'; @UntilDestroy({ checkProperties: true }) @Component({ @@ -31,6 +32,7 @@ type Verb = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE'; NgIf, MatTooltipModule, FontAwesomeModule, + AsyncPipe, ], }) export class DfVerbPickerComponent implements ControlValueAccessor, DoCheck { @@ -71,9 +73,13 @@ export class DfVerbPickerComponent implements ControlValueAccessor, DoCheck { onChange: (value: number | Verb | Array) => void; onTouched: () => void; - constructor(@Self() public controlDir: NgControl) { + constructor( + @Self() public controlDir: NgControl, + private themeService: DfThemeService + ) { controlDir.valueAccessor = this; } + isDarkMode = this.themeService.darkMode$; ngDoCheck(): void { if ( diff --git a/src/dark-style.scss b/src/dark-style.scss new file mode 100644 index 00000000..03c6169f --- /dev/null +++ b/src/dark-style.scss @@ -0,0 +1,248 @@ +/* You can add global styles to this file, and also import other style files */ +@use '@angular/material' as mat; +@use 'src/theme' as theme; + +$df-purple-palette: mat.define-palette(theme.$df-purple-palette); + +.dark-theme { + // Font + .breadcrumb-link > span { + color: mat.get-color-from-palette($df-purple-palette, 500) !important; + } + + // Divider + .mat-divider { + border-color: white !important; + } + .system-info-container + .system-info-instance + .system-info-packages + .package-header { + border-bottom-color: white !important; + } + .system-info-container .system-info-instance .system-info-packages { + border-left-color: white !important; + } + + // Step + .mat-stepper-horizontal { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1002 + ) !important; + border: 1px solid white !important; + } + .mat-step-icon { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 300 + ) !important; + } + .mat-step-icon-selected { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 700 + ) !important; + } + .mat-step-icon-state-edit { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 700 + ) !important; + } + .mat-stepper-horizontal-line { + border-top-color: white !important; + } + + .mat-step-label { + color: white !important; + } + + // Radio Button + .mat-mdc-radio-button + .mdc-radio + .mdc-radio__native-control + + .mdc-radio__background + .mdc-radio__outer-circle { + border-color: white !important; + } + // Checkbox + .mat-mdc-checkbox .mdc-checkbox__background, + .mdc-checkbox__ripple { + border-color: white !important; + } + + // Form Element + .mdc-notched-outline > * { + border-color: white !important; + } + + mat-label, + mat-select, + mat-option, + input, + textarea, + button, + span { + color: white !important; + } + .mat-mdc-form-field-required-marker { + color: white !important; + } + .mdc-form-field > label { + color: white !important; + } + .mat-mdc-select-disabled { + color: #a3a1a1 !important; + } + // Button + .save-btn { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 600 + ) !important; + color: mat.get-color-from-palette($df-purple-palette, 700) !important; + } + .cancel-btn { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1002 + ) !important; + color: mat.get-color-from-palette($df-purple-palette, 200) !important; + border: 1px solid mat.get-color-from-palette($df-purple-palette, 200) !important; + } + .copy-btn { + color: white !important; + } + .refresh-btn { + color: #a3a1a1 !important; + } + .close-btn { + color: mat.get-color-from-palette($df-purple-palette, 200) !important; + border: 1px solid mat.get-color-from-palette($df-purple-palette, 200) !important; + } + + // Card + .mat-mdc-card { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1002 + ) !important; + color: white !important; + border: 1px solid white !important; + } + .mat-mdc-card-header { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1002 + ) !important; + color: white !important; + } + .mat-mdc-card-subtitle { + color: #a3a1a1 !important; + } + + .mat-expansion-panel { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1002 + ) !important; + border: 1px soild white !important; + color: white !important; + } + .mat-expansion-panel-header { + color: white !important; + } + + .mat-accordion .mat-expansion-panel { + border: 1px solid white !important; + } + .mat-expansion-panel-header-title, + .mat-expansion-indicator::after { + color: white; + } + .mat-expansion-panel-header-description { + color: #a3a1a1; + } + + // Table + table, + .mat-mdc-table { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1002 + ) !important; + .mat-mdc-header-row { + .mat-mdc-header-cell { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1002 + ) !important; + color: white !important; + border-color: white !important; + } + } + .mat-mdc-row { + .mat-mdc-cell { + color: white !important; + border-color: white !important; + } + } + .action-btn { + color: mat.get-color-from-palette($df-purple-palette, 700) !important; + } + } + .no-data-row td { + color: white !important; + } + + .clickable { + &.mat-mdc-row:focus, + &.mat-mdc-row:focus-within { + .mat-mdc-cell:first-child { + border-left: 2px solid + mat.get-color-from-palette($df-purple-palette, 800) !important; + } + } + + &.mat-mdc-row:focus, + &.mat-mdc-row:focus-within, + &.mat-mdc-row:hover { + .mat-mdc-cell { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 600 + ) !important; + } + } + } + + // Swagger + .swagger-ui .info .title, + .swagger-ui .renderedMarkdown p { + color: white !important; + } + + .swagger-ui .scheme-container { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1002 + ) !important; + border: 1px solid white !important; + color: white !important; + } + .swagger-ui .model-toggle::after { + background-color: white !important; + } + + // Editor + .editor { + color: unset !important; + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1002 + ) !important; + border: 1px solid white; + } + +} diff --git a/src/styles.scss b/src/styles.scss index 8669e712..96e4195f 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,7 +1,7 @@ /* You can add global styles to this file, and also import other style files */ @use '@angular/material' as mat; @use 'src/theme' as theme; - +@import 'src/dark-style.scss'; $df-purple-palette: mat.define-palette(theme.$df-purple-palette); html, @@ -19,10 +19,6 @@ body { font-family: Roboto, 'Helvetica Neue', sans-serif; } -a { - color: mat.get-color-from-palette($df-purple-palette, 600); -} - .flex-col { display: flex; flex-direction: column; @@ -145,3 +141,85 @@ fa-icon.mat-mdc-tooltip-trigger { padding: 8px; height: 100%; } + +// light mode +a { + color: mat.get-color-from-palette($df-purple-palette, 600); +} + +// Step +.mat-step-icon-selected { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 400 + ) !important; +} +.mat-step-icon-state-edit { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 400 + ) !important; +} + +// Radio Button +.mat-mdc-radio-button + .mdc-radio + .mdc-radio__native-control + + .mdc-radio__background + .mdc-radio__outer-circle { + border-color: black !important; +} + +.mat-mdc-radio-button + .mdc-radio + .mdc-radio__native-control:enabled:checked + + .mdc-radio__background + .mdc-radio__outer-circle { + border-color: mat.get-color-from-palette($df-purple-palette, 600) !important; +} + +.mat-mdc-radio-button + .mdc-radio + .mdc-radio__native-control:enabled + + .mdc-radio__background + .mdc-radio__inner-circle { + border-color: mat.get-color-from-palette($df-purple-palette, 600) !important; +} + +// Checkbox +.mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background, +.mdc-checkbox__ripple { + background-color: mat.get-color-from-palette($df-purple-palette, 600) !important; + border-color: mat.get-color-from-palette($df-purple-palette, 600) !important; +} + +// Button +.save-btn { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 400 + ) !important; + color: white !important; + border-radius: 20px !important; +} +.cancel-btn { + color: mat.get-color-from-palette($df-purple-palette, 1001) !important; + border: 1px solid mat.get-color-from-palette($df-purple-palette, 1001) !important; + border-radius: 20px !important; +} +.action-btn { + color: mat.get-color-from-palette($df-purple-palette, 500) !important; +} +// Select +.mat-mdc-select-arrow { + color: unset !important; +} +// Tab +.mat-mdc-tab .mdc-tab-indicator__content--underline { + border-color: mat.get-color-from-palette($df-purple-palette, 500) !important; +} + +// Swagger +.swagger-ui .opblock .opblock-section-header { + background: unset !important; +} From 7c755e7438b008b7caf6aeaa3cb8a4dfd204d128 Mon Sep 17 00:00:00 2001 From: root Date: Mon, 6 May 2024 07:47:37 -0500 Subject: [PATCH 8/8] updated styling --- src/app/adf-files/df-files/df-files.component.scss | 1 - .../df-welcome-page/df-welcome-page.component.scss | 1 - .../df-service-details/df-service-details.component.scss | 2 -- .../df-manage-table/df-manage-table.component.scss | 2 +- .../df-search-dialog/df-search-dialog.component.scss | 5 ++++- src/dark-style.scss | 5 ++--- src/styles.scss | 7 +++++-- 7 files changed, 12 insertions(+), 11 deletions(-) diff --git a/src/app/adf-files/df-files/df-files.component.scss b/src/app/adf-files/df-files/df-files.component.scss index 8b137891..e69de29b 100644 --- a/src/app/adf-files/df-files/df-files.component.scss +++ b/src/app/adf-files/df-files/df-files.component.scss @@ -1 +0,0 @@ - diff --git a/src/app/adf-home/df-welcome-page/df-welcome-page.component.scss b/src/app/adf-home/df-welcome-page/df-welcome-page.component.scss index 3fd05f12..9b29e51a 100644 --- a/src/app/adf-home/df-welcome-page/df-welcome-page.component.scss +++ b/src/app/adf-home/df-welcome-page/df-welcome-page.component.scss @@ -82,7 +82,6 @@ mat-card.notice-card { } .dark-theme { - .notice-card { background-color: mat.get-color-from-palette( $df-purple-palette, diff --git a/src/app/adf-services/df-service-details/df-service-details.component.scss b/src/app/adf-services/df-service-details/df-service-details.component.scss index 2addb97b..fe19d8af 100644 --- a/src/app/adf-services/df-service-details/df-service-details.component.scss +++ b/src/app/adf-services/df-service-details/df-service-details.component.scss @@ -120,7 +120,6 @@ mat-icon { .action-bar { display: flex; justify-content: flex-end; - } ::ng-deep .mat-expansion-panel-header > .mat-expansion-indicator::after { @@ -129,4 +128,3 @@ mat-icon { ::ng-deep .mat-mdc-select-arrow { color: unset !important; } - diff --git a/src/app/shared/components/df-manage-table/df-manage-table.component.scss b/src/app/shared/components/df-manage-table/df-manage-table.component.scss index 703fd530..d2547f72 100644 --- a/src/app/shared/components/df-manage-table/df-manage-table.component.scss +++ b/src/app/shared/components/df-manage-table/df-manage-table.component.scss @@ -20,7 +20,7 @@ $red-palette: mat.define-palette(mat.$red-palette); align-items: center; gap: 12px; padding-bottom: 12px; - + .search-input { height: 80% !important; max-width: 300px !important; diff --git a/src/app/shared/components/df-search-dialog/df-search-dialog.component.scss b/src/app/shared/components/df-search-dialog/df-search-dialog.component.scss index d8a63dc0..c3ae148f 100644 --- a/src/app/shared/components/df-search-dialog/df-search-dialog.component.scss +++ b/src/app/shared/components/df-search-dialog/df-search-dialog.component.scss @@ -28,7 +28,10 @@ $df-purple-palette: mat.define-palette(theme.$df-purple-palette); .dark-theme { &.search-dialog { - background-color: mat.get-color-from-palette($df-purple-palette, 1003) !important; + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1003 + ) !important; border: 1px solid white; } } diff --git a/src/dark-style.scss b/src/dark-style.scss index 03c6169f..1c57a7d9 100644 --- a/src/dark-style.scss +++ b/src/dark-style.scss @@ -9,7 +9,7 @@ $df-purple-palette: mat.define-palette(theme.$df-purple-palette); .breadcrumb-link > span { color: mat.get-color-from-palette($df-purple-palette, 500) !important; } - + // Divider .mat-divider { border-color: white !important; @@ -164,7 +164,7 @@ $df-purple-palette: mat.define-palette(theme.$df-purple-palette); .mat-expansion-panel-header-description { color: #a3a1a1; } - + // Table table, .mat-mdc-table { @@ -244,5 +244,4 @@ $df-purple-palette: mat.define-palette(theme.$df-purple-palette); ) !important; border: 1px solid white; } - } diff --git a/src/styles.scss b/src/styles.scss index 96e4195f..2cb1dc01 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -189,7 +189,10 @@ a { // Checkbox .mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background, .mdc-checkbox__ripple { - background-color: mat.get-color-from-palette($df-purple-palette, 600) !important; + background-color: mat.get-color-from-palette( + $df-purple-palette, + 600 + ) !important; border-color: mat.get-color-from-palette($df-purple-palette, 600) !important; } @@ -210,7 +213,7 @@ a { .action-btn { color: mat.get-color-from-palette($df-purple-palette, 500) !important; } -// Select +// Select .mat-mdc-select-arrow { color: unset !important; }