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

Browse source
This commit is contained in:
Luc Mcgrady 2025-11-12 15:16:42 +00:00
parent fe4bdf519e
commit fe753ed9d8
No known key found for this signature in database
GPG key ID: 4F3D7A0B17CC3D9C
2 changed files with 37 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -12,9 +12,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
state.registerIFrame(iframe);
state.registerShortcuts();
}
$: tooltipMessage = state.tooltipMessage;
</script>
<div id="qa">
<div class="iframe-container">
<iframe
src={"/_anki/pages/reviewer-inner.html" + (isNightMode() ? "?nightMode" : "")}
bind:this={iframe}
@ -22,13 +23,29 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
frameborder="0"
sandbox="allow-scripts"
></iframe>
<div class="tooltip" style:opacity={$tooltipMessage ? 1 : 0}>
{$tooltipMessage}
</div>
</div>
<style lang="scss">
#qa {
div.iframe-container {
position: relative;
flex: 1;
}
div.tooltip {
position: absolute;
left: 0;
bottom: 0;
padding: 0.8em;
background-color: var(--bs-tooltip-color);
z-index: var(--bs-tooltip-z-index);
border: 2px solid white;
opacity: 1;
}
iframe {
width: 100%;
height: 100%;

22
ts/routes/reviewer/reviewer.ts
View file

@ -16,6 +16,7 @@ import {
setConfigJson,
undo,
} from "@generated/backend";
import * as tr from "@generated/ftl";
import { derived, get, writable } from "svelte/store";
import type { InnerReviewerRequest } from "../reviewer-inner/innerReviewerRequest";
import type { ReviewerRequest } from "./reviewerRequest";
@ -40,6 +41,7 @@ export function updateNightMode() {
}
const typedAnswerRegex = /\[\[type:(.+?:)?(.+?)\]\]/m;
const TOOLTIP_TIMEOUT_MS = 2000;
export class ReviewerState {
answerHtml = "";
@ -51,6 +53,8 @@ export class ReviewerState {
readonly answerShown = writable(false);
readonly cardData = writable<NextCardDataResponse_NextCardData | undefined>(undefined);
readonly answerButtons = derived(this.cardData, ($cardData) => $cardData?.answerButtons ?? []);
tooltipMessageTimeout: ReturnType<typeof setTimeout> | undefined;
readonly tooltipMessage = writable("");
iframe: HTMLIFrameElement | undefined = undefined;
@ -112,26 +116,36 @@ export class ReviewerState {
this.displayMenu("CardInfo");
}
public buryOrSuspendCurrentCard(suspend: boolean) {
public showTooltip(message: string) {
clearTimeout(this.tooltipMessageTimeout);
this.tooltipMessage.set(message);
this.tooltipMessageTimeout = setTimeout(() => {
this.tooltipMessage.set("");
}, TOOLTIP_TIMEOUT_MS);
}
public async buryOrSuspendCurrentCard(suspend: boolean) {
const mode = suspend ? BuryOrSuspendCardsRequest_Mode.SUSPEND : BuryOrSuspendCardsRequest_Mode.BURY_USER;
if (this.currentCard?.card?.id) {
buryOrSuspendCards({
await buryOrSuspendCards({
cardIds: [this.currentCard.card.id],
noteIds: [],
mode,
});
this.showTooltip(suspend ? tr.studyingCardSuspended() : tr.studyingCardsBuried({ count: 1 }));
this.refresh();
}
}
public buryOrSuspendCurrentNote(suspend: boolean) {
public async buryOrSuspendCurrentNote(suspend: boolean) {
const mode = suspend ? BuryOrSuspendCardsRequest_Mode.SUSPEND : BuryOrSuspendCardsRequest_Mode.BURY_USER;
if (this.currentCard?.card?.noteId) {
buryOrSuspendCards({
const op = await buryOrSuspendCards({
cardIds: [],
noteIds: [this.currentCard.card.noteId],
mode,
});
this.showTooltip(suspend ? tr.studyingNoteSuspended() : tr.studyingCardsBuried({ count: op.count }));
this.refresh();
}
}