From b19bab9098e3eae71845faa7c8d17e9d03548d22 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Thu, 12 May 2022 13:06:49 +1000
Subject: Enable info-display for search suggestions

Add info-icon to SearchModal, sending event when clicked.
Change App to allow info-modal display on top of search-modal.

Also make info-icon-click events send a node name instead of a LayoutNode,
and make TileInfoModal and server get/send additional node info, seeing
as the client might not have info about the node's common name, tips,
etc, anymore.
---
 src/components/SearchModal.vue | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

(limited to 'src/components/SearchModal.vue')

diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
index eccc685..bc77a39 100644
--- a/src/components/SearchModal.vue
+++ b/src/components/SearchModal.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import {defineComponent, PropType} from 'vue';
 import SearchIcon from './icon/SearchIcon.vue';
+import InfoIcon from './icon/InfoIcon.vue';
 import {LayoutNode} from '../layout';
 import type {TolMap} from '../tol';
 
@@ -23,6 +24,18 @@ export default defineComponent({
 		tolMap: {type: Object as PropType<TolMap>, required: true},
 		uiOpts: {type: Object, required: true},
 	},
+	computed: {
+		infoIconStyles(): Record<string,string> {
+			let size = this.uiOpts.infoIconSz + 'px';
+			return {
+				width: size,
+				height: size,
+				minWidth: size,
+				minHeight: size,
+				margin: this.uiOpts.infoIconMargin + 'px',
+			};
+		},
+	},
 	methods: {
 		onCloseClick(evt: Event){
 			if (evt.target == this.$el || (this.$refs.searchIcon as typeof SearchIcon).$el.contains(evt.target)){
@@ -123,12 +136,15 @@ export default defineComponent({
 				}
 			}
 		},
+		onInfoIconClick(nodeName: string){
+			this.$emit('info-icon-click', nodeName);
+		},
 	},
 	mounted(){
 		(this.$refs.searchInput as HTMLInputElement).focus();
 	},
-	components: {SearchIcon, },
-	emits: ['search-node', 'search-close', ],
+	components: {SearchIcon, InfoIcon, },
+	emits: ['search-node', 'search-close', 'info-icon-click'],
 });
 </script>
 
@@ -143,8 +159,10 @@ export default defineComponent({
 			<div class="absolute top-[100%] w-full">
 				<div v-for="(sugg, idx) of searchSuggs"
 					:style="{backgroundColor: idx == focusedSuggIdx ? '#a3a3a3' : 'white'}"
-					class="bg-white border p-1 hover:underline hover:cursor-pointer"
-					@click="resolveSearch(sugg.name)">
+					class="border p-1 hover:underline hover:cursor-pointer" @click="resolveSearch(sugg.name)">
+					<info-icon :style="infoIconStyles"
+						class="float-right text-stone-500 hover:text-stone-900 hover:cursor-pointer"
+						@click.stop="onInfoIconClick(sugg.name)"/>
 					{{sugg.name == sugg.altName ? sugg.name : `${sugg.altName} (aka ${sugg.name})`}}
 				</div>
 				<div v-if="searchHasMoreSuggs" class="bg-white px-1 text-center border">...</div>
-- 
cgit v1.2.3