Add support Safari and improvement view (#2662)

6 years ago · 9c5ad303cd
14 changed files with 80 additions and 83 deletions
--- a/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.ts
+++ b/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',
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.html
+++ b/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>
--- a/ui-ngx/src/app/modules/home/pages/dashboard/states/default-state-controller.component.scss
+++ b/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;
  }
--- a/ui-ngx/src/app/modules/home/pages/dashboard/states/entity-state-controller.component.html
+++ b/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)">
--- a/ui-ngx/src/app/modules/home/pages/dashboard/states/entity-state-controller.component.scss
+++ b/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-left: 15px;
+      padding: 0 15px;
      overflow: hidden;
-      font-size: 18px;
      text-overflow: ellipsis;
      white-space: nowrap;
      pointer-events: none;
--- a/ui-ngx/src/app/modules/home/pages/dashboard/states/manage-dashboard-states-dialog.component.html
+++ b/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">
-      <div class="manage-dashboard-states" fxLayout="column">
+    <fieldset [disabled]="isLoading$ | async">
+      <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>
--- a/ui-ngx/src/app/modules/home/pages/dashboard/states/manage-dashboard-states-dialog.component.ts
+++ b/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,
--- a/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html
+++ b/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"
-      [formGroup]="saveWidgetTypeAsFormGroup"(ngSubmit)="saveAs()">
-  <mat-toolbar fxLayout="row" color="primary">
+<form #saveWidgetTypeAsForm="ngForm" [formGroup]="saveWidgetTypeAsFormGroup" (ngSubmit)="saveAs()">
+  <mat-toolbar 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">
-    <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) || 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>
--- a/ui-ngx/src/app/modules/home/pages/widget/select-widget-type-dialog.component.html
+++ b/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">
-    <span fxFlex></span>
+  <div mat-dialog-actions fxLayoutAlign="end center">
    <button mat-button color="primary"
-            style="margin-right: 20px;"
            type="button"
            [disabled]="(isLoading$ | async)"
            (click)="cancel()" cdkFocusInitial>
--- a/ui-ngx/src/app/modules/home/pages/widget/select-widget-type-dialog.component.scss
+++ b/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: auto;
+        margin: 0 0 20px 0;
        font-size: 18px;
        font-weight: 400;
        line-height: 18px;
--- a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html
+++ b/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>
--- a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.scss
+++ b/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 {
-    min-width: 65px;
-    min-height: 30px;
+  button.mat-button-base:not(.mat-icon-button) {
    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 {
-      font-size: 1.2rem;
+    input, mat-select {
+      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;
+    }
+  }
 }
--- a/ui-ngx/src/app/shared/components/dashboard-select-panel.component.scss
+++ b/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;
  }
--- a/ui-ngx/src/app/shared/components/dashboard-select.component.scss
+++ b/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 {