Add tooltips for image occlusions

Closes #2768

ftl/core/editing.ftl

@@ -70,6 +70,29 @@ editing-from-clipboard = From Clipboard
 editing-alignment = Alignment
 editing-equations = Equations
 editing-no-image-found-on-clipboard = No image found on clipboard.
+editing-image-occlusion-mode = Image Occlusion Mode
+editing-image-occlusion-zoom-out = Zoom Out
+editing-image-occlusion-zoom-in = Zoom In
+editing-image-occlusion-zoom-reset = Reset Zoom
+editing-image-occlusion-toggle-translucent = Toggle Translucency
+editing-image-occlusion-delete = Delete
+editing-image-occlusion-duplicate = Duplicate
+editing-image-occlusion-group = Group Selection
+editing-image-occlusion-ungroup = Ungroup Selection
+editing-image-occlusion-alignment = Alignment
+editing-image-occlusion-align-left = Align Left
+editing-image-occlusion-align-h-center = Center horizontally
+editing-image-occlusion-align-right = Align Right
+editing-image-occlusion-align-top = Align Top
+editing-image-occlusion-align-v-center = Center Vertically
+editing-image-occlusion-align-bottom = Align Bottom
+editing-image-occlusion-select-tool = Select
+editing-image-occlusion-zoom-tool = Zoom
+editing-image-occlusion-rectangle-tool = Rectangle
+editing-image-occlusion-ellipse-tool = Ellipse
+editing-image-occlusion-polygon-tool = Polygon
+editing-image-occlusion-text-tool = Text
+ 
 
 ## You don't need to translate these strings, as they will be replaced with different ones soon.
 

ts/editor/base.ts

