add option to completely disable units

stephtr · Apr 1, 2023 · a075e72 · a075e72
1 parent c5c9c68
commit a075e72
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 11 deletions.
diff --git a/website/src/lib/settings.ts b/website/src/lib/settings.ts
@@ -10,6 +10,8 @@ export enum AngleUnit {
 export class Settings {
 	angleUnit = AngleUnit.None;
 
+	useUnits = true;
+
 	useUnitPrefixes = true;
 
 	useDecimalPoint = false;
@@ -34,6 +36,7 @@ export class Settings {
 		} else {
 			this.angleUnit = +settings.angleUnit;
 		}
+		this.useUnits = settings.useUnits ?? true;
 		this.useUnitPrefixes = settings.useUnitPrefixes ?? true;
 		this.useDecimalPoint = settings.useDecimalPoint ?? false;
 		this.additionalOptions = settings.additionalOptions ?? false;
@@ -72,6 +75,8 @@ export class Settings {
 		);
 
 		setOption(`angle ${+this.angleUnit}`);
+		setOption(`units ${this.useUnits ? 'on' : 'off'}`);
+		setOption(`varunits ${this.useUnits ? 'on' : 'off'}`);
 	}
 
 	constructor() {

diff --git a/website/src/lib/settingsWidget.svelte b/website/src/lib/settingsWidget.svelte
@@ -5,6 +5,7 @@
 	import { setOption } from './calculatorModule';
 	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
 	import { faCircleInfo } from '@fortawesome/free-solid-svg-icons';
+	import { slide } from 'svelte/transition';
 
 	export let settings: Settings;
 
@@ -90,19 +91,35 @@
 <label>
 	<input
 		type="checkbox"
-		bind:checked={settings.useUnitPrefixes}
+		bind:checked={settings.useUnits}
 		on:change={() => update()}
 	/>
-	Use prefixes for units<br />
-	{#if settings.useUnitPrefixes}
-		<span style="color:#AAFFFF">10</span>
-		<span style="color:#BBFFBB">kHz</span>
+	Use units<br />
+	{#if settings.useUnits}
+	<span style="color:#BBFFBB">c</span> = <span style="color:#AAFFFF">299 792 458</span> <span style="color:#BBFFBB">m ∕ s</span>
 	{:else}
-		<span style="color:#AAFFFF">10 000</span>
-		<span style="color:#BBFFBB">Hz</span>
+	<span style="color:#BBFFBB">c</span> = <span style="color:#AAFFFF">299 792 458</span>
 	{/if}
 </label>
 
+{#if settings.useUnits}
+	<label transition:slide>
+		<input
+			type="checkbox"
+			bind:checked={settings.useUnitPrefixes}
+			on:change={() => update()}
+		/>
+		Use prefixes for units<br />
+		{#if settings.useUnitPrefixes}
+			<span style="color:#AAFFFF">10</span>
+			<span style="color:#BBFFBB">kHz</span>
+		{:else}
+			<span style="color:#AAFFFF">10 000</span>
+			<span style="color:#BBFFBB">Hz</span>
+		{/if}
+	</label>
+{/if}
+
 <label>
 	<input
 		type="checkbox"
@@ -138,19 +155,20 @@
 	label,
 	.setting {
 		display: block;
-		margin: 20px 0;
+		padding: 10px 0;
 	}
 
 	.optionList {
 		display: flex;
 		flex-wrap: wrap;
-		gap: 10px;
+		gap: 20px;
+		row-gap: 5px;
 		justify-content: center;
-		margin: 10px 0 20px;
+		margin: 5px 0 0;
 	}
 
 	.optionList label {
-		margin: 0;
+		padding: 0;
 	}
 
 	textarea {