From 17d5aa2eb276bca92a2cc29067d98f06b87df491 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Fri, 24 Jun 2022 03:22:29 +1000
Subject: Add jump-to-searched-node button to search-bar

---
 src/components/SearchModal.vue    | 25 +++++++++++++++++--------
 src/components/icon/LogInIcon.vue | 13 +++++++++++++
 2 files changed, 30 insertions(+), 8 deletions(-)
 create mode 100644 src/components/icon/LogInIcon.vue

(limited to 'src/components')

diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
index d2aa383..585b535 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 LogInIcon from './icon/LogInIcon.vue';
 import InfoIcon from './icon/InfoIcon.vue';
 import {LayoutNode} from '../layout';
 import type {TolMap, SearchSugg, SearchSuggResponse} from '../lib';
@@ -61,7 +62,7 @@ export default defineComponent({
 				this.$emit('close');
 			}
 		},
-		onEnter(){
+		onSearch(){
 			if (this.focusedSuggIdx == null){
 				this.resolveSearch((this.$refs.searchInput as HTMLInputElement).value.toLowerCase())
 			} else {
@@ -69,6 +70,9 @@ export default defineComponent({
 				this.resolveSearch(sugg.canonicalName || sugg.name);
 			}
 		},
+		onSearchModeChg(){
+			this.uiOpts.jumpToSearchedNode = !this.uiOpts.jumpToSearchedNode;
+		},
 		resolveSearch(tolNodeName: string){
 			if (tolNodeName == ''){
 				return;
@@ -185,18 +189,18 @@ export default defineComponent({
 	mounted(){
 		(this.$refs.searchInput as HTMLInputElement).focus();
 	},
-	components: {SearchIcon, InfoIcon, },
+	components: {SearchIcon, InfoIcon, LogInIcon, },
 	emits: ['search', 'close', 'info-click'],
 });
 </script>
 
 <template>
 <div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onCloseClick">
-	<div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 p-2
-		bg-stone-50 rounded-md shadow shadow-black flex gap-1">
+	<div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2
+		bg-stone-50 rounded-md shadow shadow-black flex">
 		<div class="relative">
-			<input type="text" class="block border p-1" ref="searchInput"
-				@keyup.enter="onEnter" @keyup.esc="onCloseClick"
+			<input type="text" class="block border p-1 m-2" ref="searchInput"
+				@keyup.enter="onSearch" @keyup.esc="onCloseClick"
 				@input="onInput" @keydown.down.prevent="onDownKey" @keydown.up.prevent="onUpKey"/>
 			<div class="absolute top-[100%] w-full">
 				<div v-for="(sugg, idx) of searchSuggs"
@@ -213,8 +217,13 @@ export default defineComponent({
 				<div v-if="searchHasMoreSuggs" class="bg-white px-1 text-center border">...</div>
 			</div>
 		</div>
-		<search-icon @click.stop="onEnter"
-			class="block w-8 h-8 ml-1 hover:cursor-pointer hover:bg-stone-200" />
+		<div class="my-auto hover:cursor-pointer hover:brightness-75 rounded border shadow">
+			<search-icon @click.stop="onSearch" class="block w-8 h-8"/>
+		</div>
+		<div class="my-auto mx-2 hover:cursor-pointer hover:brightness-75 rounded">
+			<log-in-icon @click.stop="onSearchModeChg" class="block w-8 h-8"
+				:class="uiOpts.jumpToSearchedNode ? 'text-stone-500' : 'text-stone-300'"/>
+		</div>
 	</div>
 </div>
 </template>
diff --git a/src/components/icon/LogInIcon.vue b/src/components/icon/LogInIcon.vue
new file mode 100644
index 0000000..bb925b0
--- /dev/null
+++ b/src/components/icon/LogInIcon.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+export default defineComponent({});
+</script>
+
+<template>
+<svg 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">
+	<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
+	<polyline points="10 17 15 12 10 7"></polyline>
+	<line x1="15" y1="12" x2="3" y2="12"></line>
+</svg>
+</template>
-- 
cgit v1.2.3