diff options
| -rw-r--r-- | src/components/SearchModal.vue | 25 | ||||
| -rw-r--r-- | src/components/icon/LogInIcon.vue | 13 |
2 files changed, 30 insertions, 8 deletions
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> |