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

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.

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" : ""}>
+            <button
-                <span on:click={tabChange(item.value)}>{item.label}</span>
+                class="tab-item {activeTabValue === item.value ? 'active' : ''} 
-            </li>
+                    {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>
+        <Notes />
-        <StickyFooter
+        <StickyFooter {hideAllGuessOne} {hideOneGuessOne} />
-            {hideAllGuessOne}
-            {hideOneGuessOne}
-            editing={mode.kind == "edit"}
-        />
     </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>

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) {

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

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;
+        top: 42px;
-        left: 0;
+        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;
+        color: white !important;
-        background: unset !important;
+        background: var(--button-primary-bg) !important;
     }
 
     ::-webkit-scrollbar {

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>

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>

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;
+        overflow-y: scroll;
-        top: 46px;
-        width: 98%;
-        overflow-y: auto;
         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;
     }
 

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;
+}

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);

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

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>

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;
+    clientX = (clientX - canvasContainer.left) / zoomValue;
-    clientY = (clientY - canvasContainer.top - panzoomY) / zoomValue;
+    clientY = (clientY - canvasContainer.top) / zoomValue;
 
     const point = new fabric.Circle({
         radius: 5,

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;
     }