|
|
|
@ -33,33 +33,9 @@ |
|
|
|
<ng-container *ngIf="!widgetComponent.widgetContext?.embedTitlePanel"> |
|
|
|
<ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container> |
|
|
|
</ng-container> |
|
|
|
<div *ngIf="widget.showWidgetActions" |
|
|
|
class="tb-widget-actions" |
|
|
|
[class]="{'tb-widget-actions-absolute': !(widget.showWidgetTitlePanel && !widgetComponent.widgetContext?.embedTitlePanel && (widget.showTitle||widget.hasAggregation))}" |
|
|
|
(mousedown)="$event.stopPropagation()"> |
|
|
|
<div class="flex items-center"> |
|
|
|
@for (action of widget.customHeaderActions; track action.name; let last = $last) { |
|
|
|
<ng-container *ngTemplateOutlet="widgetHeaderActionButton; context:{ action, last }"></ng-container> |
|
|
|
} |
|
|
|
</div> |
|
|
|
|
|
|
|
<button mat-icon-button *ngFor="let action of widget.widgetActions" |
|
|
|
type="button" |
|
|
|
[class.!hidden]="isEdit || !action.show" |
|
|
|
(click)="action.onAction($event)" |
|
|
|
matTooltip="{{ action.name | translate }}" |
|
|
|
matTooltipPosition="above"> |
|
|
|
<tb-icon>{{ action.icon }}</tb-icon> |
|
|
|
</button> |
|
|
|
<button mat-icon-button |
|
|
|
type="button" |
|
|
|
[class.!hidden]="isEdit || !widget.enableFullscreen" |
|
|
|
(click)="$event.stopPropagation(); widget.isFullscreen = !widget.isFullscreen; updateEditWidgetActionsTooltipState()" |
|
|
|
matTooltip="{{(widget.isFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}" |
|
|
|
matTooltipPosition="above"> |
|
|
|
<tb-icon>{{ widget.isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</tb-icon> |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
<ng-container *ngIf="!widgetComponent.widgetContext?.embedActionsPanel"> |
|
|
|
<ng-container *ngTemplateOutlet="widgetHeaderActionsPanel"></ng-container> |
|
|
|
</ng-container> |
|
|
|
</div> |
|
|
|
<div class="tb-widget-content" [class.tb-no-interaction]="disableWidgetInteraction"> |
|
|
|
<tb-widget #widgetComponent |
|
|
|
@ -68,7 +44,8 @@ |
|
|
|
[isEdit]="isEdit" |
|
|
|
[isPreview]="isPreview" |
|
|
|
[isMobile]="isMobile" |
|
|
|
[widgetTitlePanel]="widgetTitlePanel"> |
|
|
|
[widgetTitlePanel]="widgetTitlePanel" |
|
|
|
[widgetHeaderActionsPanel]="widgetHeaderActionsPanel"> |
|
|
|
</tb-widget> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -102,6 +79,36 @@ |
|
|
|
</div> |
|
|
|
</ng-template> |
|
|
|
|
|
|
|
<ng-template #widgetHeaderActionsPanel let-absolute="absolute"> |
|
|
|
<div *ngIf="widget.showWidgetActions" |
|
|
|
class="tb-widget-actions" |
|
|
|
[class.tb-widget-actions-absolute]="widgetActionAbsolute(widgetComponent, absolute)" |
|
|
|
(mousedown)="$event.stopPropagation()"> |
|
|
|
<div class="flex items-center"> |
|
|
|
@for (action of widget.customHeaderActions; track action.name; let last = $last) { |
|
|
|
<ng-container *ngTemplateOutlet="widgetHeaderActionButton; context:{ action, last }"></ng-container> |
|
|
|
} |
|
|
|
</div> |
|
|
|
|
|
|
|
<button mat-icon-button *ngFor="let action of widget.widgetActions" |
|
|
|
type="button" |
|
|
|
[class.!hidden]="isEdit || !action.show" |
|
|
|
(click)="action.onAction($event)" |
|
|
|
matTooltip="{{ action.name | translate }}" |
|
|
|
matTooltipPosition="above"> |
|
|
|
<tb-icon>{{ action.icon }}</tb-icon> |
|
|
|
</button> |
|
|
|
<button mat-icon-button |
|
|
|
type="button" |
|
|
|
[class.!hidden]="isEdit || !widget.enableFullscreen" |
|
|
|
(click)="$event.stopPropagation(); widget.isFullscreen = !widget.isFullscreen; updateEditWidgetActionsTooltipState()" |
|
|
|
matTooltip="{{(widget.isFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}" |
|
|
|
matTooltipPosition="above"> |
|
|
|
<tb-icon>{{ widget.isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</tb-icon> |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</ng-template> |
|
|
|
|
|
|
|
<ng-template #widgetHeaderActionButton let-action="action" let-last="last"> |
|
|
|
@switch (action.buttonType) { |
|
|
|
@case (widgetHeaderActionButtonType.miniFab) { |
|
|
|
|
Igor Kulikov
1 year ago
GitHub