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:22:11 +03:00
parent 22501aadc5
commit 9207eb0454
8 changed files with 98 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/red-ui/src/app/app.component.ts
View File

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

4
apps/red-ui/src/app/modules/admin/screens/entities-listing/entities-listing-screen.component.html
View File

@ -78,8 +78,8 @@
</div>
</div>
<div class="cell center small-label">
{{ dict.rank }}
<div class="cell center">
<span class="small-label">{{ dict.rank }}</span>
</div>
<div class="cell center">

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

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

2
apps/red-ui/src/app/modules/shared/components/editor/editor.component.scss
View File

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

29
apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts
View File

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

62
apps/red-ui/src/app/services/editor-theme.service.ts Normal file
View File

@ -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<string, IStandaloneThemeData> = {
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' : ''}`;
}
}

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

@ -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<UserAttributes> {
await this._save(KEYS.lastDossierTemplate, dossierTemplateId);
}
getTheme(): string {
return this._getAttribute(KEYS.theme, 'dark');
}
async saveTheme(theme: 'light' | 'dark'): Promise<void> {
await this._save(KEYS.theme, theme);
}
getLanguage(): string {
return this._getAttribute(KEYS.language);
}
@ -64,7 +73,7 @@ export class UserPreferenceService extends GenericService<UserAttributes> {
}
toggleDevFeatures(): void {
sessionStorage.setItem('redaction.enable-dev-features', `${!this.areDevFeaturesEnabled}`);
sessionStorage.setItem('redaction.enable-dev-features', String(!this.areDevFeaturesEnabled));
window.location.reload();
}

8
apps/red-ui/src/styles.scss
View File

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