Make settings icon fit-in with search/help/etc

1 files changed, 139 insertions, 0 deletions

diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
new file mode 100644
index 0000000..5f3b3c4
--- /dev/null
+++ b/src/components/SettingsModal.vue
@@ -0,0 +1,139 @@
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+import CloseIcon from './icon/CloseIcon.vue';
+import type {LayoutOptions} from '../layout';
+
+// Displays configurable options, and sends option-change requests
+export default defineComponent({
+	props: {
+		lytOpts: {type: Object as PropType<LayoutOptions>, required: true},
+		uiOpts: {type: Object, required: true},
+	},
+	methods: {
+		onCloseClick(evt: Event){
+			if (evt.target == this.$el || (this.$refs.closeIcon as typeof CloseIcon).$el.contains(evt.target)){
+				this.$emit('settings-close');
+			}
+		},
+		onLytOptChg(){
+			this.$emit('layout-option-change');
+		},
+		onMinTileSzChg(){
+			let minInput = this.$refs.minTileSzInput as HTMLInputElement;
+			let maxInput = this.$refs.maxTileSzInput as HTMLInputElement;
+			if (Number(minInput.value) > Number(maxInput.value)){
+				this.lytOpts.maxTileSz = this.lytOpts.minTileSz;
+			}
+			this.onLytOptChg();
+		},
+		onMaxTileSzChg(){
+			let minInput = this.$refs.minTileSzInput as HTMLInputElement;
+			let maxInput = this.$refs.maxTileSzInput as HTMLInputElement;
+			if (Number(maxInput.value) < Number(minInput.value)){
+				this.lytOpts.minTileSz = this.lytOpts.maxTileSz;
+			}
+			this.onLytOptChg();
+		},
+		onTreeChg(){
+			this.$emit('tree-change');
+		},
+	},
+	components: {CloseIcon, },
+	emits: ['settings-close', 'layout-option-change', 'tree-change', ],
+});
+</script>
+
+<template>
+<div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onCloseClick">
+	<div class="absolute left-1/2 -translate-x-1/2 w-4/5 top-1/2 -translate-y-1/2 max-h-[80%]
+		p-3 bg-stone-50 visible rounded-md shadow shadow-black">
+		<close-icon @click="onCloseClick" ref="closeIcon"
+			class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer" />
+		<h1 class="text-xl font-bold mb-2">Settings</h1>
+		<hr class="border-stone-400"/>
+		<div>
+			<label>Tile Spacing <input type="range" min="0" max="20" class="mx-2 w-[3cm]"
+				v-model.number="lytOpts.tileSpacing" @input="onLytOptChg"/></label>
+		</div>
+		<hr class="border-stone-400"/>
+		<div>
+			<label>
+				<span class="inline-block w-[3cm]">Min Tile Size</span>
+				<input type="range" min="0" max="400" v-model.number="lytOpts.minTileSz" class="w-[3cm]"
+					@input="onMinTileSzChg" ref="minTileSzInput"/>
+			</label>
+		</div>
+		<div>
+			<label>
+				<span class="inline-block w-[3cm]">Max Tile Size</span>
+				<input type="range" min="0" max="400" v-model.number="lytOpts.maxTileSz" class="w-[3cm]"
+					@input="onMaxTileSzChg" ref="maxTileSzInput"/>
+			</label>
+		</div>
+		<hr class="border-stone-400"/>
+		<div>
+			Layout Method
+			<ul>
+				<li>
+					<label> <input type="radio" v-model="lytOpts.layoutType" value="sqr"
+						@change="onLytOptChg"/> Squares </label>
+				</li>
+				<li>
+					<label> <input type="radio" v-model="lytOpts.layoutType" value="rect"
+						@change="onLytOptChg"/> Rectangles </label>
+				</li>
+				<li>
+					<label> <input type="radio" v-model="lytOpts.layoutType" value="sweep"
+						@change="onLytOptChg"/> Sweep to side </label>
+				</li>
+			</ul>
+		</div>
+		<hr class="border-stone-400"/>
+		<div>
+			<label> <input type="checkbox" v-model="lytOpts.sweepToParent"
+				@change="onLytOptChg"/> Sweep to parent</label>
+		</div>
+		<hr class="border-stone-400"/>
+		<div>
+			Sweep Mode
+			<ul>
+				<li>
+					<label> <input type="radio" v-model="lytOpts.sweepMode" value="left"
+						@change="onLytOptChg"/> To left </label>
+				</li>
+				<li>
+					<label> <input type="radio" v-model="lytOpts.sweepMode" value="top"
+						@change="onLytOptChg"/> To top </label>
+				</li>
+				<li>
+					<label> <input type="radio" v-model="lytOpts.sweepMode" value="shorter"
+						@change="onLytOptChg"/> To shorter </label>
+				</li>
+				<li>
+					<label> <input type="radio" v-model="lytOpts.sweepMode" value="auto"
+						@change="onLytOptChg"/> Auto </label>
+				</li>
+			</ul>
+		</div>
+		<hr class="border-stone-400"/>
+		<div>
+			<label>Animation Duration <input type="range" min="0" max="3000" class="mx-2 w-[3cm]"
+				v-model.number="uiOpts.tileChgDuration"/></label>
+		</div>
+		<hr class="border-stone-400"/>
+		<div>
+			Tree
+			<ul>
+				<li>
+					<label> <input type="radio" v-model="uiOpts.useReducedTree" :value="false"
+						@change="onTreeChg"/> Default </label>
+				</li>
+				<li>
+					<label> <input type="radio" v-model="uiOpts.useReducedTree" :value="true"
+						@change="onTreeChg"/> Reduced </label>
+				</li>
+			</ul>
+		</div>
+	</div>
+</div>
+</template>