@humandialog/forms.svelte 1.3.4 → 1.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Fab.svelte +164 -126
- package/components/document/editor.svelte +52 -10
- package/components/sidebar/sidebar.item.svelte +3 -2
- package/desk.svelte +60 -15
- package/horizontal.toolbar.svelte +33 -4
- package/index.d.ts +2 -1
- package/index.js +2 -1
- package/package.json +8 -1
- package/stores.d.ts +1 -1
- package/stores.js +5 -2
- package/utils.d.ts +4 -0
- package/utils.js +22 -1
- package/vertical.toolbar.svelte +9 -3
package/components/Fab.svelte
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
<script>import {
|
|
1
|
+
<script>import { each } from "svelte/internal";
|
|
2
|
+
import { contextToolbarOperations, pageToolbarOperations, contextItemsStore } from "../stores.js";
|
|
2
3
|
import { showFloatingToolbar, showMenu, showGridMenu } from "./menu.js";
|
|
3
4
|
import { FaChevronUp, FaChevronDown, FaChevronLeft, FaChevronRight, FaCircle } from "svelte-icons/fa/";
|
|
4
5
|
$:
|
|
@@ -10,11 +11,17 @@ let toolboxOperations = [];
|
|
|
10
11
|
let isExpandable = false;
|
|
11
12
|
let vToolboxExpanded = false;
|
|
12
13
|
let hToolboxExpanded = false;
|
|
14
|
+
let isMain = false;
|
|
13
15
|
function update(...args) {
|
|
14
16
|
if ($contextToolbarOperations && $contextToolbarOperations.length > 0)
|
|
15
17
|
operations = $contextToolbarOperations;
|
|
16
18
|
else
|
|
17
19
|
operations = $pageToolbarOperations;
|
|
20
|
+
if (operations && operations.length > 0 && operations[0].main) {
|
|
21
|
+
isMain = true;
|
|
22
|
+
} else {
|
|
23
|
+
isMain = false;
|
|
24
|
+
}
|
|
18
25
|
if (operations.length > 0)
|
|
19
26
|
mainOperation = operations[0];
|
|
20
27
|
else
|
|
@@ -91,80 +98,163 @@ function getSelectionPos() {
|
|
|
91
98
|
} else
|
|
92
99
|
return 0;
|
|
93
100
|
}
|
|
101
|
+
function calculatePosition(operation) {
|
|
102
|
+
let right = 0;
|
|
103
|
+
let result = `bottom: 10px; right:${right}px`;
|
|
104
|
+
return result;
|
|
105
|
+
}
|
|
106
|
+
function operationVisible(operation) {
|
|
107
|
+
return false;
|
|
108
|
+
}
|
|
94
109
|
</script>
|
|
95
110
|
|
|
96
|
-
{#if
|
|
97
|
-
{
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
111
|
+
{#if isMain}
|
|
112
|
+
{#if operations && operations.length > 0}
|
|
113
|
+
{#each operations as operation, idx}
|
|
114
|
+
{#if operationVisible(operation)}
|
|
115
|
+
<button
|
|
116
|
+
class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300
|
|
117
|
+
font-medium rounded-full text-sm text-center shadow-md
|
|
118
|
+
w-[55px] h-[55px]
|
|
119
|
+
fixed m-0 absolute bottom-0
|
|
120
|
+
dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
|
|
121
|
+
flex items-center justify-center
|
|
122
|
+
disable-dbl-tap-zoom"
|
|
123
|
+
style={calculatePosition(operation)}
|
|
124
|
+
on:click|stopPropagation={(e) => {on_click(e, mainOperation)}}
|
|
125
|
+
on:mousedown={mousedown} >
|
|
126
|
+
<div class="w-7 h-7"><svelte:component this={operation.icon}/></div>
|
|
127
|
+
</button>
|
|
128
|
+
{/if}
|
|
129
|
+
{/each}
|
|
130
|
+
{/if}
|
|
131
|
+
{:else}
|
|
112
132
|
|
|
113
|
-
{#if
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
<
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
dark:bg-zinc-500 dark:hover:bg-zinc-500
|
|
130
|
-
flex items-center justify-center">
|
|
131
|
-
<div class="w-2 h-2">
|
|
132
|
-
{#if hToolboxExpanded}
|
|
133
|
-
<FaCircle/>
|
|
134
|
-
{:else}
|
|
135
|
-
<FaCircle/>
|
|
136
|
-
{/if}
|
|
137
|
-
</div>
|
|
138
|
-
</div>
|
|
139
|
-
</button>
|
|
133
|
+
{#if operations && operations.length > 0}
|
|
134
|
+
{@const topPosition = 350}
|
|
135
|
+
{@const verticalPosition = mainOperation.aboveKeyboard ? `bottom: ${topPosition}px` : "bottom: 10px"}
|
|
136
|
+
<button id="__hd_fab_mainOperation"
|
|
137
|
+
class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300
|
|
138
|
+
font-medium rounded-full text-sm text-center shadow-md
|
|
139
|
+
w-[55px] h-[55px]
|
|
140
|
+
fixed m-0 absolute bottom-0 right-[0px]
|
|
141
|
+
dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
|
|
142
|
+
flex items-center justify-center
|
|
143
|
+
disable-dbl-tap-zoom"
|
|
144
|
+
style={verticalPosition}
|
|
145
|
+
on:click|stopPropagation={(e) => {on_click(e, mainOperation)}}
|
|
146
|
+
on:mousedown={mousedown} >
|
|
147
|
+
<div class="w-7 h-7"><svelte:component this={mainOperation.icon}/></div>
|
|
148
|
+
</button>
|
|
140
149
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
150
|
+
{#if secondaryOperation || isExpandable}
|
|
151
|
+
|
|
152
|
+
<!-- horizontal container -->
|
|
153
|
+
<div class="flex flex-row m-0 absolute bottom-[10px] right-[60px]">
|
|
154
|
+
|
|
155
|
+
{#if isExpandable}
|
|
156
|
+
<!-- Expander -->
|
|
157
|
+
<button class=" bg-transparent mr-2
|
|
158
|
+
w-[55px] h-[55px]
|
|
159
|
+
flex items-center justify-center
|
|
160
|
+
disable-dbl-tap-zoom"
|
|
161
|
+
on:click|stopPropagation={toggleExpandToolboxH}
|
|
162
|
+
on:mousedown={mousedown}>
|
|
163
|
+
<div class=" w-10 h-10
|
|
164
|
+
text-white bg-zinc-500 hover:bg-zinc-500
|
|
165
|
+
font-medium rounded-full text-sm text-center shadow-md
|
|
166
|
+
dark:bg-zinc-500 dark:hover:bg-zinc-500
|
|
167
|
+
flex items-center justify-center">
|
|
168
|
+
<div class="w-2 h-2">
|
|
169
|
+
{#if hToolboxExpanded}
|
|
170
|
+
<FaCircle/>
|
|
171
|
+
{:else}
|
|
172
|
+
<FaCircle/>
|
|
173
|
+
{/if}
|
|
155
174
|
</div>
|
|
156
|
-
</
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
175
|
+
</div>
|
|
176
|
+
</button>
|
|
177
|
+
|
|
178
|
+
{#if hToolboxExpanded}
|
|
179
|
+
{#if secondaryOperation}
|
|
180
|
+
<button class=" bg-transparent
|
|
181
|
+
mx-0 mr-2 w-[55px] h-[55px]
|
|
182
|
+
flex items-center justify-center
|
|
183
|
+
disable-dbl-tap-zoom"
|
|
184
|
+
on:click|stopPropagation={(e) => {on_click(e, secondaryOperation)}}
|
|
185
|
+
on:mousedown={mousedown}>
|
|
186
|
+
<div class=" w-10 h-10
|
|
187
|
+
text-white bg-zinc-500 group-hover:bg-zinc-500
|
|
188
|
+
dark:bg-zinc-500 dark:group-hover:bg-zinc-500
|
|
189
|
+
font-medium rounded-full text-sm text-center shadow-md
|
|
190
|
+
flex items-center justify-center">
|
|
191
|
+
<div class="w-5 h-5"><svelte:component this={secondaryOperation.icon}/></div>
|
|
192
|
+
</div>
|
|
193
|
+
</button>
|
|
194
|
+
{:else if toolboxOperations.length > 0}
|
|
195
|
+
{@const toolbox=toolboxOperations.reverse()}
|
|
196
|
+
{#each toolbox as operation}
|
|
197
|
+
{#if !operation.separator}
|
|
198
|
+
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
199
|
+
<button class=" bg-transparent
|
|
200
|
+
mx-0 mr-2 w-[55px] h-[55px]
|
|
201
|
+
flex items-center justify-center
|
|
202
|
+
disable-dbl-tap-zoom"
|
|
203
|
+
on:click|stopPropagation={(e) => {on_click(e, operation)}}
|
|
204
|
+
on:mousedown={mousedown}>
|
|
205
|
+
<div class=" w-10 h-10
|
|
206
|
+
text-white bg-zinc-500 group-hover:bg-zinc-500
|
|
207
|
+
dark:bg-zinc-500 dark:group-hover:bg-zinc-500
|
|
208
|
+
font-medium rounded-full text-sm text-center shadow-md
|
|
209
|
+
flex items-center justify-center">
|
|
210
|
+
<div class="w-5 h-5"><svelte:component this={operation.icon}/></div>
|
|
211
|
+
</div>
|
|
212
|
+
</button>
|
|
213
|
+
{/if}
|
|
214
|
+
{/each}
|
|
215
|
+
|
|
216
|
+
{/if}
|
|
217
|
+
{/if}
|
|
218
|
+
{:else}
|
|
219
|
+
<button class=" bg-transparent
|
|
220
|
+
mx-0 mr-2 w-[55px] h-[55px]
|
|
221
|
+
flex items-center justify-center
|
|
222
|
+
disable-dbl-tap-zoom"
|
|
223
|
+
on:click|stopPropagation={(e) => {on_click(e, secondaryOperation)}}
|
|
224
|
+
on:mousedown={mousedown}>
|
|
225
|
+
<div class=" w-10 h-10
|
|
226
|
+
text-white bg-zinc-500 group-hover:bg-zinc-500
|
|
227
|
+
dark:bg-zinc-500 dark:group-hover:bg-zinc-500
|
|
228
|
+
font-medium rounded-full text-sm text-center shadow-md
|
|
229
|
+
flex items-center justify-center">
|
|
230
|
+
<div class="w-5 h-5"><svelte:component this={secondaryOperation.icon}/></div>
|
|
231
|
+
</div>
|
|
232
|
+
</button>
|
|
233
|
+
{/if}
|
|
234
|
+
|
|
235
|
+
</div>
|
|
236
|
+
{/if}
|
|
237
|
+
|
|
238
|
+
{#if operations.length > 2} <!-- has vertical operations -->
|
|
239
|
+
<!-- vertical tools container -->
|
|
240
|
+
<ul class="list-none m-0 absolute bottom-[70px] right-0">
|
|
241
|
+
{#if (isExpandable && vToolboxExpanded) || !isExpandable}
|
|
242
|
+
{@const verticalOperations = operations.slice(2).reverse()}
|
|
243
|
+
{#each verticalOperations as operation}
|
|
244
|
+
{#if !operation.separator}
|
|
245
|
+
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
246
|
+
<li class="flex flex-row px-0 py-0 justify-end group"
|
|
247
|
+
on:click|stopPropagation={(e) => {on_click(e, operation)}}
|
|
248
|
+
on:mousedown={mousedown}>
|
|
249
|
+
{#if operation.caption}
|
|
250
|
+
<div>
|
|
251
|
+
<span class="block whitespace-nowrap text-sm mt-3 font-semibold text-white mr-3 select-none bg-stone-700 group-hover:bg-stone-800 px-1 shadow-lg rounded">{operation.caption}</span>
|
|
252
|
+
</div>
|
|
253
|
+
{/if}
|
|
162
254
|
<button class=" bg-transparent
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
on:click|stopPropagation={(e) => {on_click(e, operation)}}
|
|
167
|
-
on:mousedown={mousedown}>
|
|
255
|
+
mx-0 mb-2 w-[55px] h-[55px]
|
|
256
|
+
flex items-center justify-center
|
|
257
|
+
disable-dbl-tap-zoom">
|
|
168
258
|
<div class=" w-10 h-10
|
|
169
259
|
text-white bg-zinc-500 group-hover:bg-zinc-500
|
|
170
260
|
dark:bg-zinc-500 dark:group-hover:bg-zinc-500
|
|
@@ -173,66 +263,14 @@ function getSelectionPos() {
|
|
|
173
263
|
<div class="w-5 h-5"><svelte:component this={operation.icon}/></div>
|
|
174
264
|
</div>
|
|
175
265
|
</button>
|
|
176
|
-
|
|
177
|
-
{/
|
|
178
|
-
|
|
179
|
-
{/if}
|
|
266
|
+
</li>
|
|
267
|
+
{/if}
|
|
268
|
+
{/each}
|
|
180
269
|
{/if}
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
mx-0 mr-2 w-[55px] h-[55px]
|
|
184
|
-
flex items-center justify-center
|
|
185
|
-
disable-dbl-tap-zoom"
|
|
186
|
-
on:click|stopPropagation={(e) => {on_click(e, secondaryOperation)}}
|
|
187
|
-
on:mousedown={mousedown}>
|
|
188
|
-
<div class=" w-10 h-10
|
|
189
|
-
text-white bg-zinc-500 group-hover:bg-zinc-500
|
|
190
|
-
dark:bg-zinc-500 dark:group-hover:bg-zinc-500
|
|
191
|
-
font-medium rounded-full text-sm text-center shadow-md
|
|
192
|
-
flex items-center justify-center">
|
|
193
|
-
<div class="w-5 h-5"><svelte:component this={secondaryOperation.icon}/></div>
|
|
194
|
-
</div>
|
|
195
|
-
</button>
|
|
196
|
-
{/if}
|
|
270
|
+
</ul>
|
|
271
|
+
{/if}
|
|
197
272
|
|
|
198
|
-
</div>
|
|
199
273
|
{/if}
|
|
200
|
-
|
|
201
|
-
{#if operations.length > 2} <!-- has vertical operations -->
|
|
202
|
-
<!-- vertical tools container -->
|
|
203
|
-
<ul class="list-none m-0 absolute bottom-[70px] right-0">
|
|
204
|
-
{#if (isExpandable && vToolboxExpanded) || !isExpandable}
|
|
205
|
-
{@const verticalOperations = operations.slice(2).reverse()}
|
|
206
|
-
{#each verticalOperations as operation}
|
|
207
|
-
{#if !operation.separator}
|
|
208
|
-
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
209
|
-
<li class="flex flex-row px-0 py-0 justify-end group"
|
|
210
|
-
on:click|stopPropagation={(e) => {on_click(e, operation)}}
|
|
211
|
-
on:mousedown={mousedown}>
|
|
212
|
-
{#if operation.caption}
|
|
213
|
-
<div>
|
|
214
|
-
<span class="block whitespace-nowrap text-sm mt-3 font-semibold text-white mr-3 select-none bg-stone-700 group-hover:bg-stone-800 px-1 shadow-lg rounded">{operation.caption}</span>
|
|
215
|
-
</div>
|
|
216
|
-
{/if}
|
|
217
|
-
<button class=" bg-transparent
|
|
218
|
-
mx-0 mb-2 w-[55px] h-[55px]
|
|
219
|
-
flex items-center justify-center
|
|
220
|
-
disable-dbl-tap-zoom">
|
|
221
|
-
<div class=" w-10 h-10
|
|
222
|
-
text-white bg-zinc-500 group-hover:bg-zinc-500
|
|
223
|
-
dark:bg-zinc-500 dark:group-hover:bg-zinc-500
|
|
224
|
-
font-medium rounded-full text-sm text-center shadow-md
|
|
225
|
-
flex items-center justify-center">
|
|
226
|
-
<div class="w-5 h-5"><svelte:component this={operation.icon}/></div>
|
|
227
|
-
</div>
|
|
228
|
-
</button>
|
|
229
|
-
</li>
|
|
230
|
-
{/if}
|
|
231
|
-
{/each}
|
|
232
|
-
{/if}
|
|
233
|
-
</ul>
|
|
234
|
-
{/if}
|
|
235
|
-
|
|
236
274
|
{/if}
|
|
237
275
|
|
|
238
276
|
<style>
|
|
@@ -11,6 +11,13 @@ import HardBreak from "@tiptap/extension-hard-break";
|
|
|
11
11
|
import HorizontalRule from "@tiptap/extension-horizontal-rule";
|
|
12
12
|
import Image from "@tiptap/extension-image";
|
|
13
13
|
import Link from "@tiptap/extension-link";
|
|
14
|
+
import CodeBlock from "@tiptap/extension-code-block";
|
|
15
|
+
import BulletList from "@tiptap/extension-bullet-list";
|
|
16
|
+
import ListItem from "@tiptap/extension-list-item";
|
|
17
|
+
import Table from "@tiptap/extension-table";
|
|
18
|
+
import TableCell from "@tiptap/extension-table-cell";
|
|
19
|
+
import TableHeader from "@tiptap/extension-table-header";
|
|
20
|
+
import TableRow from "@tiptap/extension-table-row";
|
|
14
21
|
import Bold from "@tiptap/extension-bold";
|
|
15
22
|
import Code from "@tiptap/extension-code";
|
|
16
23
|
import Italic from "@tiptap/extension-italic";
|
|
@@ -37,7 +44,9 @@ import {
|
|
|
37
44
|
FaUnderline,
|
|
38
45
|
FaStrikethrough,
|
|
39
46
|
FaArrowLeft,
|
|
40
|
-
FaGripLines
|
|
47
|
+
FaGripLines,
|
|
48
|
+
FaListUl,
|
|
49
|
+
FaTable
|
|
41
50
|
} from "svelte-icons/fa";
|
|
42
51
|
import IcH1 from "./internal/h1.icon.svelte";
|
|
43
52
|
import IcH2 from "./internal/h2.icon.svelte";
|
|
@@ -219,7 +228,7 @@ const suggestion = {
|
|
|
219
228
|
let editorElement;
|
|
220
229
|
let editor;
|
|
221
230
|
const codeBlockClass = "ml-6 text-sm font-mono break-normal text-pink-700 dark:text-pink-600";
|
|
222
|
-
const
|
|
231
|
+
const _CodeBlock = Paragraph.extend({
|
|
223
232
|
name: "CodeBlock",
|
|
224
233
|
priority: 999,
|
|
225
234
|
addAttributes() {
|
|
@@ -440,7 +449,7 @@ onMount(() => {
|
|
|
440
449
|
Paragraph,
|
|
441
450
|
Text,
|
|
442
451
|
Heading.configure({
|
|
443
|
-
levels: [1, 2]
|
|
452
|
+
levels: [1, 2, 3, 4]
|
|
444
453
|
}),
|
|
445
454
|
/*Image.configure({
|
|
446
455
|
HTMLAttributes: {
|
|
@@ -450,6 +459,14 @@ onMount(() => {
|
|
|
450
459
|
CrossImage,
|
|
451
460
|
HardBreak,
|
|
452
461
|
HorizontalRule,
|
|
462
|
+
BulletList,
|
|
463
|
+
ListItem,
|
|
464
|
+
Table.configure({
|
|
465
|
+
resizable: true
|
|
466
|
+
}),
|
|
467
|
+
TableRow,
|
|
468
|
+
TableHeader,
|
|
469
|
+
TableCell,
|
|
453
470
|
// custom
|
|
454
471
|
CodeBlock,
|
|
455
472
|
CommentBlock,
|
|
@@ -628,11 +645,7 @@ function handleImagesChanges(transaction) {
|
|
|
628
645
|
deletedImageSrcs.forEach((src) => onRemoveImage(src));
|
|
629
646
|
}
|
|
630
647
|
let commands = [
|
|
631
|
-
{
|
|
632
|
-
{ caption: "Italic", description: "Marks text as italic", tags: "strong", icon: FaItalic, on_choice: makeItalic, is_active: () => editor?.isActive("italic") },
|
|
633
|
-
{ caption: "Underlie", description: "Marks text as underlined", icon: FaUnderline, on_choice: makeUnderline, is_active: () => editor?.isActive("underline") },
|
|
634
|
-
{ caption: "Strikethrough", description: "Marks text as strikethrough", icon: FaStrikethrough, on_choice: makeStrikethrough, is_active: () => editor?.isActive("strike") },
|
|
635
|
-
{ caption: "Styles", separator: true },
|
|
648
|
+
//{ caption: 'Styles', separator: true },
|
|
636
649
|
{ caption: "Normal", description: "This is normal text style", tags: "text", icon: FaRemoveFormat, on_choice: (range) => {
|
|
637
650
|
if (range)
|
|
638
651
|
editor.chain().focus().deleteRange(range).setParagraph().run();
|
|
@@ -651,11 +664,23 @@ let commands = [
|
|
|
651
664
|
else
|
|
652
665
|
editor.commands.setHeading({ level: 2 });
|
|
653
666
|
}, is_active: () => editor?.isActive("heading", { level: 2 }) },
|
|
667
|
+
{ caption: "Heading 3", description: "Secondary heading", tags: "h3", icon: IcH3, on_choice: (range) => {
|
|
668
|
+
if (range)
|
|
669
|
+
editor.chain().focus().deleteRange(range).setHeading({ level: 3 }).run();
|
|
670
|
+
else
|
|
671
|
+
editor.commands.setHeading({ level: 3 });
|
|
672
|
+
}, is_active: () => editor?.isActive("heading", { level: 3 }) },
|
|
673
|
+
{ caption: "Heading 4", description: "Secondary heading", tags: "h4", icon: IcH4, on_choice: (range) => {
|
|
674
|
+
if (range)
|
|
675
|
+
editor.chain().focus().deleteRange(range).setHeading({ level: 4 }).run();
|
|
676
|
+
else
|
|
677
|
+
editor.commands.setHeading({ level: 4 });
|
|
678
|
+
}, is_active: () => editor?.isActive("heading", { level: 4 }) },
|
|
654
679
|
{ caption: "Code", description: "Source code monospace text", icon: FaCode, on_choice: (range) => {
|
|
655
680
|
if (range)
|
|
656
|
-
editor.chain().focus().deleteRange(range).
|
|
681
|
+
editor.chain().focus().deleteRange(range).setCodeBlock().run();
|
|
657
682
|
else
|
|
658
|
-
editor.commands.
|
|
683
|
+
editor.commands.setCodeBlock();
|
|
659
684
|
}, is_active: () => editor?.isActive("CodeBlock") },
|
|
660
685
|
{ caption: "Comment", description: "With this you can comment the above paragraph", icon: FaComment, on_choice: (range) => {
|
|
661
686
|
if (range)
|
|
@@ -681,6 +706,23 @@ let commands = [
|
|
|
681
706
|
else
|
|
682
707
|
editor.commands.setAsInfo();
|
|
683
708
|
}, is_active: () => editor?.isActive("InfoBlock") },
|
|
709
|
+
{ caption: "Bullet list", description: "Unordered list of items", icon: FaListUl, on_choice: (range) => {
|
|
710
|
+
if (range)
|
|
711
|
+
editor.chain().focus().deleteRange(range).toggleBulletList().run();
|
|
712
|
+
else
|
|
713
|
+
editor.commands.toggleBulletList();
|
|
714
|
+
}, is_active: () => editor?.isActive("bulletList") },
|
|
715
|
+
{ caption: "Table", description: "Table", icon: FaTable, on_choice: (range) => {
|
|
716
|
+
if (range)
|
|
717
|
+
editor.chain().focus().deleteRange(range).insertTable().run();
|
|
718
|
+
else
|
|
719
|
+
editor.commands.insertTable();
|
|
720
|
+
}, is_active: () => editor?.isActive("table") },
|
|
721
|
+
{ caption: "Format", separator: true },
|
|
722
|
+
{ caption: "Bold", description: "Marks text as bolded", tags: "strong", icon: FaBold, on_choice: makeBold, is_active: () => editor?.isActive("bold") },
|
|
723
|
+
{ caption: "Italic", description: "Marks text as italic", tags: "strong", icon: FaItalic, on_choice: makeItalic, is_active: () => editor?.isActive("italic") },
|
|
724
|
+
{ caption: "Underlie", description: "Marks text as underlined", icon: FaUnderline, on_choice: makeUnderline, is_active: () => editor?.isActive("underline") },
|
|
725
|
+
{ caption: "Strikethrough", description: "Marks text as strikethrough", icon: FaStrikethrough, on_choice: makeStrikethrough, is_active: () => editor?.isActive("strike") },
|
|
684
726
|
{ caption: "Other blocks", separator: true },
|
|
685
727
|
{ caption: "Image", description: "Add image to document", icon: FaImage, on_choice: (range) => {
|
|
686
728
|
if (range)
|
|
@@ -91,7 +91,6 @@ function editable_if_needed(node, editable2) {
|
|
|
91
91
|
_editable(node, editable2);
|
|
92
92
|
}
|
|
93
93
|
function on_link_clicked(e) {
|
|
94
|
-
auto_hide_sidebar();
|
|
95
94
|
if (selectable)
|
|
96
95
|
handleSelect(e);
|
|
97
96
|
else if (item)
|
|
@@ -101,8 +100,10 @@ function on_link_clicked(e) {
|
|
|
101
100
|
e.preventDefault();
|
|
102
101
|
} else
|
|
103
102
|
e.stopPropagation();
|
|
104
|
-
} else
|
|
103
|
+
} else {
|
|
105
104
|
e.stopPropagation();
|
|
105
|
+
auto_hide_sidebar();
|
|
106
|
+
}
|
|
106
107
|
}
|
|
107
108
|
function on_contextmenu(e) {
|
|
108
109
|
if (!operations)
|
package/desk.svelte
CHANGED
|
@@ -20,8 +20,9 @@
|
|
|
20
20
|
alerts } from './stores.js'
|
|
21
21
|
|
|
22
22
|
//import { AuthorizedView} from '@humandialog/auth.svelte'
|
|
23
|
-
import { handleSelect, isDeviceSmallerThan, isOnScreenKeyboardVisible, removeAt, UI } from './utils'
|
|
23
|
+
import { handleSelect, isDeviceSmallerThan, isOnNavigationPage, isOnScreenKeyboardVisible, removeAt, UI } from './utils'
|
|
24
24
|
import { afterUpdate, onMount } from 'svelte';
|
|
25
|
+
import {location} from 'svelte-spa-router'
|
|
25
26
|
|
|
26
27
|
export let layout;
|
|
27
28
|
|
|
@@ -75,16 +76,26 @@
|
|
|
75
76
|
|
|
76
77
|
$: { visible_sidebar = $main_sidebar_visible_store
|
|
77
78
|
|
|
78
|
-
if(
|
|
79
|
+
if(!is_small)
|
|
79
80
|
{
|
|
80
|
-
|
|
81
|
-
|
|
81
|
+
if(visible_sidebar == "*")
|
|
82
|
+
{
|
|
83
|
+
main_side_panel_visibility = "hidden"
|
|
84
|
+
lg_content_area_horizontal_dim = ""
|
|
85
|
+
}
|
|
86
|
+
else
|
|
87
|
+
{
|
|
88
|
+
main_side_panel_visibility = "fixed lg:block"
|
|
89
|
+
lg_content_area_horizontal_dim = `lg:left-[360px] lg:w-[calc(100vw-360px)]`
|
|
90
|
+
}
|
|
82
91
|
}
|
|
83
92
|
else
|
|
84
93
|
{
|
|
85
|
-
main_side_panel_visibility = "
|
|
86
|
-
lg_content_area_horizontal_dim =
|
|
87
|
-
}
|
|
94
|
+
main_side_panel_visibility = "hidden"
|
|
95
|
+
lg_content_area_horizontal_dim = ""
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
console.log('main_side_panel_visibility', main_side_panel_visibility)
|
|
88
99
|
}
|
|
89
100
|
|
|
90
101
|
let tools_visibility = "hidden"
|
|
@@ -95,6 +106,9 @@
|
|
|
95
106
|
let fab_base_visibility = "hidden"
|
|
96
107
|
let fab_visibility = fab_base_visibility;
|
|
97
108
|
let fab_bottom = "bottom-0"
|
|
109
|
+
let vertical_toolbar_visibility = "hidden sm:block"
|
|
110
|
+
let content_left = "left-0 sm:left-[40px]";
|
|
111
|
+
let content_width = "w-screen sm:w-[calc(100vw-40px)] ";
|
|
98
112
|
|
|
99
113
|
let content_top = ""
|
|
100
114
|
let content_height = ""
|
|
@@ -147,6 +161,36 @@
|
|
|
147
161
|
fab_visibility = fab_base_visibility;
|
|
148
162
|
}
|
|
149
163
|
|
|
164
|
+
|
|
165
|
+
$: navigationPageVisible = navigationPageSetup($location);
|
|
166
|
+
function navigationPageSetup(...args)
|
|
167
|
+
{
|
|
168
|
+
if(!is_small)
|
|
169
|
+
{
|
|
170
|
+
vertical_toolbar_visibility = "hidden sm:block"
|
|
171
|
+
content_left = "left-0 sm:left-[40px]";
|
|
172
|
+
content_width = "w-screen sm:w-[calc(100vw-40px)]";
|
|
173
|
+
return false;
|
|
174
|
+
}
|
|
175
|
+
else
|
|
176
|
+
{
|
|
177
|
+
if(isOnNavigationPage())
|
|
178
|
+
{
|
|
179
|
+
vertical_toolbar_visibility = "block"
|
|
180
|
+
content_left = "left-[50px]";
|
|
181
|
+
content_width = "w-[calc(100vw-50px)] ";
|
|
182
|
+
return true;
|
|
183
|
+
}
|
|
184
|
+
else
|
|
185
|
+
{
|
|
186
|
+
vertical_toolbar_visibility = "hidden sm:block"
|
|
187
|
+
content_left = "left-0 sm:left-[40px]";
|
|
188
|
+
content_width = "w-screen sm:w-[calc(100vw-40px)] ";
|
|
189
|
+
return false;
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
|
|
150
194
|
//$: screen.width = innerWidth;
|
|
151
195
|
|
|
152
196
|
$: switchBodyClass($dark_mode_store);
|
|
@@ -163,10 +207,10 @@
|
|
|
163
207
|
setViewportHeight(vp)
|
|
164
208
|
|
|
165
209
|
document.addEventListener('selectionchange', onSelectionChanged)
|
|
166
|
-
document.addEventListener('focusout', onFocusOut)
|
|
210
|
+
//document.addEventListener('focusout', onFocusOut)
|
|
167
211
|
|
|
168
212
|
return () => {
|
|
169
|
-
|
|
213
|
+
// document.removeEventListener('focusout', onFocusOut)
|
|
170
214
|
document.removeEventListener('selectionchange', onSelectionChanged)
|
|
171
215
|
vp?.removeEventListener('resize', onViewportResize)
|
|
172
216
|
window.removeEventListener('resize', on_resize)
|
|
@@ -284,9 +328,9 @@
|
|
|
284
328
|
<!--#######################################################-->
|
|
285
329
|
<!--## VERTICAL TOOLBAR ##################-->
|
|
286
330
|
<!--#######################################################-->
|
|
287
|
-
<div class="
|
|
288
|
-
<div class="sticky top-0 flex h-full w-10 bg-stone-800 dark:bg-stone-950 flex-col items-center text-stone-100 shadow">
|
|
289
|
-
<VerticalToolbar appConfig={layout}/>
|
|
331
|
+
<div class="{vertical_toolbar_visibility} fixed left-0 top-[50px] sm:top-0 w-[50px] sm:w-[40px] h-screen z-20 inset-0 overflow-hidden">
|
|
332
|
+
<div class="sticky top-0 flex h-full w-12 sm:w-10 bg-stone-800 dark:bg-stone-950 flex-col items-center text-stone-100 shadow">
|
|
333
|
+
<VerticalToolbar appConfig={layout} mobile={is_small}/>
|
|
290
334
|
</div>
|
|
291
335
|
</div>
|
|
292
336
|
|
|
@@ -318,7 +362,7 @@
|
|
|
318
362
|
behaviour is the content expand vertically, and only vertical scrollbar can be visible.
|
|
319
363
|
When content on the main page needs to be expanded horizontally (like kanban chart for example) then
|
|
320
364
|
that component should define overflow-x-* itself -->
|
|
321
|
-
<section on:click|capture={auto_hide_sidebar} class="">
|
|
365
|
+
<section on:click|capture={() => { if(!navigationPageVisible) auto_hide_sidebar()} } class="">
|
|
322
366
|
|
|
323
367
|
<!--###########################################################-->
|
|
324
368
|
<!--## HORIZONTAL TOOLS ######################-->
|
|
@@ -344,8 +388,9 @@
|
|
|
344
388
|
<!--#######################################################-->
|
|
345
389
|
<!-- fixed => relative, content-height => min content height -- -->
|
|
346
390
|
<div id="__hd_svelte_main_content_container"
|
|
347
|
-
class="relative
|
|
348
|
-
|
|
391
|
+
class="relative
|
|
392
|
+
{content_left}
|
|
393
|
+
{content_width}
|
|
349
394
|
{content_top}
|
|
350
395
|
{lg_content_area_horizontal_dim}
|
|
351
396
|
z-0 overflow-x-hidden
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import {FaUsers, FaCog, FaSignInAlt, FaSignOutAlt, FaBars, FaToggleOn, FaToggleOff} from 'svelte-icons/fa/'
|
|
3
3
|
//import GoPrimitiveDot from 'svelte-icons/go/GoPrimitiveDot.svelte'
|
|
4
4
|
import {showMenu} from './components/menu'
|
|
5
|
-
import {push} from 'svelte-spa-router'
|
|
5
|
+
import {push, pop, location} from 'svelte-spa-router'
|
|
6
6
|
import {contextItemsStore, context_info_store, contextToolbarOperations, data_tick_store} from './stores.js'
|
|
7
7
|
//import Menu from './components/contextmenu.svelte'
|
|
8
8
|
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
import {session, signInHRef, signOutHRef} from '@humandialog/auth.svelte'
|
|
25
25
|
|
|
26
26
|
import VerticalToolbar from './vertical.toolbar.svelte'
|
|
27
|
-
import { isDeviceSmallerThan } from './utils.js';
|
|
27
|
+
import { isDeviceSmallerThan, isOnNavigationPage, pushNavigationPage, popNavigationPage } from './utils.js';
|
|
28
28
|
|
|
29
29
|
|
|
30
30
|
export let appConfig;
|
|
@@ -82,7 +82,36 @@
|
|
|
82
82
|
function toggle_navigator(e)
|
|
83
83
|
{
|
|
84
84
|
if(isDeviceSmallerThan('sm'))
|
|
85
|
-
|
|
85
|
+
{
|
|
86
|
+
if(isOnNavigationPage())
|
|
87
|
+
{
|
|
88
|
+
popNavigationPage();
|
|
89
|
+
}
|
|
90
|
+
else
|
|
91
|
+
{
|
|
92
|
+
if(tabs.length == 1)
|
|
93
|
+
{
|
|
94
|
+
$sidebar_left_pos = 0;
|
|
95
|
+
show_sidebar(tabs[0]);
|
|
96
|
+
}
|
|
97
|
+
else
|
|
98
|
+
{
|
|
99
|
+
let sidebar = $main_sidebar_visible_store;
|
|
100
|
+
if(sidebar == "*")
|
|
101
|
+
{
|
|
102
|
+
if((!previously_visible_sidebar) || previously_visible_sidebar === '*')
|
|
103
|
+
sidebar = Object.keys(appConfig.sidebar)[0];
|
|
104
|
+
else
|
|
105
|
+
sidebar = previously_visible_sidebar;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
$sidebar_left_pos = 40;
|
|
109
|
+
show_sidebar(sidebar)
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
pushNavigationPage();
|
|
113
|
+
}
|
|
114
|
+
}
|
|
86
115
|
else
|
|
87
116
|
{
|
|
88
117
|
|
|
@@ -282,7 +311,7 @@
|
|
|
282
311
|
|
|
283
312
|
</div>
|
|
284
313
|
|
|
285
|
-
{#if tabs.length > 1 && $main_sidebar_visible_store != "*"}
|
|
314
|
+
{#if false && tabs.length > 1 && $main_sidebar_visible_store != "*"}
|
|
286
315
|
<div class="no-print flex-none block fixed left-0 top-[40px] w-[40px] h-screen z-20 inset-0 overflow-hidden">
|
|
287
316
|
<div class="sticky top-0 flex h-full w-10 bg-stone-900 flex-col items-center text-stone-100 shadow">
|
|
288
317
|
<VerticalToolbar {appConfig} mobile={true}/>
|
package/index.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ export { default as Row } from "./tiles.row.svelte";
|
|
|
4
4
|
export { default as Box } from "./form.box.svelte";
|
|
5
5
|
export { default as Operations } from './operations.svelte';
|
|
6
6
|
export { default as Layout } from './desk.svelte';
|
|
7
|
+
export { default as VerticalToolbar } from './vertical.toolbar.svelte';
|
|
7
8
|
export { default as Icon } from "./components/icon.svelte";
|
|
8
9
|
export { default as Button } from './components/button.svelte';
|
|
9
10
|
export { default as Checkbox } from './components/checkbox.svelte';
|
|
@@ -54,7 +55,7 @@ export { default as KanbanTagsProperty } from './components/kanban/kanban.tags.s
|
|
|
54
55
|
export { default as KanbanCallbacks } from './components/kanban/kanban.callbacks.svelte';
|
|
55
56
|
export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
|
|
56
57
|
export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible } from './utils';
|
|
57
|
-
export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert } from './stores.js';
|
|
58
|
+
export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store } from './stores.js';
|
|
58
59
|
export { data_tick_store, // tmp
|
|
59
60
|
hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";
|
|
60
61
|
export { contextToolbarOperations, pageToolbarOperations, contextItemsStore, contextTypesStore } from './stores';
|
package/index.js
CHANGED
|
@@ -8,6 +8,7 @@ export { default as Box } from "./form.box.svelte";
|
|
|
8
8
|
//export { default as TilesVerticalRow } from "./tiles.vertical.row.svelte";
|
|
9
9
|
export { default as Operations } from './operations.svelte';
|
|
10
10
|
export { default as Layout } from './desk.svelte';
|
|
11
|
+
export { default as VerticalToolbar } from './vertical.toolbar.svelte';
|
|
11
12
|
// @ts-ignore
|
|
12
13
|
export { default as Icon } from "./components/icon.svelte";
|
|
13
14
|
export { default as Button } from './components/button.svelte';
|
|
@@ -60,7 +61,7 @@ export { default as KanbanTagsProperty } from './components/kanban/kanban.tags.s
|
|
|
60
61
|
export { default as KanbanCallbacks } from './components/kanban/kanban.callbacks.svelte';
|
|
61
62
|
export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
|
|
62
63
|
export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible } from './utils';
|
|
63
|
-
export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert } from './stores.js';
|
|
64
|
+
export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store } from './stores.js';
|
|
64
65
|
export { data_tick_store, // tmp
|
|
65
66
|
hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";
|
|
66
67
|
export { contextToolbarOperations, pageToolbarOperations, contextItemsStore, contextTypesStore } from './stores'; // tmp
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@humandialog/forms.svelte",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.6",
|
|
4
4
|
"description": "Basic Svelte UI components for Object Reef applications",
|
|
5
5
|
"devDependencies": {
|
|
6
6
|
"@playwright/test": "^1.28.1",
|
|
@@ -28,8 +28,15 @@
|
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@humandialog/auth.svelte": "^1.8.3",
|
|
30
30
|
"@tiptap/core": "^2.11.0",
|
|
31
|
+
"@tiptap/extension-bullet-list": "^2.11.5",
|
|
32
|
+
"@tiptap/extension-code-block": "^2.11.5",
|
|
31
33
|
"@tiptap/extension-image": "^2.11.0",
|
|
32
34
|
"@tiptap/extension-link": "^2.11.3",
|
|
35
|
+
"@tiptap/extension-list-item": "^2.11.5",
|
|
36
|
+
"@tiptap/extension-table": "^2.11.5",
|
|
37
|
+
"@tiptap/extension-table-cell": "^2.11.5",
|
|
38
|
+
"@tiptap/extension-table-header": "^2.11.5",
|
|
39
|
+
"@tiptap/extension-table-row": "^2.11.5",
|
|
33
40
|
"@tiptap/extension-underline": "^2.11.3",
|
|
34
41
|
"@tiptap/pm": "^2.11.0",
|
|
35
42
|
"@tiptap/starter-kit": "^2.11.0",
|
package/stores.d.ts
CHANGED
|
@@ -37,7 +37,7 @@ export function onErrorShowAlert(txt: any): void;
|
|
|
37
37
|
export const dark_mode_store: import("svelte/store").Writable<any>;
|
|
38
38
|
export const main_sidebar_visible_store: import("svelte/store").Writable<any>;
|
|
39
39
|
export let previously_visible_sidebar: string;
|
|
40
|
-
export
|
|
40
|
+
export const sidebar_left_pos: import("svelte/store").Writable<number>;
|
|
41
41
|
export const tools_visible_store: import("svelte/store").Writable<any>;
|
|
42
42
|
export const bottom_bar_visible_store: import("svelte/store").Writable<any>;
|
|
43
43
|
export const right_sidebar_visible_store: import("svelte/store").Writable<boolean>;
|
package/stores.js
CHANGED
|
@@ -80,7 +80,7 @@ export const main_sidebar_visible_store = writable((localStorage.main_sidebar_vi
|
|
|
80
80
|
main_sidebar_visible_store.subscribe( (value) => { localStorage.main_sidebar_visible_store = value });
|
|
81
81
|
|
|
82
82
|
export let previously_visible_sidebar = "";
|
|
83
|
-
export
|
|
83
|
+
export const sidebar_left_pos = writable(0)
|
|
84
84
|
|
|
85
85
|
let has_saved_tools_visible = false;
|
|
86
86
|
function create_tools_visible_store()
|
|
@@ -110,6 +110,7 @@ export const visible_property_tab_store = writable('');
|
|
|
110
110
|
|
|
111
111
|
export function restore_defults()
|
|
112
112
|
{
|
|
113
|
+
|
|
113
114
|
main_sidebar_visible_store.set('*');
|
|
114
115
|
tools_visible_store.set(false);
|
|
115
116
|
bottom_bar_visible_store.set(false);
|
|
@@ -121,6 +122,8 @@ export function toggle_sidebar(index)
|
|
|
121
122
|
{
|
|
122
123
|
previously_visible_sidebar = get(main_sidebar_visible_store);
|
|
123
124
|
|
|
125
|
+
console.log('toggle_sidebar', previously_visible_sidebar, '=>', index)
|
|
126
|
+
|
|
124
127
|
if(get(main_sidebar_visible_store) == index)
|
|
125
128
|
main_sidebar_visible_store.set('*')
|
|
126
129
|
else
|
|
@@ -129,8 +132,8 @@ export function toggle_sidebar(index)
|
|
|
129
132
|
|
|
130
133
|
export function auto_hide_sidebar()
|
|
131
134
|
{
|
|
135
|
+
console.log('auto_hide_sidebar')
|
|
132
136
|
//console.log("sw: " + window.innerWidth, SCREEN_SIZES.lg)
|
|
133
|
-
|
|
134
137
|
if(window.innerWidth < SCREEN_SIZES.lg)
|
|
135
138
|
hide_sidebar()
|
|
136
139
|
}
|
package/utils.d.ts
CHANGED
|
@@ -28,6 +28,9 @@ export function remove(array: any, element: any): any;
|
|
|
28
28
|
export function swapElements(array: any, e1: any, e2: any): any;
|
|
29
29
|
export function resizeImage(file: any, maxWidth?: number, maxHeight?: number, contentType?: string, quality?: number): Promise<any>;
|
|
30
30
|
export function isOnScreenKeyboardVisible(): boolean;
|
|
31
|
+
export function isOnNavigationPage(): boolean;
|
|
32
|
+
export function pushNavigationPage(): void;
|
|
33
|
+
export function popNavigationPage(): void;
|
|
31
34
|
export namespace icons {
|
|
32
35
|
const symbols: null;
|
|
33
36
|
}
|
|
@@ -42,3 +45,4 @@ export namespace UI {
|
|
|
42
45
|
const operations: null;
|
|
43
46
|
const fab: null;
|
|
44
47
|
}
|
|
48
|
+
export const NAVIGATION_PAGE_PATH: "/";
|
package/utils.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { getContext, tick } from "svelte";
|
|
2
2
|
import {get} from 'svelte/store'
|
|
3
3
|
import { contextItemsStore, contextToolbarOperations, pageToolbarOperations, data_tick_store } from "./stores";
|
|
4
|
-
import {
|
|
4
|
+
import {location, push, pop} from 'svelte-spa-router'
|
|
5
5
|
|
|
6
6
|
export let icons = {symbols :null}
|
|
7
7
|
|
|
@@ -623,3 +623,24 @@ export const UI = {
|
|
|
623
623
|
operations: null,
|
|
624
624
|
fab: null
|
|
625
625
|
}
|
|
626
|
+
|
|
627
|
+
export const NAVIGATION_PAGE_PATH = '/'
|
|
628
|
+
export function isOnNavigationPage()
|
|
629
|
+
{
|
|
630
|
+
const loc = get(location)
|
|
631
|
+
if(loc == NAVIGATION_PAGE_PATH)
|
|
632
|
+
return true;
|
|
633
|
+
else
|
|
634
|
+
return false;
|
|
635
|
+
}
|
|
636
|
+
|
|
637
|
+
export function pushNavigationPage()
|
|
638
|
+
{
|
|
639
|
+
push(NAVIGATION_PAGE_PATH)
|
|
640
|
+
}
|
|
641
|
+
|
|
642
|
+
export function popNavigationPage()
|
|
643
|
+
{
|
|
644
|
+
if(isOnNavigationPage())
|
|
645
|
+
pop();
|
|
646
|
+
}
|
package/vertical.toolbar.svelte
CHANGED
|
@@ -23,8 +23,9 @@
|
|
|
23
23
|
} from "./stores.js";
|
|
24
24
|
import Icon from './components/icon.svelte';
|
|
25
25
|
import {session, signInHRef, signOutHRef} from '@humandialog/auth.svelte'
|
|
26
|
-
import { push } from 'svelte-spa-router';
|
|
26
|
+
import { pop, push } from 'svelte-spa-router';
|
|
27
27
|
import { tick } from 'svelte';
|
|
28
|
+
import { popNavigationPage } from './utils';
|
|
28
29
|
|
|
29
30
|
|
|
30
31
|
export let appConfig;
|
|
@@ -98,7 +99,12 @@
|
|
|
98
99
|
if(!mobile)
|
|
99
100
|
toggle_sidebar(key);
|
|
100
101
|
else
|
|
101
|
-
|
|
102
|
+
{
|
|
103
|
+
if($main_sidebar_visible_store == key)
|
|
104
|
+
popNavigationPage();
|
|
105
|
+
else
|
|
106
|
+
show_sidebar(key);
|
|
107
|
+
}
|
|
102
108
|
}
|
|
103
109
|
|
|
104
110
|
function show_options(e)
|
|
@@ -319,7 +325,7 @@
|
|
|
319
325
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
320
326
|
|
|
321
327
|
<section class="no-print flex flex-col w-full h-full" on:click={clearSelection}>
|
|
322
|
-
<div class="px-0 w-10">
|
|
328
|
+
<div class="px-0 w-12 sm:w-10">
|
|
323
329
|
{#each tabs as tab}
|
|
324
330
|
{@const isSelected = $main_sidebar_visible_store == tab.key}
|
|
325
331
|
<button
|