Browse Source

Improve dashboard page html template formatting

pull/15801/head
Igor Kulikov 4 months ago
parent
commit
2cd046da03
  1. 176
      ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html

176
ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html

@ -300,97 +300,97 @@
</mat-form-field> </mat-form-field>
</section> </section>
} }
<mat-drawer-container class="tb-dashboard-layouts flex-1" <mat-drawer-container class="tb-dashboard-layouts flex-1"
[class.tb-shrinked]="isEditingWidget"> [class.tb-shrinked]="isEditingWidget">
@if (layouts.right.show) { @if (layouts.right.show) {
<mat-drawer <mat-drawer
id="tb-right-layout" id="tb-right-layout"
style="border-left: none" style="border-left: none"
[style.min-width]="rightLayoutSize.width" [style.min-width]="rightLayoutSize.width"
[style.max-width]="rightLayoutSize.width" [style.max-width]="rightLayoutSize.width"
[style.height]="rightLayoutSize.height" [style.height]="rightLayoutSize.height"
disableClose="true" disableClose="true"
[@.disabled]="!isMobile" [@.disabled]="!isMobile"
position="end" position="end"
[mode]="isMobile ? 'over' : 'side'" [mode]="isMobile ? 'over' : 'side'"
[(opened)]="rightLayoutOpened"> [(opened)]="rightLayoutOpened">
<tb-dashboard-layout style="height: 100%;" <tb-dashboard-layout style="height: 100%;"
[dashboardCheatSheet]="cheatSheetComponent" [dashboardCheatSheet]="cheatSheetComponent"
[layoutCtx]="mobileDisplayRightLayoutFirst ? layouts.main.layoutCtx : layouts.right.layoutCtx" [layoutCtx]="mobileDisplayRightLayoutFirst ? layouts.main.layoutCtx : layouts.right.layoutCtx"
[dashboardCtx]="dashboardCtx" [dashboardCtx]="dashboardCtx"
[isEdit]="isEdit" [isEdit]="isEdit"
[isEditingWidget]="isEditingWidget" [isEditingWidget]="isEditingWidget"
[isMobile]="forceDashboardMobileMode" [isMobile]="forceDashboardMobileMode"
[widgetEditMode]="widgetEditMode" [widgetEditMode]="widgetEditMode"
[parentDashboard]="parentDashboard" [parentDashboard]="parentDashboard"
[popoverComponent]="popoverComponent"> [popoverComponent]="popoverComponent">
</tb-dashboard-layout>
</mat-drawer>
}
<mat-drawer-content [class.!hidden]="!layouts.main.show"
id="tb-main-layout"
[style.width]="mainLayoutSize.width"
[style.height]="mainLayoutSize.height">
<tb-dashboard-layout
[style.max-width]="mainLayoutSize.maxWidth"
[style.min-width]="mainLayoutSize.minWidth"
[dashboardCheatSheet]="cheatSheetComponent"
[layoutCtx]="mobileDisplayRightLayoutFirst ? layouts.right.layoutCtx : layouts.main.layoutCtx"
[dashboardCtx]="dashboardCtx"
[isEdit]="isEdit"
[isEditingWidget]="isEditingWidget"
[isMobile]="forceDashboardMobileMode"
[widgetEditMode]="widgetEditMode"
[parentDashboard]="parentDashboard"
[popoverComponent]="popoverComponent">
</tb-dashboard-layout> </tb-dashboard-layout>
@if (isEdit) { </mat-drawer>
<div class="layout-filler"
[class.!hidden]="!showMainLayoutFiller">
{{ 'dashboard.breakpoint-value' | translate : {value: currentBreakpointValue } }}
</div>
}
</mat-drawer-content>
</mat-drawer-container>
@if (!readonly && (hideToolbar || widgetEditMode)) {
<section data-html2canvas-ignore class="tb-header-buttons tb-enter-edit-mode flex flex-row flex-wrap items-end justify-start">
<button [class.!hidden]="isEdit"
color="primary"
mat-mini-fab
class="tb-btn-header tb-btn-edit"
(click)="toggleDashboardEditMode()"
matTooltip="{{ 'action.enter-edit-mode' | translate }}"
matTooltipPosition="above">
<mat-icon>edit</mat-icon>
</button>
<button [class.!hidden]="!isEdit"
color="primary"
mat-mini-fab
class="tb-btn-header tb-btn-edit"
(click)="saveDashboard()"
[disabled]="isLoading$ | async"
matTooltip="{{'action.save' | translate}}"
matTooltipPosition="below">
<mat-icon>done</mat-icon>
</button>
<button [class.!hidden]="!isEdit"
color="primary"
mat-mini-fab
class="tb-btn-header tb-btn-edit"
(click)="toggleDashboardEditMode()"
[disabled]="isLoading$ | async"
matTooltip="{{'action.cancel' | translate}}"
matTooltipPosition="below">
<mat-icon>close</mat-icon>
</button>
</section>
}
@if (!embedded) {
<section data-html2canvas-ignore class="tb-powered-by-footer" [style.color]="dashboard.configuration.settings.titleColor">
<span>Powered by <a href="https://thingsboard.io" target="_blank">ThingsBoard v.{{ thingsboardVersion }}</a></span>
</section>
} }
</mat-drawer-content> <mat-drawer-content [class.!hidden]="!layouts.main.show"
id="tb-main-layout"
[style.width]="mainLayoutSize.width"
[style.height]="mainLayoutSize.height">
<tb-dashboard-layout
[style.max-width]="mainLayoutSize.maxWidth"
[style.min-width]="mainLayoutSize.minWidth"
[dashboardCheatSheet]="cheatSheetComponent"
[layoutCtx]="mobileDisplayRightLayoutFirst ? layouts.right.layoutCtx : layouts.main.layoutCtx"
[dashboardCtx]="dashboardCtx"
[isEdit]="isEdit"
[isEditingWidget]="isEditingWidget"
[isMobile]="forceDashboardMobileMode"
[widgetEditMode]="widgetEditMode"
[parentDashboard]="parentDashboard"
[popoverComponent]="popoverComponent">
</tb-dashboard-layout>
@if (isEdit) {
<div class="layout-filler"
[class.!hidden]="!showMainLayoutFiller">
{{ 'dashboard.breakpoint-value' | translate : {value: currentBreakpointValue } }}
</div>
}
</mat-drawer-content>
</mat-drawer-container>
@if (!readonly && (hideToolbar || widgetEditMode)) {
<section data-html2canvas-ignore class="tb-header-buttons tb-enter-edit-mode flex flex-row flex-wrap items-end justify-start">
<button [class.!hidden]="isEdit"
color="primary"
mat-mini-fab
class="tb-btn-header tb-btn-edit"
(click)="toggleDashboardEditMode()"
matTooltip="{{ 'action.enter-edit-mode' | translate }}"
matTooltipPosition="above">
<mat-icon>edit</mat-icon>
</button>
<button [class.!hidden]="!isEdit"
color="primary"
mat-mini-fab
class="tb-btn-header tb-btn-edit"
(click)="saveDashboard()"
[disabled]="isLoading$ | async"
matTooltip="{{'action.save' | translate}}"
matTooltipPosition="below">
<mat-icon>done</mat-icon>
</button>
<button [class.!hidden]="!isEdit"
color="primary"
mat-mini-fab
class="tb-btn-header tb-btn-edit"
(click)="toggleDashboardEditMode()"
[disabled]="isLoading$ | async"
matTooltip="{{'action.cancel' | translate}}"
matTooltipPosition="below">
<mat-icon>close</mat-icon>
</button>
</section>
}
@if (!embedded) {
<section data-html2canvas-ignore class="tb-powered-by-footer" [style.color]="dashboard.configuration.settings.titleColor">
<span>Powered by <a href="https://thingsboard.io" target="_blank">ThingsBoard v.{{ thingsboardVersion }}</a></span>
</section>
}
</mat-drawer-content>
<mat-drawer class="tb-details-drawer" <mat-drawer class="tb-details-drawer"
[opened]="isEditingWidget || isAddingWidget" [opened]="isEditingWidget || isAddingWidget"
(openedStart)="detailsDrawerOpenedStart()" (openedStart)="detailsDrawerOpenedStart()"

Loading…
Cancel
Save