Skip to content

Commit

Permalink
fix(styling): improve UI & fix small issues found after testing upstr…
Browse files Browse the repository at this point in the history 
…eam (#1510)
  • Loading branch information
@ghiscoding
ghiscoding committed May 7, 2024
1 parent 94b836a commit a4ef70f
Show file tree
Hide file tree
Showing 5 changed files with 13 additions and 13 deletions.
2 changes: 1 addition & 1 deletion examples/vite-demo-vanilla-bundle/src/material-styles.scss
View file
Expand Up @@ -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;
Expand Down
8 changes: 4 additions & 4 deletions packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts
View file
Expand Up @@ -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 },
]);
Expand All @@ -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 },
]);
Expand Down Expand Up @@ -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 },
]);
Expand Down Expand Up @@ -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 },
]);
Expand Down
2 changes: 1 addition & 1 deletion packages/common/src/extensions/slickHeaderMenu.ts
View file
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/common/src/global-grid-options.ts
View file
Expand Up @@ -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,
Expand Down
12 changes: 6 additions & 6 deletions packages/common/src/styles/_variables.scss
View file
Expand Up @@ -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)
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit a4ef70f

Please sign in to comment.