From d1ad28179841108ea3cd546b3391708c84f0a764 Mon Sep 17 00:00:00 2001 From: Vladyslav Bondar Date: Mon, 28 Nov 2022 21:22:37 +0200 Subject: [PATCH] feat(core): add dropdown offsets to `TUI_DROPDOWN_OPTIONS` --- .../dropdown/dropdown-options.directive.ts | 13 +++++++------ .../dropdown-position-sided.directive.ts | 18 +++++++----------- .../dropdown/dropdown-position.directive.ts | 18 +++++++----------- .../directives/dropdown/dropdown.component.ts | 14 +++++--------- .../autogenerated-code-hints.component.ts | 1 + .../src/modules/components/abstract/control.ts | 2 ++ .../dropdown-documentation.template.html | 9 +++++++++ .../modules/components/abstract/dropdown.ts | 1 + .../combo-box/combo-box.template.html | 1 + .../hosted-dropdown.template.html | 1 + .../input-phone-international.template.html | 1 + .../input-phone/input-phone.template.html | 1 + .../input-tag/input-tag.template.html | 1 + .../input-time/input-time.template.html | 1 + .../components/input/input.template.html | 1 + .../multi-select/multi-select.template.html | 1 + .../components/select/select.template.html | 1 + .../dropdown-context.component.html | 1 + .../dropdown-hover.template.html | 1 + .../dropdown-selection.template.html | 1 + .../directives/dropdown/dropdown.template.html | 1 + 21 files changed, 52 insertions(+), 37 deletions(-) diff --git a/projects/core/directives/dropdown/dropdown-options.directive.ts b/projects/core/directives/dropdown/dropdown-options.directive.ts index d20174897d9d7..53d471dd37e80 100644 --- a/projects/core/directives/dropdown/dropdown-options.directive.ts +++ b/projects/core/directives/dropdown/dropdown-options.directive.ts @@ -16,17 +16,13 @@ import { } from '@taiga-ui/core/types'; import {tuiOverrideOptions} from '@taiga-ui/core/utils'; -/** - * Safe space around host and screen edges - */ -export const TUI_DROPDOWN_OFFSET = 4; - export interface TuiDropdownOptions { readonly align: TuiHorizontalDirection; readonly direction: TuiVerticalDirection | null; readonly limitWidth: TuiDropdownWidth; readonly minHeight: number; readonly maxHeight: number; + readonly offset: number; } /** Default values for dropdown options */ @@ -36,6 +32,7 @@ export const TUI_DROPDOWN_DEFAULT_OPTIONS: TuiDropdownOptions = { limitWidth: `auto`, maxHeight: 400, minHeight: 80, + offset: 25, }; export const TUI_DROPDOWN_OPTIONS = new InjectionToken( @@ -57,7 +54,7 @@ export const tuiDropdownOptionsProvider: ( }); @Directive({ - selector: `[tuiDropdownAlign], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight]`, + selector: `[tuiDropdownAlign], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]`, providers: [ { provide: TUI_DROPDOWN_OPTIONS, @@ -86,6 +83,10 @@ export class TuiDropdownOptionsDirective implements TuiDropdownOptions { @tuiDefaultProp() maxHeight = this.options.maxHeight; + @Input(`tuiDropdownOffset`) + @tuiDefaultProp() + offset = this.options.offset; + constructor( @SkipSelf() @Inject(TUI_DROPDOWN_OPTIONS) diff --git a/projects/core/directives/dropdown/dropdown-position-sided.directive.ts b/projects/core/directives/dropdown/dropdown-position-sided.directive.ts index e7c293e2241c8..f58cdcc6ed173 100644 --- a/projects/core/directives/dropdown/dropdown-position-sided.directive.ts +++ b/projects/core/directives/dropdown/dropdown-position-sided.directive.ts @@ -7,11 +7,7 @@ import { } from '@taiga-ui/core/abstract'; import {TuiPoint} from '@taiga-ui/core/types'; -import { - TUI_DROPDOWN_OFFSET, - TUI_DROPDOWN_OPTIONS, - TuiDropdownOptions, -} from './dropdown-options.directive'; +import {TUI_DROPDOWN_OPTIONS, TuiDropdownOptions} from './dropdown-options.directive'; import {TuiDropdownPositionDirective} from './dropdown-position.directive'; @Directive({ @@ -46,15 +42,15 @@ export class TuiDropdownPositionSidedDirective implements TuiPositionAccessor { const {align, direction, minHeight} = this.options; const available = { top: hostRect.bottom, - left: hostRect.left - TUI_DROPDOWN_OFFSET, - right: innerWidth - hostRect.right - TUI_DROPDOWN_OFFSET, + left: hostRect.left - this.options.offset, + right: innerWidth - hostRect.right - this.options.offset, bottom: innerHeight - hostRect.top, } as const; const position = { - top: hostRect.bottom - height + 2 * TUI_DROPDOWN_OFFSET + 1, // 1 for border - left: hostRect.left - width - TUI_DROPDOWN_OFFSET, - right: hostRect.right + TUI_DROPDOWN_OFFSET, - bottom: hostRect.top - 2 * TUI_DROPDOWN_OFFSET - 1, // 1 for border + top: hostRect.bottom - height + 1, // 1 for border + left: hostRect.left - width - this.options.offset, + right: hostRect.right + this.options.offset, + bottom: hostRect.top - 1, // 1 for border } as const; const better = available.top > available.bottom ? `top` : `bottom`; const maxLeft = available.left > available.right ? position.left : position.right; diff --git a/projects/core/directives/dropdown/dropdown-position.directive.ts b/projects/core/directives/dropdown/dropdown-position.directive.ts index 103b2cef8c50f..19780391aaf37 100644 --- a/projects/core/directives/dropdown/dropdown-position.directive.ts +++ b/projects/core/directives/dropdown/dropdown-position.directive.ts @@ -7,11 +7,7 @@ import { } from '@taiga-ui/core/abstract'; import {TuiPoint, TuiVerticalDirection} from '@taiga-ui/core/types'; -import { - TUI_DROPDOWN_OFFSET, - TUI_DROPDOWN_OPTIONS, - TuiDropdownOptions, -} from './dropdown-options.directive'; +import {TUI_DROPDOWN_OPTIONS, TuiDropdownOptions} from './dropdown-options.directive'; @Directive({ selector: `[tuiDropdown]:not([tuiDropdownCustomPosition]):not([tuiDropdownSided])`, @@ -31,17 +27,17 @@ export class TuiDropdownPositionDirective implements TuiPositionAccessor { const {innerHeight, innerWidth} = this.windowRef; const {minHeight, align, direction} = this.options; const previous = this.previous || direction || `bottom`; - const right = Math.max(hostRect.right - width, TUI_DROPDOWN_OFFSET); + const right = Math.max(hostRect.right - width, this.options.offset); const available = { - top: hostRect.top - 2 * TUI_DROPDOWN_OFFSET, - bottom: innerHeight - hostRect.bottom - 2 * TUI_DROPDOWN_OFFSET, + top: hostRect.top - 2 * this.options.offset, + bottom: innerHeight - hostRect.bottom - 2 * this.options.offset, } as const; const position = { - top: hostRect.top - TUI_DROPDOWN_OFFSET - height, - bottom: hostRect.bottom + TUI_DROPDOWN_OFFSET, + top: hostRect.top - this.options.offset - height, + bottom: hostRect.bottom + this.options.offset, right, left: - hostRect.left + width < innerWidth - TUI_DROPDOWN_OFFSET + hostRect.left + width < innerWidth - this.options.offset ? hostRect.left : right, } as const; diff --git a/projects/core/directives/dropdown/dropdown.component.ts b/projects/core/directives/dropdown/dropdown.component.ts index f5a0bd19338bd..692ecc26ba00e 100644 --- a/projects/core/directives/dropdown/dropdown.component.ts +++ b/projects/core/directives/dropdown/dropdown.component.ts @@ -28,11 +28,7 @@ import {takeUntil} from 'rxjs/operators'; // eslint-disable-next-line import/no-cycle import {TuiDropdownDirective} from './dropdown.directive'; import {TuiDropdownHoverDirective} from './dropdown-hover.directive'; -import { - TUI_DROPDOWN_OFFSET, - TUI_DROPDOWN_OPTIONS, - TuiDropdownOptions, -} from './dropdown-options.directive'; +import {TUI_DROPDOWN_OPTIONS, TuiDropdownOptions} from './dropdown-options.directive'; /** * This component is used to show template in a portal using default style of white rounded box with a shadow @@ -105,13 +101,13 @@ export class TuiDropdownComponent { const isIntersecting = left < rect.right && right > rect.left && - top < offsetY + 2 * TUI_DROPDOWN_OFFSET; + top < offsetY + 2 * this.options.offset; const available = isIntersecting - ? rect.top - 2 * TUI_DROPDOWN_OFFSET - : offsetY + innerHeight - top - TUI_DROPDOWN_OFFSET; + ? rect.top - 2 * this.options.offset + : offsetY + innerHeight - top - this.options.offset; style.position = position; - style.top = tuiPx(Math.max(top, offsetY + TUI_DROPDOWN_OFFSET)); + style.top = tuiPx(Math.max(top, offsetY + this.options.offset)); style.left = tuiPx(left); style.maxHeight = tuiPx(Math.min(maxHeight, available)); style.width = ``; diff --git a/projects/demo/src/modules/app/autogenerated-code-hints/autogenerated-code-hints.component.ts b/projects/demo/src/modules/app/autogenerated-code-hints/autogenerated-code-hints.component.ts index 20dadb9eb2ad3..a5c6183b09d0c 100644 --- a/projects/demo/src/modules/app/autogenerated-code-hints/autogenerated-code-hints.component.ts +++ b/projects/demo/src/modules/app/autogenerated-code-hints/autogenerated-code-hints.component.ts @@ -17,6 +17,7 @@ const DROPDOWN_CONTROLLER_SELECTORS = [ `tuiDropdownLimitWidth`, `tuiDropdownMinHeight`, `tuiDropdownMaxHeight`, + `tuiDropdownOffset`, ]; @Component({ diff --git a/projects/demo/src/modules/components/abstract/control.ts b/projects/demo/src/modules/components/abstract/control.ts index fcae40e76d4ed..508b79f33f863 100644 --- a/projects/demo/src/modules/components/abstract/control.ts +++ b/projects/demo/src/modules/components/abstract/control.ts @@ -147,6 +147,8 @@ export abstract class AbstractExampleTuiControl postfix = this.prefixVariants[0]; + dropdownOffset = TUI_DROPDOWN_DEFAULT_OPTIONS.offset; + get customContent(): PolymorpheusContent { return this.customContentSelected === CUSTOM_SVG_NAME ? CUSTOM_SVG diff --git a/projects/demo/src/modules/components/abstract/dropdown-documentation/dropdown-documentation.template.html b/projects/demo/src/modules/components/abstract/dropdown-documentation/dropdown-documentation.template.html index f0ecbe6b46328..43f4c5502068a 100644 --- a/projects/demo/src/modules/components/abstract/dropdown-documentation/dropdown-documentation.template.html +++ b/projects/demo/src/modules/components/abstract/dropdown-documentation/dropdown-documentation.template.html @@ -69,4 +69,13 @@ > Maximum height of dropdown + + Dropdown offset + diff --git a/projects/demo/src/modules/components/abstract/dropdown.ts b/projects/demo/src/modules/components/abstract/dropdown.ts index 8c383c4afaae3..f48b7c947218d 100644 --- a/projects/demo/src/modules/components/abstract/dropdown.ts +++ b/projects/demo/src/modules/components/abstract/dropdown.ts @@ -24,4 +24,5 @@ export abstract class AbstractExampleTuiDropdown { dropdownLimitWidth = TUI_DROPDOWN_DEFAULT_OPTIONS.limitWidth; dropdownMinHeight = TUI_DROPDOWN_DEFAULT_OPTIONS.minHeight; dropdownMaxHeight = TUI_DROPDOWN_DEFAULT_OPTIONS.maxHeight; + dropdownOffset = TUI_DROPDOWN_DEFAULT_OPTIONS.offset; } diff --git a/projects/demo/src/modules/components/combo-box/combo-box.template.html b/projects/demo/src/modules/components/combo-box/combo-box.template.html index 0c6cb7f72b057..9c75488a8c222 100644 --- a/projects/demo/src/modules/components/combo-box/combo-box.template.html +++ b/projects/demo/src/modules/components/combo-box/combo-box.template.html @@ -115,6 +115,7 @@ [tuiDropdownLimitWidth]="dropdownLimitWidth" [tuiDropdownMinHeight]="dropdownMinHeight" [tuiDropdownMaxHeight]="dropdownMaxHeight" + [tuiDropdownOffset]="dropdownOffset" [tuiHintContent]="hintContent" [tuiHintDirection]="hintDirection" [tuiHintAppearance]="hintAppearance" diff --git a/projects/demo/src/modules/components/hosted-dropdown/hosted-dropdown.template.html b/projects/demo/src/modules/components/hosted-dropdown/hosted-dropdown.template.html index 6aa49a262ab61..75b9211412a9a 100644 --- a/projects/demo/src/modules/components/hosted-dropdown/hosted-dropdown.template.html +++ b/projects/demo/src/modules/components/hosted-dropdown/hosted-dropdown.template.html @@ -68,6 +68,7 @@ [tuiDropdownLimitWidth]="dropdownLimitWidth" [tuiDropdownMinHeight]="dropdownMinHeight" [tuiDropdownMaxHeight]="dropdownMaxHeight" + [tuiDropdownOffset]="dropdownOffset" [(open)]="open" > To close dropdown: [tuiDropdownAlign]="dropdownAlign" [tuiDropdownDirection]="dropdownDirection" [tuiDropdownLimitWidth]="dropdownLimitWidth" + [tuiDropdownOffset]="dropdownOffset" > Right click on me to see a dropdown diff --git a/projects/demo/src/modules/directives/dropdown-hover/dropdown-hover.template.html b/projects/demo/src/modules/directives/dropdown-hover/dropdown-hover.template.html index 3752a664a98d2..87cb00d22c50d 100644 --- a/projects/demo/src/modules/directives/dropdown-hover/dropdown-hover.template.html +++ b/projects/demo/src/modules/directives/dropdown-hover/dropdown-hover.template.html @@ -40,6 +40,7 @@ [tuiDropdownAlign]="dropdownAlign" [tuiDropdownDirection]="dropdownDirection" [tuiDropdownLimitWidth]="dropdownLimitWidth" + [tuiDropdownOffset]="dropdownOffset" > Hover pointer over to see a dropdown diff --git a/projects/demo/src/modules/directives/dropdown-selection/dropdown-selection.template.html b/projects/demo/src/modules/directives/dropdown-selection/dropdown-selection.template.html index 61bbc54732e4c..537891d459b9c 100644 --- a/projects/demo/src/modules/directives/dropdown-selection/dropdown-selection.template.html +++ b/projects/demo/src/modules/directives/dropdown-selection/dropdown-selection.template.html @@ -39,6 +39,7 @@ [tuiDropdownAlign]="dropdownAlign" [tuiDropdownDirection]="dropdownDirection" [tuiDropdownLimitWidth]="dropdownLimitWidth" + [tuiDropdownOffset]="dropdownOffset" > Select a text to see a dropdown diff --git a/projects/demo/src/modules/directives/dropdown/dropdown.template.html b/projects/demo/src/modules/directives/dropdown/dropdown.template.html index 2e048f3744f66..c647172897ec7 100644 --- a/projects/demo/src/modules/directives/dropdown/dropdown.template.html +++ b/projects/demo/src/modules/directives/dropdown/dropdown.template.html @@ -70,6 +70,7 @@ [tuiDropdownDirection]="dropdownDirection" [tuiDropdownLimitWidth]="dropdownLimitWidth" [tuiDropdownManual]="open" + [tuiDropdownOffset]="dropdownOffset" (tuiObscured)="onObscured($event)" (click)="onClick()" >