feat: add setting for wider inputs

istudyatuni · May 13, 2022 · 36d560b · 36d560b
1 parent 7b33442
commit 36d560b
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 5 deletions.
diff --git a/src/components/Settings.svelte b/src/components/Settings.svelte
@@ -59,17 +59,33 @@
 			</Button>
 		</div>
 
+		<div class="mb-2">
+			<input
+				id="wider_inputs_checkbox"
+				type="checkbox"
+				bind:checked={$settings.wider_inputs} />
+			<label for="wider_inputs_checkbox">Wider inputs</label>
+		</div>
 		<div class="flex mb-2">
 			<p>x: [</p>
-			<InputNumber bind:value={$drawStore.lx} on:change={should_refresh} />
+			<InputNumber
+				bind:value={$drawStore.lx}
+				on:change={should_refresh}
+				wider={$settings.wider_inputs} />
 			<p>;</p>
-			<InputNumber bind:value={$drawStore.rx} on:change={should_refresh} />
+			<InputNumber
+				bind:value={$drawStore.rx}
+				on:change={should_refresh}
+				wider={$settings.wider_inputs} />
 			<p>]</p>
 		</div>
 
 		<div class="flex mb-2">
 			<p>y:</p>
-			<InputNumber bind:value={$drawStore.yc} on:change={should_refresh} />
+			<InputNumber
+				bind:value={$drawStore.yc}
+				on:change={should_refresh}
+				wider={$settings.wider_inputs} />
 		</div>
 
 		<div class="mb-2">

diff --git a/src/components/atoms/InputNumber.svelte b/src/components/atoms/InputNumber.svelte
@@ -1,7 +1,9 @@
 <script>
-	export let value
+	export let value,
+		wider = false
+	$: wider_class = wider ? 'w-2/5' : 'w-1/4'
 </script>
 
-<span class="rounded mx-1 w-30">
+<span class="rounded mx-1 {wider_class}">
 	<input type="number" class="w-full px-1 rounded" bind:value on:change />
 </span>
diff --git a/src/stores/settings.js b/src/stores/settings.js
@@ -18,6 +18,7 @@ export const draw = sessionStore('draw-settings', {
 export const settings = sessionStore('settings', {
 	palette: default_map,
 	show_settings: true,
+	wider_inputs: false,
 })
 
 function parseHash() {