Album/Playlist page search bar improvements
This commit is contained in:
Pedro Galhardo
parent
979a36c79a
commit
670efd81eb
6 changed files with 75 additions and 11 deletions
|
|
@ -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",
|
||||
|
|
|
|||
5
src/renderer/assets/search-alt.svg
Normal file
5
src/renderer/assets/search-alt.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="white" d="M505 442.7L405.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"/>
|
||||
<ellipse style="fill: rgb(255, 255, 255);" cx="209.791" cy="207.093" rx="79.599" ry="79.599"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 578 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 {
|
||||
|
|
@ -779,6 +791,29 @@
|
|||
text-transform : uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
display: flex;
|
||||
width: 32px;
|
||||
align-items: center;
|
||||
margin-right: 1rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
> img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: auto;
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
|
||||
.search-btn.active {
|
||||
> img {
|
||||
opacity: 0.85
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -102,16 +102,11 @@
|
|||
{{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()"
|
||||
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')">
|
||||
<img :src="showSearch ? './assets/search-alt.svg' : './assets/search.svg'">
|
||||
</button>
|
||||
<button class="more-btn-round" @click="menu" :aria-label="app.getLz('term.more')">
|
||||
<div class="svg-icon"></div>
|
||||
</button>
|
||||
|
|
@ -176,6 +171,15 @@
|
|||
<div @wheel="minClass(true)" @scroll="minClass(true)">
|
||||
<div class="">
|
||||
<div style="width:100%" @click="minClass(true)">
|
||||
<div v-if="showSearch" class="search-input-container" ref="playlist-search">
|
||||
<div class="search-input--icon"></div>
|
||||
<input type="search"
|
||||
spellcheck="false"
|
||||
:placeholder="$root.getLz('term.search') + '...'"
|
||||
@input="search()"
|
||||
v-model="searchQuery"
|
||||
class="search-input">
|
||||
</div>
|
||||
<draggable :options="{disabled: !editing}"
|
||||
v-model="data.relationships.tracks.data" @start="drag=true"
|
||||
@end="drag=false;put()">
|
||||
|
|
@ -287,6 +291,7 @@
|
|||
searchQuery: "",
|
||||
displayListing: [],
|
||||
hasNestedPlaylist: false,
|
||||
showSearch: false,
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
|
|
@ -807,6 +812,19 @@
|
|||
})
|
||||
}
|
||||
},
|
||||
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) {
|
||||
this.$nextTick(() => {
|
||||
// Ensure search bar is visible
|
||||
this.$refs["playlist-search"].scrollIntoView({ behavior: 'smooth' });
|
||||
})
|
||||
}
|
||||
},
|
||||
search() {
|
||||
let filtered = [];
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue