[3.0] [WIP] Minor fixed to style (#2562)

* Added support Safari browser (not support DragEvent)

* Imporovement style login page

* Change flex responsive API breakpoint

* Add support long name menu item

* Home page add link to page

ui-ngx/src/app/modules/home/menu/menu-link.component.html

@@ -15,10 +15,8 @@
     limitations under the License.
 
 -->
-<a class="mat-button" routerLinkActive="tb-active" [routerLinkActiveOptions]="{exact: true}" routerLink="{{section.path}}">
-  <span class="mat-button-wrapper">
-    <mat-icon *ngIf="!section.isMdiIcon && section.icon != null" class="material-icons">{{section.icon}}</mat-icon>
-    <mat-icon *ngIf="section.isMdiIcon && section.icon != null" [svgIcon]="section.icon"></mat-icon>
-    <span>{{section.name | translate}}</span>
-  </span>
+<a mat-button routerLinkActive="tb-active" [routerLinkActiveOptions]="{exact: true}" routerLink="{{section.path}}">
+  <mat-icon *ngIf="!section.isMdiIcon && section.icon != null" class="material-icons">{{section.icon}}</mat-icon>
+  <mat-icon *ngIf="section.isMdiIcon && section.icon != null" [svgIcon]="section.icon"></mat-icon>
+  <span>{{section.name | translate}}</span>
 </a>

ui-ngx/src/app/modules/home/menu/menu-toggle.component.html

@@ -15,15 +15,13 @@
     limitations under the License.
 
 -->
-<a class="mat-button tb-button-toggle"
+<a mat-button class="tb-button-toggle"
         routerLinkActive="tb-active" [routerLinkActiveOptions]="{exact: true}" routerLink="{{section.path}}">
-  <span class="mat-button-wrapper">
-    <mat-icon *ngIf="!section.isMdiIcon && section.icon != null" class="material-icons">{{section.icon}}</mat-icon>
-    <mat-icon *ngIf="section.isMdiIcon && section.icon != null" [svgIcon]="section.icon"></mat-icon>
-    <span>{{section.name | translate}}</span>
-    <span class=" pull-right fa fa-chevron-down tb-toggle-icon"
-          [ngClass]="{'tb-toggled' : sectionActive()}"></span>
-  </span>
+  <mat-icon *ngIf="!section.isMdiIcon && section.icon != null" class="material-icons">{{section.icon}}</mat-icon>
+  <mat-icon *ngIf="section.isMdiIcon && section.icon != null" [svgIcon]="section.icon"></mat-icon>
+  <span>{{section.name | translate}}</span>
+  <span class=" pull-right fa fa-chevron-down tb-toggle-icon"
+        [ngClass]="{'tb-toggled' : sectionActive()}"></span>
 </a>
 <ul id="docs-menu-{{section.name | nospace}}" class="tb-menu-toggle-list" [ngStyle]="{height: sectionHeight()}">
   <li *ngFor="let page of section.pages">

ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss

@@ -13,6 +13,34 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-:host {
+:host ::ng-deep {
+  .tb-button-toggle {
+    .tb-toggle-icon {
+      display: inline-block;
+      width: 15px;
+      margin: auto 0 auto auto;
+      background-size: 100% auto;
+      transition: transform .3s ease-in-out;
+      &.tb-toggled {
+        transform: rotateZ(180deg);
+      }
+    }
+  }
 
+  .tb-menu-toggle-list {
+    position: relative;
+    z-index: 1;
+    overflow: hidden;
+
+    transition: .75s cubic-bezier(.35, 0, .25, 1);
+
+    transition-property: height;
+
+    a.mat-button {
+      padding: 0 16px 0 32px;
+      font-weight: 500;
+      text-transform: none !important;
+      text-rendering: optimizeLegibility;
+    }
+  }
 }

ui-ngx/src/app/modules/home/menu/side-menu.component.scss

@@ -34,18 +34,8 @@
   a.mat-button {
     text-transform: uppercase;
     display: flex;
-    width: 100%;
-    max-height: 40px;
-    padding: 0 16px;
-    margin: 0;
     overflow: hidden;
     line-height: 40px;
-    color: inherit;
-    text-align: left;
-    text-decoration: none;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    cursor: pointer;
     border-radius: 0;
     &:hover {
       border-bottom: none;
@@ -61,6 +51,8 @@
 
     .mat-button-wrapper {
       width: 100%;
+      display: inline-flex;
+      align-items: center;
       mat-icon {
         margin-right: 8px;
         margin-left: 0;
@@ -76,35 +68,4 @@
       }
     }
   }
-
-  .tb-button-toggle {
-    .tb-toggle-icon {
-      display: inline-block;
-      width: 15px;
-      margin: auto 0 auto auto;
-      background-size: 100% auto;
-      transition: transform .3s, ease-in-out;
-      &.tb-toggled {
-        transform: rotateZ(180deg);
-      }
-    }
-  }
-
-  .tb-menu-toggle-list {
-    position: relative;
-    z-index: 1;
-    overflow: hidden;
-
-    transition: .75s cubic-bezier(.35, 0, .25, 1);
-
-    transition-property: height;
-
-    a.mat-button {
-      padding: 0 16px 0 32px;
-      font-weight: 500;
-      text-transform: none !important;
-      text-rendering: optimizeLegibility;
-    }
-  }
-
 }

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

@@ -24,11 +24,11 @@
       <mat-card-content>
         <mat-grid-list rowHeight="170px" [cols]="section.places.length">
           <mat-grid-tile *ngFor="let place of section.places">
-            <button mat-button mat-raised-button color="primary" class="tb-card-button" routerLink="{{place.path}}">
+            <a mat-raised-button color="primary" class="tb-card-button" routerLink="{{place.path}}">
               <mat-icon *ngIf="!place.isMdiIcon" class="material-icons tb-mat-96">{{place.icon}}</mat-icon>
               <mat-icon *ngIf="place.isMdiIcon" class="tb-mat-96" [svgIcon]="place.icon"></mat-icon>
               <span translate>{{place.name}}</span>
-            </button>
+            </a>
           </mat-grid-tile>
         </mat-grid-list>
       </mat-card-content>

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

@@ -37,10 +37,17 @@
         padding: 16px;
       }
     }
