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

Make playlist search icon use hero color

Browse source
This commit is contained in:
Pedro Galhardo 2022-07-01 10:10:24 +01:00
parent eaf3523180
commit ea828a97e9
No known key found for this signature in database
GPG key ID: 4740524CD85770A9
4 changed files with 8 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/renderer/assets/search-alt.svg
View file

@ -1,4 +1,4 @@
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
<path fill="#fff" 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="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;fill:#fff"/> <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> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 667 B

After

Width:  |  Height:  |  Size: 666 B

Before After
Before After

5
src/renderer/less/pages.less
View file

@ -833,16 +833,11 @@
width: 18px; width: 18px;
height: 18px; height: 18px;
margin: auto; margin: auto;
opacity: 0.5;
} }
} }
.search-btn.active { .search-btn.active {
animation: enlarge 0.5s ease-in-out; animation: enlarge 0.5s ease-in-out;
> ._svg-icon {
opacity: 1;
}
} }
@keyframes enlarge { @keyframes enlarge {

4
src/renderer/style.css
View file

@ -13648,14 +13648,10 @@ input[type=checkbox][switch]:checked:active::before {
width: 18px; width: 18px;
height: 18px; height: 18px;
margin: auto; margin: auto;
opacity: 0.5;
} }
.playlist-page .playlist-display .playlistInfo .playlist-info .search-btn.active { .playlist-page .playlist-display .playlistInfo .playlist-info .search-btn.active {
animation: enlarge 0.5s ease-in-out; animation: enlarge 0.5s ease-in-out;
} }
.playlist-page .playlist-display .playlistInfo .playlist-info .search-btn.active > ._svg-icon {
opacity: 1;
}
@keyframes enlarge { @keyframes enlarge {
0% { 0% {
transform: scale(1); transform: scale(1);

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

@ -111,7 +111,9 @@
<button :class="['search-btn', showSearch ? 'active' : '']" <button :class="['search-btn', showSearch ? 'active' : '']"
@click="toggleSearch()" @click="toggleSearch()"
:aria-label="showSearch ? app.getLz('term.hideSearch') : app.getLz('term.showSearch')"> :aria-label="showSearch ? app.getLz('term.hideSearch') : app.getLz('term.showSearch')">
<svg-icon :url="showSearch ? './assets/search-alt.svg' : './assets/search.svg'"></svg-icon> <svg-icon :style="{ 'background': '#' + hasHeroObject()?.textColor4 ?? '' }"
:url="showSearch ? './assets/search-alt.svg' : './assets/search.svg'">
</svg-icon>
</button> </button>
<button class="more-btn-round" @click="menu" :aria-label="app.getLz('term.more')"> <button class="more-btn-round" @click="menu" :aria-label="app.getLz('term.more')">
<div class="svg-icon"></div> <div class="svg-icon"></div>
@ -841,18 +843,12 @@
}, },
toggleSearch() { toggleSearch() {
this.showSearch = !this.showSearch; this.showSearch = !this.showSearch;
if (!this.showSearch && this.searchQuery != "") { if (!this.showSearch && this.searchQuery != "") {
// Clear search query if the search bar becomes hidden // Clear search query if the search bar becomes hidden
this.searchQuery = ""; this.searchQuery = "";
this.search(); this.search();
} else if (this.showSearch) { } else if (this.showSearch) {
// Ensure search bar is visible
document.querySelector(".tab-pane.active").scrollTo({
top: 0,
left: 0,
behavior: "smooth"
});
// Focus search bar // Focus search bar
this.$nextTick(() => { this.$nextTick(() => {
this.$refs["search-bar"].focus(); this.$refs["search-bar"].focus();