paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-10-30 03:56:23 -05:00
Code Issues Packages Projects Releases Wiki Activity

Skeleton implementation of color setting

Browse Source
This commit is contained in:
Michael Shamoon
2022-03-09 14:12:28 -08:00
parent 17e5f6d76b
commit dbe233f0ae
4 changed files with 54 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src-ui/src/app/app.component.ts
View File

@@ -19,7 +19,7 @@ export class AppComponent implements OnInit, OnDestroy {
constructor (private settings: SettingsService, private consumerStatusService: ConsumerStatusService, private toastService: ToastService, private router: Router) {
let anyWindow = (window as any)
anyWindow.pdfWorkerSrc = 'assets/js/pdf.worker.min.js';
this.settings.updateDarkModeSettings()
this.settings.updateAppearanceSettings()
}
ngOnDestroy(): void {

16
src-ui/src/app/components/manage/settings/settings.component.html
View File

@@ -100,6 +100,22 @@
</div>
</div>
<div class="row mb-3">
<div class="col-md-3 col-form-label">
<span i18n>Theme Color</span>
</div>
<div class="col-3">
<app-input-color i18n-title title="" formControlName="themeColor" [error]="error?.color"></app-input-color>
</div>
<div class="col-2">
<button class="btn btn-link btn-sm pt-2 ps-0" [disabled]="!this.settingsForm.get('themeColor').value" (click)="clearThemeColor()">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x me-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
</svg><ng-container i18n>Reset</ng-container>
</button>
</div>
</div>
<h4 class="mt-4" i18n>Bulk editing</h4>
<div class="row mb-3">

28
src-ui/src/app/components/manage/settings/settings.component.ts
View File

@@ -24,6 +24,7 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
'darkModeUseSystem': new FormControl(null),
'darkModeEnabled': new FormControl(null),
'darkModeInvertThumbs': new FormControl(null),
'themeColor': new FormControl(null),
'useNativePdfViewer': new FormControl(null),
'savedViews': this.savedViewGroup,
'displayLanguage': new FormControl(null),
@@ -40,6 +41,7 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
store: BehaviorSubject<any>
storeSub: Subscription
isDirty$: Observable<boolean>
isDirty: Boolean = false
get computedDateLocale(): string {
return this.settingsForm.value.dateLocale || this.settingsForm.value.displayLanguage || this.currentLocale
@@ -63,6 +65,7 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
'darkModeUseSystem': this.settings.get(SETTINGS_KEYS.DARK_MODE_USE_SYSTEM),
'darkModeEnabled': this.settings.get(SETTINGS_KEYS.DARK_MODE_ENABLED),
'darkModeInvertThumbs': this.settings.get(SETTINGS_KEYS.DARK_MODE_THUMB_INVERTED),
'themeColor': this.settings.get(SETTINGS_KEYS.THEME_COLOR),
'useNativePdfViewer': this.settings.get(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER),
'savedViews': {},
'displayLanguage': this.settings.getLanguage(),
@@ -97,10 +100,28 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
// Initialize dirtyCheck
this.isDirty$ = dirtyCheck(this.settingsForm, this.store.asObservable())
this.isDirty$.subscribe(dirty => {
this.isDirty = dirty
})
// "Live" visual changes prior to save
this.settingsForm.get('darkModeUseSystem').valueChanges.subscribe(darkModeUseSystem => {
this.settings.updateAppearanceSettings(darkModeUseSystem, this.settingsForm.get('darkModeEnabled').value)
})
this.settingsForm.get('darkModeEnabled').valueChanges.subscribe(darkModeEnabled => {
this.settings.updateAppearanceSettings(this.settingsForm.get('darkModeEnabled').value, darkModeEnabled)
})
this.settingsForm.get('themeColor').valueChanges.subscribe(color => {
this.settings.updateAppearanceSettings(null, null, color)
})
})
}
ngOnDestroy() {
if (this.isDirty) this.settings.updateAppearanceSettings() // in case user changed appearance but didnt save
this.storeSub && this.storeSub.unsubscribe();
}
@@ -119,6 +140,7 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
this.settings.set(SETTINGS_KEYS.DARK_MODE_USE_SYSTEM, this.settingsForm.value.darkModeUseSystem)
this.settings.set(SETTINGS_KEYS.DARK_MODE_ENABLED, (this.settingsForm.value.darkModeEnabled == true).toString())
this.settings.set(SETTINGS_KEYS.DARK_MODE_THUMB_INVERTED, (this.settingsForm.value.darkModeInvertThumbs == true).toString())
this.settings.set(SETTINGS_KEYS.THEME_COLOR, (this.settingsForm.value.themeColor).toString())
this.settings.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, this.settingsForm.value.useNativePdfViewer)
this.settings.set(SETTINGS_KEYS.DATE_LOCALE, this.settingsForm.value.dateLocale)
this.settings.set(SETTINGS_KEYS.DATE_FORMAT, this.settingsForm.value.dateFormat)
@@ -129,7 +151,7 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
this.settings.setLanguage(this.settingsForm.value.displayLanguage)
this.store.next(this.settingsForm.value)
this.documentListViewService.updatePageSize()
this.settings.updateDarkModeSettings()
this.settings.updateAppearanceSettings()
this.toastService.showInfo($localize`Settings saved successfully.`)
}
@@ -165,4 +187,8 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
}
}
private clearThemeColor() {
this.settingsForm.get('themeColor').patchValue('');
}
}

