From 2752a095a659eed82f8480daf044db5934de4379 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Thu, 24 Mar 2022 22:38:27 +1100
Subject: Make open settings disable tile interaction and close info modals

---
 src/components/Settings.vue | 12 ++++++++----
 src/components/TileTree.vue |  1 +
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index d9e7feb..24dbb31 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -10,7 +10,9 @@ export default defineComponent({
 			this.$emit('settings-open');
 		},
 		closeClicked(evt: Event){
-			this.$emit('settings-close');
+			if (evt.target == this.$el || evt.target == this.$refs.closeIcon){
+				this.$emit('settings-close');
+			}
 		},
 	},
 	emits: ['settings-open', 'settings-close'],
@@ -18,14 +20,16 @@ export default defineComponent({
 </script>
 
 <template>
-<!-- outer div prevents overflow from transitioning to/from off-screen -->
-<div class="absolute left-0 top-0 w-full h-full invisible overflow-hidden">
+<div :style="{visibility: isOpen ? 'visible' : 'hidden'}"
+	class="fixed left-0 top-0 w-full h-full bg-black/10 overflow-hidden"
+	@click="closeClicked">
+	<!-- outer div prevents overflow from transitioning to/from off-screen -->
 	<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-md bg-stone-50">
 			<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">&times;</div>
+				@click="closeClicked" ref="closeIcon">&times;</div>
 			<h1 class="text-xl font-bold mb-2">Settings</h1>
 			<hr class="border-stone-400"/>
 			<div class="border border-black my-2">Setting 1</div>
diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue
index 5b643ed..30e5ddc 100644
--- a/src/components/TileTree.vue
+++ b/src/components/TileTree.vue
@@ -210,6 +210,7 @@ export default defineComponent({
 		//
 		onSettingsOpen(){
 			this.settingsOpen = true;
+			this.infoModalNode = null;
 		},
 		onSettingsClose(){
 			this.settingsOpen = false;
-- 
cgit v1.2.3