From 617055fca73af04e879e96303c9988ccffb6d6df Mon Sep 17 00:00:00 2001 From: Michael Shamoon <4887959+shamoon@users.noreply.github.com> Date: Mon, 12 Sep 2022 12:54:28 -0700 Subject: [PATCH 1/6] Save slimsidebar settings to db on change --- .../app-frame/app-frame.component.ts | 26 ++++++++++++++++++- src-ui/src/app/data/paperless-uisettings.ts | 6 +++++ 2 files changed, 31 insertions(+), 1 deletion(-) diff --git a/src-ui/src/app/components/app-frame/app-frame.component.ts b/src-ui/src/app/components/app-frame/app-frame.component.ts index 6e758d262..9c415360c 100644 --- a/src-ui/src/app/components/app-frame/app-frame.component.ts +++ b/src-ui/src/app/components/app-frame/app-frame.component.ts @@ -24,6 +24,8 @@ import { import { SettingsService } from 'src/app/services/settings.service' import { TasksService } from 'src/app/services/tasks.service' import { ComponentCanDeactivate } from 'src/app/guards/dirty-doc.guard' +import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings' +import { ToastService } from 'src/app/services/toast.service' @Component({ selector: 'app-app-frame', @@ -40,7 +42,8 @@ export class AppFrameComponent implements ComponentCanDeactivate { private remoteVersionService: RemoteVersionService, private list: DocumentListViewService, public settingsService: SettingsService, - public tasksService: TasksService + public tasksService: TasksService, + private toastService: ToastService ) { this.remoteVersionService .checkForUpdates() @@ -55,6 +58,27 @@ export class AppFrameComponent implements ComponentCanDeactivate { isMenuCollapsed: boolean = true + get slimSidebarEnabled(): boolean { + return this.settingsService.get(SETTINGS_KEYS.SLIM_SIDEBAR) + } + + set slimSidebarEnabled(enabled: boolean) { + console.log('set slimSidebarEnabled', enabled) + + this.settingsService.set(SETTINGS_KEYS.SLIM_SIDEBAR, enabled) + this.settingsService + .storeSettings() + .pipe(first()) + .subscribe({ + error: (error) => { + this.toastService.showError( + $localize`An error occurred while saving settings.` + ) + console.log(error) + }, + }) + } + closeMenu() { this.isMenuCollapsed = true } diff --git a/src-ui/src/app/data/paperless-uisettings.ts b/src-ui/src/app/data/paperless-uisettings.ts index e3d977687..a5fdef51f 100644 --- a/src-ui/src/app/data/paperless-uisettings.ts +++ b/src-ui/src/app/data/paperless-uisettings.ts @@ -37,6 +37,7 @@ export const SETTINGS_KEYS = { NOTIFICATIONS_CONSUMER_SUPPRESS_ON_DASHBOARD: 'general-settings:notifications:consumer-suppress-on-dashboard', COMMENTS_ENABLED: 'general-settings:comments-enabled', + SLIM_SIDEBAR: 'general-settings:slim-sidebar', } export const SETTINGS: PaperlessUiSetting[] = [ @@ -55,6 +56,11 @@ export const SETTINGS: PaperlessUiSetting[] = [ type: 'boolean', default: false, }, + { + key: SETTINGS_KEYS.SLIM_SIDEBAR, + type: 'boolean', + default: false, + }, { key: SETTINGS_KEYS.DOCUMENT_LIST_SIZE, type: 'number', From 1330390b4f8e7e030b05f9084a35272d04950128 Mon Sep 17 00:00:00 2001 From: Michael Shamoon <4887959+shamoon@users.noreply.github.com> Date: Mon, 12 Sep 2022 14:51:34 -0700 Subject: [PATCH 2/6] slim sidebar with doc list adjusting --- .../app-frame/app-frame.component.html | 88 ++++++++++--------- .../app-frame/app-frame.component.scss | 44 ++++++++++ .../app-frame/app-frame.component.ts | 2 - .../document-list.component.scss | 19 +++- src-ui/src/styles.scss | 5 ++ 5 files changed, 114 insertions(+), 44 deletions(-) diff --git a/src-ui/src/app/components/app-frame/app-frame.component.html b/src-ui/src/app/components/app-frame/app-frame.component.html index 5a68a3cda..9e96316bd 100644 --- a/src-ui/src/app/components/app-frame/app-frame.component.html +++ b/src-ui/src/app/components/app-frame/app-frame.component.html @@ -4,11 +4,11 @@ (click)="isMenuCollapsed = !isMenuCollapsed"> - - + + - Paperless-ngx + Paperless-ngx
@@ -51,48 +51,54 @@
-
diff --git a/src-ui/src/app/components/app-frame/app-frame.component.scss b/src-ui/src/app/components/app-frame/app-frame.component.scss index 296df26c3..56b35fb2c 100644 --- a/src-ui/src/app/components/app-frame/app-frame.component.scss +++ b/src-ui/src/app/components/app-frame/app-frame.component.scss @@ -14,6 +14,18 @@ width: 0.8em; height: 0.8em; } + + + // These come from the col-md-3 col-lg-2 classes for regular sidebar, needed for animation + @media (min-width: 768px) { + max-width: 25%; + } + + @media (min-width: 992px) { + max-width: 16.66666667%; + } + + transition: all .3s ease; } @media (max-width: 767.98px) { .sidebar { @@ -21,6 +33,38 @@ } } +.sidebar-slim-toggler { + display: none; // hide on mobile +} + +@media(min-width: 768px) { + .sidebar.slim { + max-width: 50px; + li.nav-item span { + display: none; + } + } + + .col.slim { + margin-left: 50px !important; + } + + .sidebar-slim-toggler { + display: block; + position: absolute; + right: -12px; + top: 60px; + z-index: 996; + --bs-btn-padding-x: 0.35rem; + --bs-btn-padding-y: 0.125rem; + } +} + +::ng-deep .popover-slim .popover-body { + --bs-popover-body-padding-x: .5rem; + --bs-popover-body-padding-y: .5rem; +} + .sidebar-sticky { position: relative; top: 0; diff --git a/src-ui/src/app/components/app-frame/app-frame.component.ts b/src-ui/src/app/components/app-frame/app-frame.component.ts index 9c415360c..1b1adb706 100644 --- a/src-ui/src/app/components/app-frame/app-frame.component.ts +++ b/src-ui/src/app/components/app-frame/app-frame.component.ts @@ -63,8 +63,6 @@ export class AppFrameComponent implements ComponentCanDeactivate { } set slimSidebarEnabled(enabled: boolean) { - console.log('set slimSidebarEnabled', enabled) - this.settingsService.set(SETTINGS_KEYS.SLIM_SIDEBAR, enabled) this.settingsService .storeSettings() diff --git a/src-ui/src/app/components/document-list/document-list.component.scss b/src-ui/src/app/components/document-list/document-list.component.scss index b2d138d7f..98b6d62d7 100644 --- a/src-ui/src/app/components/document-list/document-list.component.scss +++ b/src-ui/src/app/components/document-list/document-list.component.scss @@ -11,7 +11,7 @@ tr { } $paperless-card-breakpoints: ( - 0: 2, // xs + // 0: 2, // xs is manual for slim-sidebar 768px: 3, //md 992px: 4, //lg 1200px: 5, //xl @@ -22,6 +22,12 @@ $paperless-card-breakpoints: ( ); .row-cols-paperless-cards { + // xs, we dont want in .col.slim block + > * { + flex: 0 0 auto; + width: calc(100% / 2); + } + @each $width, $n_cols in $paperless-card-breakpoints { @media(min-width: $width) { > * { @@ -32,6 +38,17 @@ $paperless-card-breakpoints: ( } } +::ng-deep .col.slim .row-cols-paperless-cards { + @each $width, $n_cols in $paperless-card-breakpoints { + @media(min-width: $width) { + > * { + flex: 0 0 auto; + width: calc(100% / ($n-cols + 1)); + } + } + } +} + .dropdown-menu-right { right: 0 !important; left: auto !important; diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss index 18413276a..8dbbafe22 100644 --- a/src-ui/src/styles.scss +++ b/src-ui/src/styles.scss @@ -405,6 +405,11 @@ textarea, vertical-align: text-bottom; } +.sidebaricon-sm { + width: 12px; + height: 12px; +} + table.table { color: var(--bs-body-color); From aa55162e2e140a5638384ddde08d27d968f7abb7 Mon Sep 17 00:00:00 2001 From: Michael Shamoon <4887959+shamoon@users.noreply.github.com> Date: Mon, 12 Sep 2022 15:26:34 -0700 Subject: [PATCH 3/6] Settings UI with live updating --- .../manage/settings/settings.component.html | 11 ++ .../manage/settings/settings.component.ts | 106 ++++++++++-------- src-ui/src/app/services/settings.service.ts | 7 +- 3 files changed, 75 insertions(+), 49 deletions(-) diff --git a/src-ui/src/app/components/manage/settings/settings.component.html b/src-ui/src/app/components/manage/settings/settings.component.html index f72587139..c215e2e19 100644 --- a/src-ui/src/app/components/manage/settings/settings.component.html +++ b/src-ui/src/app/components/manage/settings/settings.component.html @@ -89,6 +89,17 @@
+
+
+ Sidebar +
+
+ + + +
+
+
Dark mode diff --git a/src-ui/src/app/components/manage/settings/settings.component.ts b/src-ui/src/app/components/manage/settings/settings.component.ts index bb7244663..dcdb6bc64 100644 --- a/src-ui/src/app/components/manage/settings/settings.component.ts +++ b/src-ui/src/app/components/manage/settings/settings.component.ts @@ -1,11 +1,4 @@ -import { - Component, - Inject, - LOCALE_ID, - OnInit, - OnDestroy, - Renderer2, -} from '@angular/core' +import { Component, Inject, LOCALE_ID, OnInit, OnDestroy } 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' @@ -18,6 +11,7 @@ import { Toast, ToastService } from 'src/app/services/toast.service' import { dirtyCheck, DirtyComponent } from '@ngneat/dirty-check-forms' import { Observable, Subscription, BehaviorSubject, first } from 'rxjs' import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings' +import { ForwardRefHandling } from '@angular/compiler' @Component({ selector: 'app-settings', @@ -31,6 +25,7 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent { bulkEditConfirmationDialogs: new FormControl(null), bulkEditApplyOnClose: new FormControl(null), documentListItemPerPage: new FormControl(null), + slimSidebarEnabled: new FormControl(null), darkModeUseSystem: new FormControl(null), darkModeEnabled: new FormControl(null), darkModeInvertThumbs: new FormControl(null), @@ -75,50 +70,61 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent { private toastService: ToastService, private settings: SettingsService, @Inject(LOCALE_ID) public currentLocale: string - ) {} + ) { + this.settings.changed.subscribe({ + next: () => { + this.settingsForm.patchValue(this.getCurrentSettings(), { + emitEvent: false, + }) + }, + }) + } + + private getCurrentSettings() { + return { + bulkEditConfirmationDialogs: this.settings.get( + SETTINGS_KEYS.BULK_EDIT_CONFIRMATION_DIALOGS + ), + bulkEditApplyOnClose: this.settings.get( + SETTINGS_KEYS.BULK_EDIT_APPLY_ON_CLOSE + ), + documentListItemPerPage: this.settings.get( + SETTINGS_KEYS.DOCUMENT_LIST_SIZE + ), + slimSidebarEnabled: this.settings.get(SETTINGS_KEYS.SLIM_SIDEBAR), + 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(), + dateLocale: this.settings.get(SETTINGS_KEYS.DATE_LOCALE), + dateFormat: this.settings.get(SETTINGS_KEYS.DATE_FORMAT), + notificationsConsumerNewDocument: this.settings.get( + SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_NEW_DOCUMENT + ), + notificationsConsumerSuccess: this.settings.get( + SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_SUCCESS + ), + notificationsConsumerFailed: this.settings.get( + SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_FAILED + ), + notificationsConsumerSuppressOnDashboard: this.settings.get( + SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_SUPPRESS_ON_DASHBOARD + ), + commentsEnabled: this.settings.get(SETTINGS_KEYS.COMMENTS_ENABLED), + } + } ngOnInit() { this.savedViewService.listAll().subscribe((r) => { this.savedViews = r.results - let storeData = { - bulkEditConfirmationDialogs: this.settings.get( - SETTINGS_KEYS.BULK_EDIT_CONFIRMATION_DIALOGS - ), - bulkEditApplyOnClose: this.settings.get( - SETTINGS_KEYS.BULK_EDIT_APPLY_ON_CLOSE - ), - documentListItemPerPage: this.settings.get( - SETTINGS_KEYS.DOCUMENT_LIST_SIZE - ), - 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(), - dateLocale: this.settings.get(SETTINGS_KEYS.DATE_LOCALE), - dateFormat: this.settings.get(SETTINGS_KEYS.DATE_FORMAT), - notificationsConsumerNewDocument: this.settings.get( - SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_NEW_DOCUMENT - ), - notificationsConsumerSuccess: this.settings.get( - SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_SUCCESS - ), - notificationsConsumerFailed: this.settings.get( - SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_FAILED - ), - notificationsConsumerSuppressOnDashboard: this.settings.get( - SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_SUPPRESS_ON_DASHBOARD - ), - commentsEnabled: this.settings.get(SETTINGS_KEYS.COMMENTS_ENABLED), - } + let storeData = this.getCurrentSettings() for (let view of this.savedViews) { storeData.savedViews[view.id.toString()] = { @@ -192,6 +198,10 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent { SETTINGS_KEYS.DOCUMENT_LIST_SIZE, this.settingsForm.value.documentListItemPerPage ) + this.settings.set( + SETTINGS_KEYS.SLIM_SIDEBAR, + this.settingsForm.value.slimSidebarEnabled + ) this.settings.set( SETTINGS_KEYS.DARK_MODE_USE_SYSTEM, this.settingsForm.value.darkModeUseSystem diff --git a/src-ui/src/app/services/settings.service.ts b/src-ui/src/app/services/settings.service.ts index 14d261789..ae48e373d 100644 --- a/src-ui/src/app/services/settings.service.ts +++ b/src-ui/src/app/services/settings.service.ts @@ -1,6 +1,7 @@ import { DOCUMENT } from '@angular/common' import { HttpClient } from '@angular/common/http' import { + EventEmitter, Inject, Injectable, LOCALE_ID, @@ -46,6 +47,8 @@ export class SettingsService { public displayName: string + public changed = new EventEmitter() + constructor( rendererFactory: RendererFactory2, @Inject(DOCUMENT) private document, @@ -360,7 +363,9 @@ export class SettingsService { } storeSettings(): Observable { - return this.http.post(this.baseUrl, { settings: this.settings }) + return this.http + .post(this.baseUrl, { settings: this.settings }) + .pipe(tap((result) => this.changed.emit(!!result.success))) } maybeMigrateSettings() { From e0f93c26d617309542c71251362e8c9d863f26b5 Mon Sep 17 00:00:00 2001 From: Michael Shamoon <4887959+shamoon@users.noreply.github.com> Date: Tue, 13 Sep 2022 11:47:19 -0700 Subject: [PATCH 4/6] Nicer slim sidebar transitioning, dark mode fixes, fix tests by making settings taller --- src-ui/cypress/e2e/settings/settings.cy.ts | 2 +- .../components/app-frame/app-frame.component.html | 2 +- .../components/app-frame/app-frame.component.scss | 14 ++++++++++---- .../document-list/document-list.component.scss | 6 +++--- src-ui/src/styles.scss | 11 ++++++++++- src-ui/src/theme.scss | 9 +++++++++ 6 files changed, 34 insertions(+), 10 deletions(-) diff --git a/src-ui/cypress/e2e/settings/settings.cy.ts b/src-ui/cypress/e2e/settings/settings.cy.ts index 7433d16f4..0480e39ce 100644 --- a/src-ui/cypress/e2e/settings/settings.cy.ts +++ b/src-ui/cypress/e2e/settings/settings.cy.ts @@ -46,7 +46,7 @@ describe('settings', () => { }) }) - cy.viewport(1024, 1024) + cy.viewport(1024, 1600) cy.visit('/settings') cy.wait('@savedViews') }) diff --git a/src-ui/src/app/components/app-frame/app-frame.component.html b/src-ui/src/app/components/app-frame/app-frame.component.html index 9e96316bd..c1d6a20bd 100644 --- a/src-ui/src/app/components/app-frame/app-frame.component.html +++ b/src-ui/src/app/components/app-frame/app-frame.component.html @@ -237,7 +237,7 @@
-
+
diff --git a/src-ui/src/app/components/app-frame/app-frame.component.scss b/src-ui/src/app/components/app-frame/app-frame.component.scss index 56b35fb2c..717a9b976 100644 --- a/src-ui/src/app/components/app-frame/app-frame.component.scss +++ b/src-ui/src/app/components/app-frame/app-frame.component.scss @@ -1,3 +1,6 @@ +@import "node_modules/bootstrap/scss/functions"; +@import "node_modules/bootstrap/scss/variables"; + /* * Sidebar */ @@ -15,7 +18,6 @@ height: 0.8em; } - // These come from the col-md-3 col-lg-2 classes for regular sidebar, needed for animation @media (min-width: 768px) { max-width: 25%; @@ -25,7 +27,7 @@ max-width: 16.66666667%; } - transition: all .3s ease; + transition: all .2s ease; } @media (max-width: 767.98px) { .sidebar { @@ -33,6 +35,10 @@ } } +main { + transition: all .2s ease; +} + .sidebar-slim-toggler { display: none; // hide on mobile } @@ -45,8 +51,8 @@ } } - .col.slim { - margin-left: 50px !important; + .col-slim { + padding-left: calc(50px + $grid-gutter-width) !important; } .sidebar-slim-toggler { diff --git a/src-ui/src/app/components/document-list/document-list.component.scss b/src-ui/src/app/components/document-list/document-list.component.scss index 98b6d62d7..3361d7c3a 100644 --- a/src-ui/src/app/components/document-list/document-list.component.scss +++ b/src-ui/src/app/components/document-list/document-list.component.scss @@ -22,7 +22,7 @@ $paperless-card-breakpoints: ( ); .row-cols-paperless-cards { - // xs, we dont want in .col.slim block + // xs, we dont want in .col-slim block > * { flex: 0 0 auto; width: calc(100% / 2); @@ -38,12 +38,12 @@ $paperless-card-breakpoints: ( } } -::ng-deep .col.slim .row-cols-paperless-cards { +::ng-deep .col-slim .row-cols-paperless-cards { @each $width, $n_cols in $paperless-card-breakpoints { @media(min-width: $width) { > * { flex: 0 0 auto; - width: calc(100% / ($n-cols + 1)); + width: calc(100% / ($n-cols + 1)) !important; } } } diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss index 8dbbafe22..0ffb12afb 100644 --- a/src-ui/src/styles.scss +++ b/src-ui/src/styles.scss @@ -1,9 +1,9 @@ // bs options $enable-negative-margins: true; +@import "theme"; @import "node_modules/bootstrap/scss/bootstrap"; @import "~@ng-select/ng-select/themes/default.theme.css"; -@import "theme"; @import "print"; // Paperless-ngx styles @@ -84,6 +84,15 @@ svg.logo { } } +.btn-dark { + --bs-btn-color: var(--bs-gray-600); + --bs-btn-bg: var(--bs-gray-200); + --bs-btn-border-color: var(--bs-gray-200); + --bs-btn-hover-bg: var(--bs-gray-400); + --bs-btn-hover-border-color: var(--bs-gray-500); + --bs-btn-active-bg: var(--bs-gray-200); +} + .text-primary { color: var(--bs-primary) !important; } diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss index bf9be6662..99dcb8bab 100644 --- a/src-ui/src/theme.scss +++ b/src-ui/src/theme.scss @@ -79,6 +79,15 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml, -
- Saved views + Saved views
- Open documents + Open documents
- Manage + Manage
- Info + Info