Merge branch 'dev' into dev

2025-07-28 18:24:38 -05:00 · 2021-01-01 21:13:49 +01:00
parent d95dcf1ad4 16a546ded8
commit afe3523207
25 changed files with 818 additions and 195 deletions
--- a/src-ui/src/app/app.component.ts
+++ b/src-ui/src/app/app.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { AppViewService } from './services/app-view.service';

@Component({
  selector: 'app-root',
@@ -7,7 +8,8 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {

-  constructor () {
+  constructor (appViewService: AppViewService) {
+    appViewService.updateDarkModeSettings()
    (window as any).pdfWorkerSrc = '/assets/js/pdf.worker.min.js';
  }

--- a/src-ui/src/app/components/app-frame/app-frame.component.html
+++ b/src-ui/src/app/components/app-frame/app-frame.component.html
@@ -1,6 +1,8 @@
 <nav class="navbar navbar-dark sticky-top bg-primary flex-md-nowrap p-0 shadow">
  <a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" routerLink="/dashboard">
-    <img src="assets/logo-dark-notext.svg" height="18px" class="mr-2">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 238.91" width="16px" class="mr-2" fill="currentColor">
+      <path d="M194.7,0C164.22,70.94,17.64,79.74,64.55,194.06c.58,1.47-10.85,17-18.47,29.9-1.76-6.45-3.81-13.48-3.52-14.07,38.11-45.14-27.26-70.65-30.78-107.58C-4.64,131.62-10.5,182.92,39,212.53c.3,0,2.64,11.14,3.81,16.71a58.55,58.55,0,0,0-2.93,6.45c-1.17,2.93,7.62,2.64,7.62,3.22.88-.29,21.7-36.93,22.28-37.23C187.67,174.72,208.48,68.6,194.7,0ZM134.61,74.75C79.5,124,70.12,160.64,71.88,178.53,53.41,134.85,107.64,86.77,134.61,74.75ZM28.2,145.11c10.55,9.67,28.14,39.28,13.19,56.57C44.91,193.77,46.08,175.89,28.2,145.11Z" transform="translate(0 0)"/>
+    </svg>
    <ng-container i18n="app title">Paperless-ng</ng-container>
  </a>
  <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse"
--- a/src-ui/src/app/components/dashboard/dashboard.component.html
+++ b/src-ui/src/app/components/dashboard/dashboard.component.html
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
@@ -1,7 +1,7 @@
-<div class="card mb-3 bg-light shadow-sm" [class.card-selected]="selected" [class.document-card]="selectable">
+<div class="card mb-3 shadow-sm" [class.card-selected]="selected" [class.document-card]="selectable">
  <div class="row no-gutters">
-    <div class="col-md-2 d-none d-lg-block doc-img-background" [class.doc-img-background-selected]="selected">
-      <img [src]="getThumbUrl()" class="card-img doc-img border-right" (click)="setSelected(selectable ? !selected : false)">
+    <div class="col-md-2 d-none d-lg-block doc-img-background rounded-left" [class.doc-img-background-selected]="selected">
+      <img [src]="getThumbUrl()" class="card-img doc-img border-right rounded-left" (click)="setSelected(selectable ? !selected : false)">

      <div style="top: 0; left: 0" class="position-absolute border-right border-bottom bg-light p-1" [class.document-card-check]="!selected">
        <div class="custom-control custom-checkbox">
@@ -12,7 +12,7 @@

    </div>
    <div class="col">
-      <div class="card-body">
+      <div class="card-body bg-light">

        <div class="d-flex justify-content-between align-items-center">
          <h5 class="card-title">
@@ -55,16 +55,16 @@
                <path fill-rule="evenodd" d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
              </svg>&nbsp;<ng-container i18n>Download</ng-container>
            </a>
-            
+
          </div>

          <small class="text-muted ml-auto" i18n>Score:</small>

          <ngb-progressbar *ngIf="searchScore" [type]="searchScoreClass" [value]="searchScore" class="search-score-bar mx-2" [max]="1"></ngb-progressbar>
-          
+
          <small class="text-muted" i18n>Created: {{document.created | date}}</small>
        </div>
-        
+
      </div>
    </div>
  </div>
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss
@@ -30,10 +30,6 @@
  border-color: $primary;
 }

-.doc-img-background {
-  background-color: white;
-}
-
 .doc-img-background-selected {
  background-color: $primaryFaded;
-}
+}
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
@@ -1,7 +1,7 @@
 <div class="col p-2 h-100">
  <div class="card h-100 shadow-sm document-card" [class.card-selected]="selected">
-    <div class="border-bottom" [class.doc-img-background-selected]="selected">
-      <img class="card-img doc-img" [src]="getThumbUrl()" (click)="setSelected(!selected)">
+    <div class="border-bottom doc-img-container" [class.doc-img-background-selected]="selected">
+      <img class="card-img doc-img rounded-top" [src]="getThumbUrl()" (click)="setSelected(!selected)">

      <div class="border-right border-bottom bg-light p-1 rounded document-card-check">
        <div class="custom-control custom-checkbox">
--- a/src-ui/src/app/components/manage/settings/settings.component.html
+++ b/src-ui/src/app/components/manage/settings/settings.component.html
@@ -10,30 +10,45 @@
      <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>

-        <h4 i18n>Bulk editing</h4>
+        <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>

-        <app-input-check i18n-title title="Show confirmation dialogs" formControlName="bulkEditConfirmationDialogs" i18n-hint hint="Deleting documents will always ask for confirmation."></app-input-check>
-        <app-input-check i18n-title title="Apply on close" formControlName="bulkEditApplyOnClose"></app-input-check>
+        <h4 class="mt-4" i18n>Bulk editing</h4>
+
+        <div class="form-row form-group">
+          <div class="offset-md-3 col">
+            <app-input-check i18n-title title="Show confirmation dialogs" formControlName="bulkEditConfirmationDialogs" i18n-hint hint="Deleting documents will always ask for confirmation."></app-input-check>
+            <app-input-check i18n-title title="Apply on close" formControlName="bulkEditApplyOnClose"></app-input-check>
+          </div>
+        </div>

      </ng-template>
    </li>
@@ -42,7 +57,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>
@@ -68,7 +83,7 @@
            </div>

            <div *ngIf="savedViews.length == 0" i18n>No saved views defined.</div>
-          
+
        </div>

      </ng-template>
@@ -78,4 +93,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>
--- a/src-ui/src/app/components/manage/settings/settings.component.ts
+++ b/src-ui/src/app/components/manage/settings/settings.component.ts
@@ -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 { DocumentListViewService } from 'src/app/services/document-list-view.service';
 import { SavedViewService } from 'src/app/services/rest/saved-view.service';
 import { SettingsService, SETTINGS_KEYS } from 'src/app/services/settings.service';
 import { ToastService } from 'src/app/services/toast.service';
+import { AppViewService } from 'src/app/services/app-view.service';

@Component({
  selector: 'app-settings',
@@ -19,18 +20,21 @@ export class SettingsComponent implements OnInit {
    'bulkEditConfirmationDialogs': new FormControl(this.settings.get(SETTINGS_KEYS.BULK_EDIT_CONFIRMATION_DIALOGS)),
    'bulkEditApplyOnClose': new FormControl(this.settings.get(SETTINGS_KEYS.BULK_EDIT_APPLY_ON_CLOSE)),
    'documentListItemPerPage': new FormControl(this.settings.get(SETTINGS_KEYS.DOCUMENT_LIST_SIZE)),
+    'darkModeUseSystem': new FormControl(this.settings.get(SETTINGS_KEYS.DARK_MODE_USE_SYSTEM)),
+    'darkModeEnabled': new FormControl(this.settings.get(SETTINGS_KEYS.DARK_MODE_ENABLED)),
    'savedViews': this.savedViewGroup
  })

+  savedViews: PaperlessSavedView[]
+
  constructor(
    public savedViewService: SavedViewService,
    private documentListViewService: DocumentListViewService,
    private toastService: ToastService,
-    private settings: SettingsService
+    private settings: SettingsService,
+    private appViewService: AppViewService
  ) { }

-  savedViews: PaperlessSavedView[]
-
  ngOnInit() {
    this.savedViewService.listAll().subscribe(r => {
      this.savedViews = r.results
@@ -53,11 +57,22 @@ 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() {
    this.settings.set(SETTINGS_KEYS.BULK_EDIT_APPLY_ON_CLOSE, this.settingsForm.value.bulkEditApplyOnClose)
    this.settings.set(SETTINGS_KEYS.BULK_EDIT_CONFIRMATION_DIALOGS, this.settingsForm.value.bulkEditConfirmationDialogs)
    this.settings.set(SETTINGS_KEYS.DOCUMENT_LIST_SIZE, this.settingsForm.value.documentListItemPerPage)
+    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.documentListViewService.updatePageSize()
+    this.appViewService.updateDarkModeSettings()
    this.toastService.showInfo($localize`Settings saved successfully.`)
  }

--- a/src-ui/src/app/services/app-view.service.spec.ts
+++ b/src-ui/src/app/services/app-view.service.spec.ts
@@ -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();
+  });
+});
--- a/src-ui/src/app/services/app-view.service.ts
+++ b/src-ui/src/app/services/app-view.service.ts
@@ -0,0 +1,35 @@
+import { Inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { SettingsService, SETTINGS_KEYS } from './settings.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AppViewService {
+  private renderer: Renderer2;
+
+  constructor(
+    private settings: SettingsService,
+    private rendererFactory: RendererFactory2,
+    @Inject(DOCUMENT) private document
+  ) {
+    this.renderer = rendererFactory.createRenderer(null, null);
+
+    this.updateDarkModeSettings()
+  }
+
+  updateDarkModeSettings() {
+    let darkModeUseSystem = this.settings.get(SETTINGS_KEYS.DARK_MODE_USE_SYSTEM)
+    let darkModeEnabled = this.settings.get(SETTINGS_KEYS.DARK_MODE_ENABLED)
+
+    if (darkModeUseSystem) {
+      this.renderer.addClass(this.document.body, 'color-scheme-system')
+      this.renderer.removeClass(this.document.body, 'color-scheme-dark')
+    } else {
+      this.renderer.removeClass(this.document.body, 'color-scheme-system')
+      darkModeEnabled ? this.renderer.addClass(this.document.body, 'color-scheme-dark') : this.renderer.removeClass(this.document.body, 'color-scheme-dark')
+    }
+
+  }
+
+}
--- a/src-ui/src/app/services/settings.service.ts
+++ b/src-ui/src/app/services/settings.service.ts
@@ -10,12 +10,16 @@ export const SETTINGS_KEYS = {
  BULK_EDIT_CONFIRMATION_DIALOGS: 'general-settings:bulk-edit:confirmation-dialogs',
  BULK_EDIT_APPLY_ON_CLOSE: 'general-settings:bulk-edit:apply-on-close',
  DOCUMENT_LIST_SIZE: 'general-settings:documentListSize',
+  DARK_MODE_USE_SYSTEM: 'general-settings:dark-mode:use-system',
+  DARK_MODE_ENABLED: 'general-settings:dark-mode:enabled'
 }

 const SETTINGS: PaperlessSettings[] = [
  {key: SETTINGS_KEYS.BULK_EDIT_CONFIRMATION_DIALOGS, type: "boolean", default: true},
  {key: SETTINGS_KEYS.BULK_EDIT_APPLY_ON_CLOSE, type: "boolean", default: false},
-  {key: SETTINGS_KEYS.DOCUMENT_LIST_SIZE, type: "number", default: 50}
+  {key: SETTINGS_KEYS.DOCUMENT_LIST_SIZE, type: "number", default: 50},
+  {key: SETTINGS_KEYS.DARK_MODE_USE_SYSTEM, type: "boolean", default: true},
+  {key: SETTINGS_KEYS.DARK_MODE_ENABLED, type: "boolean", default: false}
 ]

@Injectable({