hide field in io notetype & icon for toggle

and replace image
ankitects · Jun 20, 2023 · 71f1222 · 71f1222
1 parent be8f93b
commit 71f1222
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 21 deletions.
diff --git a/ts/editor/EditorField.svelte b/ts/editor/EditorField.svelte
@@ -15,6 +15,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         plainText: boolean;
         description: string;
         collapsed: boolean;
+        hidden: boolean;
     }
 
     export interface EditorFieldAPI {
@@ -85,9 +86,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     setupLifecycleHooks(api);
 
     onDestroy(() => api?.destroy());
+
+    $: hideField = field.hidden || false;
 </script>
 
-<div class="field-container" on:mouseenter on:mouseleave>
+<div class="field-container {hideField ? 'hide' : ''}" on:mouseenter on:mouseleave>
     <slot name="field-label" />
 
     <Collapsible collapse={collapsed} let:collapsed={hidden}>
@@ -127,6 +130,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         overflow: hidden;
     }
 
+    .field-container.hide {
+        display: none;
+    }
+
     .editor-field {
         overflow: hidden;
         /* make room for thicker focus border */

diff --git a/ts/editor/NoteEditor.svelte b/ts/editor/NoteEditor.svelte
@@ -271,6 +271,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         fontSize: fonts[index][1],
         direction: fonts[index][2] ? "rtl" : "ltr",
         collapsed: fieldsCollapsed[index],
+        hidden: hideFieldInOcclusionType(index),
     })) as FieldData[];
 
     function saveTags({ detail }: CustomEvent): void {
@@ -402,13 +403,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     function toggleMaskEditor(show: boolean) {
         isShowMaskEditor = show;
         const element = document.querySelector(".image-occlusion") as HTMLElement;
-        const ioNoteBtn = document.getElementById("io-note-btn") as HTMLElement;
         const ioMaskBtn = document.getElementById("io-mask-btn") as HTMLElement;
         if (isShowMaskEditor) {
-            ioNoteBtn?.classList.remove("active-io-btn");
             ioMaskBtn?.classList.add("active-io-btn");
         } else {
-            ioNoteBtn?.classList.add("active-io-btn");
             ioMaskBtn?.classList.remove("active-io-btn");
         }
         if (element) {
@@ -421,6 +419,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             fieldStores[1].set(options.html);
         }
 
+        // remove old page for new image occlusion
+        const page = document.querySelector(".image-occlusion");
+        if (page) {
+            page.remove();
+        }
+
         await setupImageOcclusion(options.mode);
         toggleMaskEditor(true);
         ioImageLoaded.set(true);
@@ -453,6 +457,20 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
     }
 
+    // hide first two fields for occlusion type, first contains occlusion data and second contains image
+    function hideFieldInOcclusionType(index: number) {
+        if (
+            originalStockKind ==
+            Notetypes.StockNotetype.OriginalStockKind
+                .ORIGINAL_STOCK_KIND_IMAGE_OCCLUSION
+        ) {
+            if (index == 0 || index == 1) {
+                return true;
+            }
+        }
+        return false;
+    }
+
     onMount(() => {
         function wrap(before: string, after: string): void {
             if (!$focusedInput || !editingInputIsRichText($focusedInput)) {

diff --git a/ts/editor/editor-toolbar/ImageOcclusionButton.svelte b/ts/editor/editor-toolbar/ImageOcclusionButton.svelte
@@ -3,10 +3,9 @@ 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 DynamicallySlottable from "components/DynamicallySlottable.svelte";
-    import LabelButton from "components/LabelButton.svelte";
+    import IconButton from "components/IconButton.svelte";
     import { ioImageLoaded } from "image-occlusion/store";
     import { get } from "svelte/store";
 
@@ -16,8 +15,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         updatePropsList,
     } from "../../components/ButtonGroupItem.svelte";
     import { bridgeCommand } from "../../lib/bridgecommand";
+    import { mdiRefresh, mdiViewDashboard } from "./icons";
 
     export let api = {};
+
+    let buttonPressed = false;
 </script>
 
 <ButtonGroup>
@@ -29,29 +31,37 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         {api}
     >
         <ButtonGroupItem>
-            <LabelButton
-                id="io-note-btn"
-                on:click={() => {
-                    bridgeCommand(`toggleMaskEditor:${false}`);
-                }}
-            >
-                {tr.notetypesOcclusionNote()}
-            </LabelButton>
-        </ButtonGroupItem>
-
-        <ButtonGroupItem>
-            <LabelButton
+            <IconButton
                 id="io-mask-btn"
                 on:click={() => {
-                    bridgeCommand(`toggleMaskEditor:${true}`);
                     // run this bridge when image not added
                     if (get(ioImageLoaded) === false) {
                         bridgeCommand("addImageForOcclusion");
                     }
+
+                    if (buttonPressed) {
+                        bridgeCommand(`toggleMaskEditor:${false}`);
+                        buttonPressed = false;
+                    } else {
+                        bridgeCommand(`toggleMaskEditor:${true}`);
+                        buttonPressed = true;
+                    }
                 }}
             >
-                {tr.notetypesOcclusionMask()}
-            </LabelButton>
+                {@html mdiViewDashboard}
+            </IconButton>
         </ButtonGroupItem>
+
+        {#if buttonPressed}
+            <ButtonGroupItem>
+                <IconButton
+                    on:click={() => {
+                        bridgeCommand("addImageForOcclusion");
+                    }}
+                >
+                    {@html mdiRefresh}
+                </IconButton>
+            </ButtonGroupItem>
+        {/if}
     </DynamicallySlottable>
 </ButtonGroup>
diff --git a/ts/editor/editor-toolbar/icons.ts b/ts/editor/editor-toolbar/icons.ts
@@ -11,6 +11,8 @@ export { default as subscriptIcon } from "@mdi/svg/svg/format-subscript.svg";
 export { default as superscriptIcon } from "@mdi/svg/svg/format-superscript.svg";
 export { default as functionIcon } from "@mdi/svg/svg/function-variant.svg";
 export { default as paperclipIcon } from "@mdi/svg/svg/paperclip.svg";
+export { default as mdiRefresh } from "@mdi/svg/svg/refresh.svg";
+export { default as mdiViewDashboard } from "@mdi/svg/svg/view-dashboard.svg";
 export { default as eraserIcon } from "bootstrap-icons/icons/eraser.svg";
 export { default as justifyFullIcon } from "bootstrap-icons/icons/justify.svg";
 export { default as olIcon } from "bootstrap-icons/icons/list-ol.svg";