Skip to content

Commit da268b1

Browse files
krmanikkrmanik
committed
side and top toolbar for mask editor and notes editor
1 parent 69ad743 commit da268b1

File tree

5 files changed

+150
-16
lines changed

5 files changed

+150
-16
lines changed

‎ts/image-occlusion/TopToolbar.svelte‎

Lines changed: 41 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,36 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
44
-->
55
<script>
66
import IconButton from "../components/IconButton.svelte";
7+
import LabelButton from "../components/LabelButton.svelte";
8+
import { generate } from "./generate";
79
import { cursorTools, zoomTools } from "./tools/more-tools";
810
import { undoRedoTools } from "./tools/tool-undo-redo";
911
1012
export let activeTool = "cursor";
1113
export let canvas;
1214
export let instance;
1315
export let iconSize;
16+
17+
const generateCloze = () => {
18+
const cloze = generate();
19+
console.log(cloze);
20+
};
1421
</script>
1522

1623
<div class="top-tool-bar-container">
17-
{#each undoRedoTools as undoRedoTool}
18-
<IconButton
19-
class="top-tool-icon-button"
20-
{iconSize}
21-
on:click={() => {
22-
undoRedoTool.action(canvas);
23-
}}
24-
>
25-
{@html undoRedoTool.icon}
26-
</IconButton>
27-
{/each}
24+
<div class="undo-redo-button">
25+
{#each undoRedoTools as undoRedoTool}
26+
<IconButton
27+
class="top-tool-icon-button"
28+
{iconSize}
29+
on:click={() => {
30+
undoRedoTool.action(canvas);
31+
}}
32+
>
33+
{@html undoRedoTool.icon}
34+
</IconButton>
35+
{/each}
36+
</div>
2837

2938
{#each zoomTools as zoomBottomTool}
3039
<IconButton
@@ -51,18 +60,27 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
5160
</IconButton>
5261
{/each}
5362
{/if}
63+
64+
<LabelButton
65+
class=" generate-button"
66+
on:click={() => generateCloze()}
67+
--border-left-radius="5px"
68+
--border-right-radius="5px">Generate</LabelButton
69+
>
5470
</div>
5571

5672
<style>
5773
.top-tool-bar-container {
74+
display: flex;
5875
position: fixed;
59-
top: 42px;
60-
left: 36px;
61-
width: 100%;
62-
border-right: 1px solid #e3e3e3;
76+
top: 46px;
77+
width: 98%;
6378
overflow-y: auto;
6479
z-index: 99;
65-
background: white;
80+
}
81+
82+
.undo-redo-button {
83+
margin-left: 36px;
6684
}
6785
6886
:global(.top-tool-icon-button) {
@@ -73,4 +91,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
7391
margin: unset;
7492
padding: 6px !important;
7593
}
94+
95+
:global(.generate-button) {
96+
position: absolute;
97+
right: 4px;
98+
padding: 4px !important;
99+
top: 3px;
100+
}
76101
</style>

‎ts/image-occlusion/icons.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,15 @@
33

44
/// <reference types="../lib/image-import" />
55

6+
export { default as mdiCodeTags } from "@mdi/svg/svg/code-tags.svg";
67
export { default as mdiCopy } from "@mdi/svg/svg/content-copy.svg";
78
export { default as mdiCursorDefaultOutline } from "@mdi/svg/svg/cursor-default-outline.svg";
89
export { default as mdiDeleteOutline } from "@mdi/svg/svg/delete-outline.svg";
910
export { default as mdiEllipseOutline } from "@mdi/svg/svg/ellipse-outline.svg";
11+
export { default as mdiFormatBold } from "@mdi/svg/svg/format-bold.svg";
1012
export { default as mdiFormatColorFill } from "@mdi/svg/svg/format-color-fill.svg";
13+
export { default as mdiFormatItalic } from "@mdi/svg/svg/format-italic.svg";
14+
export { default as mdiFormatUnderline } from "@mdi/svg/svg/format-underline.svg";
1115
export { default as mdiGroup } from "@mdi/svg/svg/group.svg";
1216
export { default as mdiZoomReset } from "@mdi/svg/svg/magnify-expand.svg";
1317
export { default as mdiZoomOut } from "@mdi/svg/svg/magnify-minus-outline.svg";

‎ts/image-occlusion/notes-toolbar/MoreTools.svelte‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!--
2+
Copyright: Ankitects Pty Ltd and contributors
3+
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
4+
-->
5+
<script lang="ts">
6+
import IconButton from "../../components/IconButton.svelte";
7+
import { mdiCodeTags } from "../icons";
8+
import { changePreviewHTMLView } from "./lib";
9+
10+
export let iconSize;
11+
12+
const moreTools = [
13+
{
14+
name: "code",
15+
title: "Code",
16+
icon: mdiCodeTags,
17+
action: changePreviewHTMLView,
18+
},
19+
];
20+
</script>
21+
22+
{#each moreTools as tool}
23+
<IconButton
24+
class="note-tool-icon-button"
25+
{iconSize}
26+
on:click={() => tool.action()}
27+
tooltip={tool.title}>{@html tool.icon}</IconButton
28+
>
29+
{/each}

‎ts/image-occlusion/notes-toolbar/NotesToolbar.svelte‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!--
2+
Copyright: Ankitects Pty Ltd and contributors
3+
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
4+
-->
5+
<script lang="ts">
6+
import MoreTools from "./MoreTools.svelte";
7+
import TextFormatting from "./TextFormatting.svelte";
8+
9+
const iconSize = 80;
10+
</script>
11+
12+
<TextFormatting {iconSize} />
13+
<MoreTools {iconSize} />

‎ts/image-occlusion/notes-toolbar/TextFormatting.svelte‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!--
2+
Copyright: Ankitects Pty Ltd and contributors
3+
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
4+
-->
5+
<script lang="ts">
6+
import * as tr from "@tslib/ftl";
7+
8+
import IconButton from "../../components/IconButton.svelte";
9+
import { execCommand } from "../../domlib";
10+
import { mdiFormatBold, mdiFormatItalic, mdiFormatUnderline } from "../icons";
11+
12+
export let iconSize;
13+
14+
const textFormatting = [
15+
{
16+
name: "b",
17+
title: tr.editingBoldText(),
18+
icon: mdiFormatBold,
19+
action: "bold",
20+
},
21+
{
22+
name: "i",
23+
title: tr.editingItalicText(),
24+
icon: mdiFormatItalic,
25+
action: "italic",
26+
},
27+
{
28+
name: "u",
29+
title: tr.editingUnderlineText(),
30+
icon: mdiFormatUnderline,
31+
action: "underline",
32+
},
33+
];
34+
35+
const textFormat = (tool: { name; title; icon; action }) => {
36+
execCommand(tool.action, false, tool.name);
37+
};
38+
</script>
39+
40+
{#each textFormatting as tool}
41+
<IconButton
42+
id={"note-tool-" + tool.name}
43+
class="note-tool-icon-button"
44+
{iconSize}
45+
tooltip={tool.title}
46+
on:click={() => {
47+
// setActiveTool(tool);
48+
textFormat(tool);
49+
}}>{@html tool.icon}</IconButton
50+
>
51+
{/each}
52+
53+
<style lang="scss">
54+
:global(.note-tool-icon-button) {
55+
padding: 4px !important;
56+
border-radius: 2px !important;
57+
}
58+
59+
:global(.active-note-tool) {
60+
background-color: #808080 !important;
61+
color: white !important;
62+
}
63+
</style>

0 commit comments

Comments
 (0)