mirror of
https://github.com/ankitects/anki.git
synced 2025-09-18 14:02:21 -04:00
f6486da233
* 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
110 lines
2.9 KiB
Svelte
110 lines
2.9 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 Container from "../components/Container.svelte";
|
|
import { addOrUpdateNote } from "./generate";
|
|
import type { IOMode } from "./lib";
|
|
import MasksEditor from "./MaskEditor.svelte";
|
|
import Notes from "./Notes.svelte";
|
|
import StickyFooter from "./StickyFooter.svelte";
|
|
|
|
export let mode: IOMode;
|
|
|
|
async function hideAllGuessOne(): Promise<void> {
|
|
addOrUpdateNote(mode, false);
|
|
}
|
|
|
|
async function hideOneGuessOne(): Promise<void> {
|
|
addOrUpdateNote(mode, true);
|
|
}
|
|
|
|
const items = [
|
|
{ label: tr.notetypesOcclusionMask(), value: 1 },
|
|
{ label: tr.notetypesOcclusionNote(), value: 2 },
|
|
];
|
|
|
|
let activeTabValue = 1;
|
|
const tabChange = (tabValue) => () => (activeTabValue = tabValue);
|
|
</script>
|
|
|
|
<Container class="image-occlusion">
|
|
<ul>
|
|
{#each items as item}
|
|
<li class={activeTabValue === item.value ? "active" : ""}>
|
|
<span on:click={tabChange(item.value)}>{item.label}</span>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
|
|
<div hidden={activeTabValue != 1}>
|
|
<MasksEditor {mode} />
|
|
</div>
|
|
|
|
<div hidden={activeTabValue != 2}>
|
|
<div class="notes-page"><Notes /></div>
|
|
<StickyFooter
|
|
{hideAllGuessOne}
|
|
{hideOneGuessOne}
|
|
editing={mode.kind == "edit"}
|
|
/>
|
|
</div>
|
|
</Container>
|
|
|
|
<style lang="scss">
|
|
:global(.image-occlusion) {
|
|
--gutter-inline: 0.5rem;
|
|
|
|
:global(.row) {
|
|
// rows have negative margins by default
|
|
--bs-gutter-x: 0;
|
|
// ensure equal spacing between tall rows like
|
|
// dropdowns, and short rows like checkboxes
|
|
min-height: 2.5em;
|
|
align-items: center;
|
|
}
|
|
}
|
|
ul {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding-left: 0;
|
|
list-style: none;
|
|
border-bottom: 1px solid var(--border);
|
|
margin-top: 2px;
|
|
}
|
|
li {
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
span {
|
|
border: 1px solid transparent;
|
|
border-top-left-radius: 0.25rem;
|
|
border-top-right-radius: 0.25rem;
|
|
display: block;
|
|
padding: 0.5rem 1rem;
|
|
cursor: pointer;
|
|
color: var(--fg-subtle);
|
|
}
|
|
|
|
span:hover {
|
|
border-color: var(--border) var(--border) var(--canvas);
|
|
}
|
|
|
|
li.active > span {
|
|
color: var(--fg);
|
|
background-color: var(--canvas);
|
|
border-color: var(--border) var(--border) var(--canvas);
|
|
}
|
|
|
|
:global(.notes-page) {
|
|
@media only screen and (min-width: 1024px) {
|
|
width: min(100vw, 70em);
|
|
margin: 6px auto;
|
|
padding-bottom: 5em;
|
|
padding-right: 12px;
|
|
}
|
|
}
|
|
</style>
|