|
1 | 1 | <script lang="ts"> |
2 | 2 | import { Card } from 'flowbite-svelte'; |
3 | | - import SentenceField from './SentenceField.svelte'; |
4 | | - import GlossInputRow from './GlossInputRow.svelte'; |
| 3 | + import LineCard from './LineCard.svelte'; |
5 | 4 | import { projectStore } from '$lib/state/project.svelte.js'; |
6 | | - import { settingsStore } from '$lib/state/settings.svelte.js'; |
| 5 | + import { MAX_LINES } from '$lib/serialization/schema.js'; |
7 | 6 | </script> |
8 | 7 |
|
9 | 8 | <Card class="w-full max-w-none p-4 sm:p-6" aria-labelledby="editor-heading"> |
|
32 | 31 | </div> |
33 | 32 | </div> |
34 | 33 | <p class="mb-4 w-full text-base text-gray-600 dark:text-gray-400"> |
35 | | - Edit the sentences here. To link words, click a word in the preview below, then click the |
36 | | - matching word on the other line — the connector will appear. You can link a word to multiple |
37 | | - words on the other side. Click a connector to remove it. Click a selected word again to deselect |
38 | | - it. |
| 34 | + Each row is a line of text with its own font and size. In the preview, click a word, then click |
| 35 | + a word on an <strong>adjacent</strong> line to connect them. Connectors only run between neighboring |
| 36 | + lines. Click a connector to remove it. Click the same word again to deselect. |
39 | 37 | </p> |
40 | | - <div class="grid grid-cols-12 gap-4"> |
41 | | - <div class="col-span-12 md:col-span-6"> |
42 | | - <SentenceField |
43 | | - label="Source sentence" |
44 | | - side="source" |
45 | | - rawText={projectStore.sourceTextRaw} |
46 | | - tokens={projectStore.sourceTokens} |
47 | | - onText={(v) => projectStore.setSourceText(v)} |
48 | | - /> |
49 | | - </div> |
50 | | - <div class="col-span-12 md:col-span-6"> |
51 | | - <SentenceField |
52 | | - label="Target sentence" |
53 | | - side="target" |
54 | | - rawText={projectStore.targetTextRaw} |
55 | | - tokens={projectStore.targetTokens} |
56 | | - onText={(v) => projectStore.setTargetText(v)} |
57 | | - /> |
58 | | - </div> |
| 38 | + {#each projectStore.lines as line, i (line.id)} |
| 39 | + <LineCard {line} index={i} total={projectStore.lines.length} /> |
| 40 | + {/each} |
| 41 | + <div class="mt-2 flex flex-wrap items-center gap-3"> |
| 42 | + <button |
| 43 | + type="button" |
| 44 | + class="rounded-none border border-primary-600 bg-primary-600 px-3 py-2 text-sm font-medium text-white hover:bg-primary-700 disabled:opacity-50 dark:border-primary-500 dark:bg-primary-600 dark:hover:bg-primary-500" |
| 45 | + disabled={projectStore.lines.length >= MAX_LINES} |
| 46 | + onclick={() => projectStore.addLine()} |
| 47 | + > |
| 48 | + Add line |
| 49 | + </button> |
| 50 | + {#if projectStore.lines.length >= MAX_LINES} |
| 51 | + <p class="text-sm text-amber-700 dark:text-amber-400"> |
| 52 | + Soft limit: {MAX_LINES} lines — consider simplifying for shorter share links. |
| 53 | + </p> |
| 54 | + {/if} |
59 | 55 | </div> |
60 | | - {#if settingsStore.settings.showGloss} |
61 | | - <div class="mt-4 grid grid-cols-12 gap-4"> |
62 | | - <div class="col-span-12 md:col-span-6"> |
63 | | - <p class="mb-2 text-base text-gray-600 dark:text-gray-400">Source glosses</p> |
64 | | - <GlossInputRow |
65 | | - tokens={projectStore.sourceTokens} |
66 | | - onGloss={(id, v) => projectStore.setSourceGloss(id, v)} |
67 | | - /> |
68 | | - </div> |
69 | | - <div class="col-span-12 md:col-span-6"> |
70 | | - <p class="mb-2 text-base text-gray-600 dark:text-gray-400">Target glosses</p> |
71 | | - <GlossInputRow |
72 | | - tokens={projectStore.targetTokens} |
73 | | - onGloss={(id, v) => projectStore.setTargetGloss(id, v)} |
74 | | - /> |
75 | | - </div> |
76 | | - </div> |
77 | | - {/if} |
78 | 56 | </Card> |
0 commit comments