Skip to content

Commit

Permalink
fix(styling): tweak & fix all styling with Salesforce & other frameworks
Browse files Browse the repository at this point in the history
  • Loading branch information
@ghiscoding
ghiscoding committed Nov 30, 2021
1 parent 2630cdd commit 86dbb76
Show file tree
Hide file tree
Showing 6 changed files with 54 additions and 37 deletions.
7 changes: 5 additions & 2 deletions packages/common/src/extensions/extensionCommonUtils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,10 @@ export function populateColumnPicker(this: SlickColumnPicker | SlickGridMenu, ad

for (const column of context.columns) {
const columnId = column.id;
const columnLiElm = createDomElement('li', { className: column.excludeFromColumnPicker ? 'hidden' : '' });
const columnLiElm = document.createElement('li');
if (column.excludeFromColumnPicker) {
columnLiElm.className = 'hidden';
}

const colInputElm = createDomElement('input', {
type: 'checkbox', id: `${context._gridUid}-${menuPrefix}colpicker-${columnId}`,
Expand Down Expand Up @@ -144,7 +147,7 @@ export function populateColumnPicker(this: SlickColumnPicker | SlickGridMenu, ad
}

if (!(addonOptions?.hideForceFitButton)) {
const fitLiElm = createDomElement('li');
const fitLiElm = document.createElement('li');
fitLiElm.appendChild(
createDomElement('input', {
type: 'checkbox', id: `${context._gridUid}-${menuPrefix}colpicker-forcefit`,
Expand Down
7 changes: 6 additions & 1 deletion packages/common/src/styles/_variables-theme-material.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,11 +67,16 @@ $slick-column-picker-close-btn-font-size: 23px !default;
// $slick-context-menu-item-font-size: 16px !default;
// $slick-context-menu-icon-font-size: $slick-icon-width !default;
$slick-column-picker-item-font-size: 14px !default;
$slick-column-picker-checkbox-icon-line-height: 18px !default;
$slick-column-picker-checkbox-icon-line-height: 16px !default;
$slick-column-picker-checkbox-icon-vertical-align: middle !default;
$slick-column-picker-item-height: 26px !default;
$slick-column-picker-item-line-height: 16px !default;
$slick-column-picker-title-font-size: 17px !default;
$slick-menu-item-font-size: 14px !default;
$slick-menu-item-height: 26px !default;
$slick-menu-icon-line-height: 18px !default;
$slick-menu-icon-width: 18px !default;
$slick-menu-title-font-size: 17px !default;
$slick-icon-group-width: 22px !default;
$slick-icon-group-color: $slick-primary-color !default;
$slick-icon-group-collapsed: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($slick-icon-group-color)}" viewBox="0 0 24 24"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"></path></svg>') !default;
Expand Down
7 changes: 6 additions & 1 deletion packages/common/src/styles/_variables-theme-salesforce.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,11 +87,16 @@ $slick-column-picker-close-btn-font-size: 23px !default;
// $slick-context-menu-icon-font-size: 16px !default;
// $slick-context-menu-icon-margin-right: 5px !default;
$slick-column-picker-item-font-size: 14px !default;
$slick-column-picker-checkbox-icon-line-height: 18px !default;
$slick-column-picker-checkbox-icon-line-height: 16px !default;
$slick-column-picker-checkbox-icon-vertical-align: middle !default;
$slick-column-picker-item-height: 26px !default;
$slick-column-picker-item-line-height: 16px !default;
$slick-column-picker-title-font-size: 17px !default;
$slick-menu-item-font-size: 14px !default;
$slick-menu-item-height: 26px !default;
$slick-menu-icon-line-height: 18px !default;
$slick-menu-icon-width: 18px !default;
$slick-menu-title-font-size: 17px !default;
$slick-icon-group-color: $slick-primary-color !default;
$slick-icon-group-collapsed: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($slick-icon-group-color)}" viewBox="0 0 24 24"><path d="M8.3 2l9.5 9.5c.3.3.3.7 0 1L8.3 22c-.3.2-.8.2-1.1 0l-1-1c-.2-.3-.2-.8 0-1.1l7.6-7.4c.2-.3.2-.7 0-1L6.3 4.1C6 3.8 6 3.3 6.3 3l1-1c.3-.2.7-.2 1 0z"></path></svg>') !default;
$slick-icon-group-expanded: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($slick-icon-group-color)}" viewBox="0 0 24 24"><path d="M22 8.2l-9.5 9.6c-.3.2-.7.2-1 0L2 8.2c-.2-.3-.2-.7 0-1l1-1c.3-.3.8-.3 1.1 0l7.4 7.5c.3.3.7.3 1 0l7.4-7.5c.3-.2.8-.2 1.1 0l1 1c.2.3.2.7 0 1z"></path></svg>') !default;
Expand Down
19 changes: 12 additions & 7 deletions packages/common/src/styles/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,7 +277,7 @@ $slick-column-picker-checkbox-opacity: 0.15 !default;
$slick-column-picker-checkbox-opacity-hover: 0.35 !default;
$slick-column-picker-checkbox-width: 13px !default;
$slick-column-picker-close-btn-bg-color: #ffffff !default;
$slick-column-picker-close-btn-color: #c3c3c3 !default;
$slick-column-picker-close-btn-color: #909090 !default;
$slick-column-picker-close-btn-color-hover: darken($slick-column-picker-close-btn-color, 25%) !default;
$slick-column-picker-close-btn-cursor: pointer !default;
$slick-column-picker-close-btn-font-family: "Calibri Light", "Helvetica Neue", Arial, sans-serif !default;
Expand All @@ -287,27 +287,32 @@ $slick-column-picker-close-btn-height: 21px !default;
$slick-column-picker-close-btn-width: 15px !default;
$slick-column-picker-close-btn-margin: 1px !default;
$slick-column-picker-close-btn-padding: 0px !default;
$slick-column-picker-close-btn-opacity: 0.9 !default;
$slick-column-picker-close-btn-opacity: 0.5 !default;
$slick-column-picker-close-btn-opacity-hover: 1 !default;
$slick-column-picker-close-btn-position-right: 5px !default;
$slick-column-picker-close-btn-position-top: 0px !default;
$slick-column-picker-min-width: 150px !default; /* trick to cheat the width to include extra scrollbar width in addition to auto width */
$slick-column-picker-padding: 6px !default; /* trick to cheat the width to include extra scrollbar width in addition to auto width */
$slick-column-picker-padding-right-patch: 24px !default; /* trick to cheat the width to include extra scrollbar width in addition to auto width */
$slick-column-picker-divider-width: calc(100% + #{$slick-column-picker-padding-right-patch} - 10px) !default;
$slick-column-picker-item-border: 1px solid transparent !default;
$slick-column-picker-item-border-radius: 0px !default;
$slick-column-picker-item-font-size: $slick-font-size-base !default;
$slick-column-picker-item-height: 28px !default;
$slick-column-picker-item-line-height: 24px !default;
$slick-column-picker-item-line-height: calc(#{$slick-column-picker-item-font-size} + 2px) !default;
$slick-column-picker-item-padding: 2px 4px !default;
$slick-column-picker-item-hover-border: 1px solid #BFBDBD !default;
$slick-column-picker-item-hover-color: #fafafa !default;
$slick-column-picker-label-margin: 4px !default;
$slick-column-picker-label-font-weight: normal !default;
$slick-column-picker-link-background-color: #ffffff !default;
$slick-column-picker-list-margin-bottom: 8px !default;
$slick-column-picker-title-border-bottom: 1px solid #d6d6d6 !default;
$slick-column-picker-title-font-size: calc(#{$slick-column-picker-item-font-size} + 2px) !default;
$slick-column-picker-title-font-weight: normal !default;
$slick-column-picker-title-margin-bottom: 10px !default;
$slick-column-picker-title-margin-bottom: 6px !default;
$slick-column-picker-title-width: calc(100% - #{$slick-column-picker-close-btn-width} - 10px) !default;
$slick-column-picker-z-index: 9000 !default;

/* Grid Menu - hamburger menu */
$slick-grid-menu-button-padding: 0 2px !default;
Expand Down Expand Up @@ -373,7 +378,7 @@ $slick-menu-border: 1px solid #BFBDBD !d
$slick-menu-border-radius: 2px !default;
$slick-menu-close-btn-bg-color: #ffffff !default;
$slick-menu-close-btn-border: 0px solid #dfdfdf !default;
$slick-menu-close-btn-color: darken($slick-column-picker-close-btn-color, 20%) !default;
$slick-menu-close-btn-color: #909090 !default;
$slick-menu-close-btn-font-family: $slick-column-picker-close-btn-font-family !default;
$slick-menu-close-btn-font-size: $slick-column-picker-close-btn-font-size !default;
$slick-menu-close-btn-height: 18px !default;
Expand Down Expand Up @@ -402,12 +407,12 @@ $slick-menu-icon-margin-right: 4px !default;
$slick-menu-icon-width: 16px !default;
$slick-menu-line-height: 24px !default;
$slick-menu-min-width: 125px !default;
$slick-menu-option-list-margin-bottom: 10px !default;
$slick-menu-option-list-margin-bottom: 6px !default;
$slick-menu-padding: 6px !default;
$slick-menu-title-border-bottom: 1px solid #d6d6d6 !default;
$slick-menu-title-font-size: calc(#{$slick-font-size-base} + 2px) !default;
$slick-menu-title-font-weight: normal !default;
$slick-menu-title-margin-bottom: 10px !default;
$slick-menu-title-margin-bottom: 6px !default;
$slick-menu-title-margin-right: 7px !default;
$slick-menu-title-width: calc(100% - #{$slick-menu-close-btn-width} - 10px) !default;

Expand Down
47 changes: 25 additions & 22 deletions packages/common/src/styles/slick-controls.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,31 +6,32 @@
// ----------------------------------------------

.slick-column-picker {
cursor: default;
list-style-type: none;
position: absolute;
overflow: auto;
resize: both;
font-family: var(--slick-font-family, $slick-font-family);
background-color: var(--slick-column-picker-background-color, $slick-column-picker-background-color);
border: var(--slick-column-picker-border, $slick-column-picker-border);
border-radius: var(--slick-column-picker-border-radius, $slick-column-picker-border-radius);
padding: 6px;
min-width: var(--slick-column-picker-min-width, $slick-column-picker-min-width);
padding: var(--slick-column-picker-padding, $slick-column-picker-padding);
box-shadow: var(--slick-column-picker-box-shadow, $slick-column-picker-box-shadow);
min-width: 150px;
cursor: default;
position: absolute;
z-index: 2000;
overflow: auto;
resize: both;
width: auto;
z-index: var(--slick-column-picker-z-index, $slick-column-picker-z-index);

/* trick to cheat the width to include extra scrollbar width in addition to auto width */
padding-right: var(--slick-column-picker-padding-right-patch, $slick-column-picker-padding-right-patch);

> .close {
.close {
float: right;
position: absolute;
color: var(--slick-column-picker-close-btn-color, $slick-column-picker-close-btn-color);
cursor: var(--slick-column-picker-close-btn-cursor, $slick-column-picker-close-btn-cursor);
width: var(--slick-column-picker-close-btn-width, $slick-column-picker-close-btn-width);
height: var(--slick-column-picker-close-btn-height, $slick-column-picker-close-btn-height);
margin: var(--slick-column-picker-close-btn-margin, $slick-column-picker-close-btn-margin);
opacity: var(--slick-column-picker-close-btn-opacity, $slick-column-picker-close-btn-opacity);
padding: var(--slick-column-picker-close-btn-padding, $slick-column-picker-close-btn-padding);
font-family: var(--slick-column-picker-close-btn-font-family, $slick-column-picker-close-btn-font-family);
font-size: var(--slick-column-picker-close-btn-font-size, $slick-column-picker-close-btn-font-size);
Expand All @@ -40,10 +41,7 @@
top: var(--slick-column-picker-close-btn-position-top, $slick-column-picker-close-btn-position-top);

&:hover {
color: var(--slick-column-picker-close-btn-color-hover, $slick-column-picker-close-btn-color-hover);
}
> span {
opacity: var(--slick-column-picker-close-btn-opacity, $slick-column-picker-close-btn-opacity);
opacity: var(--slick-column-picker-close-btn-opacity-hover, $slick-column-picker-close-btn-opacity-hover);
}
}

Expand Down Expand Up @@ -74,9 +72,20 @@
margin-bottom: var(--slick-column-picker-title-margin-bottom, $slick-column-picker-title-margin-bottom);
}
}
.slick-column-picker, .slick-grid-menu {
width: max-content;

.slick-menu-title {
font-size: var(--slick-menu-title-font-size, $slick-menu-title-font-size);
font-weight: var(--slick-menu-title-font-weight, $slick-menu-title-font-weight);
border-bottom: var(--slick-column-picker-title-border-bottom, $slick-column-picker-title-border-bottom);
margin-bottom: var(--slick-menu-title-margin-bottom, $slick-menu-title-margin-bottom);
}
}

.slick-column-picker-list, .slick-grid-menu-list {
width: 100%;

.slick-column-picker-list,
.slick-grid-menu-list {
/** make sure the hidden class exist, it was removed in BS4 */
li.hidden {
display: none;
Expand All @@ -98,7 +107,6 @@
}
label {
cursor: pointer;
width: 100%;
margin-bottom: 0px;
}
}
Expand Down Expand Up @@ -152,7 +160,7 @@

.slick-grid-menu {
.slick-menu-command-list {
margin-bottom: 10px;
margin-bottom: var(--slick-column-picker-list-margin-bottom, $slick-column-picker-list-margin-bottom);
}

// list-style-type: none;
Expand Down Expand Up @@ -245,11 +253,6 @@
z-index: 2;
}

.slick-menu-title {
border-bottom: var(--slick-column-picker-title-border-bottom, $slick-column-picker-title-border-bottom);
margin-bottom: var(--slick-menu-title-margin-bottom, $slick-menu-title-margin-bottom);
}

.slick-grid-menu-list {
li {
width: auto;
Expand Down
4 changes: 0 additions & 4 deletions packages/common/src/styles/slick-plugins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,7 @@
.slick-cell-menu, .slick-context-menu, .slick-grid-menu, .slick-header-menu {
.slick-menu-option-list,
.slick-menu-command-list {
.slick-command-header, .slick-option-header {
overflow-y: hidden;
}
.slick-command-header.with-title, .slick-option-header.with-title {
overflow-y: auto;
border-bottom: var(--slick-menu-title-border-bottom, $slick-menu-title-border-bottom);
margin-bottom: var(--slick-menu-title-margin-bottom, $slick-menu-title-margin-bottom);
.slick-menu-title {
Expand Down

0 comments on commit 86dbb76

Please sign in to comment.