From a82455632405d28c15d21dd5cb237674dc6de1c6 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 23 May 2022 08:57:47 +1000
Subject: Make settings icon fit-in with search/help/etc

---
 src/components/SettingsPane.vue | 136 ----------------------------------------
 1 file changed, 136 deletions(-)
 delete mode 100644 src/components/SettingsPane.vue

(limited to 'src/components/SettingsPane.vue')

diff --git a/src/components/SettingsPane.vue b/src/components/SettingsPane.vue
deleted file mode 100644
index cf046c3..0000000
--- a/src/components/SettingsPane.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<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="absolute bottom-4 right-4 min-w-[5cm] 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>
-</template>
-- 
cgit v1.2.3