[3.0] Improvements import and tables for mobile view (#2594)

* Fix width table in Safari

* Improvement in mobile view

* Improvement attributes-table from mobile view

* Relation-table improvement for mobile view

* Improvement entity-table from mobile view

ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html

@@ -16,10 +16,10 @@
 
 -->
 <form [formGroup]="alarmFormGroup" style="min-width: 600px;">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar color="primary">
     <h2>{{ 'alarm.alarm-details' | translate }}</h2>
     <span fxFlex></span>
-    <button mat-button mat-icon-button
+    <button mat-icon-button
             (click)="close()"
             type="button">
       <mat-icon class="material-icons">close</mat-icon>
@@ -91,7 +91,6 @@
     <div fxLayout="row" *ngIf="alarm$ | async; let alarm;">
       <button *ngIf="allowAcknowledgment && (alarm.status === alarmStatuses.ACTIVE_UNACK ||
                                              alarm.status === alarmStatuses.CLEARED_UNACK)"
-              mat-button
               mat-raised-button
               color="primary"
               type="button"
@@ -102,7 +101,6 @@
       </button>
       <button *ngIf="allowClear && (alarm.status === alarmStatuses.ACTIVE_ACK ||
                                     alarm.status === alarmStatuses.ACTIVE_UNACK)"
-              mat-button
               mat-raised-button
               color="primary"
               type="button"
@@ -113,7 +111,6 @@
     </div>
     <span fxFlex></span>
     <button mat-button color="primary"
-            style="margin-right: 20px;"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="close()" cdkFocusInitial>

ui-ngx/src/app/modules/home/components/alarm/alarm-table-config.ts

