Improvement view on mobile device

6 years ago · 2ca4b78cf9
24 changed files with 102 additions and 106 deletions
--- a/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html
@ -15,7 +15,7 @@
    limitations under the License.

 -->
-<mat-toolbar fxLayout="row" color="primary">
+<mat-toolbar color="primary">
  <h2 translate>audit-log.audit-log-details</h2>
  <span fxFlex></span>
  <button mat-button mat-icon-button
@ -33,10 +33,8 @@
  <div #failureDetailsEditor [fxShow]="displayFailureDetails" class="tb-audit-log-failure-details">
  </div>
 </div>
-<div mat-dialog-actions fxLayout="row">
-  <span fxFlex></span>
+<div mat-dialog-actions fxLayoutAlign="end center">
  <button mat-button color="primary"
-          style="margin-right: 20px;"
          type="button"
          [disabled]="(isLoading$ | async)"
          [mat-dialog-close]="false" cdkFocusInitial>
--- a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
@ -33,7 +33,7 @@
  </mat-drawer>
  <mat-drawer-content>
    <div class="mat-padding tb-entity-table tb-absolute-fill">
-      <div fxFlex fxLayout="column" class="mat-elevation-z1 tb-entity-table-content">
+      <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>
@ -41,10 +41,9 @@
            <tb-timewindow *ngIf="entitiesTableConfig.useTimePageLink" [(ngModel)]="timewindow"
                            (ngModelChange)="onTimewindowChange()"
                            asButton historyOnly></tb-timewindow>
-            <span fxFlex *ngIf="!entitiesTableConfig.headerComponent ||
-                                entitiesTableConfig.useTimePageLink"></span>
+            <span fxFlex *ngIf="!entitiesTableConfig.headerComponent || entitiesTableConfig.useTimePageLink"></span>
            <div [fxShow]="addEnabled()">
-              <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+              <button mat-icon-button [disabled]="isLoading$ | async"
                      *ngIf="!entitiesTableConfig.addActionDescriptors.length; else addActions"
                      (click)="addEntity($event)"
                      matTooltip="{{ translations.add | translate }}"
@ -52,7 +51,7 @@
                <mat-icon>add</mat-icon>
              </button>
              <ng-template #addActions>
-                <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+                <button mat-icon-button [disabled]="isLoading$ | async"
                        *ngIf="entitiesTableConfig.addActionDescriptors.length === 1; else addActionsMenu"
                        [fxShow]="entitiesTableConfig.addActionDescriptors[0].isEnabled()"
                        (click)="entitiesTableConfig.addActionDescriptors[0].onAction($event)"
@ -61,7 +60,7 @@
                  <mat-icon>{{entitiesTableConfig.addActionDescriptors[0].icon}}</mat-icon>
                </button>
                <ng-template #addActionsMenu>
-                  <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+                  <button mat-icon-button [disabled]="isLoading$ | async"
                          matTooltip="{{ translations.add | translate }}"
                          matTooltipPosition="above"
                          [matMenuTriggerFor]="addActionsMenu">
@ -79,20 +78,20 @@
                </ng-template>
              </ng-template>
            </div>
-            <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+            <button mat-icon-button [disabled]="isLoading$ | async"
                    [fxShow]="actionDescriptor.isEnabled()" *ngFor="let actionDescriptor of headerActionDescriptors"
                    matTooltip="{{ actionDescriptor.name }}"
                    matTooltipPosition="above"
                    (click)="actionDescriptor.onAction($event)">
              <mat-icon>{{actionDescriptor.icon}}</mat-icon>
            </button>
-            <button mat-button mat-icon-button [disabled]="isLoading$ | async" (click)="updateData()"
+            <button mat-icon-button [disabled]="isLoading$ | async" (click)="updateData()"
                    matTooltip="{{ 'action.refresh' | translate }}"
                    matTooltipPosition="above">
              <mat-icon>refresh</mat-icon>
            </button>
            <button *ngIf="entitiesTableConfig.searchEnabled"
