Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

RED-4397: Dark theme WIP

Browse Source
This commit is contained in:
Adina Țeudan 2022-06-29 00:39:58 +03:00
parent 9207eb0454
commit e25b59fca7
9 changed files with 39 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.html
View File

@ -28,11 +28,21 @@
<div class="iqser-input-group">
<a [href]="changePasswordUrl" target="_blank"> {{ 'user-profile-screen.actions.change-password' | translate }}</a>
</div>
<div class="iqser-input-group">
<mat-slide-toggle color="primary" formControlName="darkTheme">
{{ 'user-profile-screen.form.dark-theme' | translate }}
</mat-slide-toggle>
</div>
</div>
</div>
<div class="dialog-actions">
<button [disabled]="form.invalid || !(profileChanged || languageChanged)" color="primary" mat-flat-button type="submit">
<button
[disabled]="form.invalid || !(profileChanged || languageChanged || themeChanged)"
color="primary"
mat-flat-button
type="submit"
>
{{ 'user-profile-screen.actions.save' | translate }}
</button>
</div>

14
apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts
View File

@ -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

4
apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.scss
View File

@ -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) {

6
apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts
View File

@ -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();

3
apps/red-ui/src/app/modules/pdf-viewer/services/pdf-viewer.service.ts
View File

@ -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;

3
apps/red-ui/src/app/services/user-preference.service.ts
View File

@ -48,11 +48,12 @@ export class UserPreferenceService extends GenericService<UserAttributes> {
}
getTheme(): string {
return this._getAttribute(KEYS.theme, 'dark');
return this._getAttribute(KEYS.theme, 'light');
}
async saveTheme(theme: 'light' | 'dark'): Promise<void> {
await this._save(KEYS.theme, theme);
window.location.reload();
}
getLanguage(): string {

1
apps/red-ui/src/assets/i18n/de.json
View File

@ -2058,6 +2058,7 @@
"save": "Änderungen speichern"
},
"form": {
"dark-theme": "",
"email": "Email",
"first-name": "Vorname",
"last-name": "Nachname"

1
apps/red-ui/src/assets/i18n/en.json
View File

@ -2058,6 +2058,7 @@
"save": "Save Changes"
},
"form": {
"dark-theme": "Dark Theme",
"email": "Email",
"first-name": "First name",
"last-name": "Last name"

1
libs/red-domain/src/lib/users/profile.ts
View File

@ -4,4 +4,5 @@ export interface IProfile {
firstName: string;
lastName: string;
language: string;
darkTheme: boolean;
}