@@ -40,6 +40,7 @@ export const editorModules = [
     ModuleName.BROWSING,
     ModuleName.NOTETYPES,
     ModuleName.IMPORTING,
+    ModuleName.UNDO,
 ];
 
 export const components = {

ts/image-occlusion/Toolbar.svelte

@@ -84,6 +84,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <IconButton
             class="tool-icon-button {activeTool == tool.id ? 'active-tool' : ''}"
             {iconSize}
+            tooltip={tool.tooltip()}
             active={activeTool === tool.id}
             on:click={() => {
                 activeTool = tool.id;
@@ -104,6 +105,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <IconButton
             class="top-tool-icon-button right-border-radius dropdown-tool-mode"
             slot="reference"
+            tooltip={tr.editingImageOcclusionMode()}
             {iconSize}
             on:click={() => (showFloating = !showFloating)}
         >
@@ -135,6 +137,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     : 'right-border-radius'}"
                 {iconSize}
                 on:click={tool.action}
+                tooltip={tool.tooltip()}
                 disabled={tool.name === "undo"
                     ? !$undoStack.undoable
                     : !$undoStack.redoable}
@@ -152,6 +155,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     ? 'left-border-radius'
                     : ''} {tool.name === 'zoomReset' ? 'right-border-radius' : ''}"
                 {iconSize}
+                tooltip={tool.tooltip()}
                 on:click={() => {
                     tool.action(instance);
                 }}
@@ -166,6 +170,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <IconButton
             class="top-tool-icon-button left-border-radius"
             {iconSize}
+            tooltip={tr.editingImageOcclusionToggleTranslucent()}
             on:click={() => {
                 maksOpacity = !maksOpacity;
                 makeMaskTransparent(canvas, maksOpacity);
@@ -181,6 +186,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     ? 'right-border-radius'
                     : ''}"
                 {iconSize}
+                tooltip={tool.tooltip()}
                 on:click={() => {
                     tool.action(canvas);
                 }}
@@ -198,6 +204,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     ? 'left-border-radius'
                     : ''}"
                 {iconSize}
+                tooltip={tool.tooltip()}
                 on:click={() => {
                     tool.action(canvas);
                     emitChangeSignal();
@@ -210,6 +217,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <IconButton
             class="top-tool-icon-button dropdown-tool right-border-radius"
             {iconSize}
+            tooltip={tr.editingImageOcclusionAlignment()}
             on:click={(e) => {
                 showAlignTools = !showAlignTools;
                 leftPos = e.pageX - 100;
@@ -225,6 +233,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <IconButton
             class="top-tool-icon-button"
             {iconSize}
+            tooltip={alignTool.tooltip()}
             on:click={() => {
                 alignTool.action(canvas);
             }}

ts/image-occlusion/index.ts

@@ -17,6 +17,7 @@ const i18n = setupI18n({
         ModuleName.NOTETYPES,
         ModuleName.ACTIONS,
         ModuleName.BROWSING,
+        ModuleName.UNDO,
     ],
 });
 

ts/image-occlusion/tools/more-tools.ts

@@ -1,6 +1,8 @@
 // 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";
+
 import {
     mdiAlignHorizontalCenter,
     mdiAlignHorizontalLeft,
@@ -31,11 +33,13 @@ export const groupUngroupTools = [
         name: "group",
         icon: mdiGroup,
         action: groupShapes,
+        tooltip: tr.editingImageOcclusionGroup,
     },
     {
         name: "ungroup",
         icon: mdiUngroup,
         action: unGroupShapes,
+        tooltip: tr.editingImageOcclusionUngroup,
     },
 ];
 
@@ -44,11 +48,13 @@ export const deleteDuplicateTools = [
         name: "delete",
         icon: mdiDeleteOutline,
         action: deleteItem,
+        tooltip: tr.editingImageOcclusionDelete,
     },
     {
         name: "duplicate",
         icon: mdiCopy,
         action: duplicateItem,
+        tooltip: tr.editingImageOcclusionDuplicate,
     },
 ];
 
@@ -57,16 +63,19 @@ export const zoomTools = [
         name: "zoomOut",
         icon: mdiZoomOut,
         action: zoomOut,
+        tooltip: tr.editingImageOcclusionZoomOut,
     },
     {
         name: "zoomIn",
         icon: mdiZoomIn,
         action: zoomIn,
+        tooltip: tr.editingImageOcclusionZoomIn,
     },
     {
         name: "zoomReset",
         icon: mdiZoomReset,
         action: zoomReset,
+        tooltip: tr.editingImageOcclusionZoomReset,
     },
 ];
 
@@ -75,30 +84,36 @@ export const alignTools = [
         id: 1,
         icon: mdiAlignHorizontalLeft,
         action: alignLeft,
+        tooltip: tr.editingImageOcclusionAlignLeft,
     },
     {
         id: 2,
         icon: mdiAlignHorizontalCenter,
         action: alignHorizontalCenter,
+        tooltip: tr.editingImageOcclusionAlignVCenter,
     },
     {
         id: 3,
         icon: mdiAlignHorizontalRight,
         action: alignRight,
+        tooltip: tr.editingImageOcclusionAlignRight,
     },
     {
         id: 4,
         icon: mdiAlignVerticalTop,
         action: alignTop,
+        tooltip: tr.editingImageOcclusionAlignTop,
     },
     {
         id: 5,
         icon: mdiAlignVerticalCenter,
         action: alignVerticalCenter,
+        tooltip: tr.editingImageOcclusionAlignHCenter,
     },
     {
         id: 6,
         icon: mdiAlignVerticalBottom,
         action: alignBottom,
+        tooltip: tr.editingImageOcclusionAlignBottom,
     },
 ];

ts/image-occlusion/tools/tool-buttons.ts

@@ -1,6 +1,8 @@
 // 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";
+
 import {
     mdiCursorDefaultOutline,
     mdiEllipseOutline,
@@ -14,25 +16,31 @@ export const tools = [
     {
         id: "cursor",
         icon: mdiCursorDefaultOutline,
+        tooltip: tr.editingImageOcclusionSelectTool,
     },
     {
         id: "magnify",
         icon: mdiMagnifyScan,
+        tooltip: tr.editingImageOcclusionZoomTool,
     },
     {
         id: "draw-rectangle",
         icon: mdiRectangleOutline,
+        tooltip: tr.editingImageOcclusionRectangleTool,
     },
     {
         id: "draw-ellipse",
         icon: mdiEllipseOutline,
+        tooltip: tr.editingImageOcclusionEllipseTool,
     },
     {
         id: "draw-polygon",
         icon: mdiVectorPolygonVariant,
+        tooltip: tr.editingImageOcclusionPolygonTool,
     },
     {
         id: "draw-text",
         icon: mdiTextBox,
+        tooltip: tr.editingImageOcclusionTextTool,
     },
 ];

ts/image-occlusion/tools/tool-undo-redo.ts

@@ -1,6 +1,7 @@
 // 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";
 import type fabric from "fabric";
 import { writable } from "svelte/store";
 
@@ -131,10 +132,12 @@ export const undoRedoTools = [
         name: "undo",
         icon: mdiUndo,
         action: () => undoStack.undo(),
+        tooltip: tr.undoUndo,
     },
     {
         name: "redo",
         icon: mdiRedo,
         action: () => undoStack.redo(),
+        tooltip: tr.undoRedo,
     },
 ];