@humandialog/forms.svelte 1.3.5 → 1.3.7
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 +165 -126
- package/components/document/editor.svelte +70 -14
- package/components/document/internal/palette.row.big.svelte +59 -0
- package/components/document/internal/palette.row.big.svelte.d.ts +46 -0
- package/components/document/internal/palette.row.svelte +6 -16
- package/components/document/internal/palette.svelte +3 -2
- package/components/sidebar/sidebar.item.svelte +3 -2
- package/desk.svelte +58 -13
- package/horizontal.toolbar.svelte +33 -4
- package/index.d.ts +3 -2
- package/index.js +3 -2
- package/package.json +9 -1
- package/stores.d.ts +1 -1
- package/stores.js +5 -2
- package/utils.d.ts +6 -0
- package/utils.js +35 -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
|
|
@@ -39,6 +46,7 @@ export function activateMainOperation() {
|
|
|
39
46
|
const mainOperationButton = document.getElementById("__hd_fab_mainOperation");
|
|
40
47
|
if (!mainOperationButton)
|
|
41
48
|
return;
|
|
49
|
+
console.log("activateMainOperation");
|
|
42
50
|
mainOperationButton.click();
|
|
43
51
|
}
|
|
44
52
|
function on_click(e, operation) {
|
|
@@ -91,80 +99,163 @@ function getSelectionPos() {
|
|
|
91
99
|
} else
|
|
92
100
|
return 0;
|
|
93
101
|
}
|
|
102
|
+
function calculatePosition(operation) {
|
|
103
|
+
let right = 0;
|
|
104
|
+
let result = `bottom: 10px; right:${right}px`;
|
|
105
|
+
return result;
|
|
106
|
+
}
|
|
107
|
+
function operationVisible(operation) {
|
|
108
|
+
return false;
|
|
109
|
+
}
|
|
94
110
|
</script>
|
|
95
111
|
|
|
96
|
-
{#if
|
|
97
|
-
{
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
+
{#if isMain}
|
|
113
|
+
{#if operations && operations.length > 0}
|
|
114
|
+
{#each operations as operation, idx}
|
|
115
|
+
{#if operationVisible(operation)}
|
|
116
|
+
<button
|
|
117
|
+
class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300
|
|
118
|
+
font-medium rounded-full text-sm text-center shadow-md
|
|
119
|
+
w-[55px] h-[55px]
|
|
120
|
+
fixed m-0 absolute bottom-0
|
|
121
|
+
dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
|
|
122
|
+
flex items-center justify-center
|
|
123
|
+
disable-dbl-tap-zoom"
|
|
124
|
+
style={calculatePosition(operation)}
|
|
125
|
+
on:click|stopPropagation={(e) => {on_click(e, mainOperation)}}
|
|
126
|
+
on:mousedown={mousedown} >
|
|
127
|
+
<div class="w-7 h-7"><svelte:component this={operation.icon}/></div>
|
|
128
|
+
</button>
|
|
129
|
+
{/if}
|
|
130
|
+
{/each}
|
|
131
|
+
{/if}
|
|
132
|
+
{:else}
|
|
112
133
|
|
|
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>
|
|
134
|
+
{#if operations && operations.length > 0}
|
|
135
|
+
{@const topPosition = 350}
|
|
136
|
+
{@const verticalPosition = mainOperation.aboveKeyboard ? `bottom: ${topPosition}px` : "bottom: 10px"}
|
|
137
|
+
<button id="__hd_fab_mainOperation"
|
|
138
|
+
class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300
|
|
139
|
+
font-medium rounded-full text-sm text-center shadow-md
|
|
140
|
+
w-[55px] h-[55px]
|
|
141
|
+
fixed m-0 absolute bottom-0 right-[0px]
|
|
142
|
+
dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
|
|
143
|
+
flex items-center justify-center
|
|
144
|
+
disable-dbl-tap-zoom"
|
|
145
|
+
style={verticalPosition}
|
|
146
|
+
on:click|stopPropagation={(e) => {on_click(e, mainOperation)}}
|
|
147
|
+
on:mousedown={mousedown} >
|
|
148
|
+
<div class="w-7 h-7"><svelte:component this={mainOperation.icon}/></div>
|
|
149
|
+
</button>
|
|
140
150
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
151
|
+
{#if secondaryOperation || isExpandable}
|
|
152
|
+
|
|
153
|
+
<!-- horizontal container -->
|
|
154
|
+
<div class="flex flex-row m-0 absolute bottom-[10px] right-[60px]">
|
|
155
|
+
|
|
156
|
+
{#if isExpandable}
|
|
157
|
+
<!-- Expander -->
|
|
158
|
+
<button class=" bg-transparent mr-2
|
|
159
|
+
w-[55px] h-[55px]
|
|
160
|
+
flex items-center justify-center
|
|
161
|
+
disable-dbl-tap-zoom"
|
|
162
|
+
on:click|stopPropagation={toggleExpandToolboxH}
|
|
163
|
+
on:mousedown={mousedown}>
|
|
164
|
+
<div class=" w-10 h-10
|
|
165
|
+
text-white bg-zinc-500 hover:bg-zinc-500
|
|
166
|
+
font-medium rounded-full text-sm text-center shadow-md
|
|
167
|
+
dark:bg-zinc-500 dark:hover:bg-zinc-500
|
|
168
|
+
flex items-center justify-center">
|
|
169
|
+
<div class="w-2 h-2">
|
|
170
|
+
{#if hToolboxExpanded}
|
|
171
|
+
<FaCircle/>
|
|
172
|
+
{:else}
|
|
173
|
+
<FaCircle/>
|
|
174
|
+
{/if}
|
|
155
175
|
</div>
|
|
156
|
-
</
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
176
|
+
</div>
|
|
177
|
+
</button>
|
|
178
|
+
|
|
179
|
+
{#if hToolboxExpanded}
|
|
180
|
+
{#if secondaryOperation}
|
|
181
|
+
<button class=" bg-transparent
|
|
182
|
+
mx-0 mr-2 w-[55px] h-[55px]
|
|
183
|
+
flex items-center justify-center
|
|
184
|
+
disable-dbl-tap-zoom"
|
|
185
|
+
on:click|stopPropagation={(e) => {on_click(e, secondaryOperation)}}
|
|
186
|
+
on:mousedown={mousedown}>
|
|
187
|
+
<div class=" w-10 h-10
|
|
188
|
+
text-white bg-zinc-500 group-hover:bg-zinc-500
|
|
189
|
+
dark:bg-zinc-500 dark:group-hover:bg-zinc-500
|
|
190
|
+
font-medium rounded-full text-sm text-center shadow-md
|
|
191
|
+
flex items-center justify-center">
|
|
192
|
+
<div class="w-5 h-5"><svelte:component this={secondaryOperation.icon}/></div>
|
|
193
|
+
</div>
|
|
194
|
+
</button>
|
|
195
|
+
{:else if toolboxOperations.length > 0}
|
|
196
|
+
{@const toolbox=toolboxOperations.reverse()}
|
|
197
|
+
{#each toolbox as operation}
|
|
198
|
+
{#if !operation.separator}
|
|
199
|
+
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
200
|
+
<button class=" bg-transparent
|
|
201
|
+
mx-0 mr-2 w-[55px] h-[55px]
|
|
202
|
+
flex items-center justify-center
|
|
203
|
+
disable-dbl-tap-zoom"
|
|
204
|
+
on:click|stopPropagation={(e) => {on_click(e, operation)}}
|
|
205
|
+
on:mousedown={mousedown}>
|
|
206
|
+
<div class=" w-10 h-10
|
|
207
|
+
text-white bg-zinc-500 group-hover:bg-zinc-500
|
|
208
|
+
dark:bg-zinc-500 dark:group-hover:bg-zinc-500
|
|
209
|
+
font-medium rounded-full text-sm text-center shadow-md
|
|
210
|
+
flex items-center justify-center">
|
|
211
|
+
<div class="w-5 h-5"><svelte:component this={operation.icon}/></div>
|
|
212
|
+
</div>
|
|
213
|
+
</button>
|
|
214
|
+
{/if}
|
|
215
|
+
{/each}
|
|
216
|
+
|
|
217
|
+
{/if}
|
|
218
|
+
{/if}
|
|
219
|
+
{:else}
|
|
220
|
+
<button class=" bg-transparent
|
|
221
|
+
mx-0 mr-2 w-[55px] h-[55px]
|
|
222
|
+
flex items-center justify-center
|
|
223
|
+
disable-dbl-tap-zoom"
|
|
224
|
+
on:click|stopPropagation={(e) => {on_click(e, secondaryOperation)}}
|
|
225
|
+
on:mousedown={mousedown}>
|
|
226
|
+
<div class=" w-10 h-10
|
|
227
|
+
text-white bg-zinc-500 group-hover:bg-zinc-500
|
|
228
|
+
dark:bg-zinc-500 dark:group-hover:bg-zinc-500
|
|
229
|
+
font-medium rounded-full text-sm text-center shadow-md
|
|
230
|
+
flex items-center justify-center">
|
|
231
|
+
<div class="w-5 h-5"><svelte:component this={secondaryOperation.icon}/></div>
|
|
232
|
+
</div>
|
|
233
|
+
</button>
|
|
234
|
+
{/if}
|
|
235
|
+
|
|
236
|
+
</div>
|
|
237
|
+
{/if}
|
|
238
|
+
|
|
239
|
+
{#if operations.length > 2} <!-- has vertical operations -->
|
|
240
|
+
<!-- vertical tools container -->
|
|
241
|
+
<ul class="list-none m-0 absolute bottom-[70px] right-0">
|
|
242
|
+
{#if (isExpandable && vToolboxExpanded) || !isExpandable}
|
|
243
|
+
{@const verticalOperations = operations.slice(2).reverse()}
|
|
244
|
+
{#each verticalOperations as operation}
|
|
245
|
+
{#if !operation.separator}
|
|
246
|
+
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
247
|
+
<li class="flex flex-row px-0 py-0 justify-end group"
|
|
248
|
+
on:click|stopPropagation={(e) => {on_click(e, operation)}}
|
|
249
|
+
on:mousedown={mousedown}>
|
|
250
|
+
{#if operation.caption}
|
|
251
|
+
<div>
|
|
252
|
+
<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>
|
|
253
|
+
</div>
|
|
254
|
+
{/if}
|
|
162
255
|
<button class=" bg-transparent
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
on:click|stopPropagation={(e) => {on_click(e, operation)}}
|
|
167
|
-
on:mousedown={mousedown}>
|
|
256
|
+
mx-0 mb-2 w-[55px] h-[55px]
|
|
257
|
+
flex items-center justify-center
|
|
258
|
+
disable-dbl-tap-zoom">
|
|
168
259
|
<div class=" w-10 h-10
|
|
169
260
|
text-white bg-zinc-500 group-hover:bg-zinc-500
|
|
170
261
|
dark:bg-zinc-500 dark:group-hover:bg-zinc-500
|
|
@@ -173,66 +264,14 @@ function getSelectionPos() {
|
|
|
173
264
|
<div class="w-5 h-5"><svelte:component this={operation.icon}/></div>
|
|
174
265
|
</div>
|
|
175
266
|
</button>
|
|
176
|
-
|
|
177
|
-
{/
|
|
178
|
-
|
|
179
|
-
{/if}
|
|
267
|
+
</li>
|
|
268
|
+
{/if}
|
|
269
|
+
{/each}
|
|
180
270
|
{/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}
|
|
271
|
+
</ul>
|
|
272
|
+
{/if}
|
|
197
273
|
|
|
198
|
-
</div>
|
|
199
274
|
{/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
275
|
{/if}
|
|
237
276
|
|
|
238
277
|
<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";
|
|
@@ -175,7 +184,8 @@ const suggestion = {
|
|
|
175
184
|
lockNextBlurCallbacks++;
|
|
176
185
|
suggestionRange = props.range;
|
|
177
186
|
editor.commands.blur();
|
|
178
|
-
|
|
187
|
+
const cursorRect = props.clientRect();
|
|
188
|
+
setTimeout(() => show_command_palette(cursorRect), 100);
|
|
179
189
|
} else {
|
|
180
190
|
const cursorRect = props.clientRect();
|
|
181
191
|
show_command_palette(cursorRect);
|
|
@@ -219,7 +229,7 @@ const suggestion = {
|
|
|
219
229
|
let editorElement;
|
|
220
230
|
let editor;
|
|
221
231
|
const codeBlockClass = "ml-6 text-sm font-mono break-normal text-pink-700 dark:text-pink-600";
|
|
222
|
-
const
|
|
232
|
+
const _CodeBlock = Paragraph.extend({
|
|
223
233
|
name: "CodeBlock",
|
|
224
234
|
priority: 999,
|
|
225
235
|
addAttributes() {
|
|
@@ -440,7 +450,7 @@ onMount(() => {
|
|
|
440
450
|
Paragraph,
|
|
441
451
|
Text,
|
|
442
452
|
Heading.configure({
|
|
443
|
-
levels: [1, 2]
|
|
453
|
+
levels: [1, 2, 3, 4]
|
|
444
454
|
}),
|
|
445
455
|
/*Image.configure({
|
|
446
456
|
HTMLAttributes: {
|
|
@@ -450,6 +460,14 @@ onMount(() => {
|
|
|
450
460
|
CrossImage,
|
|
451
461
|
HardBreak,
|
|
452
462
|
HorizontalRule,
|
|
463
|
+
BulletList,
|
|
464
|
+
ListItem,
|
|
465
|
+
Table.configure({
|
|
466
|
+
resizable: true
|
|
467
|
+
}),
|
|
468
|
+
TableRow,
|
|
469
|
+
TableHeader,
|
|
470
|
+
TableCell,
|
|
453
471
|
// custom
|
|
454
472
|
CodeBlock,
|
|
455
473
|
CommentBlock,
|
|
@@ -558,13 +576,26 @@ function on_palette_shown() {
|
|
|
558
576
|
function on_palette_hidden() {
|
|
559
577
|
is_command_palette_visible = false;
|
|
560
578
|
}
|
|
561
|
-
function show_command_palette(
|
|
562
|
-
let rect = cursorRect;
|
|
579
|
+
function show_command_palette(cursor_rect) {
|
|
563
580
|
let client_rect = get_window_box();
|
|
581
|
+
if (isDeviceSmallerThan("sm"))
|
|
582
|
+
show_small_command_palette(client_rect);
|
|
583
|
+
else
|
|
584
|
+
show_big_command_palette(cursor_rect, client_rect);
|
|
585
|
+
}
|
|
586
|
+
function show_small_command_palette(client_rect) {
|
|
587
|
+
palette.max_height_px = client_rect.height - 64;
|
|
588
|
+
palette.width_px = client_rect.width - 96;
|
|
589
|
+
let x = 64, y = 32;
|
|
590
|
+
let show_above = false;
|
|
591
|
+
palette.show(x, y, show_above);
|
|
592
|
+
}
|
|
593
|
+
function show_big_command_palette(cursor_rect, client_rect) {
|
|
594
|
+
let rect = cursor_rect;
|
|
564
595
|
let top_space = rect.y;
|
|
565
596
|
let bottom_space = client_rect.height - (rect.y + rect.height);
|
|
566
597
|
palette.max_height_px = 500;
|
|
567
|
-
palette.width_px =
|
|
598
|
+
palette.width_px = 200;
|
|
568
599
|
let preferred_palette_height = palette.max_height_px;
|
|
569
600
|
let preferred_palette_width = palette.width_px;
|
|
570
601
|
let x = 0, y = 0;
|
|
@@ -628,11 +659,7 @@ function handleImagesChanges(transaction) {
|
|
|
628
659
|
deletedImageSrcs.forEach((src) => onRemoveImage(src));
|
|
629
660
|
}
|
|
630
661
|
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 },
|
|
662
|
+
//{ caption: 'Styles', separator: true },
|
|
636
663
|
{ caption: "Normal", description: "This is normal text style", tags: "text", icon: FaRemoveFormat, on_choice: (range) => {
|
|
637
664
|
if (range)
|
|
638
665
|
editor.chain().focus().deleteRange(range).setParagraph().run();
|
|
@@ -651,11 +678,23 @@ let commands = [
|
|
|
651
678
|
else
|
|
652
679
|
editor.commands.setHeading({ level: 2 });
|
|
653
680
|
}, is_active: () => editor?.isActive("heading", { level: 2 }) },
|
|
681
|
+
{ caption: "Heading 3", description: "Secondary heading", tags: "h3", icon: IcH3, on_choice: (range) => {
|
|
682
|
+
if (range)
|
|
683
|
+
editor.chain().focus().deleteRange(range).setHeading({ level: 3 }).run();
|
|
684
|
+
else
|
|
685
|
+
editor.commands.setHeading({ level: 3 });
|
|
686
|
+
}, is_active: () => editor?.isActive("heading", { level: 3 }) },
|
|
687
|
+
{ caption: "Heading 4", description: "Secondary heading", tags: "h4", icon: IcH4, on_choice: (range) => {
|
|
688
|
+
if (range)
|
|
689
|
+
editor.chain().focus().deleteRange(range).setHeading({ level: 4 }).run();
|
|
690
|
+
else
|
|
691
|
+
editor.commands.setHeading({ level: 4 });
|
|
692
|
+
}, is_active: () => editor?.isActive("heading", { level: 4 }) },
|
|
654
693
|
{ caption: "Code", description: "Source code monospace text", icon: FaCode, on_choice: (range) => {
|
|
655
694
|
if (range)
|
|
656
|
-
editor.chain().focus().deleteRange(range).
|
|
695
|
+
editor.chain().focus().deleteRange(range).setCodeBlock().run();
|
|
657
696
|
else
|
|
658
|
-
editor.commands.
|
|
697
|
+
editor.commands.setCodeBlock();
|
|
659
698
|
}, is_active: () => editor?.isActive("CodeBlock") },
|
|
660
699
|
{ caption: "Comment", description: "With this you can comment the above paragraph", icon: FaComment, on_choice: (range) => {
|
|
661
700
|
if (range)
|
|
@@ -681,6 +720,23 @@ let commands = [
|
|
|
681
720
|
else
|
|
682
721
|
editor.commands.setAsInfo();
|
|
683
722
|
}, is_active: () => editor?.isActive("InfoBlock") },
|
|
723
|
+
{ caption: "Bullet list", description: "Unordered list of items", icon: FaListUl, on_choice: (range) => {
|
|
724
|
+
if (range)
|
|
725
|
+
editor.chain().focus().deleteRange(range).toggleBulletList().run();
|
|
726
|
+
else
|
|
727
|
+
editor.commands.toggleBulletList();
|
|
728
|
+
}, is_active: () => editor?.isActive("bulletList") },
|
|
729
|
+
{ caption: "Table", description: "Table", icon: FaTable, on_choice: (range) => {
|
|
730
|
+
if (range)
|
|
731
|
+
editor.chain().focus().deleteRange(range).insertTable().run();
|
|
732
|
+
else
|
|
733
|
+
editor.commands.insertTable();
|
|
734
|
+
}, is_active: () => editor?.isActive("table") },
|
|
735
|
+
{ caption: "Format", separator: true },
|
|
736
|
+
{ caption: "Bold", description: "Marks text as bolded", tags: "strong", icon: FaBold, on_choice: makeBold, is_active: () => editor?.isActive("bold") },
|
|
737
|
+
{ caption: "Italic", description: "Marks text as italic", tags: "strong", icon: FaItalic, on_choice: makeItalic, is_active: () => editor?.isActive("italic") },
|
|
738
|
+
{ caption: "Underlie", description: "Marks text as underlined", icon: FaUnderline, on_choice: makeUnderline, is_active: () => editor?.isActive("underline") },
|
|
739
|
+
{ caption: "Strikethrough", description: "Marks text as strikethrough", icon: FaStrikethrough, on_choice: makeStrikethrough, is_active: () => editor?.isActive("strike") },
|
|
684
740
|
{ caption: "Other blocks", separator: true },
|
|
685
741
|
{ caption: "Image", description: "Add image to document", icon: FaImage, on_choice: (range) => {
|
|
686
742
|
if (range)
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
<svelte:options accessors={true}/>
|
|
2
|
+
<script>import Icon from "../../icon.svelte";
|
|
3
|
+
export let id;
|
|
4
|
+
export let cmd;
|
|
5
|
+
export let width_px = 400;
|
|
6
|
+
export let is_highlighted = false;
|
|
7
|
+
export let active = false;
|
|
8
|
+
let icon_placeholder_size = cmd.description ? 12 : 6;
|
|
9
|
+
let icon_size = cmd.icon_size ? cmd.icon_size : icon_placeholder_size - 6;
|
|
10
|
+
let cl = $$props.class ?? "";
|
|
11
|
+
$:
|
|
12
|
+
active_class = calculateBackground(is_highlighted, active);
|
|
13
|
+
function calculateBackground(...args) {
|
|
14
|
+
if (is_highlighted) {
|
|
15
|
+
if (active)
|
|
16
|
+
return "bg-stone-400/40 dark:bg-stone-400/40";
|
|
17
|
+
else
|
|
18
|
+
return "bg-stone-400/30 dark:bg-stone-400/30";
|
|
19
|
+
} else {
|
|
20
|
+
if (active)
|
|
21
|
+
return "bg-stone-400/20 dark:bg-stone-400/20";
|
|
22
|
+
else
|
|
23
|
+
return "";
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
let element;
|
|
27
|
+
export function scrollToView() {
|
|
28
|
+
element?.scrollIntoView({
|
|
29
|
+
block: "nearest",
|
|
30
|
+
inline: "nearest"
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
</script>
|
|
34
|
+
|
|
35
|
+
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
36
|
+
<div id={id} class="font-medium m-0 p-0 text-sm w-full text-left flex flew-row cursor-context-menu {active_class} {cl}"
|
|
37
|
+
on:click
|
|
38
|
+
on:mousemove
|
|
39
|
+
on:mousedown
|
|
40
|
+
bind:this={element}>
|
|
41
|
+
<div class="flex items-center justify-center" style:width={`${icon_placeholder_size*0.25}rem`}>
|
|
42
|
+
{#if cmd.icon}
|
|
43
|
+
<Icon size={icon_size} component={cmd.icon}/>
|
|
44
|
+
{/if}
|
|
45
|
+
</div>
|
|
46
|
+
<div class ="">
|
|
47
|
+
<p>{cmd.caption}</p>
|
|
48
|
+
{#if cmd.description}
|
|
49
|
+
{@const shortcut_width_px = cmd.shortcut ? 80 : 0}
|
|
50
|
+
<p class="text-sm font-normal text-stone-400 dark:text-stone-500 truncate inline-block"
|
|
51
|
+
style:max-width={`calc(${width_px-shortcut_width_px} - 3rem)`} >{cmd.description}</p>
|
|
52
|
+
{/if}
|
|
53
|
+
</div>
|
|
54
|
+
{#if cmd.shortcut}
|
|
55
|
+
<div class="pr-1 text-sm font-mono text-stone-500"
|
|
56
|
+
style:width={"80px"} >{cmd.shortcut}</div>
|
|
57
|
+
{/if}
|
|
58
|
+
</div>
|
|
59
|
+
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
import type { Document_command } from './Document_command';
|
|
3
|
+
declare const __propDef: {
|
|
4
|
+
props: {
|
|
5
|
+
[x: string]: any;
|
|
6
|
+
id: string;
|
|
7
|
+
cmd: Document_command;
|
|
8
|
+
width_px?: number | undefined;
|
|
9
|
+
is_highlighted?: boolean | undefined;
|
|
10
|
+
active?: boolean | undefined;
|
|
11
|
+
scrollToView?: (() => void) | undefined;
|
|
12
|
+
};
|
|
13
|
+
events: {
|
|
14
|
+
click: MouseEvent;
|
|
15
|
+
mousemove: MouseEvent;
|
|
16
|
+
mousedown: MouseEvent;
|
|
17
|
+
} & {
|
|
18
|
+
[evt: string]: CustomEvent<any>;
|
|
19
|
+
};
|
|
20
|
+
slots: {};
|
|
21
|
+
};
|
|
22
|
+
export type PaletteProps = typeof __propDef.props;
|
|
23
|
+
export type PaletteEvents = typeof __propDef.events;
|
|
24
|
+
export type PaletteSlots = typeof __propDef.slots;
|
|
25
|
+
export default class Palette extends SvelteComponentTyped<PaletteProps, PaletteEvents, PaletteSlots> {
|
|
26
|
+
get scrollToView(): () => void;
|
|
27
|
+
get id(): string;
|
|
28
|
+
/**accessor*/
|
|
29
|
+
set id(_: string);
|
|
30
|
+
get cmd(): Document_command;
|
|
31
|
+
/**accessor*/
|
|
32
|
+
set cmd(_: Document_command);
|
|
33
|
+
get width_px(): number | undefined;
|
|
34
|
+
/**accessor*/
|
|
35
|
+
set width_px(_: number | undefined);
|
|
36
|
+
get is_highlighted(): boolean | undefined;
|
|
37
|
+
/**accessor*/
|
|
38
|
+
set is_highlighted(_: boolean | undefined);
|
|
39
|
+
get active(): boolean | undefined;
|
|
40
|
+
/**accessor*/
|
|
41
|
+
set active(_: boolean | undefined);
|
|
42
|
+
get undefined(): any;
|
|
43
|
+
/**accessor*/
|
|
44
|
+
set undefined(_: any);
|
|
45
|
+
}
|
|
46
|
+
export {};
|
|
@@ -5,8 +5,8 @@ export let cmd;
|
|
|
5
5
|
export let width_px = 400;
|
|
6
6
|
export let is_highlighted = false;
|
|
7
7
|
export let active = false;
|
|
8
|
-
let
|
|
9
|
-
let
|
|
8
|
+
let icon_size = cmd.icon_size ? cmd.icon_size : 4;
|
|
9
|
+
let icon_placeholder_size = icon_size + 4;
|
|
10
10
|
let cl = $$props.class ?? "";
|
|
11
11
|
$:
|
|
12
12
|
active_class = calculateBackground(is_highlighted, active);
|
|
@@ -33,27 +33,17 @@ export function scrollToView() {
|
|
|
33
33
|
</script>
|
|
34
34
|
|
|
35
35
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
36
|
-
<div id={id} class="
|
|
36
|
+
<div id={id} class="w-full text-left flex flew-row cursor-context-menu {active_class} {cl}"
|
|
37
37
|
on:click
|
|
38
38
|
on:mousemove
|
|
39
39
|
on:mousedown
|
|
40
40
|
bind:this={element}>
|
|
41
|
-
<div class="flex items-center justify-center"
|
|
41
|
+
<div class="flex items-center justify-center space-x-10 px-4 py-2" >
|
|
42
42
|
{#if cmd.icon}
|
|
43
43
|
<Icon size={icon_size} component={cmd.icon}/>
|
|
44
44
|
{/if}
|
|
45
45
|
</div>
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
{#if cmd.description}
|
|
49
|
-
{@const shortcut_width_px = cmd.shortcut ? 80 : 0}
|
|
50
|
-
<p class="text-sm font-normal text-stone-400 dark:text-stone-500 truncate inline-block"
|
|
51
|
-
style:max-width={`calc(${width_px-shortcut_width_px} - 3rem)`} >{cmd.description}</p>
|
|
52
|
-
{/if}
|
|
53
|
-
</div>
|
|
54
|
-
{#if cmd.shortcut}
|
|
55
|
-
<div class="pr-1 text-sm font-mono text-stone-500"
|
|
56
|
-
style:width={"80px"} >{cmd.shortcut}</div>
|
|
57
|
-
{/if}
|
|
46
|
+
|
|
47
|
+
<h4>{cmd.caption}</h4>
|
|
58
48
|
</div>
|
|
59
49
|
|
|
@@ -28,6 +28,7 @@ export function showAsToolbox(rect) {
|
|
|
28
28
|
toolboxY = rect.bottom + margin;
|
|
29
29
|
toolboxY += window.scrollY;
|
|
30
30
|
css_style = `position: fixed; left:${toolboxX}px; top:${toolboxY}px;`;
|
|
31
|
+
console.log("toolbox: ", css_style);
|
|
31
32
|
dispatch("palette_shown");
|
|
32
33
|
}
|
|
33
34
|
let paletteElement;
|
|
@@ -220,7 +221,7 @@ function isRowActive(cmd) {
|
|
|
220
221
|
</script>
|
|
221
222
|
|
|
222
223
|
{#if isToolbox}
|
|
223
|
-
<menu class="
|
|
224
|
+
<menu class=" bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md
|
|
224
225
|
z-30
|
|
225
226
|
flex flex-row flex-nowrap"
|
|
226
227
|
style={css_style}
|
|
@@ -259,7 +260,7 @@ function isRowActive(cmd) {
|
|
|
259
260
|
</menu>
|
|
260
261
|
{:else}
|
|
261
262
|
<div id="__hd_FormattingPalette"
|
|
262
|
-
class="
|
|
263
|
+
class="bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md z-30 overflow-y-auto"
|
|
263
264
|
hidden={!visible}
|
|
264
265
|
style={css_style}
|
|
265
266
|
bind:this={paletteElement}>
|
|
@@ -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);
|
|
@@ -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';
|
|
@@ -53,8 +54,8 @@ export { default as KanbanComboProperty } from './components/kanban/kanban.combo
|
|
|
53
54
|
export { default as KanbanTagsProperty } from './components/kanban/kanban.tags.svelte';
|
|
54
55
|
export { default as KanbanCallbacks } from './components/kanban/kanban.callbacks.svelte';
|
|
55
56
|
export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
|
|
56
|
-
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';
|
|
57
|
+
export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, } from './utils';
|
|
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';
|
|
@@ -59,8 +60,8 @@ export { default as KanbanComboProperty } from './components/kanban/kanban.combo
|
|
|
59
60
|
export { default as KanbanTagsProperty } from './components/kanban/kanban.tags.svelte';
|
|
60
61
|
export { default as KanbanCallbacks } from './components/kanban/kanban.callbacks.svelte';
|
|
61
62
|
export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
|
|
62
|
-
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';
|
|
63
|
+
export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, } from './utils';
|
|
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.7",
|
|
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",
|
|
@@ -75,6 +82,7 @@
|
|
|
75
82
|
"./components/document/internal/h2.icon.svelte": "./components/document/internal/h2.icon.svelte",
|
|
76
83
|
"./components/document/internal/h3.icon.svelte": "./components/document/internal/h3.icon.svelte",
|
|
77
84
|
"./components/document/internal/h4.icon.svelte": "./components/document/internal/h4.icon.svelte",
|
|
85
|
+
"./components/document/internal/palette.row.big.svelte": "./components/document/internal/palette.row.big.svelte",
|
|
78
86
|
"./components/document/internal/palette.row.svelte": "./components/document/internal/palette.row.svelte",
|
|
79
87
|
"./components/document/internal/palette.svelte": "./components/document/internal/palette.svelte",
|
|
80
88
|
"./components/document/internal/Selection_helper": "./components/document/internal/Selection_helper.js",
|
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,11 @@ 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;
|
|
34
|
+
export function dec2hex(dec: any): any;
|
|
35
|
+
export function randomString(len: any): string;
|
|
31
36
|
export namespace icons {
|
|
32
37
|
const symbols: null;
|
|
33
38
|
}
|
|
@@ -42,3 +47,4 @@ export namespace UI {
|
|
|
42
47
|
const operations: null;
|
|
43
48
|
const fab: null;
|
|
44
49
|
}
|
|
50
|
+
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,37 @@ 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
|
+
}
|
|
647
|
+
|
|
648
|
+
export function dec2hex (dec)
|
|
649
|
+
{
|
|
650
|
+
return dec.toString(16).padStart(2, "0")
|
|
651
|
+
}
|
|
652
|
+
|
|
653
|
+
|
|
654
|
+
export function randomString(len)
|
|
655
|
+
{
|
|
656
|
+
var arr = new Uint8Array((len || 16) / 2)
|
|
657
|
+
window.crypto.getRandomValues(arr)
|
|
658
|
+
return Array.from(arr, dec2hex).join('')
|
|
659
|
+
}
|
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
|