Fixed scrolling of tabs

sap-labs-france · Apr 8, 2022 · 19e3ae1 · 19e3ae1
1 parent 4426f4a
commit 19e3ae1
Show file tree

Hide file tree

Showing 14 changed files with 124 additions and 83 deletions.
diff --git a/src/app/pages/assets/asset/asset.component.html b/src/app/pages/assets/asset/asset.component.html
@@ -21,12 +21,11 @@
       </mat-tab>
     </mat-tab-group>
     <div class="tabs-actions">
-      <button mat-button *ngIf="!readOnly" (click)="saveAsset(formGroup.value)"
-        [disabled]="!formGroup.valid || !formGroup.dirty">
+      <button mat-icon-button *ngIf="!readOnly" (click)="saveAsset(formGroup.value)" title="{{'general.save' | translate}}"
+          [disabled]="!formGroup.valid || !formGroup.dirty">
         <mat-icon>save</mat-icon>
-        <span>{{'general.save' | translate}}</span>
       </button>
-      <button mat-icon-button *ngIf="dialogRef" (click)="close()">
+      <button mat-icon-button *ngIf="dialogRef" (click)="close()" title="{{'general.close' | translate}}">
         <mat-icon>close</mat-icon>
       </button>
     </div>

diff --git a/src/app/pages/cars/car/car.component.html b/src/app/pages/cars/car/car.component.html
@@ -21,12 +21,11 @@
       </mat-tab>
     </mat-tab-group>
     <div class="tabs-actions">
-      <button mat-button *ngIf="!readOnly" (click)="saveCar(formGroup.getRawValue())"
+      <button mat-icon-button *ngIf="!readOnly" (click)="saveCar(formGroup.getRawValue())" title="{{'general.save' | translate}}"
           [disabled]="!formGroup.valid || !formGroup.dirty" >
         <mat-icon>save</mat-icon>
-        <span>{{ "general.save" | translate }}</span>
       </button>
-      <button mat-icon-button *ngIf="dialogRef" (click)="close()">
+      <button mat-icon-button *ngIf="dialogRef" (click)="close()" title="{{'general.close' | translate}}">
         <mat-icon>close</mat-icon>
       </button>
     </div>

diff --git a/src/app/pages/charging-stations/charging-station/charging-station.component.html b/src/app/pages/charging-stations/charging-station/charging-station.component.html
@@ -58,12 +58,11 @@
       </ng-container>
     </mat-tab-group>
     <div class="tabs-actions">
-      <button mat-button *ngIf="!readOnly" (click)="saveChargingStation(formGroup.getRawValue())"
+      <button mat-icon-button *ngIf="!readOnly" (click)="saveChargingStation(formGroup.getRawValue())" title="{{'general.save' | translate}}"
           [disabled]="!formGroup.valid || !formGroup.dirty" [hidden]="!this.isAdmin || activeTabIndex !== 0">
         <mat-icon>save</mat-icon>
-        <span>{{'chargers.save_charger' | translate}}</span>
       </button>
-      <button mat-icon-button *ngIf="dialogRef" (click)="close()">
+      <button mat-icon-button *ngIf="dialogRef" (click)="close()" title="{{'general.close' | translate}}">
         <mat-icon>close</mat-icon>
       </button>
     </div>

