Add test info-icon-triggered popover within settingstest-settings-info-icons

1 files changed, 23 insertions, 3 deletions

diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index 16351c4..69ea72c 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onClose">
 	<div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2
-		min-w-[8cm] max-h-[80%] overflow-auto p-3" :style="styles">
+		min-w-[8cm] max-h-[80%] p-3" :style="styles" @click.stop="onClick" ref="settingsPane">
 		<close-icon @click.stop="onClose" 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>
@@ -9,7 +9,20 @@
 			<h2 class="text-center">Layout</h2>
 			<div class="flex gap-2">
 				<div class="grow">
-					<div>Sweep leaves to side</div>
+					Sweep leaves to side
+					<div class="relative inline-block">
+						<info-icon @click.stop="this.infoShown = 'sweepLeaves'"
+							class="w-4 h-4 hover:cursor-pointer"/>
+						<transition name="fade">
+							<div v-if="infoShown == 'sweepLeaves'"
+								class="absolute left-2 -translate-x-1/2 bottom-6 bg-stone-800 text-white
+									text-sm rounded p-1 whitespace-nowrap shadow">
+								Within an expanded tile, <br>
+								all of it's unexpanded tiles <br>
+								(leaves) will be moved leftward.
+							</div>
+						</transition>
+					</div>
 					<ul>
 						<li> <label> <input type="radio" v-model="sweepLeaves" :value="true"
 							@change="onSettingChg('LYT', 'layoutType')"/> Yes </label> </li>
@@ -107,6 +120,7 @@
 import {defineComponent, PropType} from 'vue';
 import SButton from './SButton.vue';
 import CloseIcon from './icon/CloseIcon.vue';
+import InfoIcon from './icon/InfoIcon.vue';
 import {UiOptions, OptionType, getDefaultLytOpts, getDefaultUiOpts} from '../lib';
 import {LayoutOptions} from '../layout';
 
@@ -121,6 +135,7 @@ export default defineComponent({
 				// For making only two of 'layoutType's values available for user selection
 			saved: false, // Set to true after a setting is saved
 			settingChgTimeout: 0, // Use to throttle some setting-change handling
+			infoShown: null as string | null,
 		};
 	},
 	computed: {
@@ -141,6 +156,11 @@ export default defineComponent({
 		},
 	},
 	methods: {
+		onClick(evt: Event){
+			if (evt.currentTarget == this.$refs.settingsPane){
+				this.infoShown = null;
+			}
+		},
 		onClose(evt: Event){
 			if (evt.target == this.$el || (this.$refs.closeIcon as typeof CloseIcon).$el.contains(evt.target)){
 				this.$emit('close');
@@ -217,7 +237,7 @@ export default defineComponent({
 			return (px / 3.78).toFixed() + ' mm';
 		}
 	},
-	components: {SButton, CloseIcon, },
+	components: {SButton, CloseIcon, InfoIcon, },
 	emits: ['close', 'setting-chg', 'reset', ],
 });
 </script>