From 655faf508dd9c1d811fbd4ca325a41aa5da4f0b3 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Fri, 25 Mar 2022 15:09:02 +1100
Subject: Allow interaction with settings open. Add esc shortcut.

---
 src/components/Settings.vue      |  5 ++---
 src/components/TileInfoModal.vue |  3 ++-
 src/components/TileTree.vue      | 13 ++++++++++++-
 3 files changed, 16 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index 132fd35..e596e46 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -38,13 +38,12 @@ export default defineComponent({
 </script>
 
 <template>
-<div :style="{visibility: isOpen ? 'visible' : 'hidden'}"
-	class="fixed left-0 top-0 w-full h-full bg-black/20 overflow-hidden"
+<div class="fixed left-0 top-0 w-full h-full overflow-hidden invisible"
 	@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">
+			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>
diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index b9a8376..367546d 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -52,7 +52,8 @@ export default defineComponent({
 
 <template>
 <div :style="transitionStyles" 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">
+	<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>
diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue
index fba5863..10a437d 100644
--- a/src/components/TileTree.vue
+++ b/src/components/TileTree.vue
@@ -210,7 +210,6 @@ export default defineComponent({
 		//
 		onSettingsOpen(){
 			this.settingsOpen = true;
-			this.infoModalNode = null;
 		},
 		onSettingsClose(){
 			this.settingsOpen = false;
@@ -218,13 +217,25 @@ export default defineComponent({
 		onLayoutOptionChange(){
 			tryLayout(this.activeRoot, this.tileAreaPos, this.tileAreaDims, this.layoutOptions, true);
 		},
+		onKeyUp(evt: KeyboardEvent){
+			if (evt.key == 'Escape'){
+				if (this.settingsOpen){
+					this.settingsOpen = false;
+				}
+				if (this.infoModalNode != null){
+					this.infoModalNode = null;
+				}
+			}
+		},
 	},
 	created(){
 		window.addEventListener('resize', this.onResize);
+		window.addEventListener('keyup', this.onKeyUp);
 		tryLayout(this.activeRoot, this.tileAreaPos, this.tileAreaDims, this.layoutOptions, true);
 	},
 	unmounted(){
 		window.removeEventListener('resize', this.onResize);
+		window.removeEventListener('keyup', this.onKeyUp);
 	},
 	components: {Tile, ParentBar, TileInfoModal, Settings, },
 });
-- 
cgit v1.2.3