fix(styling): improve UI & fix small issues found after testing upstr…

…eam (#1510)
ghiscoding · May 7, 2024 · a4ef70f · a4ef70f
1 parent 94b836a
commit a4ef70f
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 13 deletions.
diff --git a/examples/vite-demo-vanilla-bundle/src/material-styles.scss b/examples/vite-demo-vanilla-bundle/src/material-styles.scss
@@ -50,7 +50,7 @@
     --slick-checkbox-icon-bg-color: transparent;
     --slick-checkbox-icon-container-bg-color: transparent;
     --slick-checkbox-icon-unchecked-color-visibility: visible;
-    --slick-checkbox-icon-container-size: 1.2rem;
+    --slick-checkbox-icon-container-size: 1rem;
     --slick-checkbox-icon-font-size: 28px;
     --slick-checkbox-icon-container-size: 1.4rem;
     --slick-checkbox-opacity-hover: 0.9;

diff --git a/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts b/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts
@@ -965,7 +965,7 @@ describe('HeaderMenu Plugin', () => {
         const commandLabelElm = commandDivElm.querySelector('.slick-menu-content') as HTMLDivElement;
         expect(columnsMock[1].header!.menu!.commandItems!).toEqual([
           { iconCssClass: 'mdi mdi-sort-ascending', title: 'Sort Ascending', titleKey: 'SORT_ASCENDING', command: 'sort-asc', positionOrder: 50 },
-          { iconCssClass: 'mdi mdi-flip-v mdi-sort-descending', title: 'Sort Descending', titleKey: 'SORT_DESCENDING', command: 'sort-desc', positionOrder: 51 },
+          { iconCssClass: 'mdi mdi-sort-descending', title: 'Sort Descending', titleKey: 'SORT_DESCENDING', command: 'sort-desc', positionOrder: 51 },
           { divider: true, command: '', positionOrder: 52 },
           { iconCssClass: 'mdi mdi-sort-variant-off', title: 'Remove Sort', titleKey: 'REMOVE_SORT', command: 'clear-sort', positionOrder: 54 },
         ]);
@@ -976,7 +976,7 @@ describe('HeaderMenu Plugin', () => {
         plugin.translateHeaderMenu();
         expect(columnsMock[1].header!.menu!.commandItems!).toEqual([
           { iconCssClass: 'mdi mdi-sort-ascending', title: 'Trier par ordre croissant', titleKey: 'SORT_ASCENDING', command: 'sort-asc', positionOrder: 50 },
-          { iconCssClass: 'mdi mdi-flip-v mdi-sort-descending', title: 'Trier par ordre décroissant', titleKey: 'SORT_DESCENDING', command: 'sort-desc', positionOrder: 51 },
+          { iconCssClass: 'mdi mdi-sort-descending', title: 'Trier par ordre décroissant', titleKey: 'SORT_DESCENDING', command: 'sort-desc', positionOrder: 51 },
           { divider: true, command: '', positionOrder: 52 },
           { iconCssClass: 'mdi mdi-sort-variant-off', title: 'Supprimer le tri', titleKey: 'REMOVE_SORT', command: 'clear-sort', positionOrder: 54 },
         ]);
@@ -1094,7 +1094,7 @@ describe('HeaderMenu Plugin', () => {
         const commandDivElm = gridContainerDiv.querySelector('[data-command="sort-asc"]') as HTMLDivElement;
         expect(columnsMock[1].header!.menu!.commandItems!).toEqual([
           { iconCssClass: 'mdi mdi-sort-ascending', title: 'Sort Ascending', titleKey: 'SORT_ASCENDING', command: 'sort-asc', positionOrder: 50 },
-          { iconCssClass: 'mdi mdi-flip-v mdi-sort-descending', title: 'Sort Descending', titleKey: 'SORT_DESCENDING', command: 'sort-desc', positionOrder: 51 },
+          { iconCssClass: 'mdi mdi-sort-descending', title: 'Sort Descending', titleKey: 'SORT_DESCENDING', command: 'sort-desc', positionOrder: 51 },
           { divider: true, command: '', positionOrder: 52 },
           { iconCssClass: 'mdi mdi-sort-variant-off', title: 'Remove Sort', titleKey: 'REMOVE_SORT', command: 'clear-sort', positionOrder: 54 },
         ]);
@@ -1126,7 +1126,7 @@ describe('HeaderMenu Plugin', () => {
         const commandDivElm = gridContainerDiv.querySelector('[data-command="sort-desc"]') as HTMLDivElement;
         expect(columnsMock[1].header!.menu!.commandItems!).toEqual([
           { iconCssClass: 'mdi mdi-sort-ascending', title: 'Sort Ascending', titleKey: 'SORT_ASCENDING', command: 'sort-asc', positionOrder: 50 },
-          { iconCssClass: 'mdi mdi-flip-v mdi-sort-descending', title: 'Sort Descending', titleKey: 'SORT_DESCENDING', command: 'sort-desc', positionOrder: 51 },
+          { iconCssClass: 'mdi mdi-sort-descending', title: 'Sort Descending', titleKey: 'SORT_DESCENDING', command: 'sort-desc', positionOrder: 51 },
           { divider: true, command: '', positionOrder: 52 },
           { iconCssClass: 'mdi mdi-sort-variant-off', title: 'Remove Sort', titleKey: 'REMOVE_SORT', command: 'clear-sort', positionOrder: 54 },
         ]);

diff --git a/packages/common/src/extensions/slickHeaderMenu.ts b/packages/common/src/extensions/slickHeaderMenu.ts
@@ -395,7 +395,7 @@ export class SlickHeaderMenu extends MenuBaseClass<HeaderMenu> {
             }
             if (!columnHeaderMenuItems.some(item => item !== 'divider' && item?.command === 'sort-desc')) {
               columnHeaderMenuItems.push({
-                iconCssClass: headerMenuOptions.iconSortDescCommand || 'mdi mdi-flip-v mdi-sort-descending',
+                iconCssClass: headerMenuOptions.iconSortDescCommand || 'mdi mdi-sort-descending',
                 titleKey: `${translationPrefix}SORT_DESCENDING`,
                 command: 'sort-desc',
                 positionOrder: 51

diff --git a/packages/common/src/global-grid-options.ts b/packages/common/src/global-grid-options.ts
@@ -223,7 +223,7 @@ export const GlobalGridOptions: Partial<GridOption> = {
     iconClearSortCommand: 'mdi mdi-sort-variant-off',
     iconFreezeColumns: 'mdi mdi-pin-outline',
     iconSortAscCommand: 'mdi mdi-sort-ascending',
-    iconSortDescCommand: 'mdi mdi-flip-v mdi-sort-descending',
+    iconSortDescCommand: 'mdi mdi-sort-descending',
     iconColumnHideCommand: 'mdi mdi-close',
     iconColumnResizeByContentCommand: 'mdi mdi-arrow-expand-horizontal',
     hideColumnResizeByContentCommand: false,

diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -321,7 +321,7 @@ $slick-column-picker-icon-border-radius:                    none !default;
 $slick-column-picker-icon-container-bg-color:               transparent !default;
 $slick-column-picker-icon-font-size:                        14px !default;
 $slick-column-picker-icon-container-line-height:            12px !default;
-$slick-column-picker-icon-container-size:                   1.2rem !default;
+$slick-column-picker-icon-container-size:                   1rem !default;
 $slick-column-picker-icon-checked-svg-path:                 "M8.8 19.6L1.2 12c-.3-.3-.3-.8 0-1.1l1-1c.3-.3.8-.3 1 0L9 15.7c.1.2.5.2.6 0L20.9 4.4c.2-.3.7-.3 1 0l1 1c.3.3.3.7 0 1L9.8 19.6c-.2.3-.7.3-1 0z" !default;
 $slick-column-picker-icon-unchecked-svg-path:               $slick-column-picker-icon-checked-svg-path !default;
 $slick-column-picker-icon-unchecked-color-visibility:       visible !default; // make this "hidden" when uncheck icon is not provided (e.g. Salesforce Theme)
@@ -449,7 +449,7 @@ $slick-checkbox-icon-border-radius:                         none !default;
 $slick-checkbox-icon-container-bg-color:                    transparent !default;
 $slick-checkbox-icon-font-size:                             16px !default;
 $slick-checkbox-icon-container-line-height:                 12px !default;
-$slick-checkbox-icon-container-size:                        1.2rem !default;
+$slick-checkbox-icon-container-size:                        1rem !default;
 $slick-checkbox-icon-checked-svg-path:                      "M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z" !default;
 $slick-checkbox-icon-unchecked-svg-path:                    $slick-checkbox-icon-checked-svg-path !default;
 $slick-checkbox-icon-unchecked-color-visibility:            visible !default; // make this "hidden" when uncheck icon is not provided (e.g. Salesforce Theme)
@@ -759,7 +759,7 @@ $slick-multiselect-item-height:                             26px !default;
 $slick-multiselect-item-border:                             1px solid transparent !default;
 $slick-multiselect-item-hover-bg-color:                     #fafafa !default;
 $slick-multiselect-item-hover-border:                       1px solid #d5d5d5 !default;
-$slick-multiselect-item-line-height:                        calc(#{$slick-multiselect-icon-font-size} + 2px) !default;
+$slick-multiselect-item-line-height:                        20px !default;
 $slick-multiselect-item-padding:                            2px 4px !default;
 $slick-multiselect-placeholder-bg-color:                    transparent !default;
 $slick-multiselect-placeholder-color:                       $slick-placeholder-color !default;
@@ -946,14 +946,14 @@ $slick-empty-data-warning-z-index:                          10 !default;
   // Bootstrap --bs-body-bg: #212529
   // local common CSS vars for dark mode
   --slick-primary-color:                                  #{lighten($primary-color, 15%)};
-  --slick-base-dark-text-color:                           #cccccc;
+  --slick-base-dark-text-color:                           #d4d4d4;
   --slick-base-dark-menu-bg-color:                        #252525;
   --slick-base-dark-menu-border:                          1px solid #505050;
   --slick-base-dark-menu-item-border:                     1px solid #5a5a5a;
   --slick-base-dark-menu-item-hover-color:                #363b40;
   --slick-base-dark-invalid-color:                        #ea868f;
   --slick-highlight-color:                                var(--slick-primary-color);
-  --slick-text-color:                                     #cccccc;
+  --slick-text-color:                                     #d4d4d4;
 
   --slick-autocomplete-bg-color:                          var(--slick-base-dark-menu-bg-color);
   --slick-autocomplete-hover-bg-color:                    #2c3034;
@@ -994,7 +994,7 @@ $slick-empty-data-warning-z-index:                          10 !default;
   --slick-grid-menu-icon-btn-color:                       #ededed;
   --slick-row-mouse-hover-color:                          #2c3034;
   --slick-header-background-color:                        #1c1c1c;
-  --slick-header-text-color:                              var(--slick-base-dark-text-color);
+  --slick-header-text-color:                              #e4e4e4;
   --slick-hover-header-color:                             var(--slick-base-dark-text-color);
   --slick-header-row-background-color:                    #2d2d2d;
   --slick-preheader-border-right:                         1px solid #3e3e3e;