langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add tooltips for image occlusions

Browse Source 
Closes #2768
This commit is contained in:
Damien Elmes 2023-10-23 12:03:02 +10:00
parent 8e828f2955
commit aab81f9f9a
7 changed files with 60 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
ftl/core/editing.ftl
View File

@ -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.

1
ts/editor/base.ts
View File

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

9
ts/image-occlusion/Toolbar.svelte
View File

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

1
ts/image-occlusion/index.ts
View File

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

15
ts/image-occlusion/tools/more-tools.ts
View File

@ -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,
},
];

8
ts/image-occlusion/tools/tool-buttons.ts
View File

@ -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,
},
];

3
ts/image-occlusion/tools/tool-undo-redo.ts
View File

@ -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,
},
];