14
src-ui/src/app/services/settings.service.ts
View File

@@ -27,6 +27,7 @@ export const SETTINGS_KEYS = {
DARK_MODE_USE_SYSTEM: 'general-settings:dark-mode:use-system',
DARK_MODE_ENABLED: 'general-settings:dark-mode:enabled',
DARK_MODE_THUMB_INVERTED: 'general-settings:dark-mode:thumb-inverted',
THEME_COLOR: 'general-settings:theme:color',
USE_NATIVE_PDF_VIEWER: 'general-settings:document-details:native-pdf-viewer',
DATE_LOCALE: 'general-settings:date-display:date-locale',
DATE_FORMAT: 'general-settings:date-display:date-format',
@@ -43,6 +44,7 @@ const SETTINGS: PaperlessSettings[] = [
{key: SETTINGS_KEYS.DARK_MODE_USE_SYSTEM, type: "boolean", default: true},
{key: SETTINGS_KEYS.DARK_MODE_ENABLED, type: "boolean", default: false},
{key: SETTINGS_KEYS.DARK_MODE_THUMB_INVERTED, type: "boolean", default: true},
{key: SETTINGS_KEYS.THEME_COLOR, type: "string", default: ""},
{key: SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, type: "boolean", default: false},
{key: SETTINGS_KEYS.DATE_LOCALE, type: "string", default: ""},
{key: SETTINGS_KEYS.DATE_FORMAT, type: "string", default: "mediumDate"},
@@ -68,12 +70,13 @@ export class SettingsService {
) {
this.renderer = rendererFactory.createRenderer(null, null);
this.updateDarkModeSettings()
this.updateAppearanceSettings()
}
updateDarkModeSettings(): void {
let darkModeUseSystem = this.get(SETTINGS_KEYS.DARK_MODE_USE_SYSTEM)
let darkModeEnabled = this.get(SETTINGS_KEYS.DARK_MODE_ENABLED)
public updateAppearanceSettings(darkModeUseSystem = null, darkModeEnabled = null, themeColor = null): void {
darkModeUseSystem ??= this.get(SETTINGS_KEYS.DARK_MODE_USE_SYSTEM)
darkModeEnabled ??= this.get(SETTINGS_KEYS.DARK_MODE_ENABLED)
themeColor ??= this.get(SETTINGS_KEYS.THEME_COLOR);
if (darkModeUseSystem) {
this.renderer.addClass(this.document.body, 'color-scheme-system')
@@ -83,6 +86,9 @@ export class SettingsService {
darkModeEnabled ? this.renderer.addClass(this.document.body, 'color-scheme-dark') : this.renderer.removeClass(this.document.body, 'color-scheme-dark')
}
if (themeColor) {
console.log('set theme color')
}
}
getLanguageOptions(): LanguageOption[] {