Add support Safari and improvement view (#2662)

ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.ts

@@ -29,7 +29,6 @@ import { EntityTableConfig } from '@home/models/entity/entities-table-config.mod
 import { AddEntityDialogData } from '@home/models/entity/entity-component.models';
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Router } from '@angular/router';
-import { Observable } from 'rxjs';
 
 @Component({
   selector: 'tb-add-entity-dialog',

ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.html

@@ -23,9 +23,39 @@
                         'tb-dashboard-toolbar-closed': !toolbarOpened }">
     <tb-dashboard-toolbar [fxShow]="!widgetEditMode" [forceFullscreen]="forceFullscreen"
                           [toolbarOpened]="toolbarOpened" (triggerClick)="openToolbar()">
-      <div class="tb-dashboard-action-panels" fxLayout="column-reverse" fxLayout.gt-sm="row-reverse"
+      <div class="tb-dashboard-action-panels" fxLayout="column" fxLayout.gt-sm="row"
            fxLayoutAlign="center stretch" fxLayoutAlign.gt-sm="space-between center">
-        <div class="tb-dashboard-action-panel" fxFlex.md="30" fxLayout="row-reverse"
+        <div class="tb-dashboard-action-panel" fxFlex="auto" fxLayout="row-reverse"
+             fxLayoutAlign.gt-sm="end center" fxLayoutAlign="space-between center" fxLayoutGap="12px">
+          <tb-user-menu *ngIf="!isPublicUser() && forceFullscreen" fxHide.gt-sm displayUserInfo="true">
+          </tb-user-menu>
+          <div [fxShow]="isEdit"
+               fxFlex.lt-md fxLayout="row"
+               fxLayoutAlign.gt-sm="start center"
+               fxLayoutAlign="end center" fxLayoutGap="12px">
+            <button mat-icon-button
+                    matTooltip="{{'dashboard.manage-states' | translate}}"
+                    matTooltipPosition="below"
+                    (click)="manageDashboardStates($event)">
+              <mat-icon>layers</mat-icon>
+            </button>
+            <button mat-icon-button
+                    matTooltip="{{'layout.manage' | translate}}"
+                    matTooltipPosition="below"
+                    (click)="manageDashboardLayouts($event)">
+              <mat-icon>view_compact</mat-icon>
+            </button>
+          </div>
+          <tb-states-component fxFlex.lt-md
+                               [statesControllerId]="isEdit ? 'default' : dashboardConfiguration.settings.stateControllerId"
+                               [dashboardCtrl]="this"
+                               [dashboardId]="dashboard.id ? dashboard.id.id : ''"
+                               [isMobile]="isMobile"
+                               [state]="dashboardCtx.state"
+                               [states]="dashboardConfiguration.states">
+          </tb-states-component>
+        </div>
+        <div class="tb-dashboard-action-panel" fxFlex="1 0 auto" fxLayout="row-reverse"
              fxLayoutAlign.gt-sm="start center" fxLayoutAlign="space-between center" fxLayoutGap="12px">
           <button [fxShow]="showCloseToolbar()" mat-icon-button class="close-action"
                   matTooltip="{{ 'dashboard.close-toolbar' | translate }}"
@@ -84,36 +114,6 @@
                                [dashboardsScope]="currentDashboardScope">
           </tb-dashboard-select>
         </div>
-        <div class="tb-dashboard-action-panel" fxFlex.md="70" fxLayout="row-reverse"
-             fxLayoutAlign.gt-sm="end center" fxLayoutAlign="space-between center" fxLayoutGap="12px">
-          <tb-user-menu *ngIf="!isPublicUser() && forceFullscreen" fxHide.gt-sm displayUserInfo="true">
-          </tb-user-menu>
-          <div [fxShow]="isEdit"
-               fxFlex.lt-md fxLayout="row"
-               fxLayoutAlign.gt-sm="start center"
-               fxLayoutAlign="end center" fxLayoutGap="12px">
-            <button mat-icon-button
-                    matTooltip="{{'dashboard.manage-states' | translate}}"
-                    matTooltipPosition="below"
-                    (click)="manageDashboardStates($event)">
-              <mat-icon>layers</mat-icon>
-            </button>
-            <button mat-icon-button
-                    matTooltip="{{'layout.manage' | translate}}"
-                    matTooltipPosition="below"
-                    (click)="manageDashboardLayouts($event)">
-              <mat-icon>view_compact</mat-icon>
-            </button>
-          </div>
-          <tb-states-component fxFlex.lt-md
-                               [statesControllerId]="isEdit ? 'default' : dashboardConfiguration.settings.stateControllerId"
-                               [dashboardCtrl]="this"
-                               [dashboardId]="dashboard.id ? dashboard.id.id : ''"
-                               [isMobile]="isMobile"
-                               [state]="dashboardCtx.state"
-                               [states]="dashboardConfiguration.states">
-          </tb-states-component>
-        </div>
       </div>
     </tb-dashboard-toolbar>
   </section>

ui-ngx/src/app/modules/home/pages/dashboard/states/default-state-controller.component.scss

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 :host {
+  width: min-content; //for Safari
+
   mat-select.default-state-controller {
     margin: 0;
   }

ui-ngx/src/app/modules/home/pages/dashboard/states/entity-state-controller.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="entity-state-controller" fxLayout="row" fxLayoutAlign="start center">
+<div class="entity-state-controller">
   <div *ngIf="!isMobile || stateObject.length === 1" fxLayout="row" fxLayoutAlign="start center">
         <span *ngFor="let state of stateObject; index as i; last as isLast" class="state-entry" [ngStyle]="{fontWeight: isLast ? 'bold' : 'normal',
                          cursor: isLast ? 'default' : 'pointer'}" (click)="navigatePrevState(i)">

ui-ngx/src/app/modules/home/pages/dashboard/states/entity-state-controller.component.scss

@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 :host {
+  overflow: hidden;
+
   .entity-state-controller {
     .state-divider {
-      padding-right: 15px;
+      padding: 0 15px;
-      padding-left: 15px;
       overflow: hidden;
-      font-size: 18px;
       text-overflow: ellipsis;
       white-space: nowrap;
       pointer-events: none;

ui-ngx/src/app/modules/home/pages/dashboard/states/manage-dashboard-states-dialog.component.html

@@ -28,8 +28,8 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div mat-dialog-content>
-    <fieldset [disabled]="isLoading$ | async" fxLayout="column">
+    <fieldset [disabled]="isLoading$ | async">
-      <div class="manage-dashboard-states" fxLayout="column">
+      <div class="manage-dashboard-states">
         <div class="tb-entity-table">
           <div fxLayout="column" class="tb-entity-table-content">
             <mat-toolbar class="mat-table-toolbar" [fxShow]="!textSearchMode">
@@ -78,13 +78,13 @@
               <table  mat-table [dataSource]="dataSource"
                          matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
                 <ng-container matColumnDef="name">
-                  <mat-header-cell *matHeaderCellDef mat-sort-header style="flex: 0 0 60%"> {{ 'dashboard.state-name' | translate }} </mat-header-cell>
+                  <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 60%"> {{ 'dashboard.state-name' | translate }} </mat-header-cell>
                   <mat-cell *matCellDef="let state">
                     {{ state.name }}
                   </mat-cell>
                 </ng-container>
                 <ng-container matColumnDef="id">
-                  <mat-header-cell *matHeaderCellDef mat-sort-header style="flex: 0 0 40%"> {{ 'dashboard.state-id' | translate }} </mat-header-cell>
+                  <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%"> {{ 'dashboard.state-id' | translate }} </mat-header-cell>
                   <mat-cell *matCellDef="let state">
                     {{ state.id }}
                   </mat-cell>

ui-ngx/src/app/modules/home/pages/dashboard/states/manage-dashboard-states-dialog.component.ts

@@ -16,19 +16,14 @@
 
 import { AfterViewInit, Component, ElementRef, Inject, OnInit, SkipSelf, ViewChild } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm } from '@angular/forms';
 import { Router } from '@angular/router';
 import { DialogComponent } from '@app/shared/components/dialog.component';
 import { DashboardState } from '@app/shared/models/dashboard.models';
-import { MatDialog } from '@angular/material/dialog';
 import { PageLink } from '@shared/models/page/page-link';
-import {
-  WidgetActionDescriptorInfo,
-  WidgetActionsDatasource
-} from '@home/components/widget/action/manage-widget-actions.component.models';
 import {
   DashboardStateInfo,
   DashboardStatesDatasource
@@ -40,10 +35,6 @@ import { fromEvent, merge } from 'rxjs';
 import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
 import { TranslateService } from '@ngx-translate/core';
 import { DialogService } from '@core/services/dialog.service';
-import {
-  WidgetActionDialogComponent,
-  WidgetActionDialogData
-} from '@home/components/widget/action/widget-action-dialog.component';
 import { deepClone } from '@core/utils';
 import {
   DashboardStateDialogComponent,

ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html

@@ -15,9 +15,8 @@
     limitations under the License.
 
 -->
-<form #saveWidgetTypeAsForm="ngForm"
+<form #saveWidgetTypeAsForm="ngForm" [formGroup]="saveWidgetTypeAsFormGroup" (ngSubmit)="saveAs()">
-      [formGroup]="saveWidgetTypeAsFormGroup"(ngSubmit)="saveAs()">
+  <mat-toolbar color="primary">
-  <mat-toolbar fxLayout="row" color="primary">
     <h2 translate>widget.save-widget-type-as</h2>
     <span fxFlex></span>
     <button mat-button mat-icon-button
@@ -46,16 +45,14 @@
       </tb-widgets-bundle-select>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row">
+  <div mat-dialog-actions fxLayoutAlign="end center">
-    <span fxFlex></span>
+    <button mat-raised-button color="primary"
-    <button mat-button mat-raised-button color="primary"
             type="submit"
             [disabled]="(isLoading$ | async) || saveWidgetTypeAsForm.invalid
             || !saveWidgetTypeAsForm.dirty">
       {{ 'action.saveAs' | 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/pages/widget/select-widget-type-dialog.component.html

@@ -16,10 +16,10 @@
 
 -->
 <form style="width: 800px;">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar color="primary">
     <h2 translate>widget.select-widget-type</h2>
     <span fxFlex></span>
-    <button mat-button mat-icon-button
+    <button mat-icon-button
             (click)="cancel()"
             type="button">
       <mat-icon class="material-icons">close</mat-icon>
@@ -31,7 +31,7 @@
   <div mat-dialog-content>
     <fieldset [disabled]="(isLoading$ | async)">
       <div fxLayout="column" fxLayoutGap="16px" fxLayout.gt-sm="row" fxLayoutAlign="center center">
-        <button *ngFor="let type of allWidgetTypes;" class="tb-card-button" mat-button mat-raised-button color="primary"
+        <button *ngFor="let type of allWidgetTypes;" class="tb-card-button" mat-raised-button color="primary"
                 type="button"
                 (click)="typeSelected(widgetTypes[type])">
           <mat-icon *ngIf="!widgetTypesDataMap.get(widgetTypes[type]).isMdiIcon; else mdiIconBlock" class="tb-mat-96">
@@ -46,10 +46,8 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row">
+  <div mat-dialog-actions fxLayoutAlign="end center">
-    <span fxFlex></span>
     <button mat-button color="primary"
-            style="margin-right: 20px;"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>

ui-ngx/src/app/modules/home/pages/widget/select-widget-type-dialog.component.scss

@@ -31,8 +31,7 @@
         height: 18px;
         min-height: 18px;
         max-height: 18px;
-        padding: 0 0 20px 0;
+        margin: 0 0 20px 0;
-        margin: auto;
         font-size: 18px;
         font-weight: 400;
         line-height: 18px;

ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html

@@ -18,7 +18,7 @@
 <div fxFlex fxLayout="column">
   <div fxFlex fxLayout="column" tb-fullscreen [fullscreen]="fullscreen" tb-hotkeys [hotkeys]="hotKeys" [cheatSheet]="cheatSheetComponent">
     <tb-hotkeys-cheatsheet #cheatSheetComponent></tb-hotkeys-cheatsheet>
-    <mat-toolbar class="mat-elevation-z1 tb-edit-toolbar mat-hue-3" fxLayoutGap="16px">
+    <mat-toolbar class="mat-elevation-z1 tb-edit-toolbar mat-hue-3" fxLayoutGap="16px" fxLayoutGap.lt-xl="8px">
       <mat-form-field floatLabel="always" hideRequiredMarker class="tb-widget-title">
         <mat-label></mat-label>
         <input [disabled]="isReadOnly" matInput required
@@ -68,13 +68,19 @@
         <span translate>action.saveAs</span>
       </button>
       <button mat-button
-              fxHide.lt-md
+              fxHide.lt-lg
               (click)="fullscreen = !fullscreen"
               matTooltip="{{ 'widget.toggle-fullscreen' | translate }} (Shift + CTRL + F)"
               matTooltipPosition="below">
         <mat-icon>{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
         <span translate>widget.toggle-fullscreen</span>
       </button>
+      <button mat-icon-button fxHide fxShow.md
+              (click)="fullscreen = !fullscreen"
+              matTooltip="{{ 'widget.toggle-fullscreen' | translate }} (Shift + CTRL + F)"
+              matTooltipPosition="below">
+        <mat-icon>{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
+      </button>
       <button mat-icon-button fxHide.gt-sm
               [matMenuTriggerFor]="widgetEditMenu">
         <mat-icon>more_vert</mat-icon>

ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.scss

@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import '../../../../../scss/constants';
+
 $edit-toolbar-height: 40px !default;
 
 tb-widget-editor {
@@ -31,7 +33,7 @@ tb-widget-editor {
 
   mat-form-field.resource-field {
     max-height: 40px;
-    margin: 10px 0px 0px 0px;
+    margin: 10px 0 0;
     .mat-form-field-wrapper {
       padding-bottom: 0;
       .mat-form-field-flex {
@@ -154,24 +156,24 @@ mat-toolbar.tb-edit-toolbar {
   min-height: $edit-toolbar-height !important;
   max-height: $edit-toolbar-height !important;
 
-  button.mat-button {
+  button.mat-button-base:not(.mat-icon-button) {
-    min-width: 65px;
-    min-height: 30px;
     font-size: 12px;
-    line-height: 30px;
+    line-height: 28px;
+    padding: 0 8px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 
     mat-icon {
+      height: 20px;
+      width: 20px;
       font-size: 20px;
     }
-
-    span {
-      padding-right: 6px;
-    }
   }
 
   mat-form-field {
-    input {
+    input, mat-select {
-      font-size: 1.2rem;
+      font-size: 1.1rem;
       font-weight: 400;
       letter-spacing: .005em;
     }
@@ -182,4 +184,10 @@ mat-toolbar.tb-edit-toolbar {
       min-width: 250px;
     }
   }
+
+  @media #{$mat-lt-lg} {
+    mat-form-field.tb-widget-title {
+      min-width: 0;
+    }
+  }
 }

ui-ngx/src/app/shared/components/dashboard-select-panel.component.scss

@@ -32,10 +32,6 @@
     max-height: 250px;
   }
 
-  @media #{$mat-gt-xs} {
-    max-width: 100%;
-  }
-
   .mat-content {
     background-color: #fff;
   }

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

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 :host {
+  width: min-content; //for Safari
   min-width: 52px;
 
   mat-select {