Skip to content

Commit f901667

Browse files
anig1scuranig1scur
committed
chore: collapse config panel
1 parent ad73dd9 commit f901667

File tree

2 files changed

+138
-109
lines changed

2 files changed

+138
-109
lines changed

‎src/components/TocEditor.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ organize the ToCs in below to the target format, remove useless comments
167167
168168
<textarea
169169
bind:value={text}
170-
class="w-full h-full border myfocus leading-6 rounded p-2 text-sm"
170+
class="w-full h-full border myfocus leading-6 rounded p-2 text-sm border-gray-100"
171171
></textarea>
172172
</div>
173173
<div class="-ml-9">

‎src/routes/+page.svelte‎

Lines changed: 137 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import * as pdfjsLib from 'pdfjs-dist';
44
import Dropzone from 'svelte-file-dropzone';
55
import {PDFDocument} from 'pdf-lib';
6+
import {Eye, EyeOff} from 'lucide-svelte';
67
78
import TocEditor from '../components/TocEditor.svelte';
89
import PDFViewer from '../components/PDFViewer.svelte';
@@ -15,7 +16,14 @@
1516
1617
import {tocConfig} from '../stores';
1718
19+
let isTocConfigExpanded = false;
20+
21+
const toggleExpand = () => {
22+
isTocConfigExpanded = !isTocConfigExpanded;
23+
};
24+
1825
let config: TocConfig;
26+
1927
tocConfig.subscribe((value) => (config = value));
2028
2129
function updateTocField(fieldPath, value) {
@@ -133,129 +141,150 @@
133141
<Logo />
134142
</div>
135143
<div class="border-dashed border-gray-100 rounded border-2 p-2 my-4">
136-
<div class="border-dashed border-gray-100 rounded border-2 my-1 p-2">
137-
<input
138-
bind:checked={config.showNumberedList}
139-
type="checkbox"
140-
id="show_numbered_list"
141-
on:change={(e) => updateTocField('showNumberedList', e.target.checked)}
142-
/>
143-
<label for="show_numbered_list">with numbered list</label>
144-
</div>
145-
146-
<div class="border-dashed border-gray-100 rounded border-2 my-2 p-2 flex gap-6">
147-
<label
148-
class="whitespace-nowrap"
149-
for="page_offset">Page offset</label
144+
<div class="flex justify-between items-center">
145+
<h2>ToC Settings</h2>
146+
<button
147+
class="w-6 h-6 flex items-center justify-center"
148+
on:click={toggleExpand}
149+
aria-label="Toggle Expand/Collapse"
150150
>
151-
<input
152-
type="number"
153-
id="page_offset"
154-
bind:value={config.pageOffset}
155-
on:input={(e) => updateTocField('pageOffset', parseInt(e.target.value, 10) || 0)}
156-
class=" w-[80%]"
157-
/>
151+
{#if isTocConfigExpanded}
152+
<Eye class="text-gray-700" />
153+
{:else}
154+
<EyeOff class="text-gray-500" />
155+
{/if}
156+
</button>
158157
</div>
159158

160-
<div class="flex">
161-
<div class="w-36 inline-block mr-3">
162-
<h3 class="my-4 font-bold">First Level</h3>
163-
164-
<div class="border-dashed border-gray-100 rounded border-2 my-3 p-2 mr-2 w-32">
165-
<label for="first_level_font_size">Font Size</label>
166-
<input
167-
type="number"
168-
id="first_level_font_size"
169-
bind:value={config.firstLevel.fontSize}
170-
on:input={(e) => updateTocField('firstLevel.fontSize', parseInt(e.target.value, 10) || 0)}
171-
class="w-[80%]"
172-
/>
173-
</div>
174-
175-
<div class="border-dashed border-gray-100 rounded border-2 my-3 p-2 mr-2 w-32">
176-
<label for="first_level_dot_leader">Dot Leader</label>
177-
<input
178-
type="text"
179-
id="first_level_dot_leader"
180-
bind:value={config.firstLevel.dotLeader}
181-
on:input={(e) => updateTocField('firstLevel.dotLeader', e.target.value)}
182-
class=" w-[80%]"
183-
/>
184-
</div>
185-
186-
<div class="border-dashed border-gray-100 rounded border-2 my-3 p-2 mr-2 w-32">
187-
<label for="first_level_color">Color</label>
188-
<input
189-
type="color"
190-
id="first_level_color"
191-
bind:value={config.firstLevel.color}
192-
on:input={(e) => updateTocField('firstLevel.color', e.target.value)}
193-
class=" w-[80%]"
194-
/>
195-
</div>
196-
197-
<div class="border-dashed border-gray-100 rounded border-2 my-3 p-2 mr-2 w-32">
198-
<label for="first_level_line_spacing">Spacing</label>
159+
{#if isTocConfigExpanded}
160+
<div class="mt-3">
161+
<div class="border-dashed border-gray-100 rounded border-2 my-1 p-2 w-72">
199162
<input
200-
type="number"
201-
step="0.1"
202-
id="first_level_line_spacing"
203-
bind:value={config.firstLevel.lineSpacing}
204-
on:input={(e) => updateTocField('firstLevel.lineSpacing', parseFloat(e.target.value) || 1)}
205-
class=" w-[80%]"
163+
bind:checked={config.showNumberedList}
164+
type="checkbox"
165+
id="show_numbered_list"
166+
on:change={(e) => updateTocField('showNumberedList', e.target.checked)}
206167
/>
168+
<label for="show_numbered_list">with numbered list</label>
207169
</div>
208-
</div>
209-
<div class="w-36 inline-block">
210-
<h3 class="my-4 font-bold">Other Levels</h3>
211170

212-
<div class="border-dashed border-gray-100 rounded border-2 my-3 p-2">
213-
<label for="other_levels_font_size">Font Size</label>
171+
<div class="border-dashed border-gray-100 rounded border-2 my-2 p-2 w-72 flex gap-6">
172+
<label
173+
class="whitespace-nowrap"
174+
for="page_offset">Page offset</label
175+
>
214176
<input
215177
type="number"
216-
id="other_levels_font_size"
217-
bind:value={config.otherLevels.fontSize}
218-
on:input={(e) => updateTocField('otherLevels.fontSize', parseInt(e.target.value, 10) || 0)}
219-
class=" w-[80%]"
220-
/>
221-
</div>
222-
223-
<div class="border-dashed border-gray-100 rounded border-2 my-3 p-2">
224-
<label for="other_levels_dot_leader">Dot Leader</label>
225-
<input
226-
type="text"
227-
id="other_levels_dot_leader"
228-
bind:value={config.otherLevels.dotLeader}
229-
on:input={(e) => updateTocField('otherLevels.dotLeader', e.target.value)}
230-
class=" w-[80%]"
178+
id="page_offset"
179+
bind:value={config.pageOffset}
180+
on:input={(e) => updateTocField('pageOffset', parseInt(e.target.value, 10) || 0)}
181+
class="w-[80%]"
231182
/>
232183
</div>
233184

234-
<div class="border-dashed border-gray-100 rounded border-2 my-3 p-2">
235-
<label for="other_levels_color">Color</label>
236-
<input
237-
type="color"
238-
id="other_levels_color"
239-
bind:value={config.otherLevels.color}
240-
on:input={(e) => updateTocField('otherLevels.color', e.target.value)}
241-
class=" w-[80%]"
242-
/>
243-
</div>
185+
<div class="flex">
186+
<div class="w-36 inline-block mr-3">
187+
<h3 class="my-4 font-bold">First Level</h3>
188+
189+
<div class="border-dashed border-gray-100 rounded border-2 my-3 p-2 mr-2 w-32">
190+
<label for="first_level_font_size">Font Size</label>
191+
<input
192+
type="number"
193+
id="first_level_font_size"
194+
bind:value={config.firstLevel.fontSize}
195+
on:input={(e) => updateTocField('firstLevel.fontSize', parseInt(e.target.value, 10) || 0)}
196+
class="w-[80%]"
197+
/>
198+
</div>
199+
200+
<div class="border-dashed border-gray-100 rounded border-2 my-3 p-2 mr-2 w-32">
201+
<label for="first_level_dot_leader">Dot Leader</label>
202+
<input
203+
type="text"
204+
id="first_level_dot_leader"
205+
bind:value={config.firstLevel.dotLeader}
206+
on:input={(e) => updateTocField('firstLevel.dotLeader', e.target.value)}
207+
class="w-[80%]"
208+
/>
209+
</div>
210+
211+
<div class="border-dashed border-gray-100 rounded border-2 my-3 p-2 mr-2 w-32">
212+
<label for="first_level_color">Color</label>
213+
<input
214+
type="color"
215+
id="first_level_color"
216+
bind:value={config.firstLevel.color}
217+
on:input={(e) => updateTocField('firstLevel.color', e.target.value)}
218+
class="w-[80%]"
219+
/>
220+
</div>
221+
222+
<div class="border-dashed border-gray-100 rounded border-2 my-3 p-2 mr-2 w-32">
223+
<label for="first_level_line_spacing">Spacing</label>
224+
<input
225+
type="number"
226+
step="0.1"
227+
id="first_level_line_spacing"
228+
bind:value={config.firstLevel.lineSpacing}
229+
on:input={(e) => updateTocField('firstLevel.lineSpacing', parseFloat(e.target.value) || 1)}
230+
class="w-[80%]"
231+
/>
232+
</div>
233+
</div>
244234

245-
<div class="border-dashed border-gray-100 rounded border-2 my-3 p-2">
246-
<label for="other_levels_line_spacing">Spacing</label>
247-
<input
248-
type="number"
249-
step="0.1"
250-
id="other_levels_line_spacing"
251-
bind:value={config.otherLevels.lineSpacing}
252-
on:input={(e) => updateTocField('otherLevels.lineSpacing', parseFloat(e.target.value) || 1)}
253-
class=" w-[80%]"
254-
/>
235+
<div class="w-36 inline-block">
236+
<h3 class="my-4 font-bold">Other Levels</h3>
237+
238+
<div class="border-dashed border-gray-100 rounded border-2 my-3 p-2">
239+
<label for="other_levels_font_size">Font Size</label>
240+
<input
241+
type="number"
242+
id="other_levels_font_size"
243+
bind:value={config.otherLevels.fontSize}
244+
on:input={(e) => updateTocField('otherLevels.fontSize', parseInt(e.target.value, 10) || 0)}
245+
class="w-[80%]"
246+
/>
247+
</div>
248+
249+
<div class="border-dashed border-gray-100 rounded border-2 my-3 p-2">
250+
<label for="other_levels_dot_leader">Dot Leader</label>
251+
<input
252+
type="text"
253+
id="other_levels_dot_leader"
254+
bind:value={config.otherLevels.dotLeader}
255+
on:input={(e) => updateTocField('otherLevels.dotLeader', e.target.value)}
256+
class="w-[80%]"
257+
/>
258+
</div>
259+
260+
<div class="border-dashed border-gray-100 rounded border-2 my-3 p-2">
261+
<label for="other_levels_color">Color</label>
262+
<input
263+
type="color"
264+
id="other_levels_color"
265+
bind:value={config.otherLevels.color}
266+
on:input={(e) => updateTocField('otherLevels.color', e.target.value)}
267+
class="w-[80%]"
268+
/>
269+
</div>
270+
271+
<div class="border-dashed border-gray-100 rounded border-2 my-3 p-2">
272+
<label for="other_levels_line_spacing">Spacing</label>
273+
<input
274+
type="number"
275+
step="0.1"
276+
id="other_levels_line_spacing"
277+
bind:value={config.otherLevels.lineSpacing}
278+
on:input={(e) => updateTocField('otherLevels.lineSpacing', parseFloat(e.target.value) || 1)}
279+
class="w-[80%]"
280+
/>
281+
</div>
282+
</div>
255283
</div>
256284
</div>
257-
</div>
285+
{/if}
258286
</div>
287+
259288
<TocEditor />
260289
</div>
261290
<div class="flex flex-col flex-1">
@@ -269,7 +298,7 @@
269298
on:dragleave={() => (isDragging = false)}
270299
>
271300
<div
272-
class="max-w-5xl w-full absolute inset-0 p-8 border-2 border-dashed rounded-lg text-center cursor-pointer transition-colors duration-200 {pdfState.instance
301+
class="max-w-5xl w-full absolute inset-0 p-8 border-2 border-gray-100 border-dashed rounded-lg text-center cursor-pointer transition-colors duration-200 {pdfState.instance
273302
? 'bg-transparent hover:bg-white/50'
274303
: ''}"
275304
class:border-blue-500={isDragging}

0 commit comments

Comments
 (0)