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

Merge pull request #1189 from pgalhardo/enhancement/search-bar

Browse source 
Album/Playlist page search bar improvements
This commit is contained in:
vapormusic 2022-07-01 20:54:37 +07:00 • committed by GitHub
commit 5f78adabc7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 132 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/renderer/views/pages/cider-playlist.ejs
View file

@ -13,7 +13,7 @@
<div class="playlistInfo">
<div class="playlist-hero" v-if="hasHero()">
<mediaitem-artwork shadow="none" :url="hasHero()" size="2160" />
<div class="hero-tint" :style="{'background-color': '#' + hasHeroObject()?.bgColor ?? ''}"></div>
<div class="hero-tint" :style="{'background-color': '#' + hasHeroObject()?.bgColor ?? ''}"></div>
</div>
<div class="row">
<div class="col-auto flex-center" @mouseover="minClass(false)">
@ -108,17 +108,13 @@
{{app.getLz('term.confirm')}}
</button>
<div style="display: flex; float: right;">
<div class="search-input-container" style="margin-right: 8px;">
<div class="search-input--icon"></div>
<input type="search"
style="width:100%;"
spellcheck="false"
:placeholder="$root.getLz('term.search') + '...'"
@input="search()"
:style="{ '--heroplaceholdercolor': '#' +hasHeroObject()?.textColor4 ?? ''}"
v-model="searchQuery"
class="search-input">
</div>
<button :class="['search-btn', showSearch ? 'active' : '']"
@click="toggleSearch()"
:aria-label="showSearch ? app.getLz('term.hideSearch') : app.getLz('term.showSearch')">
<svg-icon :style="{ 'background': '#' + hasHeroObject()?.textColor4 ?? '' }"
:url="showSearch ? './assets/search-alt.svg' : './assets/search.svg'">
</svg-icon>
</button>
<button class="more-btn-round" @click="menu" :aria-label="app.getLz('term.more')">
<div class="svg-icon"></div>
</button>
@ -183,6 +179,16 @@
<div @wheel="minClass(true)" @scroll="minClass(true)">
<div class="">
<div style="width:100%" @click="minClass(true)">
<div v-if="showSearch" class="search-input-container">
<div class="search-input--icon"></div>
<input type="search"
spellcheck="false"
:placeholder="$root.getLz('term.search') + '...'"
@input="search()"
v-model="searchQuery"
class="search-input"
ref="search-bar">
</div>
<draggable :options="{disabled: !editing}"
v-model="data.relationships.tracks.data" @start="drag=true"
@end="drag=false;put()">
@ -294,6 +300,7 @@
searchQuery: "",
displayListing: [],
hasNestedPlaylist: false,
showSearch: false,
}
},
mounted: function () {
@ -820,7 +827,7 @@
type: "songs",
})
})
this.app.mk.api.v3.music(`/v1/me/library/playlists/${this.data.id}/tracks`, {}, {
fetchOptions: {
method: "POST",
@ -837,6 +844,20 @@
})
}
},
toggleSearch() {
this.showSearch = !this.showSearch;
if (!this.showSearch && this.searchQuery != "") {
// Clear search query if the search bar becomes hidden
this.searchQuery = "";
this.search();
} else if (this.showSearch) {
// Focus search bar
this.$nextTick(() => {
this.$refs["search-bar"].focus();
});
}
},
search() {
let filtered = [];