Use accordion for permissions in object edit dialogs

diff --git a/src-ui/src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component.html b/src-ui/src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component.html
index f1a3ee59d2eba3bc786b98a5a12eeb4d4bf10ecc..393ccd0a21fb2c7233606e5f1328c1c74b569be7 100644 (file)
--- a/src-ui/src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component.html
@@ -12,7 +12,7 @@
     <app-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive" novalidate></app-input-check>
 
     <div *ifOwner="object">
-      <app-permissions-form [users]="users" formControlName="permissions_form"></app-permissions-form>
+      <app-permissions-form [users]="users" accordion="true" formControlName="permissions_form"></app-permissions-form>
     </div>
 
   </div>

diff --git a/src-ui/src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component.html b/src-ui/src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component.html
index cc03588751b44a78edbf665676e445efbd5aafe2..404705e8e2ebd37cd92011fc4d633750262b4c53 100644 (file)
--- a/src-ui/src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component.html
@@ -14,7 +14,7 @@
       </div>
 
       <div *ifOwner="object">
-        <app-permissions-form [users]="users" formControlName="permissions_form"></app-permissions-form>
+        <app-permissions-form [users]="users" accordion="true" formControlName="permissions_form"></app-permissions-form>
       </div>
 
     </div>

diff --git a/src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.html b/src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.html
index 29f8b8cad0b5557e9ac0df4b131e7d828c01ddaf..6d7cdbe9022b7bfbd82bd53bf8a0555f1f50b449 100644 (file)
--- a/src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.html
@@ -17,7 +17,7 @@
     <app-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive"></app-input-check>
 
     <div *ifOwner="object">
-      <app-permissions-form [users]="users" formControlName="permissions_form"></app-permissions-form>
+      <app-permissions-form [users]="users" accordion="true" formControlName="permissions_form"></app-permissions-form>
     </div>
 
   </div>

diff --git a/src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.html b/src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.html
index b12c40ebd66f0cfdc1ff400906360e9f952417d5..17fe5e6be50f914b3607c05ab2f49570941a9f30 100644 (file)
--- a/src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.html
@@ -15,7 +15,7 @@
       <app-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive"></app-input-check>
 
       <div *ifOwner="object">
-        <app-permissions-form [users]="users" formControlName="permissions_form"></app-permissions-form>
+        <app-permissions-form [users]="users" accordion="true" formControlName="permissions_form"></app-permissions-form>
       </div>
 
     </div>

diff --git a/src-ui/src/app/components/common/input/permissions-form/permissions-form.component.html b/src-ui/src/app/components/common/input/permissions-form/permissions-form.component.html
index 56c9e4dfa3b3ab6e9c0d441d08a5cf588a522998..d7ae5ee7b1c403db6d7a1cb3cac6fbddcc84fc4e 100644 (file)
--- a/src-ui/src/app/components/common/input/permissions-form/permissions-form.component.html
+++ b/src-ui/src/app/components/common/input/permissions-form/permissions-form.component.html
@@ -1,4 +1,18 @@
-<h5 i18n>Permissions</h5>
+<ng-container *ngIf="!accordion">
+  <h5 i18n>Permissions</h5>
+  <ng-container [ngTemplateOutlet]="permissionsForm"></ng-container>
+</ng-container>
+<ng-container *ngIf="accordion">
+  <ngb-accordion #acc="ngbAccordion" activeIds="">
+    <ngb-panel i18n-title title="Edit Permissions">
+      <ng-template ngbPanelContent>
+        <ng-container [ngTemplateOutlet]="permissionsForm"></ng-container>
+      </ng-template>
+    </ngb-panel>
+  </ngb-accordion>
+</ng-container>
+
+<ng-template #permissionsForm>
 <div [formGroup]="form">
   <div class="row">
     <div class="col-lg-3">
@@ -51,3 +65,4 @@
     </div>
   </div>
 </div>
+</ng-template>

diff --git a/src-ui/src/app/components/common/input/permissions-form/permissions-form.component.ts b/src-ui/src/app/components/common/input/permissions-form/permissions-form.component.ts
index 1c1df164c1d2d0fa7581e043a942f59ad81376f0..728f83162d869345c22902f383ae9f73606b4c6e 100644 (file)
--- a/src-ui/src/app/components/common/input/permissions-form/permissions-form.component.ts
+++ b/src-ui/src/app/components/common/input/permissions-form/permissions-form.component.ts
@@ -36,6 +36,9 @@ export class PermissionsFormComponent
   @Input()
   users: PaperlessUser[]
 
+  @Input()
+  accordion: boolean = false
+
   form = new FormGroup({
     owner: new FormControl(null),
     set_permissions: new FormGroup({

diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss
index a9169f038e95249909d1769f3428db6f748c1692..fdb8a05ac072abbe937777a315ee3c5b5b327eed 100644 (file)
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -604,3 +604,18 @@ a.badge {
 code {
   color: var(--pngx-body-color-accent)
 }
+
+.accordion {
+  --bs-accordion-btn-padding-x: 0.75rem;
+  --bs-accordion-btn-padding-y: 0.375rem;
+  --bs-accordion-btn-bg: var(--bs-light);
+  --bs-accordion-btn-color: var(--bs-primary);
+  --bs-accordion-color: var(--bs-body-color);
+  --bs-accordion-bg: var(--bs-light);
+  --bs-accordion-active-color: var(--bs-primary);
+  --bs-accordion-active-bg: var(--pngx-bg-alt);
+}
+
+.accordion-button::after {
+  filter: invert(0.5) saturate(0);
+}