mirror of
https://github.com/hcengineering/platform.git
synced 2025-06-09 09:20:54 +00:00
UBER-428: displaying tooltips with a delay (#3442)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
parent
e9319acca8
commit
0bc097fc52
@ -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;
|
||||||
|
@ -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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user