fix image height issues in iOS safari (#2480)

* use i18n message when not showing image * fix height for iOS * some ui styling * fix polygon draw in panzoom * more ui styling and fixes
2023-04-26 14:01:04 +08:00 · 2023-04-26 14:01:04 +08:00 · 47a9db8221
commit 47a9db8221
parent 9123821131
14 changed files with 116 additions and 117 deletions
--- a/ftl/core/notetypes.ftl
+++ b/ftl/core/notetypes.ftl
@ -50,3 +50,4 @@ notetypes-hide-one-guess-one = Hide One, Guess One
 notetypes-error-generating-cloze = An error occurred when generating an image occlusion note
 notetypes-error-getting-imagecloze = An error occurred while fetching an image occlusion note
 notetypes-error-loading-image-occlusion = Error loading image occlusion. Is your Anki version up to date?
+notetype-error-no-image-to-show = No image to show.
--- a/ts/image-occlusion/ImageOcclusionPage.svelte
+++ b/ts/image-occlusion/ImageOcclusionPage.svelte
@ -32,29 +32,48 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>

 <Container class="image-occlusion">
-    <ul>
+    <div class="tab-buttons">
        {#each items as item}
-            <li class={activeTabValue === item.value ? "active" : ""}>
-                <span on:click={tabChange(item.value)}>{item.label}</span>
-            </li>
+            <button
+                class="tab-item {activeTabValue === item.value ? 'active' : ''} 
+                    {item.value === 1 ? 'left-border-radius' : 'right-border-radius'}"
+                on:click={tabChange(item.value)}
+            >
+                {item.label}
+            </button>
        {/each}
-    </ul>
+    </div>

    <div hidden={activeTabValue != 1}>
        <MasksEditor {mode} />
    </div>

    <div hidden={activeTabValue != 2}>
-        <div class="notes-page"><Notes /></div>
-        <StickyFooter
-            {hideAllGuessOne}
-            {hideOneGuessOne}
-            editing={mode.kind == "edit"}
-        />
+        <Notes />
+        <StickyFooter {hideAllGuessOne} {hideOneGuessOne} />
    </div>
 </Container>

 <style lang="scss">
+    .tab-buttons {
+        display: flex;
+        position: absolute;
+        top: 2px;
+        left: 2px;
+    }
+    .tab-buttons .active {
+        background: var(--button-primary-bg);
+        color: white;
+    }
+
+    .tab-item {
+        justify-content: center;
+        align-items: center;
+        display: flex;
+        padding: 0px 6px 0px 6px;
+        height: 38px;
+    }
+
    :global(.image-occlusion) {
        --gutter-inline: 0.5rem;

@ -67,44 +86,4 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
            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>
--- a/ts/image-occlusion/MaskEditor.svelte
+++ b/ts/image-occlusion/MaskEditor.svelte
@ -50,7 +50,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <style lang="scss">
    .editor-main {
        position: absolute;
-        top: 84px;
+        top: 42px;
        left: 36px;
        bottom: 2px;
        right: 2px;
@ -71,6 +71,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html

    :global(.upper-canvas) {
        border: 0.5px solid var(--border-strong);
+        border-width: thin;
    }

    :global(.canvas-container) {
--- a/ts/image-occlusion/Notes.svelte
+++ b/ts/image-occlusion/Notes.svelte
@ -6,7 +6,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    import * as tr from "@tslib/ftl";

    import Col from "../components/Col.svelte";
-    import Container from "../components/Container.svelte";
    import Row from "../components/Row.svelte";
    import NotesToolbar from "./notes-toolbar/NotesToolbar.svelte";
    import { notesDataStore, tagsWritable } from "./store";
@ -33,38 +32,34 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    <NotesToolbar />
 </div>

-<Container>
-    {#each notesFields as field}
-        <Container>
-            <Row --cols={1}>
-                <Col --col-size={1}>
-                    {field.title}
-                </Col>
-            </Row>
-            <Row --cols={1}>
-                <div id="note-container">
-                    <div
-                        id="{field.id}--div"
-                        bind:innerHTML={field.divValue}
-                        class="text-editor"
-                        on:input={() => {
-                            field.textareaValue = field.divValue;
-                        }}
-                        contenteditable
-                    />
-                    <textarea
-                        id="{field.id}--textarea"
-                        class="text-area"
-                        bind:value={field.textareaValue}
-                    />
-                </div>
-            </Row>
-        </Container>
-    {/each}
-    <Container>
-        <Tags {tagsWritable} />
-    </Container>
-</Container>
+{#each notesFields as field}
+    <Row --cols={1}>
+        <Col --col-size={1}>
+            {field.title}
+        </Col>
+    </Row>
+    <Row --cols={1}>
+        <div id="note-container">
+            <div
+                id="{field.id}--div"
+                bind:innerHTML={field.divValue}
+                class="text-editor"
+                on:input={() => {
+                    field.textareaValue = field.divValue;
+                }}
+                contenteditable
+            />
+            <textarea
+                id="{field.id}--textarea"
+                class="text-area"
+                bind:value={field.textareaValue}
+            />
+        </div>
+    </Row>
+{/each}
+<div style="margin-top: 10px;">
+    <Tags {tagsWritable} />
+</div>

 <style lang="scss">
    .text-area {
@ -73,6 +68,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
        display: none;
        background: var(--canvas-elevated);
        border: 2px solid var(--border);
+        border-radius: var(--border-radius);
        outline: none;
        resize: none;
        overflow: auto;
@ -81,6 +77,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    .text-editor {
        height: 80px;
        border: 1px solid var(--border);
+        border-radius: var(--border-radius);
        padding: 5px;
        overflow: auto;
        outline: none;
@ -88,6 +85,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    }

    .note-toolbar {
-        margin-left: 14px;
+        margin-left: 98px;
+        margin-top: 2px;
+        display: flex;
+        overflow-x: auto;
+        height: 38px;
+    }
+
+    ::-webkit-scrollbar {
+        width: 0.1em !important;
+        height: 0.1em !important;
    }
 </style>
--- a/ts/image-occlusion/SideToolbar.svelte
+++ b/ts/image-occlusion/SideToolbar.svelte
@ -65,8 +65,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <style>
    .tool-bar-container {
        position: fixed;
-        top: 46px;
-        left: 0;
+        top: 42px;
+        left: 2px;
        height: 100%;
        border-right: 1px solid var(--border);
        overflow-y: auto;
@ -86,8 +86,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    }

    :global(.active-tool) {
-        color: red !important;
-        background: unset !important;
+        color: white !important;
+        background: var(--button-primary-bg) !important;
    }

    ::-webkit-scrollbar {
--- a/ts/image-occlusion/StickyFooter.svelte
+++ b/ts/image-occlusion/StickyFooter.svelte
@ -10,16 +10,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html

    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"
@ -56,12 +50,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
        display: flex;
        justify-content: flex-end;
    }
+
+    @media only screen and (max-width: 640px) {
+        .sticky-footer {
+            justify-content: center;
+        }
+    }
+
    :global(.bottom-btn) {
        margin: 2px;
    }
-
-    :global(.update-note-text) {
-        align-self: center;
-        padding-right: 20px;
-    }
 </style>
--- a/ts/image-occlusion/Tags.svelte
+++ b/ts/image-occlusion/Tags.svelte
@ -23,6 +23,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html

 <style lang="scss">
    :global(.tag-editor) {
-        margin-top: 14px;
+        margin: 10px 0px 10px 0px;
    }
 </style>
--- a/ts/image-occlusion/TopToolbar.svelte
+++ b/ts/image-occlusion/TopToolbar.svelte
@ -139,15 +139,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <style>
    .top-tool-bar-container {
        display: flex;
-        position: fixed;
-        top: 46px;
-        width: 98%;
-        overflow-y: auto;
+        overflow-y: scroll;
        z-index: 99;
+        margin-left: 98px;
+        margin-top: 2px;
    }

    .undo-redo-button {
-        margin-left: 28px;
        margin-right: 2px;
        display: flex;
    }
@ -179,7 +177,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
        display: none;
        position: absolute;
        z-index: 100;
-        top: 82px;
+        top: 40px;
        margin-top: 1px;
    }

--- a/ts/image-occlusion/image-occlusion-base.scss
+++ b/ts/image-occlusion/image-occlusion-base.scss
@ -17,3 +17,9 @@
 html {
    overflow: hidden;
 }
+
+/** consistent font size **/
+:root { --font-size: 16px; }
+body { 
+    font-size: 16px;
+}
--- a/ts/image-occlusion/mask-editor.ts
+++ b/ts/image-occlusion/mask-editor.ts
@ -94,7 +94,7 @@ const setCanvasZoomRatio = (
    canvas: fabric.Canvas,
    instance: PanZoom,
 ): void => {
-    const zoomRatioW = (innerWidth - 60) / canvas.width!;
+    const zoomRatioW = (innerWidth - 40) / canvas.width!;
    const zoomRatioH = (innerHeight - 100) / canvas.height!;
    const zoomRatio = zoomRatioW < zoomRatioH ? zoomRatioW : zoomRatioH;
    zoomResetValue.set(zoomRatio);
--- a/ts/image-occlusion/notes-toolbar/MoreTools.svelte
+++ b/ts/image-occlusion/notes-toolbar/MoreTools.svelte
@ -21,7 +21,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html

 {#each moreTools as tool}
    <IconButton
-        class="note-tool-icon-button"
+        class="note-tool-icon-button right-border-radius"
        {iconSize}
        on:click={() => tool.action()}
        tooltip={tool.title}>{@html tool.icon}</IconButton
--- a/ts/image-occlusion/notes-toolbar/TextFormatting.svelte
+++ b/ts/image-occlusion/notes-toolbar/TextFormatting.svelte
@ -40,7 +40,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 {#each textFormatting as tool}
    <IconButton
        id={"note-tool-" + tool.name}
-        class="note-tool-icon-button"
+        class="note-tool-icon-button {tool.name === 'b' ? 'left-border-radius' : ''}"
        {iconSize}
        tooltip={tool.title}
        on:click={() => {
@ -54,5 +54,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    :global(.note-tool-icon-button) {
        padding: 4px !important;
        border-radius: 2px !important;
+        padding: 0px 6px 0px 6px !important;
+    }
+
+    :global(.left-border-radius) {
+        border-radius: 5px 0 0 5px !important;
+    }
+
+    :global(.right-border-radius) {
+        border-radius: 0 5px 5px 0 !important;
    }
 </style>
--- a/ts/image-occlusion/tools/tool-polygon.ts
+++ b/ts/image-occlusion/tools/tool-polygon.ts
@ -13,7 +13,6 @@ let linesList: fabric.Line = [];
 let pointsList: fabric.Circle = [];
 let drawMode = false;
 let zoomValue = 1;
-let panzoomX = 1, panzoomY = 1;
 const addedPolygonIds: string[] = [];

 export const drawPolygon = (canvas: fabric.Canvas, panzoom: PanZoom): void => {
@ -67,15 +66,13 @@ const toggleDrawPolygon = (canvas: fabric.Canvas): void => {

 const addPoint = (canvas: fabric.Canvas, options, panzoom): void => {
    zoomValue = panzoom.getTransform().scale;
-    panzoomX = panzoom.getTransform().x;
-    panzoomY = panzoom.getTransform().y;

    const canvasContainer = document.querySelector(".canvas-container")!.getBoundingClientRect()!;
    let clientX = options.e.touches ? options.e.touches[0].clientX : options.e.clientX;
    let clientY = options.e.touches ? options.e.touches[0].clientY : options.e.clientY;

-    clientX = (clientX - canvasContainer.left - panzoomX) / zoomValue;
-    clientY = (clientY - canvasContainer.top - panzoomY) / zoomValue;
+    clientX = (clientX - canvasContainer.left) / zoomValue;
+    clientY = (clientY - canvasContainer.top) / zoomValue;

    const point = new fabric.Circle({
        radius: 5,
--- a/ts/reviewer/image_occlusion.ts
+++ b/ts/reviewer/image_occlusion.ts
@ -1,11 +1,17 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html

+import * as tr from "@tslib/ftl";
+
 window.addEventListener("load", () => {
    window.addEventListener("resize", setupImageCloze);
 });

 export function setupImageCloze(): void {
+    window.requestAnimationFrame(setupImageClozeInner);
+}
+
+function setupImageClozeInner(): void {
    const canvas: HTMLCanvasElement = document.querySelector("canvas")! as HTMLCanvasElement;
    canvas.style.maxWidth = "100%";
    canvas.style.maxHeight = "95vh";
@ -14,7 +20,7 @@ export function setupImageCloze(): void {
    const container = document.getElementById("container") as HTMLDivElement;
    const image = document.getElementById("img") as HTMLImageElement;
    if (image == null) {
-        container.innerText = "No image to show.";
+        container.innerText = tr.notetypeErrorNoImageToShow();
        return;
    }