From b59e007e6d23483abe8973fe5c21412ddf8709b7 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Fri, 25 Mar 2022 19:27:32 +1100
Subject: Add search enter/escape, and close-icon svgs

---
 src/components/SearchModal.vue   | 30 ++++++++++++++++++++++--------
 src/components/Settings.vue      | 11 ++++++++---
 src/components/TileInfoModal.vue | 10 +++++++---
 src/components/TileTree.vue      |  7 ++++++-
 4 files changed, 43 insertions(+), 15 deletions(-)

(limited to 'src/components')

diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
index 0a2a642..6675885 100644
--- a/src/components/SearchModal.vue
+++ b/src/components/SearchModal.vue
@@ -13,6 +13,12 @@ export default defineComponent({
 				this.$emit('search-close');
 			}
 		},
+		onSearchEnter(){
+			this.$emit('search-node', this.$refs.searchInput.value);
+		},
+	},
+	mounted(){
+		this.$refs.searchInput.focus();
 	},
 	emits: ['search-node', 'search-close']
 });
@@ -20,14 +26,22 @@ export default defineComponent({
 
 <template>
 <div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="closeClicked">
-	<div class="absolute left-1/2 -translate-x-1/2 w-4/5 top-1/2 -translate-y-1/2 p-4
-		bg-stone-50 rounded-md shadow shadow-black">
-		<div class="absolute top-2 right-2 w-[24px] h-[24px] [font-size:24px] [line-height:24px] text-center
-				font-bold hover:cursor-pointer"
-			@click="closeClicked" ref="closeIcon">&times;</div>
-		<div>
-			Search
-		</div>
+	<div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 p-4
+		bg-stone-50 rounded-md shadow shadow-black flex gap-1">
+		<input type="text" @keyup.enter="onSearchEnter" @keyup.esc="closeClicked" class="block border" ref="searchInput"/>
+		<svg class="block w-7 h-7 border rounded hover:cursor-pointer hover:bg-stone-200" @click="onSearchEnter"
+			xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+			stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+		  <circle cx="11" cy="11" r="8"/>
+		  <line x1="21" y1="21" x2="16.65" y2="16.65"/>
+		</svg>
+		<svg class="block w-7 h-7 border rounded hover:cursor-pointer hover:bg-stone-200"
+			@click="closeClicked" ref="closeIcon"
+			xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+			stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+		  <line x1="18" y1="6" x2="6" y2="18"/>
+		  <line x1="6" y1="6" x2="18" y2="18"/>
+		</svg>
 	</div>
 </div>
 </template>
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index 433be16..b56de12 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -44,9 +44,14 @@ export default defineComponent({
 	<transition name="slide-bottom-right">
 		<div v-if="isOpen"
 			class="absolute bottom-4 right-4 min-w-[5cm] p-3 bg-stone-50 visible rounded-md shadow shadow-black">
-			<div class="absolute top-2 right-2 w-[24px] h-[24px] [font-size:24px] [line-height:24px] text-center
-					font-bold hover:cursor-pointer"
-				@click="closeClicked" ref="closeIcon">&times;</div>
+			<svg v-if="isOpen"
+				class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"
+				@click="closeClicked" ref="closeIcon"
+				xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+				stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+			  <line x1="18" y1="6" x2="6" y2="18"/>
+			  <line x1="6" y1="6" x2="18" y2="18"/>
+			</svg>
 			<h1 class="text-xl font-bold mb-2">Settings</h1>
 			<hr class="border-stone-400"/>
 			<div>
diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index fedd933..812470c 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -33,9 +33,13 @@ export default defineComponent({
 <div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="closeClicked">
 	<div class="absolute left-1/2 -translate-x-1/2 w-4/5 top-1/2 -translate-y-1/2 p-4
 		bg-stone-50 rounded-md shadow shadow-black">
-		<div class="absolute top-2 right-2 w-[24px] h-[24px] [font-size:24px] [line-height:24px] text-center
-				font-bold hover:cursor-pointer"
-			@click="closeClicked" ref="closeIcon">&times;</div>
+		<svg class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"
+			@click="closeClicked" ref="closeIcon"
+			xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+			stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+		  <line x1="18" y1="6" x2="6" y2="18"/>
+		  <line x1="6" y1="6" x2="18" y2="18"/>
+		</svg>
 		<h1 class="text-center text-xl font-bold mb-2">{{tolNode.name}}</h1>
 		<hr class="mb-4 border-stone-400"/>
 		<div :style="imgStyles" class="float-left mr-4" alt="an image"></div>
diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue
index 239002b..6ea78c5 100644
--- a/src/components/TileTree.vue
+++ b/src/components/TileTree.vue
@@ -229,6 +229,10 @@ export default defineComponent({
 		onSearchClose(){
 			this.searchOpen = false;
 		},
+		onSearchNode(node){
+			console.log('Searched for: ' + node);
+			this.searchOpen = false;
+		},
 		//
 		closeModalsAndSettings(){
 			this.infoModalNode = null;
@@ -276,7 +280,8 @@ export default defineComponent({
 		  <circle cx="11" cy="11" r="8"/>
 		  <line x1="21" y1="21" x2="16.65" y2="16.65"/>
 		</svg>
-		<search-modal v-else :layoutTree="layoutTree" :options="componentOptions" @search-close="onSearchClose"/>
+		<search-modal v-else :layoutTree="layoutTree" :options="componentOptions"
+			@search-close="onSearchClose" @search-node="onSearchNode"/>
 	</transition>
 	<settings :isOpen="settingsOpen" :layoutOptions="layoutOptions" :componentOptions="componentOptions"
 		@settings-open="onSettingsOpen" @settings-close="onSettingsClose"
-- 
cgit v1.2.3