anki/ts/components/WithTooltip.svelte
Abdo 98715e593a
Improve presentation of importing results (#2568)
* Implement import log screen in Svelte

* Show filename in import log screen title

* Remove unused NoteRow property

* Show number of imported notes

* Use a single nid expression

* Use 'count' as variable name for consistency

* Import from @tslib/backend instead

* Fix summary_template typing

* Fix clippy warning

* Apply suggestions from code review

* Fix imports

* Contents -> Fields

* Increase max length of browser search bar

https://github.com/ankitects/anki/pull/2568/files#r1255227035

* Fix race condition in Bootstrap tooltip destruction

https://github.com/twbs/bootstrap/issues/37474

* summary_template -> summaryTemplate

* Make show link a button

* Run import ops on Svelte side

* Fix geometry not being restored in CSV Import page

* Make VirtualTable fill available height

* Keep CSV dialog modal

* Reword importing-existing-notes-skipped

* Avoid mentioning matching based on first field

* Change tick and cross icons

* List skipped notes last

* Pure CSS spinner

* Move set_wants_abort() call to relevant dialogs

* Show number of imported cards

* Remove bold from first sentence and indent summaries

* Update UI after import operations

* Add close button to import log page

Also make virtual table react to resize event.

* Fix typing

* Make CSV dialog non-modal again

Otherwise user can't interact with browser window.

* Update window modality after import

* Commit DB and update undo actions after import op

* Split frontend proto into separate file, so backend can ignore it

Currently the automatically-generated frontend RPC methods get placed in
'backend.js' with all the backend methods; we could optionally split them
into a separate 'frontend.js' file in the future.

* Migrate import_done from a bridgecmd to a HTTP request

* Update plural form of importing-notes-added

* Move import response handling to mediasrv

* Move task callback to script section

* Avoid unnecessary :global()

* .log cannot be missing if result exists

* Move import log search handling to mediasrv

* Type common params of ImportLogDialog

* Use else if

* Remove console.log()

* Add way to test apkg imports in new log screen

* Remove unused import

* Get actual card count for CSV imports

* Use import type

* Fix typing error

* Ignore import log when checking for changes in Python layer

* Apply suggestions from code review

* Remove imported card count for now

* Avoid non-null assertion in assignment

* Change showInBrowser to take an array of notes

* Use dataclasses for import log args

* Simplify ResultWithChanges in TS

* Only abort import when window is modal

* Fix ResultWithChanges typing

* Fix Rust warnings

* Only log one duplicate per incoming note

* Update wording about note updates

* Remove caveat about found_notes

* Reduce font size

* Remove redundant map

* Give credit to loading.io

* Remove unused line

---------

Co-authored-by: RumovZ <gp5glkw78@relay.firefox.com>
2023-08-02 20:29:44 +10:00

60 lines
1.5 KiB
Svelte

<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import Tooltip from "bootstrap/js/dist/tooltip";
import { onDestroy } from "svelte";
type TriggerType =
| "hover focus"
| "click"
| "hover"
| "focus"
| "manual"
| "click hover"
| "click focus"
| "click hover focus";
export let tooltip: string;
export let trigger: TriggerType = "hover focus";
export let placement: "auto" | "top" | "bottom" | "left" | "right" = "top";
export let html = true;
export let offset: Tooltip.Offset = [0, 0];
export let showDelay = 0;
export let hideDelay = 0;
let tooltipElement: HTMLElement;
let tooltipObject: Tooltip;
function createTooltip(element: HTMLElement): void {
tooltipElement = element;
element.title = tooltip;
tooltipObject = new Tooltip(element, {
placement,
html,
offset,
delay: { show: showDelay, hide: hideDelay },
trigger,
});
}
onDestroy(() => {
tooltipElement?.addEventListener("hidden.bs.tooltip", () => {
tooltipObject?.dispose();
});
tooltipObject?.hide();
});
</script>
<slot {createTooltip} {tooltipObject} />
<style lang="scss">
/* tooltip is inserted under the body tag
/* long tooltips can cause x-overflow */
:global(body) {
overflow-x: hidden;
}
</style>