smokephil/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-12-08 15:55:31 +01:00
Code Issues Projects Releases Packages 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

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