diff --git a/src/app/pages/charging-stations/charging-station/charging-station.component.ts b/src/app/pages/charging-stations/charging-station/charging-station.component.ts
@@ -2,7 +2,7 @@ import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { MatTabChangeEvent } from '@angular/material/tabs';
-import { ActivatedRoute, Params, Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { UtilsService } from 'services/utils.service';
 import { DialogMode } from 'types/Authorization';

diff --git a/src/app/pages/organization/companies/company/company.component.html b/src/app/pages/organization/companies/company/company.component.html
@@ -12,11 +12,11 @@
       </mat-tab>
     </mat-tab-group>
     <div class="tabs-actions">
-      <button mat-button *ngIf="!readOnly" (click)="saveCompany(formGroup.value)" [disabled]="!formGroup.valid || !formGroup.dirty">
+      <button mat-icon-button *ngIf="!readOnly" (click)="saveCompany(formGroup.value)" title="{{'general.save' | translate}}"
+          [disabled]="!formGroup.valid || !formGroup.dirty">
         <mat-icon>save</mat-icon>
-        <span>{{'general.save' | translate}}</span>
       </button>
-      <button mat-icon-button *ngIf="dialogRef" (click)="close()">
+      <button mat-icon-button *ngIf="dialogRef" (click)="close()" title="{{'general.close' | translate}}">
         <mat-icon>close</mat-icon>
       </button>
     </div>

diff --git a/src/app/pages/organization/site-areas/site-area/site-area.component.html b/src/app/pages/organization/site-areas/site-area/site-area.component.html
@@ -30,12 +30,11 @@
       </mat-tab>
     </mat-tab-group>
     <div class="tabs-actions">
-      <button mat-button *ngIf="!readOnly" (click)="saveSiteArea(formGroup.getRawValue())"
-        [disabled]="!formGroup.valid || !formGroup.dirty">
+      <button mat-icon-button *ngIf="!readOnly" (click)="saveSiteArea(formGroup.getRawValue())" title="{{'general.save' | translate}}"
+          [disabled]="!formGroup.valid || !formGroup.dirty">
         <mat-icon>save</mat-icon>
-        <span>{{'general.save' | translate}}</span>
       </button>
-      <button mat-icon-button *ngIf="dialogRef" (click)="close()">
+      <button mat-icon-button *ngIf="dialogRef" (click)="close()" title="{{'general.close' | translate}}">
         <mat-icon>close</mat-icon>
       </button>
     </div>

diff --git a/src/app/pages/organization/sites/site/site.component.html b/src/app/pages/organization/sites/site/site.component.html
@@ -21,12 +21,11 @@
       </mat-tab>
     </mat-tab-group>
     <div class="tabs-actions">
-      <button mat-button *ngIf="!readOnly" (click)="saveSite(formGroup.value)"
-        [disabled]="!formGroup.valid || !formGroup.dirty">
+      <button mat-icon-button *ngIf="!readOnly" (click)="saveSite(formGroup.value)" title="{{'general.save' | translate}}"
+          [disabled]="!formGroup.valid || !formGroup.dirty">
         <mat-icon>save</mat-icon>
-        <span>{{'general.save' | translate}}</span>
       </button>
-      <button mat-icon-button *ngIf="dialogRef" (click)="close()">
+      <button mat-icon-button *ngIf="dialogRef" (click)="close()" title="{{'general.close' | translate}}">
         <mat-icon>close</mat-icon>
       </button>
     </div>

diff --git a/src/app/pages/tags/tag/tag.component.html b/src/app/pages/tags/tag/tag.component.html
@@ -12,12 +12,11 @@
       </mat-tab>
     </mat-tab-group>
     <div class="tabs-actions">
-      <button mat-button *ngIf="!readOnly" (click)="saveTag(formGroup.getRawValue())"
+      <button mat-icon-button *ngIf="!readOnly" (click)="saveTag(formGroup.getRawValue())" title="{{'general.save' | translate}}"
           [disabled]="!formGroup.valid || !formGroup.dirty">
         <mat-icon>save</mat-icon>
-        <span>{{'general.save' | translate}}</span>
       </button>
-      <button mat-icon-button *ngIf="dialogRef" (click)="close()">
+      <button mat-icon-button *ngIf="dialogRef" (click)="close()" title="{{'general.close' | translate}}">
         <mat-icon>close</mat-icon>
       </button>
     </div>

diff --git a/src/app/pages/template/buttons/buttons-template.component.html b/src/app/pages/template/buttons/buttons-template.component.html
@@ -4,16 +4,49 @@ <h3 class="card-title">Example of buttons within tabs</h3>
   </div>
   <div class="card-body">
     <mat-tab-group class="mat-tab-info">
-      <mat-tab>
-        <ng-template mat-tab-label>
-          Tab 1
-        </ng-template>
-      </mat-tab>
-      <mat-tab>
-        <ng-template mat-tab-label>
-          Tab 2
-        </ng-template>
-      </mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
+      <mat-tab><ng-template mat-tab-label>Tab</ng-template></mat-tab>
       <mat-tab disabled>
         <ng-template mat-tab-label>
           <button mat-button>

diff --git a/src/app/pages/tenants/tenant/tenant.component.html b/src/app/pages/tenants/tenant/tenant.component.html
@@ -21,11 +21,11 @@
       </mat-tab>
     </mat-tab-group>
     <div class="tabs-actions">
-      <button mat-button (click)="saveTenant(formGroup.value)" [disabled]="!formGroup.valid || !formGroup.dirty">
+      <button mat-icon-button (click)="saveTenant(formGroup.value)" title="{{'general.save' | translate}}"
+          [disabled]="!formGroup.valid || !formGroup.dirty">
         <mat-icon>save</mat-icon>
-        <span>{{'general.save' | translate}}</span>
       </button>
-      <button mat-icon-button *ngIf="inDialog" (click)="close()">
+      <button mat-icon-button *ngIf="inDialog" (click)="close()" title="{{'general.close' | translate}}">
         <mat-icon>close</mat-icon>
       </button>
     </div>

diff --git a/src/app/pages/users/user/user.component.html b/src/app/pages/users/user/user.component.html
@@ -1,8 +1,8 @@
-<div class="main-content" [ngClass]="{'vh-lg-50 vw-lg-80 vw-xxl-60 vh-3xl-40 vw-3xl-35' : dialogRef}">
+<div class="main-content vh-lg-50 vw-lg-80 vw-xxl-60 vh-3xl-40 vw-3xl-35">
   <div class="card card-profile card-testimonial">
     <form [formGroup]="formGroup" class="form">
       <mat-tab-group (selectedIndexChange)="updateRoute($event)" [selectedIndex]="activeTabIndex"
-          animationDuration="0ms" disableRipple="true" class="h-100 mat-tab-info mat-tabs-with-actions">
+          animationDuration="0ms" disableRipple="true" class="h-100 mat-tab-info" [class]="dialogRef ? 'mat-tabs-with-actions' : 'mat-tabs-with-close-action'">
         <mat-tab>
           <ng-template mat-tab-label>
             <mat-icon>portrait</mat-icon>
@@ -79,11 +79,11 @@
         </mat-tab>
       </mat-tab-group>
       <div [class]="dialogRef ? 'tabs-actions' : 'tabs-actions-embedded'">
-        <button mat-button (click)="saveUser(formGroup.getRawValue())" [disabled]="!formGroup.valid || !formGroup.dirty">
+        <button mat-icon-button (click)="saveUser(formGroup.getRawValue())" title="{{'general.save' | translate}}"
+            [disabled]="!formGroup.valid || !formGroup.dirty">
           <mat-icon>save</mat-icon>
-          <span>{{'general.save' | translate}}</span>
         </button>
-        <button mat-icon-button *ngIf="dialogRef" (click)="close()">
+        <button mat-icon-button *ngIf="dialogRef" (click)="close()" title="{{'general.close' | translate}}">
           <mat-icon>close</mat-icon>
         </button>
       </div>

diff --git a/src/app/release-notes/release-notes.component.ts b/src/app/release-notes/release-notes.component.ts
@@ -24,7 +24,7 @@ export class ReleaseNotesComponent {
     this.releaseNotes = [
       {
         version: '2.6.4',
-        date: new Date('2022-04-04'),
+        date: new Date('2022-04-08'),
         componentChanges: [
           {
             name: 'Dashboard',
@@ -35,6 +35,7 @@ export class ReleaseNotesComponent {
               `Updated German translation`,
               `Aligned Charging Profile's amperage floating points with OCPP specifications`,
               `Fixed new OCPI authorization is requested during Start Transaction when IOP sends a Remote Start`,
+              `Fixed cannot scroll tabs in User pop-up`,
             ],
           },
         ],

diff --git a/src/assets/scss/core/_modal.scss b/src/assets/scss/core/_modal.scss
@@ -196,44 +196,6 @@
   }
 }
 
-.transparent-dialog-container {
-  .mat-dialog-container {
-    background: none;
-    box-shadow: none;
-    overflow: hidden;
-  }
-
-  .mat-tab-group {
-    margin-top: -20px;
-  }
-
-  .mat-tab-header {
-    margin-left: 15px;
-    margin-right: 15px;
-    background: $brand-primary;
-  }
-
-  .mat-tabs-with-actions {
-    .mat-tab-header {
-      padding-right: 125px !important;
-    }
-  }
-
-  .mat-tabs-with-close-action {
-    .mat-tab-header {
-      padding-right: 40px !important;
-    }
-  }
-
-  .mat-tab-labels {
-    padding: 11px 7px 7px 7px;
-  }
-
-  .mat-dialog-content {
-    margin: 0;
-  }
-}
-
 .mat-dialog-container {
   border-radius: 0 !important;
 }

diff --git a/src/assets/scss/core/_tabs.scss b/src/assets/scss/core/_tabs.scss
@@ -86,7 +86,7 @@
   top: 0px;
   right: 15px;
   z-index: 999999999;
-  height: 58px;
+  height: 59px;
   padding-top: 7px;
   padding-right: 8px;
   background: $brand-primary;
@@ -132,10 +132,61 @@
   box-shadow: initial !important;
 }
 
+.mat-dialog-container {
+  .mat-tab-header-pagination {
+    padding-top: 4px;
+  }
+}
+
 .mat-tab-labels {
   padding: 7px;
   color: $brand-background !important;
 }
+
+.mat-tabs-with-close-action {
+  .mat-tab-header {
+    margin-right: 55px !important;
+  }
+}
+
+.transparent-dialog-container {
+  .mat-dialog-container {
+    background: none;
+    box-shadow: none;
+    overflow: hidden;
+  }
+
+  .mat-tab-group {
+    margin-top: -20px;
+  }
+
+  .mat-tab-header {
+    margin-left: 15px;
+    margin-right: 15px;
+    background: $brand-primary;
+  }
+
+  .mat-tabs-with-actions {
+    .mat-tab-header {
+      margin-right: 90px !important;
+    }
+  }
+
+  .mat-tabs-with-close-action {
+    .mat-tab-header {
+      margin-right: 40px !important;
+    }
+  }
+
+  .mat-tab-labels {
+    padding: 11px 7px 7px 7px;
+  }
+
+  .mat-dialog-content {
+    margin: 0;
+  }
+}
+
 .mat-tab-info .mat-tab-labels {
   background: $brand-primary;
 }