From 5f5b75b8d983125e30827a8b1f61c5a418cd7b67 Mon Sep 17 00:00:00 2001 From: Rameshwar Verma Date: Wed, 27 Mar 2024 12:07:21 +0530 Subject: [PATCH 01/20] fix checkbox UI in multi selectbox and fix scroll issue --- .../pseudo-checkbox/pseudo-checkbox.scss | 23 +++++----- ui/src/components/select/search/index.ts | 6 +-- .../select/search/option-search.scss | 4 +- ui/src/components/select/select.component.ts | 42 +++++++++++++++---- ui/src/components/select/select.html | 5 ++- ui/src/components/select/select.scss | 36 ++++++++++++---- 6 files changed, 81 insertions(+), 35 deletions(-) diff --git a/ui/src/components/core/selection/pseudo-checkbox/pseudo-checkbox.scss b/ui/src/components/core/selection/pseudo-checkbox/pseudo-checkbox.scss index 02dc7b082..30476a38c 100644 --- a/ui/src/components/core/selection/pseudo-checkbox/pseudo-checkbox.scss +++ b/ui/src/components/core/selection/pseudo-checkbox/pseudo-checkbox.scss @@ -34,12 +34,20 @@ $_oui-pseudo-checkmark-size: $oui-checkbox-size - // Used to render the checkmark/mixedmark inside of the box. &::after { + content: ''; + display: block; position: absolute; + box-sizing: border-box; + transform: rotate(-45deg); + border-bottom: 2px solid #333; + border-left: 2px solid #333; + top: ($oui-checkbox-size * 0.5) - ($_oui-pseudo-checkmark-size * 0.25) - + ($oui-checkbox-size * 0.05) - $oui-checkbox-border-width; + left: 2px; + width: 10px; + height: 5px; + transition: opacity 90ms $oui-linear-out-slow-in-timing-function; opacity: 0; - content: ''; - border-bottom: $oui-checkbox-border-width * 2 solid #333; - transition: opacity $oui-checkbox-transition-duration - $oui-linear-out-slow-in-timing-function; } } @@ -48,12 +56,5 @@ $_oui-pseudo-checkmark-size: $oui-checkbox-size - } .oui-pseudo-checkbox-checked::after { - top: ($oui-checkbox-size * 0.5) - ($_oui-pseudo-checkmark-size * 0.25) - - ($oui-checkbox-size * 0.1) - $oui-checkbox-border-width; - left: $_oui-pseudo-checkbox-padding - $oui-checkbox-border-width * 0.5; - width: 10px; - height: 6px; - border-left: $oui-checkbox-border-width * 2 solid #333; - transform: rotate(-45deg); opacity: 1; } diff --git a/ui/src/components/select/search/index.ts b/ui/src/components/select/search/index.ts index 917f84e60..36b6b816d 100644 --- a/ui/src/components/select/search/index.ts +++ b/ui/src/components/select/search/index.ts @@ -111,10 +111,6 @@ export class OuiSelectSearchComponent if (this._document.querySelector(searchQueryString)) { this.scrollCalc(searchQueryString); } - const actionItemsQueryString = '.oui-select-action-items'; - if (this._document.querySelector(actionItemsQueryString)) { - this.scrollCalc(actionItemsQueryString); - } } scrollCalc(selectQueryString: string) { const searchInput = this._document.querySelector(selectQueryString); @@ -127,7 +123,7 @@ export class OuiSelectSearchComponent if (scrollbarWidth > 5) { searchInput.style.width = `${inner.offsetWidth}px`; } else { - searchInput.style.width = `calc(100% + 8px)`; + searchInput.style.width = '100%'; } } diff --git a/ui/src/components/select/search/option-search.scss b/ui/src/components/select/search/option-search.scss index 98cd584e7..152ffb5a6 100644 --- a/ui/src/components/select/search/option-search.scss +++ b/ui/src/components/select/search/option-search.scss @@ -10,8 +10,8 @@ $defaul-color: #c8c8c8; .oui-select-search-inner { position: absolute; background: #fff; - top: 6px; - left: -9px; + top: 0px; + left: 0px; width: 100%; z-index: 100; padding: 10px; diff --git a/ui/src/components/select/select.component.ts b/ui/src/components/select/select.component.ts index 969a46e7d..82a9234f7 100644 --- a/ui/src/components/select/select.component.ts +++ b/ui/src/components/select/select.component.ts @@ -1368,10 +1368,6 @@ export class OuiSelect if (this._document.querySelector(searchQueryString)) { this.scrollCalc(searchQueryString); } - const actionItemsQueryString = '.oui-select-action-items'; - if (this._document.querySelector(actionItemsQueryString)) { - this.scrollCalc(actionItemsQueryString); - } } scrollCalc(selectQueryString: string) { const searchInput = this._document.querySelector(selectQueryString); @@ -1384,7 +1380,7 @@ export class OuiSelect if (scrollbarWidth > 5) { searchInput.style.width = `${inner.offsetWidth}px`; } else { - searchInput.style.width = `calc(100% + 8px)`; + searchInput.style.width = '100%'; } } @@ -1405,12 +1401,37 @@ export class OuiSelect this.options, this.optionGroups ); + + const optionElement = this._document.querySelector( + '.oui-option' + ) as HTMLElement; + const selectActionWrapperElement = this._document.querySelector( + '.oui-select-action-wrapper' + ) as HTMLElement; + const selectPanelElement = this._document.querySelector( + '.oui-select-panel' + ) as HTMLElement; + const selectSearchBox = this._document.querySelector( + '.oui-select-search-inner' + ) as HTMLElement; + const labelHeight = labelCount ? (labelCount - 1) * 10 : 0; + const optionHeight = optionElement?.clientHeight || SELECT_OPTION_HEIGHT; + const ouiSelectActionWrapperHeight = + selectActionWrapperElement?.clientHeight ?? 0; + const selectSearchBoxheight = selectSearchBox?.clientHeight - 10 || 0; + const selectPanelHeight = + selectPanelElement?.clientHeight - + ouiSelectActionWrapperHeight - + selectSearchBoxheight - + 20 - + labelHeight || SELECT_PANEL_HEIGHT; + const scrollTop = this._getScrollTop(); const newScrollPosition = _getOptionScrollPosition( index + labelCount, - SELECT_OPTION_HEIGHT, + optionHeight, scrollTop, - SELECT_PANEL_HEIGHT + selectPanelHeight ); this._setScrollTop(newScrollPosition); } @@ -1421,12 +1442,15 @@ export class OuiSelect */ _setScrollTop(scrollTop: number): void { if (this.panel) { - this.panel.nativeElement.scrollTop = scrollTop; + this.panel.nativeElement.querySelector('.oui-select-options').scrollTop = + scrollTop; } } /** Returns the panel's scrollTop. */ _getScrollTop(): number { - return this.panel ? this.panel.nativeElement.scrollTop : 0; + return this.panel + ? this.panel.nativeElement.querySelector('.oui-select-options').scrollTop + : 0; } } diff --git a/ui/src/components/select/select.html b/ui/src/components/select/select.html index a16d07199..8713cfa8d 100644 --- a/ui/src/components/select/select.html +++ b/ui/src/components/select/select.html @@ -48,8 +48,11 @@ [class.oui-select-input-outer]="ouiSelectInputOuterClassName" [class.oui-select-has-a-panel]="panelClass" [class.oui-select-large]="large" + [class.action-item]="actionItems" > - +
+ +