From cfcfc8588b854530425f2bea19e8aa7c5256d059 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Thu, 14 Oct 2021 22:56:18 -0400 Subject: [PATCH] feat(controls): add `minHeight` option to ColumnPicker/GridMenu --- .../common/src/controls/slickColumnPicker.ts | 6 ++++-- packages/common/src/controls/slickGridMenu.ts | 9 ++++++--- .../src/interfaces/columnPicker.interface.ts | 12 ++++++++++++ .../src/interfaces/gridMenuOption.interface.ts | 18 +++++++++++++++--- packages/common/src/styles/_variables.scss | 1 + packages/common/src/styles/slick-controls.scss | 1 + 6 files changed, 39 insertions(+), 8 deletions(-) diff --git a/packages/common/src/controls/slickColumnPicker.ts b/packages/common/src/controls/slickColumnPicker.ts index ce1f27f62..ffce848f9 100644 --- a/packages/common/src/controls/slickColumnPicker.ts +++ b/packages/common/src/controls/slickColumnPicker.ts @@ -12,7 +12,7 @@ import { ExtensionUtility } from '../extensions/extensionUtility'; import { BindingEventService } from '../services/bindingEvent.service'; import { PubSubService } from '../services/pubSub.service'; import { SharedService } from '../services/shared.service'; -import { emptyElement } from '../services'; +import { emptyElement, findWidthOrDefault } from '../services/domUtilities'; import { addColumnTitleElementWhenDefined, addCloseButtomElement, handleColumnPickerItemClick, populateColumnPicker, updateColumnPickerOrder } from '../extensions/extensionCommonUtils'; // using external SlickGrid JS libraries @@ -47,6 +47,7 @@ export class SlickColumnPicker { hideForceFitButton: false, hideSyncResizeButton: false, forceFitTitle: 'Force fit columns', + minHeight: 200, syncResizeTitle: 'Synchronous resize', headerColumnValueExtractor: (columnDef: Column) => columnDef.name } as ColumnPickerOption; @@ -195,7 +196,8 @@ export class SlickColumnPicker { protected repositionMenu(event: DOMMouseEvent) { this._menuElm.style.top = `${event.pageY - 10}px`; this._menuElm.style.left = `${event.pageX - 10}px`; - this._menuElm.style.maxHeight = `${document.body.clientHeight - event.pageY - 10}px`; + this._menuElm.style.minHeight = findWidthOrDefault(this.addonOptions.minHeight, ''); + this._menuElm.style.maxHeight = findWidthOrDefault(this.addonOptions.maxHeight, `${window.innerHeight - event.clientY}px`); this._menuElm.style.display = 'block'; this._menuElm.appendChild(this._listElm); } diff --git a/packages/common/src/controls/slickGridMenu.ts b/packages/common/src/controls/slickGridMenu.ts index 265d74708..543f4c9ce 100644 --- a/packages/common/src/controls/slickGridMenu.ts +++ b/packages/common/src/controls/slickGridMenu.ts @@ -13,7 +13,7 @@ import { } from '../interfaces/index'; import { DelimiterType, FileType } from '../enums'; import { ExtensionUtility } from '../extensions/extensionUtility'; -import { emptyElement, getHtmlElementOffset, getTranslationPrefix, } from '../services'; +import { emptyElement, findWidthOrDefault, getHtmlElementOffset, getTranslationPrefix, } from '../services/index'; import { ExcelExportService } from '../services/excelExport.service'; import { FilterService } from '../services/filter.service'; import { PubSubService } from '../services/pubSub.service'; @@ -63,6 +63,7 @@ export class SlickGridMenu extends MenuBaseClass { forceFitTitle: 'Force fit columns', marginBottom: 15, menuWidth: 18, + minHeight: 250, contentMinWidth: 0, resizeOnShowHeaderRow: false, syncResizeTitle: 'Synchronous resize', @@ -345,10 +346,12 @@ export class SlickGridMenu extends MenuBaseClass { } // set 'height' when defined OR ELSE use the 'max-height' with available window size and optional margin bottom + this._menuElm.style.minHeight = findWidthOrDefault(addonOptions.minHeight, ''); + if (addonOptions?.height !== undefined) { - this._menuElm.style.height = `${addonOptions.height}px`; + this._menuElm.style.height = findWidthOrDefault(addonOptions.height, ''); } else { - this._menuElm.style.maxHeight = `${window.innerHeight - e.clientY - menuMarginBottom}px`; + this._menuElm.style.maxHeight = findWidthOrDefault(addonOptions.maxHeight, `${window.innerHeight - e.clientY - menuMarginBottom}px`); } this._menuElm.style.display = 'block'; diff --git a/packages/common/src/interfaces/columnPicker.interface.ts b/packages/common/src/interfaces/columnPicker.interface.ts index 6462c71aa..54bccce48 100644 --- a/packages/common/src/interfaces/columnPicker.interface.ts +++ b/packages/common/src/interfaces/columnPicker.interface.ts @@ -26,6 +26,18 @@ export interface ColumnPickerOption { /** Defaults to True, show/hide 1 of the last 2 checkbox at the end of the picker list */ hideSyncResizeButton?: boolean; + /** + * Defaults to available space at the bottom, Grid Menu minimum height. + * Can be a number or a string, if a number is provided it will add the `px` suffix for pixels, or if a string is passed it will use it as is. + */ + maxHeight?: number | string; + + /** + * Defaults to 200(px), Grid Menu minimum height. + * Can be a number or a string, if a number is provided it will add the `px` suffix for pixels, or if a string is passed it will use it as is. + */ + minHeight?: number | string; + /** Defaults to "Synchronous resize" which is 1 of the last 2 checkbox title shown at the end of the picker list */ syncResizeTitle?: string; diff --git a/packages/common/src/interfaces/gridMenuOption.interface.ts b/packages/common/src/interfaces/gridMenuOption.interface.ts index 80ea9dce5..5a769c05b 100644 --- a/packages/common/src/interfaces/gridMenuOption.interface.ts +++ b/packages/common/src/interfaces/gridMenuOption.interface.ts @@ -40,8 +40,11 @@ export interface GridMenuOption { /** Same as "forceFitTitle", except that it's a translation key which can be used on page load and/or when switching locale */ forceFitTitleKey?: string; - /** Defaults to undefined, fixed height of the Grid Menu content, when provided it will be used instead of the max-height */ - height?: number; + /** + * Defaults to undefined, fixed height of the Grid Menu content, when provided it will be used instead of the max-height. + * Can be a number or a string, if a number is provided it will add the `px` suffix for pixels, or if a string is passed it will use it as is. + */ + height?: number | string; /** Defaults to false, which will hide the "Clear all Filters" command in the Grid Menu (Grid Option "enableFiltering: true" has to be enabled) */ hideClearAllFiltersCommand?: boolean; @@ -121,12 +124,21 @@ export interface GridMenuOption { /** Defaults to 15, margin to use at the bottom of the grid menu to deduce from the max-height, only in effect when height is undefined */ marginBottom?: number; - /** Maximum height that the drop menu will have, can be a number (250) or text ("none") */ + /** + * Defaults to available space at the bottom, Grid Menu minimum height. + * Can be a number or a string, if a number is provided it will add the `px` suffix for pixels, or if a string is passed it will use it as is. + */ maxHeight?: number | string; /** Defaults to 16 pixels (only the number), which is the width in pixels of the Grid Menu icon container */ menuWidth?: number; + /** + * Defaults to 200(px), Grid Menu minimum height. + * Can be a number or a string, if a number is provided it will add the `px` suffix for pixels, or if a string is passed it will use it as is. + */ + minHeight?: number | string; + /** Defaults to False, which will resize the Header Row and remove the width of the Grid Menu icon from it's total width. */ resizeOnShowHeaderRow?: boolean; diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss index 6aec57cfd..1ed16c77b 100644 --- a/packages/common/src/styles/_variables.scss +++ b/packages/common/src/styles/_variables.scss @@ -345,6 +345,7 @@ $grid-menu-item-padding: 2px 4px !default; $grid-menu-item-font-size: $font-size-base !default; $grid-menu-item-hover-border: 1px solid #BFBDBD !default; $grid-menu-item-hover-color: #fafafa !default; +$grid-menu-min-height: 250px !default; $grid-menu-min-width: 220px !default; $grid-menu-divider-height: 1px !default; $grid-menu-divider-margin: 8px 5px !default; diff --git a/packages/common/src/styles/slick-controls.scss b/packages/common/src/styles/slick-controls.scss index 98818271a..bb8aede3f 100644 --- a/packages/common/src/styles/slick-controls.scss +++ b/packages/common/src/styles/slick-controls.scss @@ -152,6 +152,7 @@ border-radius: var(--slick-grid-menu-border-radius, $grid-menu-border-radius); padding: 6px; box-shadow: var(--slick-grid-menu-box-shadow, $grid-menu-box-shadow); + min-height: var(--slick-grid-menu-min-height, $grid-menu-min-height); min-width: var(--slick-grid-menu-min-width, $grid-menu-min-width); cursor: default; position:absolute;