diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/SearchModal.vue | 30 | ||||
| -rw-r--r-- | src/components/Settings.vue | 11 | ||||
| -rw-r--r-- | src/components/TileInfoModal.vue | 10 | ||||
| -rw-r--r-- | src/components/TileTree.vue | 7 |
4 files changed, 43 insertions, 15 deletions
diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue index 0a2a642..6675885 100644 --- a/src/components/SearchModal.vue +++ b/src/components/SearchModal.vue @@ -13,6 +13,12 @@ export default defineComponent({ this.$emit('search-close'); } }, + onSearchEnter(){ + this.$emit('search-node', this.$refs.searchInput.value); + }, + }, + mounted(){ + this.$refs.searchInput.focus(); }, emits: ['search-node', 'search-close'] }); @@ -20,14 +26,22 @@ export default defineComponent({ <template> <div 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 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">×</div> - <div> - Search - </div> + <div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 p-4 + bg-stone-50 rounded-md shadow shadow-black flex gap-1"> + <input type="text" @keyup.enter="onSearchEnter" @keyup.esc="closeClicked" class="block border" ref="searchInput"/> + <svg class="block w-7 h-7 border rounded hover:cursor-pointer hover:bg-stone-200" @click="onSearchEnter" + 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"> + <circle cx="11" cy="11" r="8"/> + <line x1="21" y1="21" x2="16.65" y2="16.65"/> + </svg> + <svg class="block w-7 h-7 border rounded hover:cursor-pointer hover:bg-stone-200" + @click="closeClicked" ref="closeIcon" + 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"> + <line x1="18" y1="6" x2="6" y2="18"/> + <line x1="6" y1="6" x2="18" y2="18"/> + </svg> </div> </div> </template> diff --git a/src/components/Settings.vue b/src/components/Settings.vue index 433be16..b56de12 100644 --- a/src/components/Settings.vue +++ b/src/components/Settings.vue @@ -44,9 +44,14 @@ export default defineComponent({ <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 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">×</div> + <svg v-if="isOpen" + class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer" + @click="closeClicked" ref="closeIcon" + 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"> + <line x1="18" y1="6" x2="6" y2="18"/> + <line x1="6" y1="6" x2="18" y2="18"/> + </svg> <h1 class="text-xl font-bold mb-2">Settings</h1> <hr class="border-stone-400"/> <div> diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue index fedd933..812470c 100644 --- a/src/components/TileInfoModal.vue +++ b/src/components/TileInfoModal.vue @@ -33,9 +33,13 @@ export default defineComponent({ <div 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 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">×</div> + <svg class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer" + @click="closeClicked" ref="closeIcon" + 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"> + <line x1="18" y1="6" x2="6" y2="18"/> + <line x1="6" y1="6" x2="18" y2="18"/> + </svg> <h1 class="text-center text-xl font-bold mb-2">{{tolNode.name}}</h1> <hr class="mb-4 border-stone-400"/> <div :style="imgStyles" class="float-left mr-4" alt="an image"></div> diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue index 239002b..6ea78c5 100644 --- a/src/components/TileTree.vue +++ b/src/components/TileTree.vue @@ -229,6 +229,10 @@ export default defineComponent({ onSearchClose(){ this.searchOpen = false; }, + onSearchNode(node){ + console.log('Searched for: ' + node); + this.searchOpen = false; + }, // closeModalsAndSettings(){ this.infoModalNode = null; @@ -276,7 +280,8 @@ export default defineComponent({ <circle cx="11" cy="11" r="8"/> <line x1="21" y1="21" x2="16.65" y2="16.65"/> </svg> - <search-modal v-else :layoutTree="layoutTree" :options="componentOptions" @search-close="onSearchClose"/> + <search-modal v-else :layoutTree="layoutTree" :options="componentOptions" + @search-close="onSearchClose" @search-node="onSearchNode"/> </transition> <settings :isOpen="settingsOpen" :layoutOptions="layoutOptions" :componentOptions="componentOptions" @settings-open="onSettingsOpen" @settings-close="onSettingsClose" |