GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2026-01-07 02:53:54 -05:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Added: Tooltip fade

Browse source
This commit is contained in:
Luc Mcgrady 2025-11-12 18:20:45 +00:00
parent 9cee2887a2
commit 7c683819a2
No known key found for this signature in database
GPG key ID: 4F3D7A0B17CC3D9C
2 changed files with 6 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ts/routes/reviewer/Reviewer.svelte
View file

@ -13,6 +13,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
state.registerShortcuts();
}
$: tooltipMessage = state.tooltipMessage;
$: tooltipShown = state.tooltipShown;
</script>
<div class="iframe-container">
@ -24,7 +25,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
sandbox="allow-scripts"
></iframe>
<div class="tooltip" style:opacity={$tooltipMessage ? 1 : 0}>
<div class="tooltip" style:opacity={$tooltipShown ? 1 : 0}>
{$tooltipMessage}
</div>
</div>
@ -44,6 +45,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
z-index: var(--bs-tooltip-z-index);
border: 2px solid white;
opacity: 1;
transition: opacity 0.3s;
}
iframe {

4
ts/routes/reviewer/reviewer.ts
View file

@ -58,6 +58,7 @@ export class ReviewerState {
readonly answerButtons = derived(this.cardData, ($cardData) => $cardData?.answerButtons ?? []);
tooltipMessageTimeout: ReturnType<typeof setTimeout> | undefined;
readonly tooltipMessage = writable("");
readonly tooltipShown = writable(false);
iframe: HTMLIFrameElement | undefined = undefined;
@ -151,8 +152,9 @@ export class ReviewerState {
public showTooltip(message: string) {
clearTimeout(this.tooltipMessageTimeout);
this.tooltipMessage.set(message);
this.tooltipShown.set(true);
this.tooltipMessageTimeout = setTimeout(() => {
this.tooltipMessage.set("");
this.tooltipShown.set(false);
}, TOOLTIP_TIMEOUT_MS);
}