diff --git a/apps/red-ui/src/app/app.component.ts b/apps/red-ui/src/app/app.component.ts index 68361d897..2c7c8b6f4 100644 --- a/apps/red-ui/src/app/app.component.ts +++ b/apps/red-ui/src/app/app.component.ts @@ -4,6 +4,7 @@ import { UserService } from '@services/user.service'; import { REDDocumentViewer } from './modules/pdf-viewer/services/document-viewer.service'; import { DossiersChangesService } from '@services/dossiers/dossier-changes.service'; import { DOCUMENT } from '@angular/common'; +import { UserPreferenceService } from '@services/user-preference.service'; @Component({ selector: 'redaction-root', @@ -17,12 +18,13 @@ export class AppComponent { readonly viewContainerRef: ViewContainerRef, private readonly _routerHistoryService: RouterHistoryService, private readonly _userService: UserService, + private readonly _userPreferenceService: UserPreferenceService, readonly documentViewer: REDDocumentViewer, private readonly _dossierChangesService: DossiersChangesService, @Inject(DOCUMENT) private document: Document, private renderer: Renderer2, ) { - this.renderer.addClass(this.document.body, 'dark'); + this.renderer.addClass(this.document.body, _userPreferenceService.getTheme()); // TODO: Find a better place to initialize dossiers refresh if (_userService.currentUser?.isUser) { _dossierChangesService.initializeRefresh(); diff --git a/apps/red-ui/src/app/modules/admin/screens/entities-listing/entities-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/entities-listing/entities-listing-screen.component.html index e72abf4cf..985cde3c9 100644 --- a/apps/red-ui/src/app/modules/admin/screens/entities-listing/entities-listing-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/entities-listing/entities-listing-screen.component.html @@ -78,8 +78,8 @@ -
- {{ dict.rank }} +
+ {{ dict.rank }}
diff --git a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.ts index 24ffb9c9b..5e810dc17 100644 --- a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.ts @@ -7,6 +7,7 @@ import { RulesService } from '../../../services/rules.service'; import { firstValueFrom } from 'rxjs'; import { ActivatedRoute } from '@angular/router'; import { DOSSIER_TEMPLATE_ID } from '@red/domain'; +import { EditorThemeService } from '@services/editor-theme.service'; import ICodeEditor = monaco.editor.ICodeEditor; import IModelDeltaDecoration = monaco.editor.IModelDeltaDecoration; import IStandaloneEditorConstructionOptions = monaco.editor.IStandaloneEditorConstructionOptions; @@ -44,6 +45,7 @@ export class RulesScreenComponent implements OnInit { private readonly _changeDetectorRef: ChangeDetectorRef, private readonly _toaster: Toaster, private readonly _loadingService: LoadingService, + private readonly _editorThemeService: EditorThemeService, route: ActivatedRoute, ) { this.#dossierTemplateId = route.snapshot.paramMap.get(DOSSIER_TEMPLATE_ID); @@ -73,15 +75,10 @@ export class RulesScreenComponent implements OnInit { onCodeEditorInit(editor: ICodeEditor) { this._codeEditor = editor; - (window as any).monaco.editor.defineTheme('redaction', { - base: 'vs', - inherit: true, - rules: [], - colors: { - 'editor.lineHighlightBackground': '#f4f5f7', - }, - }); - (window as any).monaco.editor.setTheme('redaction'); + for (const theme of this._editorThemeService.themes) { + (window as any).monaco.editor.defineTheme(theme, this._editorThemeService.configurations[theme]); + } + (window as any).monaco.editor.setTheme(this._editorThemeService.getTheme(true)); this._changeDetectorRef.detectChanges(); } diff --git a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.scss b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.scss index 862b53102..9afd86ac7 100644 --- a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.scss +++ b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.scss @@ -6,7 +6,7 @@ ngx-monaco-editor { } %arrow { - border: solid var(--iqser-grey-1); + border: solid var(--iqser-text); border-width: 2px 0 0 2px; height: 4px !important; width: 4px !important; diff --git a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts index f2cdbe2f2..f70b83f7b 100644 --- a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts @@ -1,5 +1,7 @@ import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; import { Debounce, List, OnChange } from '@iqser/common-ui'; +import { UserPreferenceService } from '@services/user-preference.service'; +import { EditorThemeService } from '@services/editor-theme.service'; import IStandaloneEditorConstructionOptions = monaco.editor.IStandaloneEditorConstructionOptions; import ICodeEditor = monaco.editor.ICodeEditor; import IDiffEditor = monaco.editor.IDiffEditor; @@ -41,6 +43,8 @@ export class EditorComponent implements OnInit, OnChanges { private _diffEditor: IDiffEditor; private _decorations: string[] = []; + constructor(private readonly _userPreferenceService: UserPreferenceService, private readonly _editorThemeService: EditorThemeService) {} + get currentEntries(): string[] { return this.value.split('\n'); } @@ -102,31 +106,14 @@ export class EditorComponent implements OnInit, OnChanges { } private _defineThemes(): void { - (window as any).monaco.editor.defineTheme('redaction', { - base: 'vs', - inherit: true, - rules: [], - colors: { - 'editor.lineHighlightBackground': '#f4f5f7', - }, - }); - (window as any).monaco.editor.defineTheme('redaction-disabled', { - base: 'vs', - inherit: true, - rules: [], - colors: { - 'editor.background': '#f4f5f7', - 'editor.foreground': '#9398a0', - 'editor.lineHighlightBackground': '#f4f5f7', - 'editorLineNumber.foreground': '#9398a0', - 'editorActiveLineNumber.foreground': '#9398a0', - }, - }); + for (const theme of this._editorThemeService.themes) { + (window as any).monaco.editor.defineTheme(theme, this._editorThemeService.configurations[theme]); + } } private _setTheme(): void { this._defineThemes(); - (window as any).monaco.editor.setTheme(this.canEdit ? 'redaction' : 'redaction-disabled'); + (window as any).monaco.editor.setTheme(this._editorThemeService.getTheme(this.canEdit)); } private _handleMarginButtonClick(event: IEditorMouseEvent) { diff --git a/apps/red-ui/src/app/services/editor-theme.service.ts b/apps/red-ui/src/app/services/editor-theme.service.ts new file mode 100644 index 000000000..8033eeef0 --- /dev/null +++ b/apps/red-ui/src/app/services/editor-theme.service.ts @@ -0,0 +1,62 @@ +import { Injectable } from '@angular/core'; +import { UserPreferenceService } from './user-preference.service'; +import { editor } from 'monaco-editor'; +import IStandaloneThemeData = editor.IStandaloneThemeData; + +@Injectable({ + providedIn: 'root', +}) +export class EditorThemeService { + readonly themes = ['redaction', 'redaction-disabled', 'redaction-dark', 'redaction-disabled-dark']; + readonly configurations: Record = { + redaction: { + base: 'vs', + inherit: true, + rules: [], + colors: { + 'editor.lineHighlightBackground': '#f4f5f7', + }, + }, + 'redaction-disabled': { + base: 'vs', + inherit: true, + rules: [], + colors: { + 'editor.background': '#f4f5f7', + 'editor.foreground': '#9398a0', + 'editor.lineHighlightBackground': '#f4f5f7', + 'editorLineNumber.foreground': '#9398a0', + 'editorActiveLineNumber.foreground': '#9398a0', + }, + }, + 'redaction-dark': { + base: 'vs-dark', + inherit: true, + rules: [], + colors: { + 'editor.background': '#151a21', + 'editor.lineHighlightBackground': '#283241', + }, + }, + 'redaction-disabled-dark': { + base: 'vs-dark', + inherit: true, + rules: [], + colors: { + 'editor.background': '#151a21', + 'editor.foreground': '#9398a0', + 'editor.lineHighlightBackground': '#283241', + 'editorLineNumber.foreground': '#9398a0', + 'editorActiveLineNumber.foreground': '#9398a0', + }, + }, + }; + + constructor(private readonly _userPreferenceService: UserPreferenceService) {} + + getTheme(canEdit: boolean): string { + const isDarkTheme = this._userPreferenceService.getTheme() === 'dark'; + const editorTheme = canEdit ? 'redaction' : 'redaction-disabled'; + return `${editorTheme}${isDarkTheme ? '-dark' : ''}`; + } +} 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 5df934cac..e12759a5d 100644 --- a/apps/red-ui/src/app/services/user-preference.service.ts +++ b/apps/red-ui/src/app/services/user-preference.service.ts @@ -9,6 +9,7 @@ const KEYS = { dossierRecent: 'Dossier-Recent', filePreviewTooltips: 'File-Preview-Tooltips', lastDossierTemplate: 'Last-Dossier-Template', + theme: 'Theme', } as const; @Injectable({ @@ -46,6 +47,14 @@ export class UserPreferenceService extends GenericService { await this._save(KEYS.lastDossierTemplate, dossierTemplateId); } + getTheme(): string { + return this._getAttribute(KEYS.theme, 'dark'); + } + + async saveTheme(theme: 'light' | 'dark'): Promise { + await this._save(KEYS.theme, theme); + } + getLanguage(): string { return this._getAttribute(KEYS.language); } @@ -64,7 +73,7 @@ export class UserPreferenceService extends GenericService { } toggleDevFeatures(): void { - sessionStorage.setItem('redaction.enable-dev-features', `${!this.areDevFeaturesEnabled}`); + sessionStorage.setItem('redaction.enable-dev-features', String(!this.areDevFeaturesEnabled)); window.location.reload(); } diff --git a/apps/red-ui/src/styles.scss b/apps/red-ui/src/styles.scss index f7dffeb7d..665f6cbe4 100644 --- a/apps/red-ui/src/styles.scss +++ b/apps/red-ui/src/styles.scss @@ -36,7 +36,9 @@ $iqser-popup-background: vars.$white, $iqser-shadow: vars.$grey-4, $iqser-toggle-bg: vars.$grey-4, - $iqser-file-drop-drag-over: #e2eefd + $iqser-file-drop-drag-over: #e2eefd, + $iqser-user-avatar-1: vars.$grey-6, + $iqser-user-avatar-2: vars.$grey-4 ); $light-accent-5: lighten(vars.$accent, 5%); @@ -78,5 +80,7 @@ $dark-accent-10: darken(vars.$accent, 10%); $iqser-popup-background: $dark-accent-5, $iqser-shadow: rgba(0, 0, 0, 0.4), $iqser-toggle-bg: $light-accent-5, - $iqser-file-drop-drag-over: $light-accent-10 + $iqser-file-drop-drag-over: $light-accent-10, + $iqser-user-avatar-1: $light-accent-5, + $iqser-user-avatar-2: $light-accent-10 );