Suspectus/gandalf-reborn
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Enhance app detail component with improved tab actions layout and styling

Browse Source
This commit is contained in:
Christian Werner 2025-11-11 22:49:56 +01:00
parent 6dbfd8039c
commit b8ef8bd67e
2 changed files with 24 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/angular/frontend/src/app/components/app/app-detail/app-detail.component.html
View File

@ -1,14 +1,24 @@
<app-tab-group [tabs]="tabs" (tabChanged)="tabChanged($event)" [activeTabId]="activeTabId()">
<ng-template tabId="groups" let-tab>
<div class="tab-actions">
<span>{{tab.name}}</span>
</div>
<app-list [itemTemplate]="authorityItem" [items]="groups()" [loading]="groupsLoading()" metadata="group"></app-list>
</ng-template>
<ng-template tabId="roles" let-tab>
<div class="tab-actions">
<span>{{tab.name}}</span>
</div>
<app-list [itemTemplate]="authorityItem" [items]="roles()" [loading]="rolesLoading()" metadata="role"></app-list>
</ng-template>
<ng-template tabId="authorities" let-tab>
<div class="tab-actions">
<span>{{tab.name}}</span>
<button class="primary" popovertarget="authority-form">Add</button>
</div>
<app-list [itemTemplate]="authorityItem" [items]="authorities()" [loading]="authoritiesLoading()" metadata="authority"></app-list>
</ng-template>
@ -23,7 +33,11 @@
}
<span class="actions" [ngClass]="{'span-2': !item.description}">
<button [routerLink]="metadata + '/' + item.id" class="primary outline">View Details</button>
<button [routerLink]="metadata + '/' + item.id" class="secondary outline">View Details</button>
</span>
</app-panel>
</ng-template>
<div id="authority-form" popover>
HELLO EL CRINGO
</div>

10
src/angular/frontend/src/app/components/app/app-detail/app-detail.component.scss
View File

@ -1,9 +1,17 @@
:host {
.tab-actions {
margin-left: auto;
display: flex;
gap: 1rem;
min-height: 40px;
align-items: center;
> *:first-child {
margin: 0 auto 0 0;
font-size: 1.5rem;
font-weight: bold;
}
}
.authority-item {