okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

adding search suggestions

Browse source
This commit is contained in:
vapormusic 2022-09-04 18:38:26 +07:00
parent 6cbe9522fc
commit 167893e890
5 changed files with 152 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/renderer/views/components/sidebar.ejs
View file

@ -7,10 +7,10 @@
<input
type="search"
spellcheck="false"
@click="$root.appRoute('search');"
@click="$root.appRoute('search');$root.search.showHints = true"
@focus="$root.search.showHints = true"
@blur="$root.setTimeout(()=>{$root.search.showHints = false}, 300)"
v-on:keyup.enter="$root.searchQuery();$root.search.showHints = false;$root.search.cursor = -1"
v-on:keyup.enter="$root.searchQuery($root.search.hints[$root.search.cursor].content ?? $root.search.hints[$root.search.cursor].searchTerm);$root.search.showHints = false;$root.search.cursor = -1"
v-on:keyup="$root.searchCursor"
@change="$root.appRoute('search');"
@input="$root.getSearchHints()"
@ -27,11 +27,41 @@
<div class="search-hints">
<button
class="search-hint text-overflow-elipsis"
v-for="hint in $root.search.hints"
@click="$root.search.term = hint;$root.search.showHints = false;$root.searchQuery(hint);$root.search.cursor = -1"
v-for="(hint, index) in $root.search.hints.filter((a) => {return a.content == null})" :class="{active: ($root.search.cursor == index)}"
@click="$root.search.term = hint.searchTerm;$root.search.showHints = false;$root.searchQuery(hint.searchTerm);$root.search.cursor = -1"
>
{{ hint }}
{{ hint.displayTerm }}
</button>
<template v-for="(item, position) in $root.search.hints.filter((a) => {return a.content != null})">
<div class="cd-queue-item" @click="$root.search.showHints = false;$root.routeView(item.content);$root.search.cursor = -1"
:class="{'hintactive': ($root.search.cursor == position + $root.search.hints.filter((a) => {return a.content == null}).length)}">
<div class="row">
<div class="col-auto cider-flex-center">
<div class="artwork" :class="{'circle': item.content.type == 'artists'}">
<mediaitem-artwork
:url="item.content.attributes.artwork ? item.content.attributes.artwork.url : ''"
:size="32"></mediaitem-artwork>
</div>
</div>
<div class="col queue-info">
<div class="queue-title text-overflow-elipsis">{{ item.content.attributes.name }}
</div>
<div class="queue-subtitle text-overflow-elipsis">{{
item.content.attributes.artistName }}
</div>
</div>
<div class="queue-explicit-icon cider-flex-center"
v-if="item.content.attributes.contentRating == 'explicit'">
<div class="explicit-icon"></div>
</div>
<!-- <div class="col queue-duration-info">
<div class="queue-duration cider-flex-center">
{{convertTimeToString(item.content.attributes.durationInMillis)}}
</div>
</div> -->
</div>
</div>
</template>
</div>
</div>
</div>