-    button.tb-card-button {
+    .tb-card-button {
       width: 100%;
       height: 100%;
       max-width: 240px;
+      text-transform: uppercase;
+      &:hover {
+        border-bottom: none;
+      }
+      &:focus {
+        border-bottom: none;
+      }
       .mat-button-wrapper {
         width: 100%;
         height: 100%;
@@ -52,8 +59,8 @@
         }
         span {
           height: 18px;
-          min-height: 18px;
-          max-height: 18px;
+          min-height: 36px;
+          max-height: 36px;
           padding: 0 0 20px 0;
           margin: auto;
           font-size: 18px;

ui-ngx/src/app/modules/login/pages/login/create-password.component.html

@@ -17,7 +17,7 @@
 -->
 <div class="tb-create-password-content mat-app-background tb-dark" fxLayout="row" fxLayoutAlign="center center" style="width: 100%;">
   <mat-card fxFlex="initial" class="tb-create-password-card">
-    <mat-card-title>
+    <mat-card-title class="layout-padding">
       <span translate class="mat-headline">login.create-password</span>
     </mat-card-title>
     <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@@ -38,8 +38,8 @@
               <input matInput type="password" formControlName="password2"/>
               <mat-icon class="material-icons" matPrefix>lock</mat-icon>
             </mat-form-field>
-            <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="16px" fxLayoutAlign="start center"
-                 fxLayoutAlign.gt-sm="center start" class="layout-padding">
+            <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="16px" fxLayoutAlign="start center"
+                 fxLayoutAlign.gt-xs="center start">
               <button mat-raised-button color="accent" type="submit" [disabled]="(isLoading$ | async)">
                 {{ 'login.create-password' | translate }}
               </button>

ui-ngx/src/app/modules/login/pages/login/create-password.component.scss

@@ -17,11 +17,11 @@
 
 :host {
   display: flex;
-  flex: 1 1 0%;
+  flex: 1 1 0;
   .tb-create-password-content {
     background-color: #eee;
     .tb-create-password-card {
-      @media #{$mat-gt-sm} {
+      @media #{$mat-gt-xs} {
         width: 450px !important;
       }
     }

ui-ngx/src/app/modules/login/pages/login/login.component.html

@@ -15,43 +15,39 @@
     limitations under the License.
 
 -->
-<div class="tb-login-content mat-app-background tb-dark" fxLayout="row" fxLayoutAlign="center center" fxFlex>
-  <mat-card style="height: 100%; max-height: 600px; overflow-y: auto; overflow-x: hidden;">
+<div class="tb-login-content mat-app-background tb-dark" fxFlex fxLayoutAlign="center center">
+  <mat-card style="height: 100%; max-height: 525px; overflow-y: auto;">
     <mat-card-content>
-      <form #loginForm="ngForm" class="tb-login-form" fxLayout="column" [formGroup]="loginFormGroup" (ngSubmit)="login()">
-        <fieldset [disabled]="isLoading$ | async">
-          <div fxFlex fxLayout="column">
-            <div fxLayout="column" fxLayoutAlign="start center" style="padding: 15px 0;">
-              <tb-logo class="login-logo" style="padding-bottom: 25px;"></tb-logo>
+      <form #loginForm="ngForm" class="tb-login-form" [formGroup]="loginFormGroup" (ngSubmit)="login()">
+        <fieldset [disabled]="isLoading$ | async" fxLayout="column">
+          <div fxLayout="column" fxLayoutAlign="start center" style="padding: 15px 0;">
+            <tb-logo class="login-logo"></tb-logo>
+          </div>
+          <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
+          </mat-progress-bar>
+          <span style="height: 4px;" *ngIf="!(isLoading$ | async)"></span>
+          <div tb-toast fxLayout="column" class="layout-padding">
+            <span style="height: 50px;"></span>
+            <mat-form-field>
+              <mat-label translate>login.username</mat-label>
+              <input id="username-input" matInput type="email" autofocus formControlName="username" email required/>
+              <mat-icon matPrefix>email</mat-icon>
+              <mat-error *ngIf="loginFormGroup.get('username').invalid">
+                {{ 'user.invalid-email-format' | translate }}
+              </mat-error>
+            </mat-form-field>
+            <mat-form-field>
+              <mat-label translate>common.password</mat-label>
+              <input id="password-input" matInput type="password" formControlName="password"/>
+              <mat-icon matPrefix>lock</mat-icon>
+            </mat-form-field>
+            <div fxLayoutAlign="end center">
+              <button class="tb-reset-password" mat-button type="button" routerLink="/login/resetPasswordRequest">{{ 'login.forgot-password' | translate }}
+              </button>
             </div>
-            <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-            </mat-progress-bar>
-            <span style="height: 4px;" *ngIf="!(isLoading$ | async)"></span>
-            <div tb-toast fxLayout="column" class="layout-padding">
-              <span style="height: 50px;"></span>
-              <mat-form-field>
-                <mat-label translate>login.username</mat-label>
-                <input id="username-input" matInput type="email" autofocus formControlName="username" email required/>
-                <mat-icon class="material-icons" matPrefix>email</mat-icon>
-                <mat-error *ngIf="loginFormGroup.get('username').invalid">
-                  {{ 'user.invalid-email-format' | translate }}
-                </mat-error>
-              </mat-form-field>
-              <mat-form-field>
-                <mat-label translate>common.password</mat-label>
-                <input id="password-input" matInput type="password" formControlName="password"/>
-                <mat-icon class="material-icons" matPrefix>lock</mat-icon>
-              </mat-form-field>
-              <div fxLayout.gt-sm="column" fxLayoutAlign="space-between stretch">
-                <div fxLayout.gt-sm="column" fxLayoutAlign="space-between end">
-                  <button mat-button type="button" routerLink="/login/resetPasswordRequest">{{ 'login.forgot-password' | translate }}
-                  </button>
-                </div>
-              </div>
-              <div fxLayout="column" style="padding: 15px 0;">
-                <button mat-raised-button color="accent" [disabled]="(isLoading$ | async)"
-                        type="submit">{{ 'login.login' | translate }}</button>
-              </div>
+            <div fxLayout="column" class="tb-action-button">
+              <button mat-raised-button color="accent" [disabled]="(isLoading$ | async)"
+                      type="submit">{{ 'login.login' | translate }}</button>
             </div>
           </div>
         </fieldset>

ui-ngx/src/app/modules/login/pages/login/login.component.scss

@@ -17,15 +17,24 @@
 
 :host {
   display: flex;
-  flex: 1 1 0%;
+  flex: 1 1 0;
   .tb-login-content {
     margin-top: 36px;
     margin-bottom: 76px;
-    background-color: rgb(250,250,250);
+    background-color: rgb(250, 250, 250);
     .tb-login-form {
-      @media #{$mat-gt-sm} {
+      @media #{$mat-gt-xs} {
         width: 550px !important;
       }
+
+      .tb-reset-password{
+        padding: 0 6px;
+      }
+
+      .tb-action-button{
+        padding-top: 20px;
+        padding-bottom: 20px;
+      }
     }
   }
 }

ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html

@@ -17,7 +17,7 @@
 -->
 <div class="tb-request-password-reset-content mat-app-background tb-dark" fxLayout="row" fxLayoutAlign="center center" style="width: 100%;">
   <mat-card fxFlex="initial" class="tb-request-password-reset-card">
-    <mat-card-title>
+    <mat-card-title class="layout-padding">
       <span translate class="mat-headline">login.request-password-reset</span>
     </mat-card-title>
     <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@@ -36,8 +36,8 @@
                 {{ 'user.invalid-email-format' | translate }}
               </mat-error>
             </mat-form-field>
-            <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="16px" fxLayoutAlign="start center"
-                 fxLayoutAlign.gt-sm="center start" class="layout-padding">
+            <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="16px" fxLayoutAlign="start center"
+                 fxLayoutAlign.gt-xs="center start">
               <button mat-raised-button color="accent" type="submit" [disabled]="(isLoading$ | async)">
                 {{ 'login.request-password-reset' | translate }}
               </button>

ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.scss

@@ -17,11 +17,11 @@
 
 :host {
   display: flex;
-  flex: 1 1 0%;
+  flex: 1 1 0;
   .tb-request-password-reset-content {
     background-color: #eee;
     .tb-request-password-reset-card {
-      @media #{$mat-gt-sm} {
+      @media #{$mat-gt-xs} {
         width: 450px !important;
       }
     }

ui-ngx/src/app/modules/login/pages/login/reset-password.component.html

@@ -17,11 +17,11 @@
 -->
 <div class="tb-reset-password-content mat-app-background tb-dark" fxLayout="row" fxLayoutAlign="center center" style="width: 100%;">
   <mat-card fxFlex="initial" class="tb-reset-password-card">
-    <mat-card-title>
-      <span translate class="mat-headline">login.password-reset</span>
+    <mat-card-title class="layout-padding tb-card-title">
+      <span translate class="mat-headline tb-card-title">login.password-reset</span>
     </mat-card-title>
-    <mat-card-subtitle>
-      <span *ngIf="isExpiredPassword" translate>login.expired-password-reset-message</span>
+    <mat-card-subtitle *ngIf="isExpiredPassword" class="layout-padding tb-card-title">
+      <div class="tb-card-title" translate>login.expired-password-reset-message</div>
     </mat-card-subtitle>
     <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
     </mat-progress-bar>
@@ -42,7 +42,7 @@
               <mat-icon class="material-icons" matPrefix>lock</mat-icon>
             </mat-form-field>
             <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="16px" fxLayoutAlign="start center"
-                 fxLayoutAlign.gt-sm="center start" class="layout-padding">
+                 fxLayoutAlign.gt-sm="center start">
               <button mat-raised-button color="accent" type="submit" [disabled]="(isLoading$ | async)">
                 {{ 'login.reset-password' | translate }}
               </button>

ui-ngx/src/app/modules/login/pages/login/reset-password.component.scss

@@ -17,7 +17,7 @@
 
 :host {
   display: flex;
-  flex: 1 1 0%;
+  flex: 1 1 0;
   .tb-reset-password-content {
     background-color: #eee;
     .tb-reset-password-card {
@@ -25,5 +25,10 @@
         width: 450px !important;
       }
     }
+
+    .tb-card-title{
+      padding-top: 0;
+      padding-bottom: 0;
+    }
   }
 }

ui-ngx/src/app/shared/components/mat-chip-draggable.directive.ts

@@ -120,7 +120,7 @@ class DraggableChip {
     }
   }
 
-  private onDragStart(event: DragEvent) {
+  private onDragStart(event: Event | any) {
     if (this.preventDrag) {
       event.preventDefault();
     } else {
@@ -136,7 +136,7 @@ class DraggableChip {
     }
   }
 
-  private onDragEnter(event: DragEvent) {
+  private onDragEnter(event: Event | any) {
     this.counter++;
     if (this.dragging) {
       return;
@@ -148,7 +148,7 @@ class DraggableChip {
     this.chipElement.addEventListener('drop', this.dropHandler);
   }
 
-  private onDragLeave(event: DragEvent) {
+  private onDragLeave(event: Event | any) {
     this.counter--;
     if (this.counter <= 0) {
       this.counter = 0;
@@ -158,14 +158,14 @@ class DraggableChip {
     }
   }
 
-  private onDragEnd(event: DragEvent) {
+  private onDragEnd(event: Event | any) {
     this.dragging = false;
     globalDraggingChipListId = null;
     this.chipListElement.classList.remove(draggingClassName);
     this.chipElement.classList.remove(draggingClassName);
   }
 
-  private onDragOver(event: DragEvent) {
+  private onDragOver(event: Event | any) {
     if (this.dragging) {
       return;
     }
@@ -203,7 +203,7 @@ class DraggableChip {
 
   }
 
-  private onDrop(event: DragEvent) {
+  private onDrop(event: Event | any) {
     this.counter = 0;
     event.preventDefault();
     if (globalDraggingChipListId !== this.chipListElement.id) {

ui-ngx/src/styles.scss

@@ -445,10 +445,10 @@ mat-label {
   }
 
   .layout-padding, .layout-padding > * {
-    @media #{$mat-lt-md} {
+    @media #{$mat-lt-sm} {
       padding: 4px;
     }
-    @media #{$mat-gt-sm} {
+    @media #{$mat-gt-xs} {
       padding: 8px;
     }
   }
@@ -473,6 +473,13 @@ mat-label {
     display: block;
   }
 
+  .mat-form-field{
+    .mat-icon{
+      margin-right: 4px;
+      margin-left: 4px;
+    }
+  }
+
   button.mat-menu-item {
     overflow: hidden;
     fill: #737373;
@@ -684,7 +691,7 @@ mat-label {
   }
 
   .mat-icon {
-    vertical-align: middle;
+    vertical-align: bottom;
     box-sizing: content-box;
     &.tb-mat-16 {
       @include tb-mat-icon-size(16);