paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-04-02 13:45:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

Dark mode settings logic

Browse Source
This commit is contained in:
Michael Shamoon 2020-12-27 23:05:19 -08:00
parent 6a70369a77
commit 75c8cd9967
6 changed files with 98 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,5 @@
import { Component } from '@angular/core';
import { AppViewService } from './services/app-view.service';
@Component({
selector: 'app-root',
@ -6,8 +7,9 @@ import { Component } from '@angular/core';
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor () {
constructor (appViewService: AppViewService) {
appViewService.updateDarkModeSettings()
}

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

@ -10,21 +10,34 @@
<a ngbNavLink i18n>General settings</a>
<ng-template ngbNavContent>
<h4 i18n>Document list</h4>
<h4 i18n>Appearance</h4>
<div class="form-row form-group">
<div class="col-md-3 col-form-label">
<span i18n>Items per page</span>
</div>
<div class="col">
<select class="form-control" formControlName="documentListItemPerPage">
<option [ngValue]="10">10</option>
<option [ngValue]="25">25</option>
<option [ngValue]="50">50</option>
<option [ngValue]="100">100</option>
</select>
</div>
</div>
<div class="form-row form-group">
<div class="col-md-3 col-form-label">
<span i18n>Dark mode</span>
</div>
<div class="col">
<app-input-check i18n-title title="Use system settings" formControlName="darkModeUseSystem" (change)="toggleDarkModeSetting()"></app-input-check>
<div class="custom-control custom-switch" *ngIf="!settingsForm.value.darkModeUseSystem">
<input type="checkbox" class="custom-control-input" id="darkModeEnabled" formControlName="darkModeEnabled" [checked]="settingsForm.value.darkModeEnabled">
<label class="custom-control-label" for="darkModeEnabled">Enabled</label>
</div>
</div>
</div>
@ -35,7 +48,7 @@
<ng-template ngbNavContent>
<div formGroupName="savedViews">
<div *ngFor="let view of savedViews" [formGroupName]="view.id" class="form-row">
<div class="form-group col-4 mr-3">
<label for="name_{{view.id}}" i18n>Name</label>
@ -61,7 +74,7 @@
</div>
<div *ngIf="savedViews.length == 0" i18n>No saved views defined.</div>
</div>
</ng-template>
@ -71,4 +84,4 @@
<div [ngbNavOutlet]="nav" class="border-left border-right border-bottom p-3 mb-3 shadow"></div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
</form>

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

@ -1,10 +1,11 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, Renderer2 } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { PaperlessSavedView } from 'src/app/data/paperless-saved-view';
import { GENERAL_SETTINGS } from 'src/app/data/storage-keys';
import { DocumentListViewService } from 'src/app/services/document-list-view.service';
import { SavedViewService } from 'src/app/services/rest/saved-view.service';
import { Toast, ToastService } from 'src/app/services/toast.service';
import { AppViewService } from 'src/app/services/app-view.service';
@Component({
selector: 'app-settings',
@ -17,17 +18,24 @@ export class SettingsComponent implements OnInit {
settingsForm = new FormGroup({
'documentListItemPerPage': new FormControl(+localStorage.getItem(GENERAL_SETTINGS.DOCUMENT_LIST_SIZE) || GENERAL_SETTINGS.DOCUMENT_LIST_SIZE_DEFAULT),
'darkModeUseSystem': new FormControl(
localStorage.getItem(GENERAL_SETTINGS.DARK_MODE_USE_SYSTEM) == undefined ? GENERAL_SETTINGS.DARK_MODE_USE_SYSTEM_DEFAULT : JSON.parse(localStorage.getItem(GENERAL_SETTINGS.DARK_MODE_USE_SYSTEM))
),
'darkModeEnabled': new FormControl(
localStorage.getItem(GENERAL_SETTINGS.DARK_MODE_ENABLED) == undefined ? GENERAL_SETTINGS.DARK_MODE_ENABLED_DEFAULT : JSON.parse(localStorage.getItem(GENERAL_SETTINGS.DARK_MODE_ENABLED))
),
'savedViews': this.savedViewGroup
})
savedViews: PaperlessSavedView[]
constructor(
public savedViewService: SavedViewService,
private documentListViewService: DocumentListViewService,
private toastService: ToastService
private toastService: ToastService,
private appViewService: AppViewService
) { }
savedViews: PaperlessSavedView[]
ngOnInit() {
this.savedViewService.listAll().subscribe(r => {
this.savedViews = r.results
@ -50,9 +58,20 @@ export class SettingsComponent implements OnInit {
})
}
toggleDarkModeSetting() {
if (this.settingsForm.value.darkModeUseSystem) {
(this.settingsForm.controls.darkModeEnabled as FormControl).disable()
} else {
(this.settingsForm.controls.darkModeEnabled as FormControl).enable()
}
}
private saveLocalSettings() {
localStorage.setItem(GENERAL_SETTINGS.DOCUMENT_LIST_SIZE, this.settingsForm.value.documentListItemPerPage)
localStorage.setItem(GENERAL_SETTINGS.DARK_MODE_USE_SYSTEM, this.settingsForm.value.darkModeUseSystem)
localStorage.setItem(GENERAL_SETTINGS.DARK_MODE_ENABLED, (this.settingsForm.value.darkModeEnabled == true).toString())
this.documentListViewService.updatePageSize()
this.appViewService.updateDarkModeSettings()
this.toastService.showToast(Toast.make("Information", $localize`Settings saved successfully.`))
}

8
src-ui/src/app/data/storage-keys.ts
View File

@ -8,5 +8,9 @@ export const DOCUMENT_LIST_SERVICE = {
export const GENERAL_SETTINGS = {
DOCUMENT_LIST_SIZE: 'general-settings:documentListSize',
DOCUMENT_LIST_SIZE_DEFAULT: 50
}
DOCUMENT_LIST_SIZE_DEFAULT: 50,
DARK_MODE_USE_SYSTEM: 'general-settings:darkModeUseSystem',
DARK_MODE_USE_SYSTEM_DEFAULT: true,
DARK_MODE_ENABLED: 'general-settings:darkModeEnabled',
DARK_MODE_ENABLED_DEFAULT: false
}

16
src-ui/src/app/services/app-view.service.spec.ts Normal file
View File

@ -0,0 +1,16 @@
import { TestBed } from '@angular/core/testing';
import { AppViewService } from './app-view.service';
describe('AppViewService', () => {
let service: AppViewService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(AppViewService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});

29
src-ui/src/app/services/app-view.service.ts Normal file
View File

@ -0,0 +1,29 @@
import { Inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { GENERAL_SETTINGS } from 'src/app/data/storage-keys';
@Injectable({
providedIn: 'root'
})
export class AppViewService {
private renderer: Renderer2;
constructor(rendererFactory: RendererFactory2, @Inject(DOCUMENT) private document) {
this.renderer = rendererFactory.createRenderer(null, null);
}
updateDarkModeSettings() {
let darkModeUseSystem = JSON.parse(localStorage.getItem(GENERAL_SETTINGS.DARK_MODE_USE_SYSTEM)) && GENERAL_SETTINGS.DARK_MODE_USE_SYSTEM_DEFAULT
let darkModeEnabled = JSON.parse(localStorage.getItem(GENERAL_SETTINGS.DARK_MODE_ENABLED)) || GENERAL_SETTINGS.DARK_MODE_ENABLED_DEFAULT
if (darkModeUseSystem) {
this.renderer.addClass(this.document.body, 'dark-mode-preferred')
this.renderer.removeClass(this.document.body, 'dark-mode')
} else {
this.renderer.removeClass(this.document.body, 'dark-mode-preferred')
darkModeEnabled ? this.renderer.addClass(this.document.body, 'dark-mode') : this.renderer.removeClass(this.document.body, 'dark-mode')
}
}
}