Use accordion for permissions in object edit dialogs

This commit is contained in:
Michael Shamoon 2022-12-10 17:02:02 -08:00
parent 7050f29cff
commit 8159b7574c
7 changed files with 38 additions and 5 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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({

View File

@ -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);
}