-                    mat-button mat-icon-button [disabled]="isLoading$ | async" (click)="enterFilterMode()"
+                    mat-icon-button [disabled]="isLoading$ | async" (click)="enterFilterMode()"
                    matTooltip="{{ translations.search | translate }}"
                    matTooltipPosition="above">
              <mat-icon>search</mat-icon>
@ -101,7 +100,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="{{ translations.search | translate }}"
                    matTooltipPosition="above">
              <mat-icon>search</mat-icon>
@ -112,7 +111,7 @@
                     [(ngModel)]="pageLink.textSearch"
                     placeholder="{{ translations.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>
@ -125,7 +124,7 @@
                      {{ translate.get(translations.selectedEntities, {count: dataSource.selection.selected.length}) | async }}
                    </span>
            <span fxFlex></span>
-            <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+            <button mat-icon-button [disabled]="isLoading$ | async"
                    [fxShow]="actionDescriptor.isEnabled" *ngFor="let actionDescriptor of groupActionDescriptors"
                    matTooltip="{{ actionDescriptor.name }}"
                    matTooltipPosition="above"
@ -167,7 +166,7 @@
              <mat-header-cell *matHeaderCellDef [ngStyle]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable"> {{ column.title | translate }} </mat-header-cell>
              <mat-cell *matCellDef="let entity; let row = index"
                        [ngStyle]="cellStyle(entity, column, row)">
-                <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+                <button mat-icon-button [disabled]="isLoading$ | async"
                        [fxShow]="column.actionDescriptor.isEnabled(entity)"
                        matTooltip="{{ column.actionDescriptor.nameFunction ? column.actionDescriptor.nameFunction(entity) : column.actionDescriptor.name }}"
                        matTooltipPosition="above"
--- a/ui-ngx/src/app/modules/home/pages/asset/asset-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/asset/asset-routing.module.ts
@ -14,12 +14,12 @@
 /// limitations under the License.
 ///

-import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';

