diff --git a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.html b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.html index f01043ebc4..d64bfdccdc 100644 --- a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.html +++ b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.html @@ -15,17 +15,17 @@ limitations under the License. --> -
+
{{displayValue}} diff --git a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.scss b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.scss index 0e2a0d6775..52271bc631 100644 --- a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.scss +++ b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.scss @@ -16,9 +16,11 @@ @import "../../../../../scss/constants"; :host { - min-width: 52px; - + &.tb-hide { + display: none; + } section.tb-aliases-entity-select { + min-width: 52px; min-height: 32px; padding: 0 6px; diff --git a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.ts b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.ts index 983b5f31f3..b34b5619ba 100644 --- a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.ts +++ b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.ts @@ -16,7 +16,7 @@ import { ChangeDetectorRef, - Component, + Component, HostBinding, Injector, Input, OnDestroy, @@ -47,6 +47,9 @@ import { AliasFilterType } from '@shared/models/alias.models'; }) export class AliasesEntitySelectComponent implements OnInit, OnDestroy { + @HostBinding('class') + aliasesEntitySelectClass = 'tb-hide'; + aliasControllerValue: IAliasController; @Input() @@ -188,12 +191,14 @@ export class AliasesEntitySelectComponent implements OnInit, OnDestroy { const allEntityAliases = this.aliasController.getEntityAliases(); this.entityAliasesInfo = {}; this.hasSelectableAliasEntities = false; + this.aliasesEntitySelectClass = 'tb-hide'; for (const aliasId of Object.keys(allEntityAliases)) { const aliasInfo = this.aliasController.getInstantAliasInfo(aliasId); if (aliasInfo && !aliasInfo.resolveMultiple && aliasInfo.currentEntity && aliasInfo.entityFilter && aliasInfo.entityFilter.type !== AliasFilterType.singleEntity) { this.entityAliasesInfo[aliasId] = deepClone(aliasInfo); this.hasSelectableAliasEntities = true; + this.aliasesEntitySelectClass = ''; } } } diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html index 6a9ce1f657..7ff3f08a0e 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html @@ -26,26 +26,41 @@
+ fxLayoutAlign.gt-sm="end center" fxLayoutAlign="space-between center" fxLayoutGap.lt-lg="6px" fxLayoutGap.gt-md="12px"> -
- - -
+ +
+ + + + +
+
+ fxLayoutAlign.gt-sm="start center" fxLayoutAlign="space-between center" fxLayoutGap.lt-lg="6px" fxLayoutGap.gt-md="12px"> - + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + + + + + + + + + + + + + @@ -117,24 +245,6 @@ tooltipPosition="below" [aliasController]="dashboardCtx.aliasController"> - - -

{{ translatedDashboardTitle }}

- + dashboard.title -
- - - - + +
Powered by Thingsboard v.{{ thingsboardVersion }} @@ -285,6 +399,9 @@
+ +
query_builder - diff --git a/ui-ngx/src/app/shared/components/time/timewindow.component.scss b/ui-ngx/src/app/shared/components/time/timewindow.component.scss index 6e9e837283..695362197d 100644 --- a/ui-ngx/src/app/shared/components/time/timewindow.component.scss +++ b/ui-ngx/src/app/shared/components/time/timewindow.component.scss @@ -14,7 +14,7 @@ * limitations under the License. */ :host { - min-width: 52px; + min-width: 48px; margin: 8px 0; max-width: 100%; .mdc-button { @@ -22,7 +22,7 @@ } section.tb-timewindow { min-height: 32px; - padding: 0 6px; + padding: 0 8px; span { overflow: hidden; diff --git a/ui-ngx/src/app/shared/components/time/timewindow.component.ts b/ui-ngx/src/app/shared/components/time/timewindow.component.ts index 4532b7eeae..6a723c73bb 100644 --- a/ui-ngx/src/app/shared/components/time/timewindow.component.ts +++ b/ui-ngx/src/app/shared/components/time/timewindow.component.ts @@ -45,8 +45,6 @@ import { TimewindowPanelComponent, TimewindowPanelData } from '@shared/components/time/timewindow-panel.component'; -import { MediaBreakpoints } from '@shared/models/constants'; -import { BreakpointObserver } from '@angular/cdk/layout'; import { TimeService } from '@core/services/time.service'; import { TooltipPosition } from '@angular/material/tooltip'; import { deepClone, isDefinedAndNotNull } from '@core/utils'; @@ -135,17 +133,6 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces return this.timezoneValue; } - isToolbarValue = false; - - @Input() - set isToolbar(val) { - this.isToolbarValue = coerceBooleanProperty(val); - } - - get isToolbar() { - return this.isToolbarValue; - } - asButtonValue = false; @Input() @@ -161,6 +148,18 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces @coerceBoolean() strokedButton = false; + @Input() + @coerceBoolean() + flatButton = false; + + @Input() + @coerceBoolean() + displayTimewindowValue = true; + + @Input() + @coerceBoolean() + hideLabel = false; + isEditValue = false; @Input() @@ -194,8 +193,7 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces private datePipe: DatePipe, private cd: ChangeDetectorRef, private nativeElement: ElementRef, - public viewContainerRef: ViewContainerRef, - public breakpointObserver: BreakpointObserver) { + public viewContainerRef: ViewContainerRef) { } ngOnInit(): void { @@ -300,6 +298,10 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces this.propagateChange(cloneSelectedTimewindow(this.innerValue)); } + displayValue(): string { + return this.displayTimewindowValue ? this.innerValue?.displayValue : this.translate.instant('timewindow.timewindow'); + } + updateDisplayValue() { if (this.innerValue.selectedTab === TimewindowType.REALTIME && !this.historyOnly) { this.innerValue.displayValue = this.translate.instant('timewindow.realtime') + ' - '; @@ -334,10 +336,6 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces this.cd.detectChanges(); } - hideLabel() { - return this.isToolbar && !this.breakpointObserver.isMatched(MediaBreakpoints['gt-md']); - } - private isTimewindowDisabled(): boolean { return this.disabled || (!this.isEdit && (!this.innerValue || this.innerValue.hideInterval && diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index bcaa4a183f..ee081d9727 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -930,6 +930,7 @@ "no-dashboards-text": "No dashboards found", "no-widgets": "No widgets configured", "add-widget": "Add new widget", + "add-widget-button-text": "Add widget", "title": "Title", "image": "Dashboard image", "mobile-app-settings": "Mobile application settings", @@ -1058,6 +1059,7 @@ "public-link-copied-message": "Dashboard public link has been copied to clipboard", "manage-states": "Manage dashboard states", "states": "Dashboard states", + "states-short": "States", "search-states": "Search dashboard states", "selected-states": "{ count, plural, =1 {1 dashboard state} other {# dashboard states} } selected", "edit-state": "Edit dashboard state", @@ -1086,7 +1088,8 @@ "unassign-dashboards-from-edge-text": "After the confirmation all selected dashboards will be unassigned and won't be accessible by the edge.", "assign-dashboard-to-edge": "Assign Dashboard(s) To Edge", "assign-dashboard-to-edge-text": "Please select the dashboards to assign to the edge", - "non-existent-dashboard-state-error": "Dashboard state with id \"{{ stateId }}\" is not found" + "non-existent-dashboard-state-error": "Dashboard state with id \"{{ stateId }}\" is not found", + "edit-mode": "Edit mode" }, "datakey": { "settings": "Settings", @@ -1937,6 +1940,7 @@ "entities-count": "Entities count", "alarms-count": "Alarms count", "aliases": "Entity aliases", + "aliases-short": "Aliases", "entity-alias": "Entity alias", "unable-delete-entity-alias-title": "Unable to delete entity alias", "unable-delete-entity-alias-text": "Entity alias '{{entityAlias}}' can't be deleted as it used by the following widget(s):
{{widgetsList}}", @@ -2698,6 +2702,7 @@ }, "layout": { "layout": "Layout", + "layouts": "Layouts", "manage": "Manage layouts", "settings": "Layout settings", "color": "Color", @@ -3752,6 +3757,7 @@ "days": "Days" }, "timewindow": { + "timewindow": "Timewindow", "years": "{ years, plural, =1 { year } other {# years } }", "months": "{ months, plural, =1 { month } other {# months } }", "weeks": "{ weeks, plural, =1 { week } other {# weeks } }", diff --git a/ui-ngx/src/theme-overwrites.scss b/ui-ngx/src/theme-overwrites.scss index 394e4f0f12..6b4995664e 100644 --- a/ui-ngx/src/theme-overwrites.scss +++ b/ui-ngx/src/theme-overwrites.scss @@ -17,6 +17,7 @@ @mixin theme-overwrites($primary, $config-or-theme) { @include _mat-form-field-overwrites($primary, $config-or-theme); + @include _mat-button-overwrites($primary, $config-or-theme); } @mixin _mat-form-field-overwrites($primary, $config-or-theme) { @@ -52,3 +53,14 @@ } } } + +@mixin _mat-button-overwrites($primary, $config-or-theme) { + .mat-toolbar { + .mat-mdc-outlined-button { + --mdc-outlined-button-outline-color: inherit; + &:not(:disabled) { + border-color: var(--mdc-outlined-button-outline-color, inherit); + } + } + } +}