UBER-428: displaying tooltips with a delay (#3442)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2023-06-20 07:47:16 +03:00 committed by GitHub
parent e9319acca8
commit 0bc097fc52
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 6 deletions

View File

@ -31,12 +31,14 @@
let clWidth: number let clWidth: number
let docWidth: number let docWidth: number
let docHeight: number let docHeight: number
let shown: boolean = false
$: tooltipSW = !$tooltip.component && $tooltip.kind !== 'submenu' $: tooltipSW = !$tooltip.component && $tooltip.kind !== 'submenu'
$: onUpdate = $tooltip.onUpdate $: onUpdate = $tooltip.onUpdate
$: kind = $tooltip.kind $: kind = $tooltip.kind
const clearStyles = (): void => { const clearStyles = (): void => {
shown = false
tooltipHTML.style.top = tooltipHTML.style.top =
tooltipHTML.style.bottom = tooltipHTML.style.bottom =
tooltipHTML.style.left = tooltipHTML.style.left =
@ -122,7 +124,11 @@
tooltipHTML.classList.add('no-arrow') tooltipHTML.classList.add('no-arrow')
} }
tooltipHTML.style.visibility = 'visible' tooltipHTML.style.visibility = 'visible'
} else if (tooltipHTML) tooltipHTML.style.visibility = 'hidden' shown = true
} else if (tooltipHTML) {
shown = false
tooltipHTML.style.visibility = 'hidden'
}
} }
const fitSubmenu = (): void => { const fitSubmenu = (): void => {
@ -203,11 +209,11 @@
{#if $tooltip.component && $tooltip.kind !== 'submenu'} {#if $tooltip.component && $tooltip.kind !== 'submenu'}
<div <div
class="popup-tooltip" class="popup-tooltip"
class:shown
class:doublePadding={$tooltip.label} class:doublePadding={$tooltip.label}
use:resizeObserver={(element) => { use:resizeObserver={(element) => {
clWidth = element.clientWidth clWidth = element.clientWidth
if (kind === 'submenu') fitSubmenu() fitTooltip(tooltipHTML)
else fitTooltip(tooltipHTML)
}} }}
bind:this={tooltipHTML} bind:this={tooltipHTML}
> >
@ -233,7 +239,7 @@
/> />
{/if} {/if}
</div> </div>
<div bind:this={nubHTML} class="nub {nubDirection ?? ''}" /> <div bind:this={nubHTML} class="nub {nubDirection ?? ''}" class:shown />
{:else if $tooltip.label && $tooltip.kind !== 'submenu'} {:else if $tooltip.label && $tooltip.kind !== 'submenu'}
<div class="tooltip {dir ?? ''}" bind:this={tooltipHTML}> <div class="tooltip {dir ?? ''}" bind:this={tooltipHTML}>
<Label label={$tooltip.label} params={$tooltip.props ?? {}} /> <Label label={$tooltip.label} params={$tooltip.props ?? {}} />
@ -302,6 +308,7 @@
border-radius: 0.75rem; border-radius: 0.75rem;
box-shadow: var(--theme-popup-shadow); box-shadow: var(--theme-popup-shadow);
user-select: none; user-select: none;
opacity: 0;
z-index: 10000; z-index: 10000;
&.doublePadding { &.doublePadding {
@ -314,6 +321,7 @@
// background-color: rgba(255, 255, 0, .5); // background-color: rgba(255, 255, 0, .5);
user-select: none; user-select: none;
pointer-events: none; pointer-events: none;
opacity: 0;
z-index: 10000; z-index: 10000;
&::after, &::after,
@ -380,6 +388,10 @@
transform: rotate(-90deg); transform: rotate(-90deg);
} }
} }
.shown {
transition: opacity 0.1s ease-in-out 0.15s;
opacity: 1;
}
.keys { .keys {
margin-left: 0.5rem; margin-left: 0.5rem;

View File

@ -51,7 +51,7 @@
<div class="container"> <div class="container">
<div <div
class="flex flex-between flex-grow header" class="flex-between header"
use:resizeObserver={() => { use:resizeObserver={() => {
dispatch('changeContent') dispatch('changeContent')
}} }}
@ -117,10 +117,10 @@
} }
.container { .container {
max-height: 30rem;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-height: 30rem;
} }
.header { .header {