Anki/ts/image-occlusion/StickyFooter.svelte
Damien Elmes f6486da233
Various tweaks to I/O code (#2478)
* Allow user to select I/O notetype instead of enforcing a specific name

* Display a clearer error when I/O note is missing an image

Opening the card layout screen from "manage notetypes" was showing an
error about the Anki version being too old.

Replacement error is not currently translatable.

* Preserve existing notetype when adding I/O notetype

* Add a 'from clipboard' string

The intention is to use this in the future to allow an image occlusion
to be created from an image on the clipboard.

* Tweak I/O init

- Use union type instead of multiple nullable values
- Pass the notetype id in to initialization

* Fix image insertion in I/O note

- The regex expected double quotes, and we were using single ones
- Image tags don't need to be closed

* Use more consistent naming in image_occlusion.proto

* Tweaks to default I/O notetype

- Show the header on the front side as well (I presume this is what
users expect; if not am happy to revert)
- Don't show comments on card (again, I presume users expect to use
this field to add notes that aren't displayed during review, as they
can use back extra for that)

* Fix sticky footer missing background

Caused by earlier CSS refactoring
2023-04-19 15:30:18 +10:00

67 lines
1.7 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 * as tr from "@tslib/ftl";
import ButtonGroup from "../components/ButtonGroup.svelte";
import LabelButton from "../components/LabelButton.svelte";
export let hideAllGuessOne: () => void;
export let hideOneGuessOne: () => void;
export let editing: boolean;
</script>
<div style:flex-grow="1" />
<div class="sticky-footer">
{#if editing}
<div class="update-note-text">
{tr.actionsUpdateNote()}
</div>
{/if}
<ButtonGroup size={2}>
<LabelButton
--border-left-radius="5px"
--border-right-radius="5px"
on:click={hideAllGuessOne}
class=" bottom-btn"
>
{tr.notetypesHideAllGuessOne()}
</LabelButton>
<LabelButton
--border-left-radius="5px"
--border-right-radius="5px"
on:click={hideOneGuessOne}
class=" bottom-btn"
>
{tr.notetypesHideOneGuessOne()}
</LabelButton>
</ButtonGroup>
</div>
<style lang="scss">
.sticky-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
margin: 0;
padding: 0.25rem;
background: var(--canvas);
border-style: solid none none;
border-color: var(--border);
border-width: thin;
display: flex;
justify-content: flex-end;
}
:global(.bottom-btn) {
margin: 2px;
}
:global(.update-note-text) {
align-self: center;
padding-right: 20px;
}
</style>