dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Improve dashboard toolbar

Browse Source
This commit is contained in:
Igor Kulikov 2023-05-15 17:21:57 +03:00
parent d340fab9db
commit fab82e9514
5 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.html
View File

@ -15,17 +15,17 @@
limitations under the License. limitations under the License.
--> -->
<section class="tb-aliases-entity-select" fxLayout="row" fxLayoutAlign="start center"> <section class="tb-aliases-entity-select" fxLayout="row" fxLayoutAlign="start center" *ngIf="hasSelectableAliasEntities">
<button mat-icon-button <button mat-icon-button
cdkOverlayOrigin #aliasEntitySelectPanelOrigin="cdkOverlayOrigin" cdkOverlayOrigin #aliasEntitySelectPanelOrigin="cdkOverlayOrigin"
(click)="openEditMode()" (click)="openEditMode()"
matTooltip="{{ hasSelectableAliasEntities ? ('entity.select-entities' | translate) : '' }}" matTooltip="{{ 'entity.select-entities' | translate }}"
[matTooltipPosition]="tooltipPosition"> [matTooltipPosition]="tooltipPosition">
<mat-icon class="material-icons">devices_other</mat-icon> <mat-icon class="material-icons">devices_other</mat-icon>
</button> </button>
<span fxHide.lt-lg <span fxHide.lt-lg
(click)="openEditMode()" (click)="openEditMode()"
matTooltip="{{ hasSelectableAliasEntities ? ('entity.select-entities' | translate) : '' }}" matTooltip="{{ 'entity.select-entities' | translate }}"
[matTooltipPosition]="tooltipPosition"> [matTooltipPosition]="tooltipPosition">
{{displayValue}} {{displayValue}}
</span> </span>

6
ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.scss
View File

@ -16,9 +16,11 @@
@import "../../../../../scss/constants"; @import "../../../../../scss/constants";
:host { :host {
min-width: 52px; &.tb-hide {
display: none;
}
section.tb-aliases-entity-select { section.tb-aliases-entity-select {
min-width: 52px;
min-height: 32px; min-height: 32px;
padding: 0 6px; padding: 0 6px;

7
ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.ts
View File

@ -16,7 +16,7 @@
import { import {
ChangeDetectorRef, ChangeDetectorRef,
Component, Component, HostBinding,
Injector, Injector,
Input, Input,
OnDestroy, OnDestroy,
@ -47,6 +47,9 @@ import { AliasFilterType } from '@shared/models/alias.models';
}) })
export class AliasesEntitySelectComponent implements OnInit, OnDestroy { export class AliasesEntitySelectComponent implements OnInit, OnDestroy {
@HostBinding('class')
aliasesEntitySelectClass = 'tb-hide';
aliasControllerValue: IAliasController; aliasControllerValue: IAliasController;
@Input() @Input()
@ -188,12 +191,14 @@ export class AliasesEntitySelectComponent implements OnInit, OnDestroy {
const allEntityAliases = this.aliasController.getEntityAliases(); const allEntityAliases = this.aliasController.getEntityAliases();
this.entityAliasesInfo = {}; this.entityAliasesInfo = {};
this.hasSelectableAliasEntities = false; this.hasSelectableAliasEntities = false;
this.aliasesEntitySelectClass = 'tb-hide';
for (const aliasId of Object.keys(allEntityAliases)) { for (const aliasId of Object.keys(allEntityAliases)) {
const aliasInfo = this.aliasController.getInstantAliasInfo(aliasId); const aliasInfo = this.aliasController.getInstantAliasInfo(aliasId);
if (aliasInfo && !aliasInfo.resolveMultiple && aliasInfo.currentEntity if (aliasInfo && !aliasInfo.resolveMultiple && aliasInfo.currentEntity
&& aliasInfo.entityFilter && aliasInfo.entityFilter.type !== AliasFilterType.singleEntity) { && aliasInfo.entityFilter && aliasInfo.entityFilter.type !== AliasFilterType.singleEntity) {
this.entityAliasesInfo[aliasId] = deepClone(aliasInfo); this.entityAliasesInfo[aliasId] = deepClone(aliasInfo);
this.hasSelectableAliasEntities = true; this.hasSelectableAliasEntities = true;
this.aliasesEntitySelectClass = '';
} }
} }
} }

3
ui-ngx/src/app/modules/home/components/filter/filters-edit.component.scss
View File

@ -16,6 +16,9 @@
@import "../../../../../scss/constants"; @import "../../../../../scss/constants";
:host { :host {
&.tb-hide {
display: none;
}
section.tb-filters-edit { section.tb-filters-edit {
min-height: 32px; min-height: 32px;
padding: 0 6px; padding: 0 6px;

7
ui-ngx/src/app/modules/home/components/filter/filters-edit.component.ts
View File

@ -15,7 +15,7 @@
/// ///
import { import {
Component, Component, HostBinding,
Injector, Injector,
Input, Input,
OnDestroy, OnDestroy,
@ -48,6 +48,9 @@ import { MatDialog } from '@angular/material/dialog';
}) })
export class FiltersEditComponent implements OnInit, OnDestroy { export class FiltersEditComponent implements OnInit, OnDestroy {
@HostBinding('class')
filtersEditClass = 'tb-hide';
aliasControllerValue: IAliasController; aliasControllerValue: IAliasController;
@Input() @Input()
@ -174,11 +177,13 @@ export class FiltersEditComponent implements OnInit, OnDestroy {
const allFilters = this.aliasController.getFilters(); const allFilters = this.aliasController.getFilters();
this.filtersInfo = {}; this.filtersInfo = {};
this.hasEditableFilters = false; this.hasEditableFilters = false;
this.filtersEditClass = 'tb-hide';
for (const filterId of Object.keys(allFilters)) { for (const filterId of Object.keys(allFilters)) {
const filterInfo = this.aliasController.getFilterInfo(filterId); const filterInfo = this.aliasController.getFilterInfo(filterId);
if (filterInfo && isFilterEditable(filterInfo)) { if (filterInfo && isFilterEditable(filterInfo)) {
this.filtersInfo[filterId] = deepClone(filterInfo); this.filtersInfo[filterId] = deepClone(filterInfo);
this.hasEditableFilters = true; this.hasEditableFilters = true;
this.filtersEditClass = '';
} }
} }
} }