Skip to content

Commit

Permalink
fix(styling): Grid Menu Title not aligned correctly with Bootstrap
Browse files Browse the repository at this point in the history
  • Loading branch information
@ghiscoding
ghiscoding committed Dec 10, 2021
1 parent a9245f9 commit e2b991f
Show file tree
Hide file tree
Showing 7 changed files with 43 additions and 23 deletions.
1 change: 1 addition & 0 deletions examples/webpack-demo-vanilla-bundle/src/examples/example07.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ export class Example7 {
formatter: () => `<div class="button-style margin-auto" style="width: 35px; margin-top: -1px;"><span class="mdi mdi-chevron-down mdi-22px color-primary"></span></div>`,
cellMenu: {
width: 185,
hideCloseButton: false,
commandTitleKey: 'COMMANDS',
commandItems: [
{
Expand Down
14 changes: 10 additions & 4 deletions packages/common/src/extensions/menuBaseClass.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,10 +111,19 @@ export class MenuBaseClass<M extends CellMenu | ContextMenu | GridMenu | HeaderM
menuOptions: M,
commandOrOptionMenuElm: HTMLElement,
commandOrOptionItems: Array<ExtractMenuType<ExtendableItemTypes, MenuType>>,
args: any,
args: unknown,
itemClickCallback: (event: DOMMouseEvent<HTMLDivElement>, type: MenuType, item: ExtractMenuType<ExtendableItemTypes, MenuType>, columnDef?: Column) => void
) {
if (args && commandOrOptionItems && menuOptions) {
for (const item of commandOrOptionItems) {
this.populateSingleCommandOrOptionItem(itemType, menuOptions, commandOrOptionMenuElm, item, args, itemClickCallback);
}
}
}

/** Add the Command/Options Title when necessary. */
protected populateCommandOrOptionTitle(itemType: MenuType, menuOptions: M, commandOrOptionMenuElm: HTMLElement) {
if (menuOptions) {
const menuHeaderElm = this._menuElm?.querySelector(`.slick-${itemType}-header`) ?? createDomElement('div', { className: `slick-${itemType}-header` });
// user could pass a title on top of the Commands/Options section
const titleProp: 'commandTitle' | 'optionTitle' = `${itemType}Title`;
Expand All @@ -126,9 +135,6 @@ export class MenuBaseClass<M extends CellMenu | ContextMenu | GridMenu | HeaderM
menuHeaderElm.classList.add('no-title');
}
commandOrOptionMenuElm.appendChild(menuHeaderElm);
for (const item of commandOrOptionItems) {
this.populateSingleCommandOrOptionItem(itemType, menuOptions, commandOrOptionMenuElm, item, args, itemClickCallback);
}
}
}

Expand Down
22 changes: 12 additions & 10 deletions packages/common/src/extensions/menuFromCellBaseClass.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,12 +105,9 @@ export class MenuFromCellBaseClass<M extends CellMenu | ContextMenu> extends Men
// -- Option List section
if (!(this.addonOptions as CellMenu | ContextMenu).hideOptionSection && isColumnOptionAllowed && optionItems.length > 0) {
const optionMenuElm = createDomElement('div', { className: `${this._menuCssPrefix}-option-list` });
this.populateCommandOrOptionTitle('option', this.addonOptions, optionMenuElm);
if (!this.addonOptions.hideCloseButton) {
this._bindEventService.bind(closeButtonElm, 'click', ((e: DOMMouseEvent<HTMLDivElement>) => this.handleCloseButtonClicked(e)) as EventListener);
const optionMenuHeaderElm = createDomElement('div', { className: 'slick-option-header' });
optionMenuHeaderElm?.appendChild(closeButtonElm);
optionMenuElm.appendChild(optionMenuHeaderElm);
optionMenuHeaderElm.classList.add('with-close');
this.populateCommandOrOptionCloseBtn('option', closeButtonElm, optionMenuElm);
}
this._menuElm.appendChild(optionMenuElm);
this.populateCommandOrOptionItems(
Expand All @@ -126,12 +123,9 @@ export class MenuFromCellBaseClass<M extends CellMenu | ContextMenu> extends Men
// -- Command List section
if (!(this.addonOptions as CellMenu | ContextMenu).hideCommandSection && isColumnCommandAllowed && commandItems.length > 0) {
const commandMenuElm = createDomElement('div', { className: `${this._menuCssPrefix}-command-list` });
this.populateCommandOrOptionTitle('command', this.addonOptions, commandMenuElm);
if (!this.addonOptions.hideCloseButton && (!isColumnOptionAllowed || optionItems.length === 0 || (this.addonOptions as CellMenu | ContextMenu).hideOptionSection)) {
this._bindEventService.bind(closeButtonElm, 'click', ((e: DOMMouseEvent<HTMLDivElement>) => this.handleCloseButtonClicked(e)) as EventListener);
const commandMenuHeaderElm = createDomElement('div', { className: 'slick-command-header' });
commandMenuHeaderElm?.appendChild(closeButtonElm);
commandMenuElm.appendChild(commandMenuHeaderElm);
commandMenuHeaderElm.classList.add('with-close');
this.populateCommandOrOptionCloseBtn('command', closeButtonElm, commandMenuElm);
}
this._menuElm.appendChild(commandMenuElm);
this.populateCommandOrOptionItems(
Expand Down Expand Up @@ -239,6 +233,14 @@ export class MenuFromCellBaseClass<M extends CellMenu | ContextMenu> extends Men
}
}

protected populateCommandOrOptionCloseBtn(itemType: MenuType, closeButtonElm: HTMLButtonElement, commandOrOptionMenuElm: HTMLDivElement) {
this._bindEventService.bind(closeButtonElm, 'click', ((e: DOMMouseEvent<HTMLDivElement>) => this.handleCloseButtonClicked(e)) as EventListener);
const commandOrOptionMenuHeaderElm = commandOrOptionMenuElm.querySelector<HTMLDivElement>(`.slick-${itemType}-header`) ?? createDomElement('div', { className: `slick-${itemType}-header` });
commandOrOptionMenuHeaderElm?.appendChild(closeButtonElm);
commandOrOptionMenuElm.appendChild(commandOrOptionMenuHeaderElm);
commandOrOptionMenuHeaderElm.classList.add('with-close');
}

protected repositionMenu(event: DOMMouseEvent<HTMLDivElement>) {
if (this._menuElm && event.target) {
// move to 0,0 before calulating height/width since it could be cropped values
Expand Down
4 changes: 2 additions & 2 deletions packages/common/src/extensions/slickColumnPicker.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,10 +108,10 @@ export class SlickColumnPicker {
this._menuElm.setAttribute('aria-expanded', 'false');

// add Close button and optiona a Column list title
addCloseButtomElement.call(this, this._menuElm);
addColumnTitleElementWhenDefined.call(this, this._menuElm);
addCloseButtomElement.call(this, this._menuElm);

this._listElm = createDomElement('span', { className: 'slick-column-picker-list' });
this._listElm = createDomElement('div', { className: 'slick-column-picker-list' });
this._bindEventService.bind(this._menuElm, 'click', handleColumnPickerItemClick.bind(this) as EventListener);

// Hide the menu on outside click.
Expand Down
5 changes: 3 additions & 2 deletions packages/common/src/extensions/slickGridMenu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ export class SlickGridMenu extends MenuBaseClass<GridMenu> {
// user could pass a title on top of the columns list
addColumnTitleElementWhenDefined.call(this, this._menuElm);

this._listElm = createDomElement('span', { className: 'slick-column-picker-list' });
this._listElm = createDomElement('div', { className: 'slick-column-picker-list' });

// update all columns on any of the column title button click from column picker
this._bindEventService.bind(this._menuElm, 'click', handleColumnPickerItemClick.bind(this) as EventListener);
Expand Down Expand Up @@ -795,7 +795,8 @@ export class SlickGridMenu extends MenuBaseClass<GridMenu> {
/** Re/Create Command List by adding title, close & list of commands */
recreateCommandList(addonOptions: GridMenu, callbackArgs: GridMenuEventWithElementCallbackArgs) {
// add Close button
const commandMenuHeaderElm = createDomElement('div', { className: 'slick-command-header' });
this.populateCommandOrOptionTitle('command', addonOptions, this._commandMenuElm);
const commandMenuHeaderElm = this._commandMenuElm.querySelector<HTMLDivElement>(`.slick-command-header`) ?? createDomElement('div', { className: 'slick-command-header' });
commandMenuHeaderElm.classList.add('with-close');
addCloseButtomElement.call(this, commandMenuHeaderElm);
this._commandMenuElm.appendChild(commandMenuHeaderElm);
Expand Down
9 changes: 7 additions & 2 deletions packages/common/src/styles/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -306,6 +306,7 @@ $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-list-width: max-content !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;
Expand All @@ -332,6 +333,7 @@ $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;
$slick-menu-close-btn-line-height: 16px !default;
$slick-menu-close-btn-width: 18px !default;
$slick-menu-close-btn-margin: 0px !default;
$slick-menu-close-btn-padding: 0px !default;
Expand All @@ -357,15 +359,18 @@ $slick-menu-item-width-when-button: calc(100% - #{$slick
$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-min-width: 140px !default;
$slick-menu-option-list-margin-bottom: 6px !default;
$slick-menu-padding: 6px !default;
$slick-menu-title-container-display: flex !default;
$slick-menu-title-container-align-items: flex-start !default;
$slick-menu-title-container-justify-content: flex-end !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: 6px !default;
$slick-menu-title-margin-right: 7px !default;
$slick-menu-title-width: calc(100% - #{$slick-menu-close-btn-width} - 10px) !default;
$slick-menu-title-width: 100% !default;

/* Header Button Plugin */
$slick-header-button-float: right !default;
Expand Down
11 changes: 8 additions & 3 deletions packages/common/src/styles/slick-plugins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ li.hidden {
}

.slick-column-picker-list, .slick-grid-menu-list {
width: 100%;
width: var(--slick-column-picker-list-width, $slick-column-picker-list-width);

li {
border: var(--slick-column-picker-item-border, $slick-column-picker-item-border);
Expand All @@ -96,7 +96,6 @@ li.hidden {
list-style: none outside none;
margin: 0;
padding: var(--slick-column-picker-item-padding, $slick-column-picker-item-padding);
width: auto;
&:hover {
border: var(--slick-column-picker-item-hover-border, $slick-column-picker-item-hover-border);
background-color: var(--slick-column-picker-item-hover-color, $slick-column-picker-item-hover-color);
Expand Down Expand Up @@ -208,6 +207,12 @@ li.hidden {
.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 {
display: var(--slick-menu-title-container-display, $slick-menu-title-container-display);
align-items: var(--slick-menu-title-container-align-items, $slick-menu-title-container-align-items);
justify-content: var(--slick-menu-title-container-justify-content, $slick-menu-title-container-justify-content);
}

.slick-command-header.with-title, .slick-option-header.with-title {
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);
Expand All @@ -229,7 +234,7 @@ li.hidden {
font-family: var(--slick-menu-close-btn-font-family, $slick-menu-close-btn-font-family);
font-size: var(--slick-menu-close-btn-font-size, $slick-menu-close-btn-font-size);
height: var(--slick-menu-close-btn-height, $slick-menu-close-btn-height);
line-height: calc(var(--slick-menu-close-btn-height, $slick-menu-close-btn-height) - 2px);
line-height: var(--slick-menu-close-btn-line-height, $slick-menu-close-btn-line-height);
margin: var(--slick-menu-close-btn-margin, $slick-menu-close-btn-margin);
padding: var(--slick-menu-close-btn-padding, $slick-menu-close-btn-padding);
width: var(--slick-menu-close-btn-width, $slick-menu-close-btn-width);
Expand Down

0 comments on commit e2b991f

Please sign in to comment.