From e25b59fca7f19843925df8473ffde0808325af5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Wed, 29 Jun 2022 00:39:58 +0300 Subject: [PATCH] RED-4397: Dark theme WIP --- .../user-profile-screen.component.html | 12 +++++++++++- .../user-profile-screen.component.ts | 14 +++++++++++++- .../watermark-screen.component.scss | 4 ++-- .../watermark-screen/watermark-screen.component.ts | 6 +++++- .../pdf-viewer/services/pdf-viewer.service.ts | 3 +++ .../src/app/services/user-preference.service.ts | 3 ++- apps/red-ui/src/assets/i18n/de.json | 1 + apps/red-ui/src/assets/i18n/en.json | 1 + libs/red-domain/src/lib/users/profile.ts | 1 + 9 files changed, 39 insertions(+), 6 deletions(-) diff --git a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.html b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.html index 5291221dd..4d6c2172c 100644 --- a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.html +++ b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.html @@ -28,11 +28,21 @@
{{ 'user-profile-screen.actions.change-password' | translate }}
+
+ + {{ 'user-profile-screen.form.dark-theme' | translate }} + +
-
diff --git a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts index e835758e3..941c9ff75 100644 --- a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts +++ b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts @@ -10,7 +10,7 @@ import { UserService } from '@services/user.service'; import { ConfigService } from '@services/config.service'; import { LanguageService } from '../../../../../i18n/language.service'; import { firstValueFrom } from 'rxjs'; -import { UserPreferenceService } from '../../../../../services/user-preference.service'; +import { UserPreferenceService } from '@services/user-preference.service'; @Component({ selector: 'redaction-user-profile-screen', @@ -34,6 +34,7 @@ export class UserProfileScreenComponent extends BaseFormComponent implements OnI private readonly _formBuilder: UntypedFormBuilder, private readonly _languageService: LanguageService, protected readonly _translateService: TranslateService, + protected readonly _userPreferenceService: UserPreferenceService, ) { super(); this._loadingService.start(); @@ -44,9 +45,14 @@ export class UserProfileScreenComponent extends BaseFormComponent implements OnI return this.#profileModel['language'] !== this.form.get('language').value; } + get themeChanged(): boolean { + return this._profileModel['darkTheme'] !== this.form.get('darkTheme').value; + } + get profileChanged(): boolean { const keys = Object.keys(this.form.getRawValue()); keys.splice(keys.indexOf('language'), 1); + keys.splice(keys.indexOf('darkTheme'), 1); for (const key of keys) { if (this.#profileModel[key] !== this.form.get(key).value) { @@ -86,6 +92,10 @@ export class UserProfileScreenComponent extends BaseFormComponent implements OnI await firstValueFrom(this._userService.loadAll()); } + if (this.themeChanged) { + await this._userPreferenceService.saveTheme(this.form.get('darkTheme').value ? 'dark' : 'light'); + } + this._initializeForm(); } @@ -95,6 +105,7 @@ export class UserProfileScreenComponent extends BaseFormComponent implements OnI firstName: [undefined], lastName: [undefined], language: [undefined], + darkTheme: [false], }); } @@ -106,6 +117,7 @@ export class UserProfileScreenComponent extends BaseFormComponent implements OnI firstName: this._userService.currentUser.firstName, lastName: this._userService.currentUser.lastName, language: this._languageService.currentLanguage, + darkTheme: this._userPreferenceService.getTheme() === 'dark', }; if (this._userService.currentUser.email) { // disable email if it's already set diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.scss index bbdca01c2..18550f5ed 100644 --- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.scss @@ -39,7 +39,7 @@ width: 60px; height: 60px; border-radius: 8px; - background-color: var(--iqser-grey-6); + background-color: var(--iqser-btn-bg); color: var(--iqser-grey-7); align-items: center; justify-content: center; @@ -53,7 +53,7 @@ } &:not(.disabled):not(.active):hover { - background-color: darken(variables.$grey-6, 2); + background-color: var(--iqser-btn-bg-hover); } &:not(:last-child) { diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts index a1facac72..61fd8a519 100644 --- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts @@ -12,7 +12,8 @@ import { WatermarkService } from '@services/entity-services/watermark.service'; import { firstValueFrom, Observable, of, switchMap } from 'rxjs'; import { catchError, tap } from 'rxjs/operators'; import { ActivatedRoute } from '@angular/router'; -import { LicenseService } from '../../../../../services/license.service'; +import { LicenseService } from '@services/license.service'; +import { UserPreferenceService } from '@services/user-preference.service'; export const DEFAULT_WATERMARK: IWatermark = { text: null, @@ -48,6 +49,7 @@ export class WatermarkScreenComponent implements OnInit { @Inject(BASE_HREF_FN) private readonly _convertPath: BaseHrefFn, private readonly _watermarkService: WatermarkService, private readonly _changeDetectorRef: ChangeDetectorRef, + private readonly _userPreferenceService: UserPreferenceService, ) { this._loadingService.start(); this.#dossierTemplateId = route.snapshot.paramMap.get(DOSSIER_TEMPLATE_ID); @@ -137,6 +139,8 @@ export class WatermarkScreenComponent implements OnInit { ).then(instance => { this._instance = instance; + instance.UI.setTheme(this._userPreferenceService.getTheme()); + instance.Core.documentViewer.on('documentLoaded', async () => { this._loadingService.stop(); await this._drawWatermark(); diff --git a/apps/red-ui/src/app/modules/pdf-viewer/services/pdf-viewer.service.ts b/apps/red-ui/src/app/modules/pdf-viewer/services/pdf-viewer.service.ts index b35624d90..6adad4f0a 100644 --- a/apps/red-ui/src/app/modules/pdf-viewer/services/pdf-viewer.service.ts +++ b/apps/red-ui/src/app/modules/pdf-viewer/services/pdf-viewer.service.ts @@ -13,6 +13,7 @@ import { Rgb } from '../utils/types'; import { asList } from '../utils/functions'; import { TranslateService } from '@ngx-translate/core'; import { LicenseService } from '@services/license.service'; +import { UserPreferenceService } from '@services/user-preference.service'; import TextTool = Core.Tools.TextTool; import Annotation = Core.Annotations.Annotation; import TextHighlightAnnotation = Core.Annotations.TextHighlightAnnotation; @@ -53,6 +54,7 @@ export class PdfViewer { private readonly _activatedRoute: ActivatedRoute, private readonly _licenseService: LicenseService, private readonly _translateService: TranslateService, + private readonly _userPreferenceService: UserPreferenceService, @Inject(BASE_HREF_FN) private readonly _convertPath: BaseHrefFn, ) {} @@ -133,6 +135,7 @@ export class PdfViewer { this.#instance = await this.#getInstance(htmlElement); await this.PDFNet.initialize(this._licenseService.activeLicenseKey); + this.#instance.UI.setTheme(this._userPreferenceService.getTheme()); this._logger.info('[PDF] Initialized'); this.documentViewer = this.#instance.Core.documentViewer; diff --git a/apps/red-ui/src/app/services/user-preference.service.ts b/apps/red-ui/src/app/services/user-preference.service.ts index e12759a5d..d426b3349 100644 --- a/apps/red-ui/src/app/services/user-preference.service.ts +++ b/apps/red-ui/src/app/services/user-preference.service.ts @@ -48,11 +48,12 @@ export class UserPreferenceService extends GenericService { } getTheme(): string { - return this._getAttribute(KEYS.theme, 'dark'); + return this._getAttribute(KEYS.theme, 'light'); } async saveTheme(theme: 'light' | 'dark'): Promise { await this._save(KEYS.theme, theme); + window.location.reload(); } getLanguage(): string { diff --git a/apps/red-ui/src/assets/i18n/de.json b/apps/red-ui/src/assets/i18n/de.json index a71f6718d..86e26ec43 100644 --- a/apps/red-ui/src/assets/i18n/de.json +++ b/apps/red-ui/src/assets/i18n/de.json @@ -2058,6 +2058,7 @@ "save": "Änderungen speichern" }, "form": { + "dark-theme": "", "email": "Email", "first-name": "Vorname", "last-name": "Nachname" diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 5eca70ac2..f67ea9c87 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -2058,6 +2058,7 @@ "save": "Save Changes" }, "form": { + "dark-theme": "Dark Theme", "email": "Email", "first-name": "First name", "last-name": "Last name" diff --git a/libs/red-domain/src/lib/users/profile.ts b/libs/red-domain/src/lib/users/profile.ts index d45a837bd..e53543392 100644 --- a/libs/red-domain/src/lib/users/profile.ts +++ b/libs/red-domain/src/lib/users/profile.ts @@ -4,4 +4,5 @@ export interface IProfile { firstName: string; lastName: string; language: string; + darkTheme: boolean; }