diff --git a/src/i18n/README.md b/src/i18n/README.md index 2aa28cbe..182e730b 100644 --- a/src/i18n/README.md +++ b/src/i18n/README.md @@ -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` \ No newline at end of file +* `settings.option.connectivity.lastfmScrobble.filterTypes`: Added to `en_US` diff --git a/src/i18n/en_US.json b/src/i18n/en_US.json index 032191ad..a4282abc 100644 --- a/src/i18n/en_US.json +++ b/src/i18n/en_US.json @@ -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", diff --git a/src/i18n/pt_PT.json b/src/i18n/pt_PT.json index b499d775..54496abe 100644 --- a/src/i18n/pt_PT.json +++ b/src/i18n/pt_PT.json @@ -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", diff --git a/src/i18n/source/en_US.json b/src/i18n/source/en_US.json index 53c13dc8..ae09a6d3 100644 --- a/src/i18n/source/en_US.json +++ b/src/i18n/source/en_US.json @@ -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", diff --git a/src/renderer/assets/search-alt.svg b/src/renderer/assets/search-alt.svg new file mode 100644 index 00000000..d21e9b73 --- /dev/null +++ b/src/renderer/assets/search-alt.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less index 0f9e8418..245e454d 100644 --- a/src/renderer/less/pages.less +++ b/src/renderer/less/pages.less @@ -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); + } + } } } diff --git a/src/renderer/style.css b/src/renderer/style.css index 782a157e..e1d1ddff 100644 --- a/src/renderer/style.css +++ b/src/renderer/style.css @@ -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; diff --git a/src/renderer/views/pages/cider-playlist.ejs b/src/renderer/views/pages/cider-playlist.ejs index eaae58b8..92e948d3 100644 --- a/src/renderer/views/pages/cider-playlist.ejs +++ b/src/renderer/views/pages/cider-playlist.ejs @@ -13,7 +13,7 @@
-
+
@@ -108,17 +108,13 @@ {{app.getLz('term.confirm')}}
-
-
- -
+ @@ -183,6 +179,16 @@
+
+
+ +
@@ -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 = [];