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

* 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

diff --git a/docs/assets/screenshots/custom_field2.png b/docs/assets/screenshots/custom_field2.png
index f7bf012ddae445a09ed477a2c11350210f434d6a..0bc2168a635d7cca9409ea90691fc4cb95677359 100644 (file)
Binary files a/docs/assets/screenshots/custom_field2.png and b/docs/assets/screenshots/custom_field2.png differ

diff --git a/docs/assets/screenshots/editing.png b/docs/assets/screenshots/editing.png
index e70b2891e608787b3874e46c288ab6650c65e4f5..8026f6e0580394b57a522d4f68d31b1238b6f8b3 100644 (file)
Binary files a/docs/assets/screenshots/editing.png and b/docs/assets/screenshots/editing.png differ

diff --git a/docs/assets/screenshots/permissions_document.png b/docs/assets/screenshots/permissions_document.png
index 9b05f104daeb73fe9e9144e85153b12dd86df33c..887cc2fc6d2b2a2a9b7f2c369023480c3bfa162f 100644 (file)
Binary files a/docs/assets/screenshots/permissions_document.png and b/docs/assets/screenshots/permissions_document.png differ

diff --git a/src-ui/e2e/document-detail/document-detail.spec.ts b/src-ui/e2e/document-detail/document-detail.spec.ts
index e40b88cccfb8255296152d806746ce07e76b8f26..0cd45a058571914986c22c4ccb653f772df32c3f 100644 (file)
--- a/src-ui/e2e/document-detail/document-detail.spec.ts
+++ b/src-ui/e2e/document-detail/document-detail.spec.ts
@@ -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()

diff --git a/src-ui/src/app/components/document-detail/document-detail.component.html b/src-ui/src/app/components/document-detail/document-detail.component.html
index b3ea4cc434f69f80a2ea856991d712bd660ad016..192680e57353ec84a38cd88afb3c6a55b340f88f 100644 (file)
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -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>

diff --git a/src-ui/src/app/components/document-detail/document-detail.component.scss b/src-ui/src/app/components/document-detail/document-detail.component.scss
index ba9b0a5ea7c1de4702994071ef1f4a523a4c50d6..026969339aee1fa7727043c6b9ba36117463170f 100644 (file)
--- a/src-ui/src/app/components/document-detail/document-detail.component.scss
+++ b/src-ui/src/app/components/document-detail/document-detail.component.scss
@@ -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);
+}