diff options
Diffstat (limited to 'src/components/SearchModal.vue')
| -rw-r--r-- | src/components/SearchModal.vue | 62 |
1 files changed, 35 insertions, 27 deletions
diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue index d866c91..0e92eb6 100644 --- a/src/components/SearchModal.vue +++ b/src/components/SearchModal.vue @@ -1,34 +1,32 @@ <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/4 w-3/4 -translate-y-1/2 flex" :style="styles"> - <div class="relative grow m-2"> - <input type="text" class="block border p-1 w-full" ref="searchInput" - @keyup.enter="onSearch" @keyup.esc="onClose" - @input="onInput" @keydown.down.prevent="onDownKey" @keydown.up.prevent="onUpKey"/> - <div class="absolute top-[100%] w-full" - :style="{backgroundColor: uiOpts.bgColorAlt, color: uiOpts.textColorAlt}"> - <div v-for="(sugg, idx) of searchSuggs" - :style="{backgroundColor: idx == focusedSuggIdx ? uiOpts.bgColorAltDark : uiOpts.bgColorAlt}" - class="border p-1 hover:underline hover:cursor-pointer flex" - @click="resolveSearch(sugg.canonicalName || sugg.name)"> - <div class="grow overflow-hidden whitespace-nowrap text-ellipsis"> - <span>{{suggDisplayStrings[idx][0]}}</span> - <span class="font-bold">{{suggDisplayStrings[idx][1]}}</span> - <span>{{suggDisplayStrings[idx][2]}}</span> - </div> - <info-icon class="hover:cursor-pointer my-auto w-5 h-5" - @click.stop="onInfoIconClick(sugg.canonicalName || sugg.name)"/> - </div> - <div v-if="searchHadMoreSuggs" class="text-center border">...</div> - </div> - </div> - <div class="my-auto hover:cursor-pointer hover:brightness-75 rounded border shadow"> + <div class="absolute left-1/2 -translate-x-1/2 top-1/4 w-3/4 max-w-[12cm] -translate-y-1/2 flex" :style="styles"> + <input type="text" class="block border p-1 rounded-l-[inherit] grow" ref="searchInput" + @keyup.enter="onSearch" @keyup.esc="onClose" + @input="onInput" @keydown.down.prevent="onDownKey" @keydown.up.prevent="onUpKey"/> + <div class="p-1 hover:cursor-pointer"> <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.searchJumpMode ? 'opacity-100' : 'opacity-30'"/> + <div class="absolute top-[100%] w-full" + :style="{backgroundColor: uiOpts.bgColorAlt, color: uiOpts.textColorAlt}"> + <div v-for="(sugg, idx) of searchSuggs" + :style="{backgroundColor: idx == focusedSuggIdx ? uiOpts.bgColorAltDark : uiOpts.bgColorAlt}" + class="border p-1 hover:underline hover:cursor-pointer flex" + @click="resolveSearch(sugg.canonicalName || sugg.name)"> + <div class="grow overflow-hidden whitespace-nowrap text-ellipsis"> + <span>{{suggDisplayStrings[idx][0]}}</span> + <span class="font-bold">{{suggDisplayStrings[idx][1]}}</span> + <span>{{suggDisplayStrings[idx][2]}}</span> + </div> + <info-icon class="hover:cursor-pointer my-auto w-5 h-5" + @click.stop="onInfoIconClick(sugg.canonicalName || sugg.name)"/> + </div> + <div v-if="searchHadMoreSuggs" class="text-center border">...</div> </div> + <label :style="animateLabelStyles" class="flex gap-1"> + <input type="checkbox" v-model="uiOpts.searchJumpMode" @change="$emit('setting-chg', 'searchJumpMode')"/> + <div class="text-sm">Animate</div> + </label> </div> </div> </template> @@ -65,12 +63,22 @@ export default defineComponent({ }, computed: { styles(): Record<string,string> { + let br = this.uiOpts.borderRadius; return { backgroundColor: this.uiOpts.bgColorAlt, - borderRadius: this.uiOpts.borderRadius + 'px', + borderRadius: this.searchSuggs.length == 0 ? `${br}px` : `${br}px ${br}px 0 0`, boxShadow: this.uiOpts.shadowNormal, }; }, + animateLabelStyles(): Record<string,string> { + return { + position: 'absolute', + top: -this.lytOpts.headerSz - 2 + 'px', + right: '0', + height: this.lytOpts.headerSz + 'px', + color: this.uiOpts.textColor, + }; + }, suggDisplayStrings(): [string, string, string][] { let result: [string, string, string][] = []; let input = this.suggsInput; |