[US TRTL-617] Add sidenav panel new design

ui/ui-frontend-common/src/app/modules/components/vitamui-menu-button/vitamui-menu-button.component.html

 <button #trigger="matMenuTrigger" [matMenuTriggerFor]="moreMenu" class="btn outline outline-primary"
   [ngClass]="{'btn-circle large' : icon && !label}" [class.hidden]="trigger.menuOpen">
-    <i *ngIf="icon" class="material-icons" [class.mr-3]="label">{{icon}}</i>
+    <i *ngIf="icon" class="vitamui-icon {{icon}}" [class.mr-3]="label"></i>
     {{label}}
 </button>
 
 <mat-menu #moreMenu="matMenu" xPosition="before" [overlapTrigger]="true" class="more-action-menu {{overlayPos}}">
-  <button mat-menu-item disableRipple class="menu-cancel-button"><i class="material-icons">clear</i></button>
+  <button mat-menu-item disableRipple class="menu-cancel-button">
+    <i class="vitamui-icon vitamui-icon-close"></i>
+  </button>
   <ng-content></ng-content>
 </mat-menu>
\ No newline at end of file

ui/ui-frontend-common/src/app/modules/components/vitamui-menu-button/vitamui-menu-button.component.scss

@@ -19,6 +19,10 @@
             }
         }
 
+        .btn-circle.large > i {
+            font-size: xx-large;
+        }
+
         .mat-menu-item {
             border-left: 1px solid var(--vitamui-primary);
             border-right: 1px solid var(--vitamui-primary);
@@ -50,8 +54,7 @@
             justify-content: center;
 
             > i {
-                font-size: 18px;
-                font-weight: bold;
+                font-size: 14px;
                 color: var(--vitamui-primary);
             }
         }

ui/ui-frontend-common/src/app/modules/components/vitamui-menu-button/vitamui-menu-button.component.ts

@@ -13,6 +13,7 @@ export class VitamuiMenuButtonComponent {
   /**
    * Set the icon to display on the button.
    * If there is only an icon, the button will be rounded.
+   * WARNING : ONLY USE VITAMUI ICONS, MATERIAL ICONS WONT WORK
    */
   @Input() icon: string;
 

ui/ui-frontend-common/src/app/modules/components/vitamui-sidenav-header/vitamui-sidenav-header.component.html

 <div class="vitamui-sidepanel">
   <div class="vitamui-sidepanel-header">
     <div class="d-flex justify-content-end">
-      <button class="btn link xx-large" (click)="onclose.emit()"><i class="material-icons">close</i></button>
+      <button class="btn link cancel" (click)="onclose.emit()">
+        <i class="vitamui-icon vitamui-icon-close"></i>
+      </button>
     </div>
 
     <!-- if we have a one line title (25 chars), then apply a top margin -->
@@ -15,11 +17,11 @@
       </i>
 
       <div>
-        <h5 class="m-0">{{title}}</h5>
-        <p class="text medium m-0">{{subtitle}}</p>
+        <h5 class="m-0 text-primary">{{title}}</h5>
+        <p class="text large light m-0">{{subtitle}}</p>
       </div>
 
-      <div class="d-flex align-items-end actions">
+      <div class="d-flex align-items-end justify-content-end actions">
         <ng-content></ng-content>
       </div>
     </div>

ui/ui-frontend-common/src/app/modules/error-dialog/error-dialog.component.html

@@ -6,6 +6,6 @@
 
   <button class="btn link" (click)="goBack()" i18n="@@goBackButton">
     <i class="vitamui-icon vitamui-icon-chevron-left"></i>
-    <span class="underline">Retour</span>
+    <span class="text-underline">Retour</span>
   </button>
 </div>
\ No newline at end of file

ui/ui-frontend-common/src/sass/_button.scss

@@ -163,7 +163,7 @@
     }
 
     &.cancel {
-        @include btn(transparent, transparent, transparent, transparent, var(--vitamui-grey-900), var(--vitamui-gray-900));
+        @include btn(transparent, transparent, transparent, transparent, var(--vitamui-grey-900), var(--vitamui-grey-900));
     }
 
     i {

ui/ui-frontend-common/src/sass/_sidepanel.scss

@@ -2,13 +2,18 @@
     background: white;
     margin-top: 72px; // header height
     width: 584px;
-    height: 100vh;
 }
 
 .vitamui-sidepanel-header {
     background-color: white;
-    padding: 5px 15px 10px 10px;
-    height: 142px;
+    padding: 2px 20px 10px 10px;
+    height: 174px;
+
+    .cancel {
+        > i {
+            color: var(--vitamui-grey-600)!important;
+        }
+    }
 
     .title {
         display: flex;
@@ -17,7 +22,7 @@
 
         > i {
             color: var(--vitamui-grey-900);
-            font-size: 45px;
+            font-size: 35px;
         }
 
         // DEPREACTED : REMOVE THIS H2 CSS AT THE END OF THE REDESIGN
@@ -30,8 +35,16 @@
         }
 
         > div:first-of-type {
-            width: 66%;
-            padding-left: 1.5rem;
+            width: 76%;
+            padding-left: 2rem;
+
+            > h5 {
+                display: -webkit-box;
+                overflow: hidden;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                text-overflow: ellipsis;
+            }
 
             > p {
                 display: -webkit-box;
@@ -43,23 +56,31 @@
         }
 
         > .actions {
-            width: 25%;
+            width: 15%;
         }
     }
 }
 
 .vitamui-sidepanel-body {
     font-size: 16px;
-    
+    background-color: var(--vitamui-background);
     color: var(--vitamui-grey-900);
     position: absolute;
     bottom: 0;
     right: 0;
     left: 0;
-    top: 214px;
+    top: 247px;
     overflow: auto;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+    -ms-overflow-style: none;
+    scrollbar-width: none;
 }
 
