mirror of
https://github.com/hcengineering/platform.git
synced 2025-06-07 08:21:08 +00:00
Smooth appearance of the tooltip (fixed twitching) (#8617)
Some checks are pending
CI / formatting (push) Blocked by required conditions
CI / test (push) Blocked by required conditions
CI / build (push) Waiting to run
CI / svelte-check (push) Blocked by required conditions
CI / uitest (push) Waiting to run
CI / uitest-pg (push) Waiting to run
CI / uitest-qms (push) Waiting to run
CI / uitest-workspaces (push) Waiting to run
CI / docker-build (push) Blocked by required conditions
CI / dist-build (push) Blocked by required conditions
Some checks are pending
CI / formatting (push) Blocked by required conditions
CI / test (push) Blocked by required conditions
CI / build (push) Waiting to run
CI / svelte-check (push) Blocked by required conditions
CI / uitest (push) Waiting to run
CI / uitest-pg (push) Waiting to run
CI / uitest-qms (push) Waiting to run
CI / uitest-workspaces (push) Waiting to run
CI / docker-build (push) Blocked by required conditions
CI / dist-build (push) Blocked by required conditions
This commit is contained in:
parent
8bcedc3bf8
commit
cb9a0d5017
@ -21,6 +21,7 @@
|
|||||||
import Component from './Component.svelte'
|
import Component from './Component.svelte'
|
||||||
import Label from './Label.svelte'
|
import Label from './Label.svelte'
|
||||||
import { capitalizeFirstLetter, formatKey } from '../utils'
|
import { capitalizeFirstLetter, formatKey } from '../utils'
|
||||||
|
import { testing } from '..'
|
||||||
|
|
||||||
let tooltipHTML: HTMLElement
|
let tooltipHTML: HTMLElement
|
||||||
let nubHTML: HTMLElement
|
let nubHTML: HTMLElement
|
||||||
@ -248,6 +249,7 @@
|
|||||||
|
|
||||||
const hideTooltip = (): void => {
|
const hideTooltip = (): void => {
|
||||||
if (tooltipHTML) options.visibility = 'hidden'
|
if (tooltipHTML) options.visibility = 'hidden'
|
||||||
|
shown = false
|
||||||
closeTooltip()
|
closeTooltip()
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -319,6 +321,7 @@
|
|||||||
{#if $tooltip.component && $tooltip.kind !== 'submenu'}
|
{#if $tooltip.component && $tooltip.kind !== 'submenu'}
|
||||||
<div
|
<div
|
||||||
class="popup-tooltip {options.classList} {$tooltip.style}"
|
class="popup-tooltip {options.classList} {$tooltip.style}"
|
||||||
|
class:testing
|
||||||
class:shown
|
class:shown
|
||||||
class:doublePadding={$tooltip.label}
|
class:doublePadding={$tooltip.label}
|
||||||
use:resizeObserver={(element) => {
|
use:resizeObserver={(element) => {
|
||||||
@ -374,6 +377,7 @@
|
|||||||
bind:this={nubHTML}
|
bind:this={nubHTML}
|
||||||
style:z-index={($modals.findIndex((t) => t.type === 'tooltip') ?? 1) + 10000}
|
style:z-index={($modals.findIndex((t) => t.type === 'tooltip') ?? 1) + 10000}
|
||||||
class="nub {nubDirection ?? ''}"
|
class="nub {nubDirection ?? ''}"
|
||||||
|
class:testing
|
||||||
class:shown
|
class:shown
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
@ -467,7 +471,6 @@
|
|||||||
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;
|
|
||||||
|
|
||||||
&.doublePadding {
|
&.doublePadding {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
@ -489,13 +492,25 @@
|
|||||||
background-color: var(--popup-color-disabled);
|
background-color: var(--popup-color-disabled);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.popup-tooltip,
|
||||||
|
.nub {
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.1s ease-in-out;
|
||||||
|
|
||||||
|
&.testing {
|
||||||
|
transition-duration: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shown {
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 0.1s ease-in-out 0.05s;
|
||||||
|
}
|
||||||
|
|
||||||
.nub {
|
.nub {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
// 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;
|
|
||||||
|
|
||||||
&::after,
|
&::after,
|
||||||
&::before {
|
&::before {
|
||||||
@ -561,10 +576,6 @@
|
|||||||
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;
|
||||||
|
@ -345,7 +345,7 @@ test.describe('Content in the Documents tests', () => {
|
|||||||
await documentContentPage.changeCodeBlockLanguage('Line 18', 'plaintext', 'css')
|
await documentContentPage.changeCodeBlockLanguage('Line 18', 'plaintext', 'css')
|
||||||
await documentContentPage.applyNote('Line 19', 'warning', testNote)
|
await documentContentPage.applyNote('Line 19', 'warning', testNote)
|
||||||
await documentContentPage.addImage('Line 20')
|
await documentContentPage.addImage('Line 20')
|
||||||
await page.keyboard.type('Cat')
|
// await page.keyboard.type('Cat')
|
||||||
|
|
||||||
newUser2 = generateUser()
|
newUser2 = generateUser()
|
||||||
await createAccount(request, newUser2)
|
await createAccount(request, newUser2)
|
||||||
|
Loading…
Reference in New Issue
Block a user