KDE - 21/05/2021 - Change Color Action button menu with overlay / Change Text...

KDE - 21/05/2021 - Change Color Action button menu with overlay / Change Text type / Change Background color

ui/ui-frontend/projects/pastis/src/app/profile/edit-profile/file-tree-metadata/file-tree-metadata.component.html

@@ -109,7 +109,7 @@
         <ng-container matColumnDef="cardinalite">
           <th mat-header-cell *matHeaderCellDef class="pastis-font-table-header pastis-col">Cardinalité</th>
           <td mat-cell *matCellDef="let element;index as i" class="pastis-metadata-table-col-small">
-            <mat-select [ngModel]="selectedCardinalities[i]" panelClass="cardinality-dropdown "
+            <mat-select [ngModel]="selectedCardinalities[i]" panelClass="vitamui-mat-select"
                         (ngModelChange)="setNodeChildrenCardinalities(element,$event)" disableRipple="true"
                         class="select-border">
               <mat-option *ngFor="let c of element.cardinalite" [value]="c">
@@ -127,13 +127,14 @@
                       class="comment-text-area ">
             </textarea>
 
+
             <!--Menu options-->
-            <mat-menu #menu="matMenu" [overlapTrigger]="false" class="pastis-item-menu" xPosition="before"
+            <mat-menu #menu="matMenu" [overlapTrigger]="false" class="pastis-menu-item-vitam" xPosition="before"
                       yPosition="below">
               <!-- Dupliquer-->
               <button mat-menu-item>
                 <mat-icon style="color:#757575">filter_none</mat-icon>
-                <span class="pastis-item-menu-text">Dupliquer</span>
+                <span class="text normal">Dupliquer</span>
               </button>
               <!-- @Attributs-->
               <mat-divider *ngIf="hasAttributes(element.nomDuChamp)" style="border-top-color:#E0E0E0;"></mat-divider>
@@ -144,14 +145,14 @@
                     color:#757575;
                    font-size: 1.77em;">
                 </i>
-                <span class="pastis-item-menu-text">Attributs de métadonnée</span>
+                <span class="text normal">Attributs de métadonnée</span>
               </button>
               <!-- @Supprimer-->
               <mat-divider *ngIf="!isSedaObligatory(element.nomDuChamp)" style="border-top-color:#E0E0E0;">
               </mat-divider>
               <button *ngIf="!isSedaObligatory(element.nomDuChamp)" mat-menu-item (click)="onDeleteNode(element.id)">
                 <mat-icon style="color:#757575">delete</mat-icon>
-                <span class="pastis-item-menu-text">Supprimer</span>
+                <span class="text normal">Supprimer</span>
               </button>
             </mat-menu>
 

ui/ui-frontend/projects/pastis/src/app/profile/edit-profile/file-tree-metadata/file-tree-metadata.component.scss

@@ -4,6 +4,7 @@
 @import "../../../../assets/css/font";
 @import "../../../../assets/css/buttons";
 @import "../../../../assets/css/input";
+@import '~ui-frontend-common/sass/material/menu';
 
 td {
   padding-right: 6px !important;
@@ -137,7 +138,6 @@ td {
   overflow-y: hidden;
 
 }
-
 .radio-group {
   display: flex;
   flex-direction: column;
@@ -210,7 +210,7 @@ tr:hover .pastis-btn-appear {
 
 .pastis-btn-metadata-options {
   @extend .pastis-btn-rounded-mini-neutral-enabled;
-  border: 1px solid map-get($colors, 'primary-500') !important;
+  border: 1px solid map-get($colors, 'primary-700') !important;
   float: right;
   width: 40px;
   height: 40px;
@@ -219,12 +219,12 @@ tr:hover .pastis-btn-appear {
 
 .pastis-btn-metadata-options-active {
   @extend .pastis-btn-rounded-mini-neutral-enabled;
-  background: map-get($colors, 'white-highlight' );
+  background: map-get($colors, 'primary-100' );
   position: absolute !important;
   margin-left: 5px !important;
   width: 40px;
   height: 40px;
-  border: 1px solid map-get($colors, 'primary-500') !important;
+  border: 1px solid map-get($colors, 'primary-700') !important;
 }
 
 
@@ -405,3 +405,14 @@ dp-day-calendar .dp-day-calendar-container {
   height: 800px;
 }
 
+.pastis-menu-item-vitam{
+  @extend .vitamui-menu-panel;
+  .mat-menu-item:hover:not([disabled]),
+  .mat-menu-item.cdk-program-focused:not([disabled]),
+  .mat-menu-item.cdk-keyboard-focused:not([disabled]),
+  .mat-menu-item-highlighted:not([disabled]) {
+    color: white;
+    background-color: map-get($colors, 'primary-100' ) !important;
+  }
+}
+

ui/ui-frontend/projects/pastis/src/assets/css/_colors.scss

@@ -4,10 +4,12 @@ $colors: (
 
   /* Primary */
   primary-50: #F7EBFA,
-  primary-300:#C672D9,
+  primary-100: #e6c3ef,
+  primary-300: #C672D9,
   primary-400 : #B54ACE,
   primary-500 : #702382,
-  
+  primary-700: #571B64,
+
 
   /* Secondary */
   secondary-disabled:#BDD9EC,
@@ -16,7 +18,7 @@ $colors: (
   secondary-300: #6DA2DF,
   secondary-400: #4388D6,
   secondary-500: #2563A9,
-  
+
   /*Surface*/
   surface-tabs: #604379,
   surface-snackbar:#604379,
@@ -34,7 +36,7 @@ $colors: (
   /* White */
   white-highlight: #FFFFFF,
   white-disabled:rgba(255, 255, 255, 0.57)
-  
+
 );
 
 $input-colors: (
@@ -44,4 +46,4 @@ $input-colors: (
   activated :#747272,
   error:#FF0000,
   valid:#50D166,
-);
\ No newline at end of file
+);