Merge pull request #1189 from pgalhardo/enhancement/search-bar
Album/Playlist page search bar improvements
This commit is contained in:
vapormusic
GitHub
commit
5f78adabc7
8 changed files with 132 additions and 15 deletions
|
|
@ -497,7 +497,6 @@ Update 14/06/2022 14:10 UTC
|
|||
|
||||
* `term.themeManaged`: Added to `en_US`
|
||||
|
||||
|
||||
Update 15/06/2022 20:00 UTC
|
||||
|
||||
* `settings.notyf.connectivity.lastfmScrobble.connectError`: Added to `en_US`
|
||||
|
|
@ -508,6 +507,11 @@ Update 19/06/2022 12:00 UTC
|
|||
|
||||
* `settings.option.connectivity.lastfmScrobble.filterLoop.description`: Added to `en_US`
|
||||
|
||||
Update 21/06/2022 20:39 UTC
|
||||
|
||||
* `term.showSearch`: Added to `en_US`
|
||||
* `term.hideSearch`: Added to `en_US`
|
||||
|
||||
Update 23/06/2022 04:00 UTC
|
||||
|
||||
* `settings.option.connectivity.lastfmScrobble.filterTypes`: Added to `en_US`
|
||||
* `settings.option.connectivity.lastfmScrobble.filterTypes`: Added to `en_US`
|
||||
|
|
|
|||
|
|
@ -31,6 +31,8 @@
|
|||
"term.miniplayer": "MiniPlayer",
|
||||
"term.history": "History",
|
||||
"term.search": "Search",
|
||||
"term.showSearch": "Show search bar",
|
||||
"term.hideSearch": "Hide search bar",
|
||||
"term.library": "Library",
|
||||
"term.listenNow": "Listen Now",
|
||||
"term.browse": "Browse",
|
||||
|
|
|
|||
|
|
@ -31,6 +31,8 @@
|
|||
"term.miniplayer": "Mini-leitor",
|
||||
"term.history": "Histórico",
|
||||
"term.search": "Pesquisa",
|
||||
"term.showSearch": "Mostrar a barra de pesquisa",
|
||||
"term.hideSearch": "Esconder a barar de pesquisa",
|
||||
"term.library": "Biblioteca",
|
||||
"term.listenNow": "Ouvir agora",
|
||||
"term.browse": "Explorar",
|
||||
|
|
|
|||
|
|
@ -31,6 +31,8 @@
|
|||
"term.miniplayer": "MiniPlayer",
|
||||
"term.history": "History",
|
||||
"term.search": "Search",
|
||||
"term.showSearch": "Show search bar",
|
||||
"term.hideSearch": "Hide search bar",
|
||||
"term.library": "Library",
|
||||
"term.listenNow": "Listen Now",
|
||||
"term.browse": "Browse",
|
||||
|
|
|
|||
4
src/renderer/assets/search-alt.svg
Normal file
4
src/renderer/assets/search-alt.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
|
||||
<path d="M505 442.7 405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/>
|
||||
<path d="M236.475 116.292c-30.447 13.753-37.74 53.708-14.117 77.332 23.624 23.624 63.579 16.33 77.332-14.117 29.331 95.273-88.453 166.118-158.893 95.678s.406-188.224 95.678-158.893z" style="stroke-width:23.8909"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 666 B |
|
|
@ -598,6 +598,18 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-input-container {
|
||||
height: 2.5rem;
|
||||
margin: 1rem;
|
||||
margin-top: 0;
|
||||
scroll-margin-top: 1rem;
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.floating-header {
|
||||
|
|
@ -807,6 +819,38 @@
|
|||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
display: flex;
|
||||
width: 32px;
|
||||
align-items: center;
|
||||
margin-right: 1rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
> ._svg-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.search-btn.active {
|
||||
animation: enlarge 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes enlarge {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13436,6 +13436,16 @@ input[type=checkbox][switch]:checked:active::before {
|
|||
.playlist-page .playlist-body.scrollbody .tabs .tab-content .tab-pane .well {
|
||||
margin: 0px;
|
||||
}
|
||||
.playlist-page .playlist-body .search-input-container {
|
||||
height: 2.5rem;
|
||||
margin: 1rem;
|
||||
margin-top: 0;
|
||||
scroll-margin-top: 1rem;
|
||||
}
|
||||
.playlist-page .playlist-body .search-input-container .search-input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.playlist-page .floating-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
|
@ -13625,6 +13635,34 @@ input[type=checkbox][switch]:checked:active::before {
|
|||
font-family: inherit;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.playlist-page .playlist-display .playlistInfo .playlist-info .search-btn {
|
||||
display: flex;
|
||||
width: 32px;
|
||||
align-items: center;
|
||||
margin-right: 1rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.playlist-page .playlist-display .playlistInfo .playlist-info .search-btn > ._svg-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: auto;
|
||||
}
|
||||
.playlist-page .playlist-display .playlistInfo .playlist-info .search-btn.active {
|
||||
animation: enlarge 0.5s ease-in-out;
|
||||
}
|
||||
@keyframes enlarge {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.playlist-page .friends-info {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
|
|
|||
|
|
@ -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 = [];
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue