From 79668e596f6da90530dc695b721a32cd8afcf8cf Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Fri, 25 Mar 2022 17:45:55 +1100
Subject: Add search icon and basic modal

---
 src/components/SearchModal.vue | 33 +++++++++++++++++++++++++++++++++
 src/components/Settings.vue    |  2 +-
 src/components/TileTree.vue    | 37 ++++++++++++++++++++++++++++++-------
 3 files changed, 64 insertions(+), 8 deletions(-)
 create mode 100644 src/components/SearchModal.vue

diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
new file mode 100644
index 0000000..0a2a642
--- /dev/null
+++ b/src/components/SearchModal.vue
@@ -0,0 +1,33 @@
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+import {TolNode, LayoutNode} from '../lib';
+
+export default defineComponent({
+	props: {
+		layoutTree: {type: Object as PropType<LayoutNode>, required: true},
+		options: {type: Object, required: true},
+	},
+	methods: {
+		closeClicked(evt: Event){
+			if (evt.target == this.$el || evt.target == this.$refs.closeIcon){
+				this.$emit('search-close');
+			}
+		},
+	},
+	emits: ['search-node', 'search-close']
+});
+</script>
+
+<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>
+</div>
+</template>
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index 0c7f360..433be16 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -118,7 +118,7 @@ export default defineComponent({
 			<!-- outer div prevents transition interference with inner rotate -->
 			<div class="absolute bottom-[-50px] right-[-50px] w-[100px] h-[100px] visible -rotate-45
 				bg-black text-white hover:cursor-pointer" @click="openClicked">
-				<svg class="w-[24px] h-[24px] mx-auto mt-[9px]"
+				<svg class="w-6 h-6 mx-auto mt-2"
 					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="12" cy="12" r="3"/>
diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue
index 1c08085..239002b 100644
--- a/src/components/TileTree.vue
+++ b/src/components/TileTree.vue
@@ -3,6 +3,7 @@ import {defineComponent, PropType} from 'vue';
 import Tile from './Tile.vue';
 import ParentBar from './ParentBar.vue';
 import TileInfoModal from './TileInfoModal.vue';
+import SearchModal from './SearchModal.vue';
 import Settings from './Settings.vue';
 import {TolNode, LayoutNode, initLayoutTree, tryLayout} from '../lib';
 import type {LayoutOptions} from '../lib';
@@ -72,6 +73,7 @@ export default defineComponent({
 			layoutTree: layoutTree,
 			activeRoot: layoutTree,
 			infoModalNode: null as TolNode | null, // Hides/unhides info modal, and provides the node to display
+			searchOpen: false,
 			settingsOpen: false,
 			// Options
 			layoutOptions: {...defaultLayoutOptions},
@@ -202,6 +204,7 @@ export default defineComponent({
 		},
 		// For info modal events
 		onInnerInfoIconClicked(node: LayoutNode){
+			this.closeModalsAndSettings();
 			this.infoModalNode = node.tolNode;
 		},
 		onInfoModalClose(){
@@ -209,6 +212,7 @@ export default defineComponent({
 		},
 		//
 		onSettingsOpen(){
+			this.closeModalsAndSettings();
 			this.settingsOpen = true;
 		},
 		onSettingsClose(){
@@ -217,14 +221,23 @@ export default defineComponent({
 		onLayoutOptionChange(){
 			tryLayout(this.activeRoot, this.tileAreaPos, this.tileAreaDims, this.layoutOptions, true);
 		},
+		//
+		onSearchIconClick(){
+			this.closeModalsAndSettings();
+			this.searchOpen = true;
+		},
+		onSearchClose(){
+			this.searchOpen = false;
+		},
+		//
+		closeModalsAndSettings(){
+			this.infoModalNode = null;
+			this.searchOpen = false;
+			this.settingsOpen = false;
+		},
 		onKeyUp(evt: KeyboardEvent){
 			if (evt.key == 'Escape'){
-				if (this.settingsOpen){
-					this.settingsOpen = false;
-				}
-				if (this.infoModalNode != null){
-					this.infoModalNode = null;
-				}
+				this.closeModalsAndSettings();
 			}
 		},
 	},
@@ -237,7 +250,7 @@ export default defineComponent({
 		window.removeEventListener('resize', this.onResize);
 		window.removeEventListener('keyup', this.onKeyUp);
 	},
-	components: {Tile, ParentBar, TileInfoModal, Settings, },
+	components: {Tile, ParentBar, TileInfoModal, Settings, SearchModal, },
 });
 </script>
 
@@ -255,6 +268,16 @@ export default defineComponent({
 		<tile-info-modal v-if="infoModalNode != null" :tolNode="infoModalNode" :options="componentOptions"
 			@info-modal-close="onInfoModalClose"/>
 	</transition>
+	<transition name="fade">
+		<svg v-if="!searchOpen" @click="onSearchIconClick"
+			class="absolute top-[6px] right-[6px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"
+			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>
+		<search-modal v-else :layoutTree="layoutTree" :options="componentOptions" @search-close="onSearchClose"/>
+	</transition>
 	<settings :isOpen="settingsOpen" :layoutOptions="layoutOptions" :componentOptions="componentOptions"
 		@settings-open="onSettingsOpen" @settings-close="onSettingsClose"
 		@layout-option-change="onLayoutOptionChange"/>
-- 
cgit v1.2.3