Angular library providing dashboard components including grid layout, drag-and-drop widgets, resize handles, toolbar, config panel, layout presets, and persistence services.
42 lines
1.2 KiB
HTML
42 lines
1.2 KiB
HTML
<div
|
|
class="db-widget-header__left"
|
|
[attr.draggable]="editMode() === 'edit' && !widget().locked ? 'true' : null"
|
|
(dragstart)="onDragStart($event)"
|
|
>
|
|
@if (editMode() === 'edit' && !widget().locked) {
|
|
<ui-icon name="grip-vertical" [size]="14" class="db-widget-header__drag-handle" uiTooltip="Drag to move" />
|
|
}
|
|
@if (widget().icon) {
|
|
<ui-icon [name]="widget().icon!" [size]="16" class="db-widget-header__icon" />
|
|
}
|
|
<span class="db-widget-header__title">{{ widget().title }}</span>
|
|
</div>
|
|
|
|
<div class="db-widget-header__actions">
|
|
<ui-button
|
|
variant="ghost"
|
|
size="sm"
|
|
(click)="fullscreenToggle.emit()"
|
|
[uiTooltip]="fullscreen() ? 'Exit fullscreen' : 'Fullscreen'"
|
|
>
|
|
<ui-icon [name]="fullscreen() ? 'minimize-2' : 'maximize-2'" [size]="14" />
|
|
</ui-button>
|
|
|
|
<ui-button
|
|
variant="ghost"
|
|
size="sm"
|
|
(click)="configOpen.emit()"
|
|
uiTooltip="Widget settings"
|
|
>
|
|
<ui-icon name="settings" [size]="14" />
|
|
</ui-button>
|
|
|
|
@if (editMode() === 'edit') {
|
|
<ui-dropdown-menu [items]="menuItems()">
|
|
<ui-button variant="ghost" size="sm" trigger>
|
|
<ui-icon name="more-vertical" [size]="14" />
|
|
</ui-button>
|
|
</ui-dropdown-menu>
|
|
}
|
|
</div>
|