@@ -39,10 +39,6 @@ import {
 import { AlarmService } from '@app/core/http/alarm.service';
 import { DialogService } from '@core/services/dialog.service';
 import { AlarmTableHeaderComponent } from '@home/components/alarm/alarm-table-header.component';
-import {
-  AuditLogDetailsDialogComponent,
-  AuditLogDetailsDialogData
-} from '@home/components/audit-log/audit-log-details-dialog.component';
 import {
   AlarmDetailsDialogComponent,
   AlarmDetailsDialogData

ui-ngx/src/app/modules/home/components/alarm/alarm-table-header.component.html

@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<mat-form-field class="mat-block" style="width: 200px;">
+<mat-form-field class="mat-block">
   <mat-label translate>alarm.alarm-status</mat-label>
-  <mat-select matInput [ngModel]="alarmTableConfig.searchStatus"
+  <mat-select [ngModel]="alarmTableConfig.searchStatus"
               (ngModelChange)="searchStatusChanged($event)">
     <mat-option *ngFor="let status of alarmSearchStatusTypes" [value]="status">
       {{ alarmSearchStatusTranslationsMap.get(alarmSearchStatusEnum[status]) | translate }}

ui-ngx/src/app/modules/home/components/alarm/alarm-table-header.component.scss

@@ -13,16 +13,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import 'src/scss/constants';
+
 :host {
   /*  flex: 1;
     display: flex;
     justify-content: flex-start; */
   padding-right: 8px;
+  min-width: 160px;
 }
 
 :host ::ng-deep {
   mat-form-field {
     font-size: 16px;
+    width: 200px;
 
     .mat-form-field-wrapper {
       padding-bottom: 0;
@@ -31,5 +35,13 @@
     .mat-form-field-underline {
       bottom: 0;
     }
+
+    @media #{$mat-xs} {
+      width: 100%;
+
+      .mat-form-field-infix {
+        width: auto !important;
+      }
+    }
   }
 }

ui-ngx/src/app/modules/home/components/alarm/alarm-table.component.ts

@@ -20,8 +20,6 @@ import { DatePipe } from '@angular/common';
 import { MatDialog } from '@angular/material/dialog';
 import { EntityId } from '@shared/models/id/entity-id';
 import { EntitiesTableComponent } from '@home/components/entity/entities-table.component';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
 import { DialogService } from '@core/services/dialog.service';
 import { AlarmTableConfig } from './alarm-table-config';
 import { AlarmSearchStatus } from '@shared/models/alarm.models';
@@ -70,8 +68,7 @@ export class AlarmTableComponent implements OnInit {
               private dialogService: DialogService,
               private translate: TranslateService,
               private datePipe: DatePipe,
-              private dialog: MatDialog,
-              private store: Store<AppState>) {
+              private dialog: MatDialog) {
   }
 
   ngOnInit() {

ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html

@@ -19,35 +19,37 @@
   <div fxFlex fxLayout="column" class="mat-elevation-z1 tb-entity-table-content">
     <mat-toolbar class="mat-table-toolbar" [fxShow]="mode === 'default' && !textSearchMode && dataSource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
-        <span class="tb-entity-table-title">{{telemetryTypeTranslationsMap.get(attributeScope) | translate}}</span>
-        <mat-form-field class="mat-block tb-attribute-scope" style="width: 200px;" *ngIf="!disableAttributeScopeSelection">
-          <mat-label translate>attribute.attributes-scope</mat-label>
-          <mat-select [disabled]="(isLoading$ | async) || attributeScopeSelectionReadonly"
-                      matInput [ngModel]="attributeScope"
-                      (ngModelChange)="attributeScopeChanged($event)">
-            <mat-option *ngFor="let scope of attributeScopes" [value]="scope">
-              {{ telemetryTypeTranslationsMap.get(toTelemetryTypeFunc(scope)) | translate }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
+        <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">
+          <span class="tb-entity-table-title">{{telemetryTypeTranslationsMap.get(attributeScope) | translate}}</span>
+          <mat-form-field class="mat-block tb-attribute-scope" *ngIf="!disableAttributeScopeSelection">
+            <mat-label translate>attribute.attributes-scope</mat-label>
+            <mat-select [disabled]="(isLoading$ | async) || attributeScopeSelectionReadonly"
+                        [ngModel]="attributeScope"
+                        (ngModelChange)="attributeScopeChanged($event)">
+              <mat-option *ngFor="let scope of attributeScopes" [value]="scope">
+                {{ telemetryTypeTranslationsMap.get(toTelemetryTypeFunc(scope)) | translate }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
         <span fxFlex></span>
-        <button *ngIf="!isClientSideTelemetryTypeMap.get(attributeScope)"
-                mat-button mat-icon-button
+        <button mat-icon-button
+                *ngIf="!isClientSideTelemetryTypeMap.get(attributeScope)"
                 [disabled]="isLoading$ | async"
                 (click)="addAttribute($event)"
                 matTooltip="{{ 'action.add' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>add</mat-icon>
         </button>
-        <button *ngIf="!isClientSideTelemetryTypeMap.get(attributeScope)"
-                mat-button mat-icon-button
+        <button mat-icon-button
+                *ngIf="!isClientSideTelemetryTypeMap.get(attributeScope)"
                 [disabled]="isLoading$ | async"
                 (click)="reloadAttributes()"
                 matTooltip="{{ 'action.refresh' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>refresh</mat-icon>
         </button>
-        <button mat-button mat-icon-button
+        <button mat-icon-button
                 [disabled]="isLoading$ | async"
                 (click)="enterFilterMode()"
                 matTooltip="{{ 'action.search' | translate }}"
@@ -58,7 +60,7 @@
     </mat-toolbar>
     <mat-toolbar class="mat-table-toolbar" [fxShow]="mode === 'default' && textSearchMode && dataSource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
-        <button mat-button mat-icon-button
+        <button mat-icon-button
                 matTooltip="{{ 'action.search' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
@@ -69,7 +71,7 @@
                  [(ngModel)]="pageLink.textSearch"
                  placeholder="{{ 'common.enter-search' | translate }}"/>
         </mat-form-field>
-        <button mat-button mat-icon-button (click)="exitFilterMode()"
+        <button mat-icon-button (click)="exitFilterMode()"
                 matTooltip="{{ 'action.close' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>close</mat-icon>
@@ -77,23 +79,22 @@
       </div>
     </mat-toolbar>
     <mat-toolbar class="mat-table-toolbar" color="primary" [fxShow]="mode === 'default' && !dataSource.selection.isEmpty()">
-      <div class="mat-toolbar-tools">
-                <span>
-                  {{ translate.get(
-                    attributeScope === latestTelemetryTypes.LATEST_TELEMETRY
-                        ? 'attribute.selected-telemetry' : 'attribute.selected-attributes',
-                    {count: dataSource.selection.selected.length}) | async }}
-                </span>
+      <div class="mat-toolbar-tools" fxLayout.xs="row wrap">
+        <span class="tb-entity-table-info">
+          {{ (attributeScope === latestTelemetryTypes.LATEST_TELEMETRY ?
+                'attribute.selected-telemetry' : 'attribute.selected-attributes') | translate:{count: dataSource.selection.selected.length} }}
+        </span>
         <span fxFlex></span>
         <button [fxShow]="!isClientSideTelemetryTypeMap.get(attributeScope)"
-                mat-button mat-icon-button [disabled]="isLoading$ | async"
+                class="button-widget-action"
+                mat-icon-button [disabled]="isLoading$ | async"
                 matTooltip="{{ 'action.delete' | translate }}"
                 matTooltipPosition="above"
                 (click)="deleteAttributes($event)">
           <mat-icon>delete</mat-icon>
         </button>
-        <button mat-button mat-raised-button
-                color="accent"
+        <button mat-raised-button color="accent"
+                class="button-widget-action"
                 [disabled]="isLoading$ | async"
                 matTooltip="{{ 'attribute.show-on-widget' | translate }}"
                 matTooltipPosition="above"
@@ -104,7 +105,7 @@
       </div>
     </mat-toolbar>
     <mat-toolbar class="mat-table-toolbar" color="primary" [fxShow]="mode === 'widget'">
-      <div class="mat-toolbar-tools" fxLayoutGap="8px">
+      <div class="mat-toolbar-tools" fxLayoutGap="8px" fxLayout.xs="row wrap">
         <div fxFlex fxLayout="row" fxLayoutAlign="start">
           <span class="tb-details-subtitle">{{ 'widgets-bundle.current' | translate }}</span>
           <tb-widgets-bundle-select fxFlexOffset="5"
@@ -115,8 +116,9 @@
                                     (ngModelChange)="onWidgetsBundleChanged()">
           </tb-widgets-bundle-select>
         </div>
-        <button mat-button mat-raised-button [fxShow]="widgetsList.length > 0"
+        <button mat-raised-button [fxShow]="widgetsList.length > 0"
                 color="accent"
+                class="button-widget-action"
                 [disabled]="isLoading$ | async"
                 matTooltip="{{ 'attribute.add-to-dashboard' | translate }}"
                 matTooltipPosition="above"
@@ -124,7 +126,7 @@
           <mat-icon>dashboard</mat-icon>
           <span translate>attribute.add-to-dashboard</span>
         </button>
-        <button mat-button mat-icon-button
+        <button mat-icon-button
                 [disabled]="isLoading$ | async"
                 matTooltip="{{ 'action.close' | translate }}"
                 matTooltipPosition="above"
@@ -134,7 +136,7 @@
       </div>
     </mat-toolbar>
     <div fxFlex class="table-container" [fxShow]="mode !== 'widget'">
-      <mat-table [dataSource]="dataSource"
+      <table mat-table [dataSource]="dataSource"
                  matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
         <ng-container matColumnDef="select" sticky>
           <mat-header-cell *matHeaderCellDef style="width: 30px;">
@@ -167,7 +169,7 @@
           <mat-cell *matCellDef="let attribute"
                     class="tb-value-cell"
                     (click)="editAttribute($event, attribute)">
-            <div fxLayout="row">
+            <div fxLayout="row" style="align-items: center">
               <span fxFlex>{{attribute.value | tbJson}}</span>
               <span [fxShow]="!isClientSideTelemetryTypeMap.get(attributeScope)">
                 <mat-icon>edit</mat-icon>
@@ -179,7 +181,7 @@
         <mat-row [ngClass]="{'mat-row-select': true,
                              'mat-selected': dataSource.selection.isSelected(attribute)}"
                  *matRowDef="let attribute; columns: displayedColumns;" (click)="dataSource.selection.toggle(attribute)"></mat-row>
-      </mat-table>
+      </table>
       <span [fxShow]="dataSource.isEmpty() | async"
             fxLayoutAlign="center center"
             class="no-data-found" translate>{{
@@ -218,14 +220,16 @@
       </section>
 
       <ng-template #carouselPrev>
-        <button mat-button mat-icon-button *ngIf="widgetsCarouselIndex > 0"
+        <button mat-icon-button
+                *ngIf="widgetsCarouselIndex > 0"
                 matTooltip="{{ 'attribute.prev-widget' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>keyboard_arrow_left</mat-icon>
         </button>
       </ng-template>
       <ng-template #carouselNext>
-        <button mat-button mat-icon-button *ngIf="widgetsCarouselIndex < widgetsList.length - 1"
+        <button mat-icon-button
+                *ngIf="widgetsCarouselIndex < widgetsList.length - 1"
                 matTooltip="{{ 'attribute.next-widget' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>keyboard_arrow_right</mat-icon>
@@ -241,13 +245,11 @@
     <span translate *ngIf="mode === 'widget' && widgetsLoaded &&
                            widgetsList.length === 0 &&
                            widgetsBundle"
-          fxLayoutAlign="center center"
-          fxFlex
+          fxFlex fxLayoutAlign="center center"
           style="text-transform: uppercase; display: flex;"
           class="mat-headline">widgets-bundle.empty</span>
     <span translate *ngIf="mode === 'widget' && !widgetsBundle"
-          fxLayoutAlign="center center"
-          fxFlex
+          fxFlex fxLayoutAlign="center center"
           style="text-transform: uppercase; display: flex;"
           class="mat-headline">widget.select-widgets-bundle</span>
   </div>

ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss

@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import 'src/scss/constants';
+
 :host {
   width: 100%;
   height: 100%;
@@ -22,6 +24,14 @@
       height: 100%;
       background: #fff;
 
+      .mat-toolbar-tools{
+        min-height: auto;
+      }
+
+      .title-container{
+        overflow: hidden;
+      }
+
       .tb-entity-table-title {
         padding-right: 20px;
         white-space: nowrap;
@@ -32,6 +42,30 @@
       .table-container {
         overflow: auto;
       }
+
+      .tb-entity-table-info{
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .button-widget-action{
+        margin-left: auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  @media #{$mat-xs} {
+    .mat-toolbar {
+      height: auto;
+      min-height: 100px;
+
+      .tb-entity-table-title{
+        padding-bottom: 5px;
+        width: 100%;
+      }
     }
   }
 }
@@ -42,6 +76,7 @@
   }
   mat-form-field.tb-attribute-scope {
     font-size: 16px;
+    width: 200px;
 
     .mat-form-field-wrapper {
       padding-bottom: 0;
@@ -50,6 +85,14 @@
     .mat-form-field-underline {
       bottom: 0;
     }
+
+    @media #{$mat-xs} {
+      width: 100%;
+
+      .mat-form-field-infix {
+        width: auto !important;
+      }
+    }
   }
   mat-cell.tb-value-cell {
     cursor: pointer;

ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts

@@ -45,7 +45,8 @@ import {
   isClientSideTelemetryType,
   LatestTelemetry,
   TelemetryType,
-  telemetryTypeTranslations, toTelemetryType
+  telemetryTypeTranslations,
+  toTelemetryType
 } from '@shared/models/telemetry/telemetry.models';
 import { AttributeDatasource } from '@home/models/datasource/attribute-datasource';
 import { AttributeService } from '@app/core/http/attribute.service';
@@ -297,6 +298,9 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
     if ($event) {
       $event.stopPropagation();
     }
+    if (this.attributeScope === LatestTelemetry.LATEST_TELEMETRY){
+      return;
+    }
     const target = $event.target || $event.srcElement || $event.currentTarget;
     const config = new OverlayConfig();
     config.backdropClass = 'cdk-overlay-transparent-backdrop';

ui-ngx/src/app/modules/home/components/entity/entities-table.component.html

@@ -36,12 +36,14 @@
       <div fxLayout="column" class="mat-elevation-z1 tb-entity-table-content">
         <mat-toolbar class="mat-table-toolbar" [fxShow]="!textSearchMode && dataSource.selection.isEmpty()">
           <div class="mat-toolbar-tools">
-            <span *ngIf="entitiesTableConfig.tableTitle" class="tb-entity-table-title">{{ entitiesTableConfig.tableTitle }}</span>
-            <tb-anchor #entityTableHeader></tb-anchor>
-            <tb-timewindow *ngIf="entitiesTableConfig.useTimePageLink" [(ngModel)]="timewindow"
-                            (ngModelChange)="onTimewindowChange()"
-                            asButton historyOnly></tb-timewindow>
-            <span fxFlex *ngIf="!entitiesTableConfig.headerComponent || entitiesTableConfig.useTimePageLink"></span>
+            <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">
+              <span *ngIf="entitiesTableConfig.tableTitle" class="tb-entity-table-title">{{ entitiesTableConfig.tableTitle }}</span>
+              <tb-anchor #entityTableHeader></tb-anchor>
+              <tb-timewindow *ngIf="entitiesTableConfig.useTimePageLink" [(ngModel)]="timewindow"
+                              (ngModelChange)="onTimewindowChange()"
+                              asButton historyOnly></tb-timewindow>
+            </div>
+            <span fxFlex></span>
             <div [fxShow]="addEnabled()">
               <button mat-icon-button [disabled]="isLoading$ | async"
                       *ngIf="!entitiesTableConfig.addActionDescriptors.length; else addActions"
@@ -120,9 +122,9 @@
         </mat-toolbar>
         <mat-toolbar *ngIf="entitiesTableConfig.selectionEnabled" class="mat-table-toolbar" color="primary" [fxShow]="!dataSource.selection.isEmpty()">
           <div class="mat-toolbar-tools">
-                    <span>
-                      {{ translate.get(translations.selectedEntities, {count: dataSource.selection.selected.length}) | async }}
-                    </span>
+            <span class="tb-entity-table-info">
+              {{ translations.selectedEntities | translate:{count: dataSource.selection.selected.length} }}
+            </span>
             <span fxFlex></span>
             <button mat-icon-button [disabled]="isLoading$ | async"
                     [fxShow]="actionDescriptor.isEnabled" *ngFor="let actionDescriptor of groupActionDescriptors"

ui-ngx/src/app/modules/home/components/entity/entities-table.component.scss

@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import 'src/scss/constants';
+
 :host {
   width: 100%;
   height: 100%;
@@ -22,6 +24,14 @@
       height: 100%;
       background: #fff;
 
+      .mat-toolbar-tools{
+        min-height: auto;
+      }
+
+      .title-container{
+        overflow: hidden;
+      }
+
       .tb-entity-table-title {
         padding-right: 20px;
         white-space: nowrap;
@@ -32,6 +42,24 @@
       .table-container {
         overflow: auto;
       }
+
+      .tb-entity-table-info{
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  @media #{$mat-xs} {
+    .mat-toolbar {
+      height: auto;
+      min-height: 100px;
+
+      .tb-entity-table-title{
+        padding-bottom: 5px;
+        width: 100%;
+      }
     }
   }
 }

ui-ngx/src/app/modules/home/components/event/event-table-header.component.html

@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<mat-form-field class="mat-block" style="width: 200px;">
+<mat-form-field class="mat-block">
   <mat-label translate>event.event-type</mat-label>
-  <mat-select matInput [ngModel]="eventTableConfig.eventType"
+  <mat-select [ngModel]="eventTableConfig.eventType"
               (ngModelChange)="eventTypeChanged($event)">
     <mat-option *ngFor="let type of eventTableConfig.eventTypes" [value]="type">
       {{ eventTypeTranslationsMap.get(type) | translate }}

ui-ngx/src/app/modules/home/components/event/event-table-header.component.scss

@@ -13,16 +13,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import 'src/scss/constants';
+
 :host {
 /*  flex: 1;
   display: flex;
   justify-content: flex-start; */
   padding-right: 8px;
+  min-width: 160px;
 }
 
 :host ::ng-deep {
   mat-form-field {
     font-size: 16px;
+    width: 200px;
 
     .mat-form-field-wrapper {
       padding-bottom: 0;
@@ -31,5 +35,13 @@
     .mat-form-field-underline {
       bottom: 0;
     }
+
+    @media #{$mat-xs} {
+      width: 100%;
+
+      .mat-form-field-infix {
+        width: auto !important;
+      }
+    }
   }
 }

ui-ngx/src/app/modules/home/components/event/event-table.component.ts

@@ -15,20 +15,11 @@
 ///
 
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
-import { AuditLogService } from '@core/http/audit-log.service';
 import { TranslateService } from '@ngx-translate/core';
 import { DatePipe } from '@angular/common';
 import { MatDialog } from '@angular/material/dialog';
-import { AuditLogMode } from '@shared/models/audit-log.models';
 import { EntityId } from '@shared/models/id/entity-id';
-import { UserId } from '@shared/models/id/user-id';
-import { CustomerId } from '@shared/models/id/customer-id';
-import { AuditLogTableConfig } from '@home/components/audit-log/audit-log-table-config';
 import { EntitiesTableComponent } from '@home/components/entity/entities-table.component';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
-import { Authority } from '@shared/models/authority.enum';
-import { getCurrentAuthUser } from '@core/auth/auth.selectors';
 import { EventTableConfig } from './event-table-config';
 import { EventService } from '@core/http/event.service';
 import { DialogService } from '@core/services/dialog.service';
@@ -89,8 +80,7 @@ export class EventTableComponent implements OnInit {
               private dialogService: DialogService,
               private translate: TranslateService,
               private datePipe: DatePipe,
-              private dialog: MatDialog,
-              private store: Store<AppState>) {
+              private dialog: MatDialog) {
   }
 
   ngOnInit() {

ui-ngx/src/app/modules/home/components/import-export/import-dialog-csv.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form>
-  <mat-toolbar color="primary">
+  <mat-toolbar fxLayout="row" color="primary">
     <h2 translate>{{ importTitle }}</h2>
     <span fxFlex></span>
     <div [tb-help]="'entitiesImport'"></div>
@@ -76,18 +76,19 @@
             </div>
           </fieldset>
         </form>
-        <div fxLayout="row" fxLayoutGap="20px">
+        <div fxLayout="row wrap" fxLayoutAlign="space-between center">
           <button mat-button
                   [disabled]="(isLoading$ | async)"
                   (click)="previousStep()">{{ 'action.back' | translate }}</button>
-          <span fxFlex></span>
-          <button mat-button
-                  [disabled]="(isLoading$ | async)"
-                  (click)="cancel()">{{ 'action.cancel' | translate }}</button>
-          <button mat-raised-button
-                  [disabled]="(isLoading$ | async)"
-                  color="primary"
-                  (click)="nextStep(3)">{{ 'action.continue' | translate }}</button>
+          <div fxLayout="row wrap" fxLayoutGap="20px">
+            <button mat-button
+                    [disabled]="(isLoading$ | async)"
+                    (click)="cancel()">{{ 'action.cancel' | translate }}</button>
+            <button mat-raised-button
+                    [disabled]="(isLoading$ | async)"
+                    color="primary"
+                    (click)="nextStep(3)">{{ 'action.continue' | translate }}</button>
+          </div>
         </div>
       </mat-step>
       <mat-step [stepControl]="columnTypesFormGroup">
@@ -95,18 +96,19 @@
           <ng-template matStepLabel>{{ 'import.stepper-text.column-type' | translate }}</ng-template>
           <tb-table-columns-assignment formControlName="columnsParam" [entityType]="entityType"></tb-table-columns-assignment>
         </form>
-        <div fxLayout="row" fxLayoutGap="20px">
+        <div fxLayout="row wrap" fxLayoutAlign="space-between center">
           <button mat-button
                   [disabled]="(isLoading$ | async)"
                   (click)="previousStep()">{{ 'action.back' | translate }}</button>
-          <span fxFlex></span>
-          <button mat-button
-                  [disabled]="(isLoading$ | async)"
-                  (click)="cancel()">{{ 'action.cancel' | translate }}</button>
-          <button mat-raised-button
-                  [disabled]="(isLoading$ | async) || columnTypesFormGroup.invalid || !columnTypesFormGroup.dirty"
-                  color="primary"
-                  (click)="nextStep(4)">{{ 'action.continue' | translate }}</button>
+          <div fxLayout="row wrap" fxLayoutGap="20px">
+            <button mat-button
+                    [disabled]="(isLoading$ | async)"
+                    (click)="cancel()">{{ 'action.cancel' | translate }}</button>
+            <button mat-raised-button
+                    [disabled]="(isLoading$ | async) || columnTypesFormGroup.invalid || !columnTypesFormGroup.dirty"
+                    color="primary"
+                    (click)="nextStep(4)">{{ 'action.continue' | translate }}</button>
+          </div>
         </div>
       </mat-step>
       <mat-step>

ui-ngx/src/app/modules/home/components/import-export/import-dialog-csv.component.scss

@@ -17,7 +17,6 @@
   .mat-dialog-content {
     .mat-vertical-content {
       form {
-        overflow: hidden !important;
         padding-bottom: 12px;
       }
     }

ui-ngx/src/app/modules/home/components/import-export/import-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form #importForm="ngForm" [formGroup]="importFormGroup" (ngSubmit)="importFromJson()">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar color="primary">
     <h2 translate>{{ importTitle }}</h2>
     <span fxFlex></span>
     <button mat-button mat-icon-button
@@ -42,15 +42,13 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row">
-    <span fxFlex></span>
-    <button mat-button mat-raised-button color="primary"
+  <div mat-dialog-actions fxLayoutAlign="end center">
+    <button mat-raised-button color="primary"
             type="submit"
             [disabled]="(isLoading$ | async) || importFormGroup.invalid || !importFormGroup.dirty">
       {{ 'action.import' | translate }}
     </button>
     <button mat-button color="primary"
-            style="margin-right: 20px;"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>

ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.html

@@ -23,13 +23,13 @@
     </mat-cell>
   </ng-container>
   <ng-container matColumnDef="sampleData">
-    <mat-header-cell *matHeaderCellDef style="width: 30%"> {{ 'import.column-example' | translate }} </mat-header-cell>
+    <mat-header-cell *matHeaderCellDef style="flex: 0 0 30%;"> {{ 'import.column-example' | translate }} </mat-header-cell>
     <mat-cell *matCellDef="let column">
       {{column.sampleData}}
     </mat-cell>
   </ng-container>
   <ng-container matColumnDef="type">
-    <mat-header-cell *matHeaderCellDef style="width: 40%"> {{ 'import.column-type.column-type' | translate }} </mat-header-cell>
+    <mat-header-cell *matHeaderCellDef style="flex: 0 0 40%"> {{ 'import.column-type.column-type' | translate }} </mat-header-cell>
     <mat-cell *matCellDef="let column">
       <mat-select matInput [(ngModel)]="column.type" (ngModelChange)="columnsUpdated()">
         <mat-option *ngFor="let type of columnTypes" [value]="type.value" [disabled]="type.disabled">
@@ -39,7 +39,7 @@
     </mat-cell>
   </ng-container>
   <ng-container matColumnDef="key">
-    <mat-header-cell *matHeaderCellDef style="width: 30%"> {{ 'import.column-key' | translate }} </mat-header-cell>
+    <mat-header-cell *matHeaderCellDef style="flex: 0 0 30%"> {{ 'import.column-key' | translate }} </mat-header-cell>
     <mat-cell *matCellDef="let column">
       <mat-form-field floatLabel="always" hideRequiredMarker
                       *ngIf="isColumnTypeDiffers(column.type)">

ui-ngx/src/app/modules/home/components/relation/relation-table.component.html

@@ -19,30 +19,33 @@
   <div fxFlex fxLayout="column" class="mat-elevation-z1 tb-entity-table-content">
     <mat-toolbar class="mat-table-toolbar" [fxShow]="!textSearchMode && dataSource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
-        <span class="tb-entity-table-title">{{(direction == directions.FROM ?
-            'relation.from-relations' : 'relation.to-relations') | translate}}</span>
-        <mat-form-field class="mat-block tb-relation-direction" style="width: 200px;">
-          <mat-label translate>relation.direction</mat-label>
-          <mat-select matInput [ngModel]="direction"
-                      (ngModelChange)="directionChanged($event)">
-            <mat-option *ngFor="let type of directionTypes" [value]="type">
-              {{ directionTypeTranslations.get(directions[type]) | translate }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
+        <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">
+          <span class="tb-entity-table-title">
+            {{(direction == directions.FROM ? 'relation.from-relations' : 'relation.to-relations') | translate}}
+          </span>
+          <mat-form-field class="mat-block tb-relation-direction">
+            <mat-label translate>relation.direction</mat-label>
+            <mat-select [ngModel]="direction"
+                        (ngModelChange)="directionChanged($event)">
+              <mat-option *ngFor="let type of directionTypes" [value]="type">
+                {{ directionTypeTranslations.get(directions[type]) | translate }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
         <span fxFlex></span>
-        <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+        <button mat-icon-button [disabled]="isLoading$ | async"
                 (click)="addRelation($event)"
                 matTooltip="{{ 'action.add' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>add</mat-icon>
         </button>
-        <button mat-button mat-icon-button [disabled]="isLoading$ | async" (click)="reloadRelations()"
+        <button mat-icon-button [disabled]="isLoading$ | async" (click)="reloadRelations()"
                 matTooltip="{{ 'action.refresh' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>refresh</mat-icon>
         </button>
-        <button mat-button mat-icon-button [disabled]="isLoading$ | async" (click)="enterFilterMode()"
+        <button mat-icon-button [disabled]="isLoading$ | async" (click)="enterFilterMode()"
                 matTooltip="{{ 'action.search' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
@@ -51,7 +54,7 @@
     </mat-toolbar>
     <mat-toolbar class="mat-table-toolbar" [fxShow]="textSearchMode && dataSource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
-        <button mat-button mat-icon-button
+        <button mat-icon-button
                 matTooltip="{{ 'action.search' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
@@ -62,7 +65,7 @@
                  [(ngModel)]="pageLink.textSearch"
                  placeholder="{{ 'common.enter-search' | translate }}"/>
         </mat-form-field>
-        <button mat-button mat-icon-button (click)="exitFilterMode()"
+        <button mat-icon-button (click)="exitFilterMode()"
                 matTooltip="{{ 'action.close' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>close</mat-icon>
@@ -70,12 +73,11 @@
       </div>
     </mat-toolbar>
     <mat-toolbar class="mat-table-toolbar" color="primary" [fxShow]="!dataSource.selection.isEmpty()">
-      <div class="mat-toolbar-tools">
-                <span>
-                  {{ translate.get('relation.selected-relations', {count: dataSource.selection.selected.length}) | async }}
-                </span>
-        <span fxFlex></span>
-        <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+      <div class="mat-toolbar-tools" fxLayoutAlign="space-between center">
+        <span class="tb-entity-table-info">
+          {{ 'relation.selected-relations' | translate:{count: dataSource.selection.selected.length} }}
+        </span>
+        <button mat-icon-button [disabled]="isLoading$ | async"
                 matTooltip="{{ 'action.delete' | translate }}"
                 matTooltipPosition="above"
                 (click)="deleteRelations($event)">
@@ -135,13 +137,13 @@
           </mat-header-cell>
           <mat-cell *matCellDef="let relation">
             <div fxFlex fxLayout="row" fxLayoutAlign="end">
-              <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+              <button mat-icon-button [disabled]="isLoading$ | async"
                       matTooltip="{{ 'relation.edit' | translate }}"
                       matTooltipPosition="above"
                       (click)="editRelation($event, relation)">
                 <mat-icon>edit</mat-icon>
               </button>
-              <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+              <button mat-icon-button [disabled]="isLoading$ | async"
                       matTooltip="{{ 'relation.delete' | translate }}"
                       matTooltipPosition="above"
                       (click)="deleteRelation($event, relation)">

ui-ngx/src/app/modules/home/components/relation/relation-table.component.scss

@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import 'src/scss/constants';
+
 :host {
   width: 100%;
   height: 100%;
@@ -22,6 +24,14 @@
       height: 100%;
       background: #fff;
 
+      .mat-toolbar-tools{
+        min-height: auto;
+      }
+
+      .title-container{
+        overflow: hidden;
+      }
+
       .tb-entity-table-title {
         padding-right: 20px;
         white-space: nowrap;
@@ -32,6 +42,24 @@
       .table-container {
         overflow: auto;
       }
+
+      .tb-entity-table-info{
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  @media #{$mat-xs} {
+    .mat-toolbar {
+      height: auto;
+      min-height: 100px;
+
+      .tb-entity-table-title{
+        padding-bottom: 5px;
+        width: 100%;
+      }
     }
   }
 }
@@ -42,6 +70,7 @@
   }
   mat-form-field.tb-relation-direction {
     font-size: 16px;
+    width: 200px;
 
     .mat-form-field-wrapper {
       padding-bottom: 0;
@@ -50,5 +79,13 @@
     .mat-form-field-underline {
       bottom: 0;
     }
+
+    @media #{$mat-xs} {
+      width: 100%;
+
+      .mat-form-field-infix {
+        width: auto !important;
+      }
+    }
   }
 }

ui-ngx/src/app/modules/home/pages/asset/asset-table-header.component.scss

@@ -13,14 +13,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import 'src/scss/constants';
+
 :host {
   flex: 1;
   display: flex;
   justify-content: flex-start;
+  min-width: 150px;
 }
 
 :host ::ng-deep {
   tb-entity-subtype-select {
+    width: 100%;
+
     mat-form-field {
       font-size: 16px;
 
@@ -31,6 +36,14 @@
       .mat-form-field-underline {
         bottom: 0;
       }
+
+      @media #{$mat-xs} {
+        width: 100%;
+
+        .mat-form-field-infix {
+          width: auto !important;
+        }
+      }
     }
   }
 }

ui-ngx/src/app/modules/home/pages/asset/asset-table-header.component.ts

@@ -14,12 +14,12 @@
 /// limitations under the License.
 ///
 
-import {Component} from '@angular/core';
-import {Store} from '@ngrx/store';
-import {AppState} from '@core/core.state';
-import {EntityTableHeaderComponent} from '../../components/entity/entity-table-header.component';
-import {EntityType} from '@shared/models/entity-type.models';
-import {AssetInfo} from '@shared/models/asset.models';
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { EntityTableHeaderComponent } from '../../components/entity/entity-table-header.component';
+import { EntityType } from '@shared/models/entity-type.models';
+import { AssetInfo } from '@shared/models/asset.models';
 
 @Component({
   selector: 'tb-asset-table-header',

ui-ngx/src/app/modules/home/pages/device/device-table-header.component.scss

@@ -13,14 +13,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import 'src/scss/constants';
+
 :host {
   flex: 1;
   display: flex;
   justify-content: flex-start;
+  min-width: 150px;
 }
 
 :host ::ng-deep {
   tb-entity-subtype-select {
+    width: 100%;
+
     mat-form-field {
       font-size: 16px;
 
@@ -31,6 +36,14 @@
       .mat-form-field-underline {
         bottom: 0;
       }
+
+      @media #{$mat-xs} {
+        width: 100%;
+
+        .mat-form-field-infix {
+          width: auto !important;
+        }
+      }
     }
   }
 }

ui-ngx/src/app/modules/home/pages/entity-view/entity-view-table-header.component.scss

@@ -13,14 +13,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import 'src/scss/constants';
+
 :host {
   flex: 1;
   display: flex;
   justify-content: flex-start;
+  min-width: 150px;
 }
 
 :host ::ng-deep {
   tb-entity-subtype-select {
+    width: 100%;
+
     mat-form-field {
       font-size: 16px;
 
@@ -31,6 +36,14 @@
       .mat-form-field-underline {
         bottom: 0;
       }
+
+      @media #{$mat-xs} {
+        width: 100%;
+
+        .mat-form-field-infix {
+          width: auto !important;
+        }
+      }
     }
   }
 }

ui-ngx/src/app/shared/components/widgets-bundle-select.component.scss

@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import 'src/scss/constants';
+
 tb-widgets-bundle-select {
   mat-select {
     margin: 0;
@@ -96,6 +98,10 @@ mat-toolbar {
             color: #fff !important;
           }
         }
+
+        @media #{$mat-xs} {
+          width: auto;
+        }
       }
       .mat-form-field-underline {
         display: none;

ui-ngx/src/styles.scss

@@ -687,7 +687,7 @@ mat-label {
     align-items: center;
     flex-direction: row;
     width: 100%;
-    //height: 64px;
+    height: 64px;
     //max-height: 64px;
     padding: 0 16px;
     //margin: 0;