KDE - 04/06/2021 - Ajout d'une directive pour specifier propriete d'une...

KDE - 04/06/2021 - Ajout d'une directive pour specifier propriete d'une colonne utilisant mat-table pour y changer ses proprietes

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

@@ -9,6 +9,7 @@
 @import '~ui-frontend-common/sass/variables/colors';
 @import '~ui-frontend-common/sass/editable-field';
 
+
 td {
   padding-right: 20px !important;
 }
@@ -222,6 +223,10 @@ td {
 
 table {
   width: 100%;
+  @include mat-table-columns((
+    valeurFixe:(width:140px!important),
+    cardinalite:(width:120px!important)
+));
 }
 
 .pastis-btn-add-tag {
@@ -313,7 +318,7 @@ tr:hover .pastis-btn-appear {
   max-height: 425px;
   width: 80%;
   top: 30px;
-  left: 40px;
+  left: 7%;
   position: relative;
 }
 
@@ -332,7 +337,7 @@ tr:hover .pastis-btn-appear {
   @extend .pastis-panel-shadow;
   position: relative;
   width: 80%;
-  margin-left: 40px;
+  margin-left: 7%;
   top: 20px;
   height: 116px;
 }

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

@@ -45,7 +45,7 @@
     &#{$prefix}#{$name} {
       @each $type, $value in $button {
         &#{$separator}#{$type} {
-          //Text-colors and border            
+          //Text-colors and border
           @if $name == leading {
             #{color}:map-get($buttons-text-color-leading,$type);
             #{border}: map-get($buttons-border-leading,$type);
@@ -71,11 +71,11 @@
         &#{$separator}#{$type} {
           //Box-shadow (reused from button)
           #{box-shadow}:map-get($buttons-box-shadow,$type);
-          #{border}:map-get($rounded-buttons-border,$name); 
+          #{border}:map-get($rounded-buttons-border,$name);
           //Box-shadow (mini-white-only)rounded-buttons-border
           @if $name == mini-white{
             #{box-shadow}:none;
-          }   
+          }
           //Rounded button Border
          @each $k, $v in map-get($buttons-font-text,$name){#{$k}:$v; }
           @extend .pastis-btn-rounded;
@@ -93,11 +93,11 @@
         &#{$separator}#{$type} {
           //Box-shadow (reused from button)
           #{box-shadow}:map-get($buttons-box-shadow,$type);
-          #{border}:map-get($rounded-buttons-border,$name); 
+          #{border}:map-get($rounded-buttons-border,$name);
           //Box-shadow (mini-white-only)rounded-buttons-border
           @if $name == mini-white{
             #{box-shadow}:none;
-          }   
+          }
           //Rounded button Border
          @each $k, $v in map-get($buttons-font-text,$name){#{$k}:$v; }
           @extend .pastis-btn-rounded-mini;
@@ -135,19 +135,39 @@
 }
 }
 
+@mixin mat-table-columns($columns)
+{
+  .mat-column-
+  {
+    @each $colName, $props in $columns {
+      $width: map-get($props, 'width');
+      &#{$colName}
+      {
+        flex: $width;
+        width: $width;
 
-/* Generates colors for Pastis. 
+        @if map-has-key($props, 'color')
+        {
+          color: map-get($props, 'color');
+        }
+      }
+    }
+  }
+}
+
+
+/* Generates colors for Pastis.
 Ex : .pastis-secondary-200 {
-      } 
+      }
 See _colors.scss */
 
 .pastis {
   @include color-modifiers('color');
 }
 
-/* Generates background colors for Pastis. 
+/* Generates background colors for Pastis.
 Ex : .pastis-bg-secondary-200 {
-      } 
+      }
 See _colors.scss */
 .pastis-bg {
   @include color-modifiers('background');
@@ -156,11 +176,11 @@ See _colors.scss */
 .pastis-bgcolor {
   @include color-modifiers('background-color');
 }
-/* Generates buttons for Pastis. 
+/* Generates buttons for Pastis.
 Buttons can be primary, secondary;
-Additionally they can be : 
+Additionally they can be :
 activated, disabled, hover and focus
-Ex : .pastis-btn-primary-hover {} 
+Ex : .pastis-btn-primary-hover {}
 See _buttons.scss */
 
 .pastis-btn {
@@ -171,8 +191,8 @@ See _buttons.scss */
 }
 
 
-//Ex : .pastis-btn-rounded-primary-focus {} 
-//Ex : .pastis-btn-rounded-mini-white-hover {} 
+//Ex : .pastis-btn-rounded-primary-focus {}
+//Ex : .pastis-btn-rounded-mini-white-hover {}
 
 .pastis-btn-rounded {
   border-radius: 67px;