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

Enhancement: above and below doc detail save buttons (#5008)

Browse Source 
* Show doc detail nav buttons above & below fields

* Fix tests for additional button nav

* Use flexbox to fix tab order but retain visual order

* Update screenshots
This commit is contained in:
shamoon 2023-12-17 16:11:12 -08:00 committed by GitHub
parent 6ee2d023d5
commit d22b27afe7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 34 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/assets/screenshots/custom_field2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 MiB

After

Width:  |  Height:  |  Size: 2.2 MiB

BIN
docs/assets/screenshots/editing.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 MiB

After

Width:  |  Height:  |  Size: 2.3 MiB

BIN
docs/assets/screenshots/permissions_document.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 550 KiB

After

Width:  |  Height:  |  Size: 559 KiB

16
src-ui/e2e/document-detail/document-detail.spec.ts
View File

@ -12,13 +12,9 @@ test('should activate / deactivate save button when changes are saved', async ({
await expect(page.getByTitle('Storage path', { exact: true })).toHaveText(
/\w+/
)
await expect(
page.getByRole('button', { name: 'Save', exact: true })
).toBeDisabled()
await expect(page.getByRole('button', { name: 'Save' }).nth(1)).toBeDisabled()
await page.getByTitle('Storage path').getByTitle('Clear all').click()
await expect(
page.getByRole('button', { name: 'Save', exact: true })
).toBeEnabled()
await expect(page.getByRole('button', { name: 'Save' }).nth(1)).toBeEnabled()
})
test('should warn on unsaved changes', async ({ page }) => {
@ -27,16 +23,12 @@ test('should warn on unsaved changes', async ({ page }) => {
await expect(page.getByTitle('Correspondent', { exact: true })).toHaveText(
/\w+/
)
await expect(
page.getByRole('button', { name: 'Save', exact: true })
).toBeDisabled()
await expect(page.getByRole('button', { name: 'Save' }).nth(1)).toBeDisabled()
await page
.getByTitle('Storage path', { exact: true })
.getByTitle('Clear all')
.click()
await expect(
page.getByRole('button', { name: 'Save', exact: true })
).toBeEnabled()
await expect(page.getByRole('button', { name: 'Save' }).nth(1)).toBeEnabled()
await page.getByRole('button', { name: 'Close', exact: true }).click()
await expect(page.getByRole('dialog')).toHaveText(/unsaved changes/)
await page.getByRole('button', { name: 'Cancel' }).click()

24
src-ui/src/app/components/document-detail/document-detail.component.html
View File

@ -96,14 +96,7 @@
</button>
</div>
<div class="btn-group ms-auto">
<button type="button" class="btn btn-sm btn-outline-secondary" (click)="discard()" i18n [disabled]="!userCanEdit || networkActive || (isDirty$ | async) !== true">Discard</button>
<ng-container *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }">
<button *ngIf="hasNext()" type="button" class="btn btn-sm btn-outline-primary" (click)="saveEditNext()" i18n [disabled]="!userCanEdit || networkActive || (isDirty$ | async) !== true">Save &amp; next</button>
<button *ngIf="!hasNext()" type="button" class="btn btn-sm btn-outline-primary" (click)="save(true)" i18n [disabled]="!userCanEdit || networkActive || (isDirty$ | async) !== true">Save &amp; close</button>
<button type="submit" class="btn btn-sm btn-primary" i18n [disabled]="!userCanEdit || networkActive || (isDirty$ | async) !== true">Save</button>
</ng-container>
</div>
<ng-container *ngTemplateOutlet="saveButtons"></ng-container>
</div>
<ul ngbNav #nav="ngbNav" class="nav-underline flex-nowrap flex-md-wrap overflow-auto" (navChange)="onNavChange($event)" [(activeId)]="activeNavID">
@ -135,6 +128,10 @@
</div>
</ng-container>
</div>
<div class="d-flex border-top pt-3">
<ng-container *ngTemplateOutlet="saveButtons"></ng-container>
</div>
</ng-template>
</li>
@ -241,6 +238,17 @@
</div>
<ng-template #saveButtons>
<div class="btn-group ms-auto">
<ng-container *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }">
<button type="submit" class="order-3 btn btn-sm btn-primary" i18n [disabled]="!userCanEdit || networkActive || (isDirty$ | async) !== true">Save</button>
<button *ngIf="hasNext()" type="button" class="order-1 btn btn-sm btn-outline-primary" (click)="saveEditNext()" i18n [disabled]="!userCanEdit || networkActive || (isDirty$ | async) !== true">Save &amp; next</button>
<button *ngIf="!hasNext()" type="button" class="order-2 btn btn-sm btn-outline-primary" (click)="save(true)" i18n [disabled]="!userCanEdit || networkActive || (isDirty$ | async) !== true">Save &amp; close</button>
</ng-container>
<button type="button" class="order-0 btn btn-sm btn-outline-secondary" (click)="discard()" i18n [disabled]="!userCanEdit || networkActive || (isDirty$ | async) !== true">Discard</button>
</div>
</ng-template>
<ng-template #previewContent>
<div *ngIf="!metadata" class="w-100 h-100 d-flex align-items-center justify-content-center">
<div>

14
src-ui/src/app/components/document-detail/document-detail.component.scss
View File

@ -44,3 +44,17 @@ textarea.rtl {
.input-group .btn-outline-secondary {
border-color: var(--bs-border-color);
}
.btn-group .btn.order-0 {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: var(--bs-border-radius-sm);
border-bottom-left-radius: var(--bs-border-radius-sm);
}
.btn-group .btn.order-3 {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: var(--bs-border-radius-sm);
border-bottom-right-radius: var(--bs-border-radius-sm);
}