Cutlery/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-11-03 19:17:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Added option to invert thumbnails in dark mode

Browse Source
This commit is contained in:
Bolko Schreiber 2021-02-25 13:57:45 +01:00
parent 70f657beff
commit 772f5cb1a8
10 changed files with 32 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
View File

@ -1,7 +1,7 @@
<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 rounded-left" [class.doc-img-background-selected]="selected" (click)="this.toggleSelected.emit($event)">
<img [src]="getThumbUrl()" class="card-img doc-img border-right rounded-left">
<img [src]="getThumbUrl()" class="card-img {{ getIsThumbInverted() ? 'doc-img-inverted' : 'doc-img' }} border-right rounded-left">
<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">

2
src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss
View File

@ -4,7 +4,7 @@
overflow-wrap: anywhere;
}
.doc-img {
.doc-img, .doc-img-inverted {
object-fit: cover;
object-position: top left;
height: 100%;

7
src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts
View File

@ -2,6 +2,7 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { PaperlessDocument } from 'src/app/data/paperless-document';
import { DocumentService } from 'src/app/services/rest/document.service';
import { SettingsService, SETTINGS_KEYS } from 'src/app/services/settings.service';
@Component({
selector: 'app-document-card-large',
@ -10,7 +11,7 @@ import { DocumentService } from 'src/app/services/rest/document.service';
})
export class DocumentCardLargeComponent implements OnInit {
constructor(private documentService: DocumentService, private sanitizer: DomSanitizer) { }
constructor(private documentService: DocumentService, private sanitizer: DomSanitizer, private settingsService: SettingsService) { }
@Input()
selected = false
@ -53,6 +54,10 @@ export class DocumentCardLargeComponent implements OnInit {
ngOnInit(): void {
}
getIsThumbInverted() {
return this.settingsService.get(SETTINGS_KEYS.DARK_MODE_THUMB_INVERTED)
}
getDetailsAsString() {
if (typeof this.details === 'string') {
return this.details.substring(0, 500)

2
src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
View File

@ -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 doc-img-container" [class.doc-img-background-selected]="selected" (click)="this.toggleSelected.emit($event)">
<img class="card-img doc-img rounded-top" [src]="getThumbUrl()">
<img class="card-img {{ getIsThumbInverted() ? 'doc-img-inverted' : 'doc-img' }} rounded-top" [src]="getThumbUrl()">
<div class="border-right border-bottom bg-light p-1 rounded document-card-check">
<div class="custom-control custom-checkbox">

2
src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
View File

@ -1,6 +1,6 @@
@import "/src/theme";
.doc-img {
.doc-img, .doc-img-inverted {
object-fit: cover;
object-position: top left;
height: 200px;

7
src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts
View File

@ -2,6 +2,7 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { map } from 'rxjs/operators';
import { PaperlessDocument } from 'src/app/data/paperless-document';
import { DocumentService } from 'src/app/services/rest/document.service';
import { SettingsService, SETTINGS_KEYS } from 'src/app/services/settings.service';
@Component({
selector: 'app-document-card-small',
@ -10,7 +11,7 @@ import { DocumentService } from 'src/app/services/rest/document.service';
})
export class DocumentCardSmallComponent implements OnInit {
constructor(private documentService: DocumentService) { }
constructor(private documentService: DocumentService, private settingsService: SettingsService) { }
@Input()
selected = false
@ -32,6 +33,10 @@ export class DocumentCardSmallComponent implements OnInit {
ngOnInit(): void {
}
getIsThumbInverted() {
return this.settingsService.get(SETTINGS_KEYS.DARK_MODE_THUMB_INVERTED)
}
getThumbUrl() {
return this.documentService.getThumbUrl(this.document.id)
}

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

@ -96,6 +96,7 @@
<div class="col">
<app-input-check i18n-title title="Use system settings" formControlName="darkModeUseSystem"></app-input-check>
<app-input-check [hidden]="settingsForm.value.darkModeUseSystem" i18n-title title="Enable dark mode" formControlName="darkModeEnabled"></app-input-check>
<app-input-check i18n-title title="Invert Thumbnails in dark mode" formControlName="darkModeInvertThumbs"></app-input-check>
</div>
</div>

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

@ -21,6 +21,7 @@ export class SettingsComponent implements OnInit {
'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)),
'darkModeInvertThumbs': new FormControl(this.settings.get(SETTINGS_KEYS.DARK_MODE_THUMB_INVERTED)),
'useNativePdfViewer': new FormControl(this.settings.get(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER)),
'savedViews': this.savedViewGroup,
'displayLanguage': new FormControl(this.settings.getLanguage()),
@ -74,6 +75,7 @@ export class SettingsComponent implements OnInit {
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.settings.set(SETTINGS_KEYS.DARK_MODE_THUMB_INVERTED, (this.settingsForm.value.darkModeInvertThumbs == true).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)

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

@ -21,6 +21,7 @@ export const SETTINGS_KEYS = {
DOCUMENT_LIST_SIZE: 'general-settings:documentListSize',
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',
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',
@ -36,6 +37,7 @@ const SETTINGS: PaperlessSettings[] = [
{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},
{key: SETTINGS_KEYS.DARK_MODE_THUMB_INVERTED, type: "boolean", default: false},
{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"},

12
src-ui/src/theme_dark.scss
View File

@ -138,6 +138,16 @@ $border-color-dark-mode: #47494f;
}
.doc-img {
mix-blend-mode: normal;
border-radius: 0;
border-color: $bg-dark-mode;
&.border-right {
border-right: none !important;
}
}
.doc-img-inverted {
mix-blend-mode: normal;
filter: invert(95%) hue-rotate(180deg);
border-radius: 0;
@ -148,7 +158,7 @@ $border-color-dark-mode: #47494f;
}
}
.card-selected .doc-img {
.card-selected .doc-img .doc-img-inverted {
mix-blend-mode: luminosity;
}