UI: Improve dashboard toolbar

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

@@ -15,17 +15,17 @@
     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
           cdkOverlayOrigin #aliasEntitySelectPanelOrigin="cdkOverlayOrigin"
           (click)="openEditMode()"
-          matTooltip="{{ hasSelectableAliasEntities ? ('entity.select-entities' | translate) : '' }}"
+          matTooltip="{{ 'entity.select-entities' | translate }}"
           [matTooltipPosition]="tooltipPosition">
     <mat-icon class="material-icons">devices_other</mat-icon>
   </button>
   <span fxHide.lt-lg
         (click)="openEditMode()"
-        matTooltip="{{ hasSelectableAliasEntities ? ('entity.select-entities' | translate) : '' }}"
+        matTooltip="{{ 'entity.select-entities' | translate }}"
         [matTooltipPosition]="tooltipPosition">
     {{displayValue}}
   </span>

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;
 

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 = '';
       }
     }
   }

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

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

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

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