tcsenpai/swingmusic
1
0
Fork 0
mirror of https://github.com/tcsenpai/swingmusic.git synced 2025-06-09 04:35:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

client: add pop filter on backspace

Browse Source 
- move search component to global
This commit is contained in:
geoffrey45 2021-12-30 10:25:29 +03:00
parent 477072daf0
commit efd7f84b1f
3 changed files with 27 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
Pipfile Normal file
View File

@ -0,0 +1,11 @@
[[source]]
url = "https://pypi.python.org/simple"
verify_ssl = true
name = "pypi"
[packages]
[dev-packages]
[requires]
python_version = "3.8"

2
src/App.vue
View File

@ -36,7 +36,7 @@ import { ref } from "@vue/reactivity";
import Navigation from "./components/LeftSidebar/Navigation.vue"; import Navigation from "./components/LeftSidebar/Navigation.vue";
import PinnedStuff from "./components/LeftSidebar/PinnedStuff.vue"; import PinnedStuff from "./components/LeftSidebar/PinnedStuff.vue";
import Search from "./components/RightSideBar/Search.vue"; import Search from "./components/Search.vue";
import NowPlaying from "./components/RightSideBar/NowPlaying.vue"; import NowPlaying from "./components/RightSideBar/NowPlaying.vue";
import UpNext from "./components/RightSideBar/UpNext.vue"; import UpNext from "./components/RightSideBar/UpNext.vue";
import RecommendedArtist from "./components/RightSideBar/Recommendation.vue"; import RecommendedArtist from "./components/RightSideBar/Recommendation.vue";

23
src/components/RightSideBar/Search.vue → src/components/Search.vue
View File

@ -133,6 +133,7 @@ export default {
"Xscape", "Xscape",
"USA for Africa", "USA for Africa",
]; ];
const artists = ["Michael Jackson waihenya", "Jackson 5"]; const artists = ["Michael Jackson waihenya", "Jackson 5"];
const query = ref(null); const query = ref(null);
const magic_flag = ref(false); const magic_flag = ref(false);
@ -148,9 +149,14 @@ export default {
filters.value = filters.value.filter((f) => f !== filter); filters.value = filters.value.filter((f) => f !== filter);
} }
let counter = 0;
function removeLastFilter() { function removeLastFilter() {
if (query.value === '') { console.log("removeLastFilter");
if (filters.value.length) { if (query.value === "" || query.value === null) {
counter ++;
if (counter > 1 || query.value === null){
filters.value.pop(); filters.value.pop();
} }
} }
@ -163,7 +169,8 @@ export default {
} }
watch(query, (new_query) => { watch(query, (new_query) => {
if (new_query) { if (new_query !== "") {
counter = 0;
emit("expandSearch"); emit("expandSearch");
} else { } else {
emit("collapseSearch"); emit("collapseSearch");
@ -241,7 +248,7 @@ export default {
right: 0.5rem; right: 0.5rem;
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
background-image: url(../../assets/icons/a.svg); background-image: url(../assets/icons/a.svg);
background-size: 70%; background-size: 70%;
} }
} }
@ -253,7 +260,7 @@ export default {
position: absolute; position: absolute;
height: 2.5rem; height: 2.5rem;
width: 2.5rem; width: 2.5rem;
background-image: url(../../assets/icons/search.svg); background-image: url(../assets/icons/search.svg);
background-size: 70%; background-size: 70%;
} }
@ -359,7 +366,7 @@ export default {
background-color: rgb(27, 150, 74); background-color: rgb(27, 150, 74);
border-radius: 0.5rem; border-radius: 0.5rem;
margin: 0 $small 0 $small; margin: 0 $small 0 $small;
background-image: url(../../assets/images/thriller.jpg); background-image: url(../assets/images/thriller.jpg);
} }
.tags .artist { .tags .artist {
@ -411,7 +418,7 @@ export default {
background-color: rgba(26, 26, 26, 0.452); background-color: rgba(26, 26, 26, 0.452);
border-radius: 0.5rem; border-radius: 0.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
background-image: url(../../assets/images/thriller.jpg); background-image: url(../assets/images/thriller.jpg);
} }
.title { .title {
@ -451,7 +458,7 @@ export default {
background-color: rgba(16, 65, 14, 0.356); background-color: rgba(16, 65, 14, 0.356);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
background-size: 50%; background-size: 50%;
background-image: url(../../assets/images/thriller.jpg); background-image: url(../assets/images/thriller.jpg);
background-size: cover; background-size: cover;
} }