-import {EntitiesTableComponent} from '../../components/entity/entities-table.component';
-import {Authority} from '@shared/models/authority.enum';
-import {AssetsTableConfigResolver} from './assets-table-config.resolver';
+import { EntitiesTableComponent } from '../../components/entity/entities-table.component';
+import { Authority } from '@shared/models/authority.enum';
+import { AssetsTableConfigResolver } from './assets-table-config.resolver';

 const routes: Routes = [
  {
--- a/ui-ngx/src/app/modules/home/pages/asset/asset.component.html
+++ b/ui-ngx/src/app/modules/home/pages/asset/asset.component.html
@ -15,7 +15,7 @@
    limitations under the License.

 -->
-<div class="tb-details-buttons">
+<div class="tb-details-buttons" fxLayout.xs="column">
  <button mat-raised-button color="primary"
          [disabled]="(isLoading$ | async)"
          (click)="onEntityAction($event, 'makePublic')"
@ -40,7 +40,7 @@
          [fxShow]="!hideDelete() && !isEdit">
    {{'asset.delete' | translate }}
  </button>
-  <div fxLayout="row">
+  <div fxLayout="row" fxLayout.xs="column">
    <button mat-raised-button
            ngxClipboard
            (cbOnSuccess)="onAssetIdCopied($event)"
--- a/ui-ngx/src/app/modules/home/pages/asset/asset.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/asset/asset.component.ts
@ -14,16 +14,16 @@
 /// limitations under the License.
 ///

-import {Component} from '@angular/core';
-import {Store} from '@ngrx/store';
-import {AppState} from '@core/core.state';
-import {EntityComponent} from '../../components/entity/entity.component';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-import {EntityType} from '@shared/models/entity-type.models';
-import {NULL_UUID} from '@shared/models/id/has-uuid';
-import {ActionNotificationShow} from '@core/notification/notification.actions';
-import {TranslateService} from '@ngx-translate/core';
-import {AssetInfo} from '@app/shared/models/asset.models';
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { EntityComponent } from '../../components/entity/entity.component';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { EntityType } from '@shared/models/entity-type.models';
+import { NULL_UUID } from '@shared/models/id/has-uuid';
+import { ActionNotificationShow } from '@core/notification/notification.actions';
+import { TranslateService } from '@ngx-translate/core';
+import { AssetInfo } from '@app/shared/models/asset.models';

@Component({
  selector: 'tb-asset',
--- a/ui-ngx/src/app/modules/home/pages/asset/asset.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/asset/asset.module.ts
@ -14,14 +14,14 @@
 /// limitations under the License.
 ///

-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {SharedModule} from '@shared/shared.module';
-import {HomeDialogsModule} from '../../dialogs/home-dialogs.module';
-import {AssetComponent} from './asset.component';
-import {AssetTableHeaderComponent} from './asset-table-header.component';
-import {AssetRoutingModule} from './asset-routing.module';
-import {HomeComponentsModule} from '@modules/home/components/home-components.module';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '@shared/shared.module';
+import { HomeDialogsModule } from '../../dialogs/home-dialogs.module';
+import { AssetComponent } from './asset.component';
+import { AssetTableHeaderComponent } from './asset-table-header.component';
+import { AssetRoutingModule } from './asset-routing.module';
+import { HomeComponentsModule } from '@modules/home/components/home-components.module';
 import { AssetTabsComponent } from '@home/pages/asset/asset-tabs.component';

@NgModule({
--- a/ui-ngx/src/app/modules/home/pages/customer/customer.component.html
+++ b/ui-ngx/src/app/modules/home/pages/customer/customer.component.html
@ -15,7 +15,7 @@
    limitations under the License.

 -->
-<div class="tb-details-buttons">
+<div class="tb-details-buttons" fxLayout.xs="column">
  <button mat-raised-button color="primary"
          [disabled]="(isLoading$ | async)"
          (click)="onEntityAction($event, 'manageUsers')"
@ -46,7 +46,7 @@
          [fxShow]="!hideDelete() && !isEdit && !isPublic">
    {{'customer.delete' | translate }}
  </button>
-  <div fxLayout="row">
+  <div fxLayout="row" fxLayout.xs="column">
    <button mat-raised-button
            ngxClipboard
            (cbOnSuccess)="onCustomerIdCopied($event)"
--- a/ui-ngx/src/app/modules/home/pages/customer/customer.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/customer/customer.component.ts
@ -19,10 +19,9 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Customer } from '@shared/models/customer.model';
-import {Tenant} from '@app/shared/models/tenant.model';
-import {ActionNotificationShow} from '@app/core/notification/notification.actions';
-import {TranslateService} from '@ngx-translate/core';
-import {ContactBasedComponent} from '../../components/entity/contact-based.component';
+import { ActionNotificationShow } from '@app/core/notification/notification.actions';
+import { TranslateService } from '@ngx-translate/core';
+import { ContactBasedComponent } from '../../components/entity/contact-based.component';

@Component({
  selector: 'tb-customer',
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
@ -15,7 +15,7 @@
    limitations under the License.

 -->
-<div class="tb-details-buttons">
+<div class="tb-details-buttons" fxLayout.xs="column">
  <button mat-raised-button color="primary"
          [disabled]="(isLoading$ | async)"
          (click)="onEntityAction($event, 'open')"
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.ts
@ -14,21 +14,20 @@
 /// limitations under the License.
 ///

-import {Component} from '@angular/core';
-import {Store} from '@ngrx/store';
-import {AppState} from '@core/core.state';
-import {EntityComponent} from '../../components/entity/entity.component';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-import {ActionNotificationShow} from '@core/notification/notification.actions';
-import {TranslateService} from '@ngx-translate/core';
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { EntityComponent } from '../../components/entity/entity.component';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActionNotificationShow } from '@core/notification/notification.actions';
+import { TranslateService } from '@ngx-translate/core';
 import {
  Dashboard,
-  isPublicDashboard,
  getDashboardAssignedCustomersText,
  isCurrentPublicDashboardCustomer,
-  DashboardInfo
+  isPublicDashboard
 } from '@shared/models/dashboard.models';
-import {DashboardService} from '@core/http/dashboard.service';
+import { DashboardService } from '@core/http/dashboard.service';

@Component({
  selector: 'tb-dashboard-form',
--- a/ui-ngx/src/app/modules/home/pages/device/device-tabs.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/device/device-tabs.component.ts
@ -18,7 +18,6 @@ import { Component } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { DeviceInfo } from '@shared/models/device.models';
-import { EntityType } from '@shared/models/entity-type.models';
 import { EntityTabsComponent } from '../../components/entity/entity-tabs.component';

@Component({
--- a/ui-ngx/src/app/modules/home/pages/device/device.component.html
+++ b/ui-ngx/src/app/modules/home/pages/device/device.component.html
@ -15,7 +15,7 @@
    limitations under the License.

 -->
-<div class="tb-details-buttons">
+<div class="tb-details-buttons" fxLayout.xs="column">
  <button mat-raised-button color="primary"
          [disabled]="(isLoading$ | async)"
          (click)="onEntityAction($event, 'makePublic')"
@ -40,13 +40,13 @@
          [fxShow]="!isEdit">
    {{ (deviceScope === 'customer_user' ? 'device.view-credentials' : 'device.manage-credentials') | translate }}
  </button>
-  <button mat-raised-button color="primary"
+  <button mat-raised-button color="primary" fxFlex.xs
          [disabled]="(isLoading$ | async)"
          (click)="onEntityAction($event, 'delete')"
          [fxShow]="!hideDelete() && !isEdit">
    {{'device.delete' | translate }}
  </button>
-  <div fxLayout="row">
+  <div fxLayout="row" fxLayout.xs="column">
    <button mat-raised-button
            ngxClipboard
            (cbOnSuccess)="onDeviceIdCopied($event)"
--- a/ui-ngx/src/app/modules/home/pages/device/device.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/device/device.component.ts
@ -14,22 +14,18 @@
 /// limitations under the License.
 ///

-import { Component, OnInit } from '@angular/core';
-import { select, Store } from '@ngrx/store';
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { EntityComponent } from '../../components/entity/entity.component';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { User } from '@shared/models/user.model';
-import { selectAuth, selectUserDetails } from '@core/auth/auth.selectors';
-import { map } from 'rxjs/operators';
-import { Authority } from '@shared/models/authority.enum';
-import {DeviceInfo} from '@shared/models/device.models';
-import {EntityType} from '@shared/models/entity-type.models';
-import {NULL_UUID} from '@shared/models/id/has-uuid';
-import {ActionNotificationShow} from '@core/notification/notification.actions';
-import {TranslateService} from '@ngx-translate/core';
-import {DeviceService} from '@core/http/device.service';
-import {ClipboardService} from 'ngx-clipboard';
+import { DeviceInfo } from '@shared/models/device.models';
+import { EntityType } from '@shared/models/entity-type.models';
+import { NULL_UUID } from '@shared/models/id/has-uuid';
+import { ActionNotificationShow } from '@core/notification/notification.actions';
+import { TranslateService } from '@ngx-translate/core';
+import { DeviceService } from '@core/http/device.service';
+import { ClipboardService } from 'ngx-clipboard';

@Component({
  selector: 'tb-device',
--- a/ui-ngx/src/app/modules/home/pages/device/device.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/device/device.module.ts
@ -17,12 +17,12 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SharedModule } from '@shared/shared.module';
-import {DeviceComponent} from '@modules/home/pages/device/device.component';
-import {DeviceRoutingModule} from './device-routing.module';
-import {DeviceTableHeaderComponent} from '@modules/home/pages/device/device-table-header.component';
-import {DeviceCredentialsDialogComponent} from '@modules/home/pages/device/device-credentials-dialog.component';
-import {HomeDialogsModule} from '../../dialogs/home-dialogs.module';
-import {HomeComponentsModule} from '@modules/home/components/home-components.module';
+import { DeviceComponent } from '@modules/home/pages/device/device.component';
+import { DeviceRoutingModule } from './device-routing.module';
+import { DeviceTableHeaderComponent } from '@modules/home/pages/device/device-table-header.component';
+import { DeviceCredentialsDialogComponent } from '@modules/home/pages/device/device-credentials-dialog.component';
+import { HomeDialogsModule } from '../../dialogs/home-dialogs.module';
+import { HomeComponentsModule } from '@modules/home/components/home-components.module';
 import { DeviceTabsComponent } from '@home/pages/device/device-tabs.component';

@NgModule({
--- a/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html
+++ b/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html
@ -15,7 +15,7 @@
    limitations under the License.

 -->
-<div class="tb-details-buttons">
+<div class="tb-details-buttons" fxLayout.xs="column">
  <button mat-raised-button color="primary"
          [disabled]="(isLoading$ | async)"
          (click)="onEntityAction($event, 'makePublic')"
@ -40,7 +40,7 @@
          [fxShow]="!hideDelete() && !isEdit">
    {{'entity-view.delete' | translate }}
  </button>
-  <div fxLayout="row">
+  <div fxLayout="row" fxLayout.xs="column">
    <button mat-raised-button
            ngxClipboard
            (cbOnSuccess)="onEntityViewIdCopied($event)"
--- a/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html
@ -16,7 +16,7 @@

 -->
 <form style="min-width: 400px;">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar color="primary">
    <h2 translate>user.activation-link</h2>
    <span fxFlex></span>
    <button mat-button mat-icon-button
@ -29,11 +29,11 @@
  </mat-progress-bar>
  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
  <div mat-dialog-content tb-toast toastTarget="activationLinkDialogContent">
-    <div class="mat-content mat-padding" fxLayout="column">
+    <div class="mat-content" fxLayout="column">
      <span [innerHTML]="'user.activation-link-text' | translate: {activationLink: activationLink}"></span>
      <div fxLayout="row" fxLayoutAlign="start center">
        <pre class="tb-highlight" fxFlex><code>{{ activationLink }}</code></pre>
-        <button mat-button mat-icon-button
+        <button mat-icon-button
                color="primary"
                ngxClipboard
                cbContent="{{ activationLink }}"
@ -45,10 +45,8 @@
      </div>
    </div>
  </div>
-  <div mat-dialog-actions fxLayout="row">
-    <span fxFlex></span>
+  <div mat-dialog-actions fxLayoutAlign="end center">
    <button mat-button color="primary"
-            style="margin-right: 20px;"
            type="button"
            cdkFocusInitial
            [disabled]="(isLoading$ | async)"
--- a/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.ts
@ -16,7 +16,6 @@

 import { Component, Inject, OnInit } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { TranslateService } from '@ngx-translate/core';
--- a/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html
@ -15,12 +15,12 @@
    limitations under the License.

 -->
-<form (ngSubmit)="add()" style="width: 600px;">
+<form (ngSubmit)="add()" style="min-width: 450px;">
  <mat-toolbar color="primary">
    <h2 translate>user.add</h2>
    <span fxFlex></span>
    <div [tb-help]="'user'"></div>
-    <button mat-button mat-icon-button
+    <button mat-icon-button
            (click)="cancel()"
            type="button">
      <mat-icon class="material-icons">close</mat-icon>
--- a/ui-ngx/src/app/modules/home/pages/user/user.component.html
+++ b/ui-ngx/src/app/modules/home/pages/user/user.component.html
@ -15,7 +15,7 @@
    limitations under the License.

 -->
-<div class="tb-details-buttons">
+<div class="tb-details-buttons" fxLayout.xs="column">
  <button mat-raised-button color="primary"
          [disabled]="(isLoading$ | async)"
          (click)="onEntityAction($event, 'disableAccount')"
--- a/ui-ngx/src/app/modules/home/pages/user/user.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/user/user.component.ts
@ -14,13 +14,13 @@
 /// limitations under the License.
 ///

-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { select, Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { EntityComponent } from '../../components/entity/entity.component';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { User } from '@shared/models/user.model';
-import { selectAuth, selectUserDetails } from '@core/auth/auth.selectors';
+import { selectAuth } from '@core/auth/auth.selectors';
 import { map } from 'rxjs/operators';
 import { Authority } from '@shared/models/authority.enum';
 import { isUndefined } from '@core/utils';
--- a/ui-ngx/src/app/modules/home/pages/user/user.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/user/user.module.ts
@ -21,7 +21,7 @@ import { UserComponent } from '@modules/home/pages/user/user.component';
 import { UserRoutingModule } from '@modules/home/pages/user/user-routing.module';
 import { AddUserDialogComponent } from '@modules/home/pages/user/add-user-dialog.component';
 import { ActivationLinkDialogComponent } from '@modules/home/pages/user/activation-link-dialog.component';
-import {HomeComponentsModule} from '@modules/home/components/home-components.module';
+import { HomeComponentsModule } from '@modules/home/components/home-components.module';
 import { UserTabsComponent } from '@home/pages/user/user-tabs.component';

@NgModule({
--- a/ui-ngx/src/app/modules/home/pages/widget/widget-library-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/widget/widget-library-routing.module.ts
@ -26,9 +26,9 @@ import { Observable } from 'rxjs';
 import { WidgetsBundle } from '@shared/models/widgets-bundle.model';
 import { WidgetService } from '@core/http/widget.service';
 import { WidgetEditorComponent } from '@home/pages/widget/widget-editor.component';
-import { map, share } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
 import { toWidgetInfo, WidgetInfo } from '@home/models/widget-component.models';
-import { Widget, widgetType, WidgetType } from '@app/shared/models/widget.models';
+import { widgetType, WidgetType } from '@app/shared/models/widget.models';
 import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard';
 import { WidgetsData } from '@home/models/dashboard-component.models';
 import { NULL_UUID } from '@shared/models/id/has-uuid';
--- a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html
@ -15,7 +15,7 @@
    limitations under the License.

 -->
-<div class="tb-details-buttons">
+<div class="tb-details-buttons" fxLayout.xs="column">
  <button mat-raised-button color="primary"
          [disabled]="(isLoading$ | async)"
          (click)="onEntityAction($event, 'open')"
--- a/ui-ngx/src/styles.scss
+++ b/ui-ngx/src/styles.scss
@ -679,18 +679,18 @@ mat-label {
  }

  .mat-toolbar-tools {
-    font-size: 20px;
+    //font-size: 20px;
    letter-spacing: .005em;
-    box-sizing: border-box;
+    //box-sizing: border-box;
    font-weight: 400;
    display: flex;
    align-items: center;
    flex-direction: row;
    width: 100%;
-    height: 64px;
-    max-height: 64px;
+    //height: 64px;
+    //max-height: 64px;
    padding: 0 16px;
-    margin: 0;
+    //margin: 0;
  }

  .mat-icon {
@ -782,6 +782,11 @@ mat-label {

  .mat-toolbar {
    line-height: normal;
+
+    h1, h2, h3, h4, h5, h6 {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
  }

  mat-toolbar *, mat-toolbar :after, mat-toolbar :before {
@ -817,6 +822,9 @@ mat-label {
      .mat-dialog-actions {
        margin-bottom: 0;
        padding: 8px 8px 8px 16px;
+        button:last-of-type{
+          margin-right: 20px;
+        }
      }
    }
  }
@ -843,7 +851,7 @@ mat-label {
  }

  .tb-fullscreen-dialog {
-    @media #{$mat-lt-md} {
+    @media #{$mat-lt-sm} {
      min-height: 100%;
      min-width: 100%;
      max-width: none !important;
@ -904,6 +912,7 @@ mat-label {
    display: flex;
    height: calc(100% - 60px);
    text-transform: uppercase;
+    text-align: center;
  }