31 lines
1.2 KiB
HTML
31 lines
1.2 KiB
HTML
|
<!-- Backdrop overlay — click to dismiss -->
|
||
|
|
<div class="global-action-modal__backdrop" #backdrop (click)="onBackdropClick()"></div>
|
||
|
|
|
||
|
|
<!-- Modal panel -->
|
||
|
|
<div class="global-action-modal__panel" (click)="onModalClick($event)" role="dialog" aria-modal="true" aria-label="Global Actions">
|
||
|
|
|
||
|
|
<!-- Header -->
|
||
|
|
<div class="global-action-modal__header">
|
||
|
|
<h2 class="global-action-modal__title">Global Actions</h2>
|
||
|
|
<button matIconButton
|
||
|
|
class="global-action-modal__close"
|
||
|
|
aria-label="Close modal"
|
||
|
|
(click)="onClose()">
|
||
|
|
<mat-icon>close</mat-icon>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Action grid -->
|
||
|
|
<div class="global-action-modal__actions">
|
||
|
|
@for (action of actions; track action.key) {
|
||
|
|
<button class="global-action-modal__action-btn global-action-modal__action-btn--{{ action.color }}"
|
||
|
|
(click)="onAction(action)">
|
||
|
|
<div class="global-action-modal__action-icon">
|
||
|
|
<mat-icon>{{ action.icon }}</mat-icon>
|
||
|
|
</div>
|
||
|
|
<span class="global-action-modal__action-label">{{ action.label }}</span>
|
||
|
|
<span class="global-action-modal__action-desc">{{ action.description }}</span>
|
||
|
|
</button>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</div>
|