+
+
 .mat-drawer-content {
     background-color: var(--vitamui-background);
 }

ui/ui-frontend-common/src/sass/_theme.scss

@@ -100,8 +100,6 @@ button {
     color: var(--vitamui-primary-300)!important;
 }
 
-
-
 .text-secondary {
     color: var(--vitamui-secondary)!important;
 }
@@ -110,6 +108,10 @@ button {
     color: $red!important;
 }
 
+.text-underline {
+    text-decoration: underline;
+}
+
 .bg-primary {
     background-color: var(--vitamui-primary)!important;
 }
@@ -118,9 +120,7 @@ button {
     background-color: var(--vitamui-secondary)!important;
 }
 
-.underline {
-    text-decoration: underline;
-}
+
 
 .no-hover {
     &:hover {

ui/ui-frontend-common/src/sass/material/_preview-tab.scss

+.mat-drawer {
+    border-left: none!important;
+    box-shadow: 0px 4px 24px rgba(46, 53, 69, 0.1); 
+}
+
 .preview-tab-group.mat-tab-group {
+    .mat-tab-header {
+        border-bottom: none;
+        background-color: white;
+        height: 40px;
+        position: fixed;
+        width: 100%;
+        z-index: 10;
+
+        .mat-tab-header-pagination {
+            display: none;
+        }
+    }
+
     .mat-tab-label {
-        
+        color: var(--vitamui-grey-600);
+        align-items: baseline;
         min-width: 130px;
-        height: 37px;
         opacity: 1;
-        color: var(--vitamui-grey-600);
+        height: 40px;
+        padding-top: 3px;
 
         &:hover {
             background-color: var(--vitamui-grey-300);
@@ -18,16 +37,8 @@
     .mat-tab-label-active {
         .mat-tab-label-content {
             color: var(--vitamui-primary);
-            font-weight: 700;
-        }
-    }
-
-    .mat-tab-header {
-        border-top: 1px solid var(--vitamui-grey-400);
-        border-bottom: 1px solid var(--vitamui-grey-400);
-
-        .mat-tab-header-pagination {
-            display: none;
+            font-size: 16px;
+            font-weight: 400;
         }
     }
 
@@ -36,22 +47,23 @@
     }
 
     .mat-tab-body-content {
-        padding: 35px 30px;
+        padding: 55px 30px 20px;
         overflow: visible;
     }
 
     .mat-ink-bar {
         background-color: transparent!important;
+        height: 3px;
 
         &::before {
           content: '';
           display: block;
-          width: 50%;
+          width: 69%;
           background-color: var(--vitamui-primary);
           height: 6px;
           border-bottom-right-radius: 70px;
           border-bottom-left-radius: 70px;
-          left: 25%;
+          left: 16%;
           position: relative;
         }
     }

ui/ui-frontend-common/src/sass/material/_tab-group.scss

+/** TODO DEPRECATED : THIS CODE SEEMS TO BE UNSED, REMOVE IT AT THE END OF THE REDESIGN **/
+
 .account-tab-group.mat-tab-group {
     .mat-tab-header {
         border-bottom: none;

ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.html

@@ -240,7 +240,7 @@
     <ng-template #back>
       <button type="button" class="btn link mt-1 ml-1 text-primary" cdkStepperPrevious>
         <i class="vitamui-icon vitamui-icon-chevron-left"></i>
-        <span i18n="Previous step button label@@customerCreateBackButton" class="underline">Retour</span>
+        <span i18n="Previous step button label@@customerCreateBackButton" class="text-underline">Retour</span>
       </button>
     </ng-template>
   </vitamui-common-stepper>

ui/ui-frontend/projects/identity/src/app/customer/customer-preview/sso-tab/sso-tab.component.html

@@ -45,7 +45,7 @@
     <div>
       <button type="button" class="btn link" (click)="selectedIdentityProvider=null">
         <i class="vitamui-icon vitamui-icon-chevron-left"></i>
-        <ng-container i18n="Back button label@@idpBackButton"><span class="underline">Retourner à la liste des IDP</span></ng-container>
+        <ng-container i18n="Back button label@@idpBackButton"><span class="text-underline">Retourner à la liste des IDP</span></ng-container>
       </button>
       <app-identity-provider-details [identityProvider]="selectedIdentityProvider" [domains]="domains"
         [readOnly]="readOnly || selectedIdentityProvider.readonly"></app-identity-provider-details>

ui/ui-frontend/projects/identity/src/app/customer/owner-create/owner-create.component.html

@@ -35,7 +35,7 @@
         </div>
         <button type="button" class="btn link" cdkStepperPrevious>
           <i class="vitamui-icon vitamui-icon-chevron-left"></i>
-          <ng-container i18n="Previous step button label@@customerCreateBackButton"><span class="underline">Retour</span></ng-container>
+          <ng-container i18n="Previous step button label@@customerCreateBackButton"><span class="text-underline">Retour</span></ng-container>
         </button>
       </div>
     </form>

ui/ui-frontend/projects/identity/src/app/group/group-create/group-create.component.html

@@ -66,7 +66,7 @@
 
         <button type="button" class="btn link" cdkStepperPrevious>
           <i class="vitamui-icon vitamui-icon-chevron-left"></i>
-           <ng-container i18n="Previous step button label@@profileGroupCreateBackButton"><span class="underline">Retour</span></ng-container>
+           <ng-container i18n="Previous step button label@@profileGroupCreateBackButton"><span class="text-underline">Retour</span></ng-container>
         </button>
       </div>
     </cdk-step>

ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-list/group-list.component.html

@@ -18,7 +18,7 @@
         <div class="vitamui-row p-0 px-4" [class.no-hover]="row.state === 'expanded'" *ngIf="!group?.selected" [vitamuiCommonCollapse] #row="vitamuiCommonCollapse">
           <div class="d-flex justify-content-between align-items-center clickable">
             <div class="row-label d-flex align-items-center" (click)="updateGroup(group?.id,group?.name, row)">{{group?.name}}</div>
-            <button class="btn link underline" (click)="row.toggle()">{{row.state === 'collapsed' ? "Voir detail" : "Masquer detail"}}</button>
+            <button class="btn link text-underline" (click)="row.toggle()">{{row.state === 'collapsed' ? "Voir detail" : "Masquer detail"}}</button>
           </div>
           <app-group-detail *ngIf="row.state === 'expanded'" [group]="group" [@expansionAnimation]></app-group-detail>
         </div>

ui/ui-frontend/projects/identity/src/app/user/user-create/user-create.component.html

@@ -118,7 +118,7 @@
         </div>
         <button type="button" class="btn link" cdkStepperPrevious>
           <i class="vitamui-icon vitamui-icon-chevron-left"></i>
-          <ng-container i18n="Previous step button label@@customerCreateBackButton"><span class="underline">Retour</span></ng-container>
+          <ng-container i18n="Previous step button label@@customerCreateBackButton"><span class="text-underline">Retour</span></ng-container>
         </button>
     </div>
     </cdk-step>
@@ -192,7 +192,7 @@
 
         <button type="button" class="btn link" cdkStepperPrevious>
           <i class="vitamui-icon vitamui-icon-chevron-left"></i>
-          <ng-container i18n="Previous step button label@@customerCreateBackButton"><span class="underline">Retour</span></ng-container>
+          <ng-container i18n="Previous step button label@@customerCreateBackButton"><span class="text-underline">Retour</span></ng-container>
         </button>
       </div>
     </cdk-step>
@@ -230,7 +230,7 @@
           </div>
         <button type="button" class="btn link" cdkStepperPrevious>
           <i class="vitamui-icon vitamui-icon-chevron-left"></i>
-          <ng-container i18n="Previous step button label@@customerCreateBackButton"><span class="underline">Retour</span></ng-container>
+          <ng-container i18n="Previous step button label@@customerCreateBackButton"><span class="text-underline">Retour</span></ng-container>
         </button>
       </div>
     </cdk-step>

ui/ui-frontend/projects/identity/src/app/user/user-preview/user-preview.component.html

@@ -4,7 +4,7 @@
   [subtitle]="'(' +  user?.identifier + ')'"
   [icon]="'vitamui-icon-user'"
   (onclose)="emitClose()">
-    <vitamui-common-menu-button [overlayPos]="'end'" [icon]="'more_horiz'">
+    <vitamui-common-menu-button [overlayPos]="'end'" [icon]="'vitamui-icon-more-horiz'">
       <button mat-menu-item i18n="@@userPreviewEnabled" (click)="updateStatus('ENABLED')"  [disabled]="user?.status === 'ENABLED'">Activer </button>
       <button mat-menu-item i18n="@@userPreviewDisabled" (click)="updateStatus('DISABLED')" [disabled]="user?.status === 'DISABLED'">Désactiver</button>
     </vitamui-common-menu-button>

ui/ui-frontend/projects/identity/src/sass/_form.scss

+/** TODO DEPRECATED : REMOVE THIS CSS AT THE END OF THE REWORK **/
+
 .vitamui-form vitamui-slide-toggle {
     margin-bottom: 20px;
 }

ui/ui-frontend/projects/identity/src/sass/_profile-tag.scss

+/** TODO DEPRECATED : REMOVE THIS CSS AT THE END OF THE REWORK **/
+
 .profile-tag {
     font-size: 14px;
     font-weight: 500;

ui/ui-frontend/projects/identity/src/sass/_tooltip.scss

+/** TODO DEPRECATED : REMOVE THIS CSS AT THE END OF THE REWORK **/
+
 @import '~ui-frontend-common/sass/variables/colors';
 
 $arrow-size: 20px;