From 25445c199677b9da5d504d5598b13485f8ed8d1d Mon Sep 17 00:00:00 2001 From: Kristina Date: Wed, 6 Nov 2024 18:48:48 +0400 Subject: [PATCH] Fix tooltips in chat (#7113) Signed-off-by: Kristina Fefelova --- packages/ui/src/components/ModernTab.svelte | 4 +- packages/ui/src/components/Scroller.svelte | 42 ++++++++++++------- packages/ui/src/tooltips.ts | 4 +- packages/ui/src/types.ts | 1 + .../src/components/BaseChatScroller.svelte | 1 + .../src/components/EmployeePresenter.svelte | 3 +- 6 files changed, 36 insertions(+), 19 deletions(-) diff --git a/packages/ui/src/components/ModernTab.svelte b/packages/ui/src/components/ModernTab.svelte index 24918a7bd7..a0088b0061 100644 --- a/packages/ui/src/components/ModernTab.svelte +++ b/packages/ui/src/components/ModernTab.svelte @@ -101,13 +101,13 @@ padding: 0.125rem 0.125rem 0.125rem 0.5rem; height: 1.625rem; min-height: 1.625rem; - min-width: 6rem; + min-width: 4rem; } &.vertical { padding: 0.5rem 0.125rem 0.125rem 0.125rem; width: 1.625rem; - min-height: 6rem; + min-height: 4rem; writing-mode: vertical-rl; text-orientation: sideways; } diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte index 2c63f4189e..56c8dc1c32 100644 --- a/packages/ui/src/components/Scroller.svelte +++ b/packages/ui/src/components/Scroller.svelte @@ -45,6 +45,7 @@ export let stickedScrollBars: boolean = false export let thinScrollBars: boolean = false export let disableOverscroll = false + export let disablePointerEventsOnScroll = false export let onScroll: ((params: ScrollParams) => void) | undefined = undefined export let onResize: (() => void) | undefined = undefined @@ -72,7 +73,9 @@ let divHScroll: HTMLElement let divBar: HTMLElement let divBarH: HTMLElement - let isScrolling: 'vertical' | 'horizontal' | false = false + let isScrollingByBar: 'vertical' | 'horizontal' | false = false + let isScrolling: boolean = false + let scrollTimer: any = 0 let dXY: number let belowContent: number | undefined = undefined let beforeContent: number | undefined = undefined @@ -177,14 +180,15 @@ const handleScroll = (event: PointerEvent): void => { scrolling = false if ( - (divBar == null && isScrolling === 'vertical') || - (divBarH == null && isScrolling === 'horizontal') || + (divBar == null && isScrollingByBar === 'vertical') || + (divBarH == null && isScrollingByBar === 'horizontal') || divScroll == null ) { return } + const rectScroll = divScroll.getBoundingClientRect() - if (isScrolling === 'vertical') { + if (isScrollingByBar === 'vertical') { let Y = Math.round(event.clientY) - dXY if (Y < rectScroll.top + shiftTop + 2) Y = rectScroll.top + shiftTop + 2 if (Y > rectScroll.bottom - divBar.clientHeight - shiftBottom - 2) { @@ -200,7 +204,7 @@ } else { divScroll.scrollTop = (divScroll.scrollHeight - divScroll.clientHeight) * procBar } - } else if (isScrolling === 'horizontal') { + } else if (isScrollingByBar === 'horizontal') { let X = Math.round(event.clientX) - dXY if (X < rectScroll.left + 2 + shiftLeft) X = rectScroll.left + 2 + shiftLeft if (X > rectScroll.right - divBarH.clientWidth - (mask !== 'none' ? 12 : 2) - shiftRight) { @@ -219,7 +223,7 @@ document.body.style.userSelect = 'auto' document.body.style.webkitUserSelect = 'auto' document.removeEventListener('pointerup', onScrollEnd) - isScrolling = false + isScrollingByBar = false } const onScrollStart = (event: PointerEvent, direction: 'vertical' | 'horizontal'): void => { if (divScroll == null) return @@ -229,7 +233,7 @@ document.addEventListener('pointermove', handleScroll) document.body.style.userSelect = 'none' document.body.style.webkitUserSelect = 'none' - isScrolling = direction + isScrollingByBar = direction } const renderFade = () => { @@ -298,10 +302,10 @@ renderFade() } - if (!isScrolling) { + if (!isScrollingByBar) { checkBar() } - if (!isScrolling && horizontal) { + if (!isScrollingByBar && horizontal) { checkBarH() } } @@ -486,7 +490,7 @@ (divBar == null && !horizontal) || (divBarH == null && horizontal) || divScroll == null || - isScrolling !== false + isScrollingByBar !== false ) { return } @@ -574,6 +578,11 @@ ) { closeTooltip() } + clearTimeout(scrollTimer) + isScrolling = true + scrollTimer = setTimeout(() => { + isScrolling = false + }, 300) }} > @@ -589,6 +598,7 @@ : 'row'} style:height={contentDirection === 'vertical-reverse' ? 'max-content' : noStretch ? 'auto' : '100%'} style:align-items={align} + class:disableEvents={isScrolling && disablePointerEventsOnScroll} use:resizeObserver={() => { checkAutoScroll() checkFade() @@ -655,7 +665,7 @@
{ clickOnTrack(ev) }} @@ -663,7 +673,7 @@
{ @@ -677,7 +687,7 @@
{ clickOnTrack(ev, true) }} @@ -685,7 +695,7 @@
{ onScrollStart(ev, 'horizontal') @@ -1026,4 +1036,8 @@ height: 6px; } } + + .disableEvents { + pointer-events: none !important; + } diff --git a/packages/ui/src/tooltips.ts b/packages/ui/src/tooltips.ts index 0a3e478599..aee4ced09a 100644 --- a/packages/ui/src/tooltips.ts +++ b/packages/ui/src/tooltips.ts @@ -36,7 +36,7 @@ export function tooltip (node: HTMLElement, options?: LabelAndProps): any { const show = (): void => { const shown = !!(storedValue.label !== undefined || storedValue.component !== undefined) if (!shown) { - if (opt?.kind !== 'submenu') { + if (opt?.kind !== 'submenu' || opt.timeout !== undefined) { clearTimeout(toHandler) toHandler = setTimeout(() => { showTooltip( @@ -50,7 +50,7 @@ export function tooltip (node: HTMLElement, options?: LabelAndProps): any { opt.kind, opt.keys ) - }, 10) + }, opt.timeout ?? 10) } else { showTooltip( opt.label, diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts index f96794cdb3..d487bc1524 100644 --- a/packages/ui/src/types.ts +++ b/packages/ui/src/types.ts @@ -304,6 +304,7 @@ export interface LabelAndProps { onUpdate?: (result: any) => void kind?: 'tooltip' | 'submenu' | 'popup' keys?: string[] + timeout?: number } export interface ListItem { diff --git a/plugins/chunter-resources/src/components/BaseChatScroller.svelte b/plugins/chunter-resources/src/components/BaseChatScroller.svelte index 36426376a5..a0c2ab5942 100644 --- a/plugins/chunter-resources/src/components/BaseChatScroller.svelte +++ b/plugins/chunter-resources/src/components/BaseChatScroller.svelte @@ -36,6 +36,7 @@ noStretch bottomStart disableOverscroll + disablePointerEventsOnScroll {onScroll} {onResize} > diff --git a/plugins/contact-resources/src/components/EmployeePresenter.svelte b/plugins/contact-resources/src/components/EmployeePresenter.svelte index 3a19f0589a..b338c5dd4a 100644 --- a/plugins/contact-resources/src/components/EmployeePresenter.svelte +++ b/plugins/contact-resources/src/components/EmployeePresenter.svelte @@ -36,7 +36,8 @@ } return { component: EmployeePreviewPopup, - props: { employeeId: value._id } + props: { employeeId: value._id }, + timeout: 300 } }