TDvorak/swingmusic-extended
1
0
Fork 0
mirror of https://github.com/Dvorinka/swingmusic-extended.git synced 2026-06-03 20:13:02 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

make right sidebar props reactive

Browse Source 
change favicons
This commit is contained in:
geoffrey45
2021-12-05 20:35:32 +03:00
parent 64aee5afbe
commit 4e2d9fd1e0
12 changed files with 61 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/favicon.ico
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

public/img/icons/android-chrome-192x192.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

public/img/icons/android-chrome-512x512.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

public/img/icons/apple-touch-icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

public/img/icons/favicon-16x16.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 591 B

public/img/icons/favicon-32x32.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

public/img/icons/favicon.ico
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

public/index.html
+1 -1
View File
@@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="./favicon.ico"> <link rel="icon" href="img/favicon.ico">
<title>MusicX</title> <title>MusicX</title>
</head> </head>
<body> <body>
src/App.vue
+31 -12
View File
@@ -5,7 +5,7 @@
<div id="logo-container"> <div id="logo-container">
<div id="toggle" @click="toggleNav"></div> <div id="toggle" @click="toggleNav"></div>
<router-link :to="{ name: 'FolderView' }" v-if="!collapsed" <router-link :to="{ name: 'FolderView' }" v-if="!collapsed"
><div ref="logo" class="logo"></div ><div class="logo"></div
></router-link> ></router-link>
</div> </div>
<Navigation :collapsed="collapsed" /> <Navigation :collapsed="collapsed" />
@@ -21,11 +21,15 @@
<router-view /> <router-view />
</div> </div>
<div class="r-sidebar"> <div class="r-sidebar">
<Search /> <Search
v-model:search="search"
@expandSearch="expandSearch"
@collapseSearch="collapseSearch"
/>
<div class="m-np"> <div class="m-np">
<NowPlaying /> <NowPlaying />
</div> </div>
<UpNext v-model:up_next="up_next" @updateCollapser="updateCollapser" :key="componentKey"/> <UpNext v-model:up_next="up_next" @expandQueue="expandQueue" />
<RecommendedArtist /> <RecommendedArtist />
</div> </div>
</div> </div>
@@ -55,21 +59,36 @@ export default {
setup() { setup() {
const collapsed = ref(true); const collapsed = ref(true);
const logo = ref(null);
function toggleNav() { function toggleNav() {
collapsed.value = !collapsed.value; collapsed.value = !collapsed.value;
} }
let up_next = ref(true); let up_next = ref(false);
const componentKey = ref(0); let search = ref(false);
const updateCollapser = () => { const expandQueue = () => {
up_next.value = !up_next.value up_next.value = !up_next.value;
componentKey.value +=1; search.value = false;
}; };
return { logo, toggleNav, collapsed, up_next, updateCollapser, componentKey }; const expandSearch = () => {
search.value = true;
up_next.value = false;
};
const collapseSearch = () => {
search.value = false;
};
return {
toggleNav,
collapsed,
up_next,
expandQueue,
expandSearch,
collapseSearch,
search,
};
}, },
}; };
</script> </script>
@@ -160,7 +179,7 @@ export default {
} }
.r-sidebar { .r-sidebar {
position: relative; position: relative;
margin-bottom: .5em; margin-bottom: 0.5em;
} }
.m-np { .m-np {
position: absolute; position: absolute;
src/assets/icons/logo-small-white-bg.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="375" viewBox="0 0 375 375" height="375" version="1.0"><defs><clipPath id="a"><path d="M 73.445312 66 L 301 66 L 301 308.839844 L 73.445312 308.839844 Z M 73.445312 66"/></clipPath></defs><path fill="#FFF" d="M 187.5 0 C 83.945312 0 0 83.945312 0 187.5 C 0 291.054688 83.945312 375 187.5 375 C 291.054688 375 375 291.054688 375 187.5 C 375 83.945312 291.054688 0 187.5 0 Z M 187.5 0"/><g clip-path="url(#a)"><path fill="#4AD168" d="M 88.226562 152.753906 C 78.492188 138.632812 73.621094 118.523438 73.621094 92.417969 L 73.621094 66.613281 L 143.804688 66.613281 L 276.328125 211.664062 C 283.808594 219.96875 288.796875 226.96875 291.289062 232.664062 C 293.785156 238.359375 295.625 243.578125 296.8125 248.324219 C 299.425781 257.816406 300.730469 269.503906 300.730469 283.386719 L 300.730469 308.835938 L 232.507812 308.835938 L 88.761719 152.753906 Z M 223.601562 142.609375 C 223.601562 109.980469 228.648438 88.742188 238.742188 78.894531 C 244.085938 73.671875 251.035156 70.351562 259.585938 68.925781 C 268.253906 67.382812 278.761719 66.613281 291.113281 66.613281 L 300.730469 66.613281 L 300.730469 94.734375 C 300.730469 120.003906 294.082031 136.914062 280.78125 145.457031 C 271.28125 151.625 255.308594 154.710938 232.867188 154.710938 L 223.601562 154.710938 Z M 73.621094 281.074219 C 73.621094 255.800781 80.273438 238.832031 93.570312 230.171875 C 103.070312 224.121094 119.042969 221.09375 141.488281 221.09375 L 150.75 221.09375 L 150.75 233.199219 C 150.75 266.183594 145.703125 287.363281 135.609375 296.734375 C 128.722656 303.140625 118.6875 306.9375 105.507812 308.125 C 98.855469 308.601562 91.433594 308.835938 83.242188 308.835938 L 73.621094 308.835938 Z M 73.621094 281.074219"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

src/components/RightSideBar/Search.vue
+20 -8
View File
@@ -6,7 +6,7 @@
placeholder="Michael Jackson" placeholder="Michael Jackson"
v-model="query" v-model="query"
/> />
<div class="scrollable" :class="{ hidden: !query }"> <div class="scrollable" :class="{ hidden: !is_hidden }">
<div class="tracks-results"> <div class="tracks-results">
<h3 class="heading">TRACKS<span class="more">SEE ALL</span></h3> <h3 class="heading">TRACKS<span class="more">SEE ALL</span></h3>
<div class="result-item" v-for="song in songs" :key="song"> <div class="result-item" v-for="song in songs" :key="song">
@@ -53,10 +53,12 @@
</template> </template>
<script> <script>
import { ref } from "@vue/reactivity"; import { ref, toRefs } from "@vue/reactivity";
import { watch } from '@vue/runtime-core';
export default { export default {
props: ["collapser"], props: ["search"],
setup() { setup(props, { emit }) {
const songs = [ const songs = [
{ {
title: "Thriller", title: "Thriller",
@@ -76,9 +78,20 @@ export default {
const artists = ["Michael Jackson", "Jackson 5"]; const artists = ["Michael Jackson", "Jackson 5"];
const query = ref(""); const query = ref(null);
return { songs, albums, artists, query }; const is_hidden = toRefs(props).search;
watch(query, (new_query) => {
if (new_query.length > 0) {
emit("expandSearch");
}
else {
emit("collapseSearch");
}
});
return { songs, albums, artists, query, is_hidden };
}, },
}; };
</script> </script>
@@ -116,7 +129,6 @@ export default {
right: 1rem; right: 1rem;
padding: 0.5rem; padding: 0.5rem;
user-select: none; user-select: none;
} }
.right-search .heading .more:hover { .right-search .heading .more:hover {
@@ -127,7 +139,7 @@ export default {
.right-search input { .right-search input {
width: 100%; width: 100%;
border: none; border: none;
border-radius: .5rem; border-radius: 0.5rem;
padding-left: 1rem; padding-left: 1rem;
background-color: #4645456c; background-color: #4645456c;
color: rgba(255, 255, 255, 0.479); color: rgba(255, 255, 255, 0.479);
src/components/RightSideBar/UpNext.vue
+8 -8
View File
@@ -11,7 +11,7 @@
<p class="artist">Sam hunt</p> <p class="artist">Sam hunt</p>
</div> </div>
</div> </div>
<div class="all-items" v-if="!toggle"> <div class="all-items" v-if="is_expanded">
<div class="scrollable"> <div class="scrollable">
<div class="song-item h-1" v-for="song in songs" :key="song"> <div class="song-item h-1" v-for="song in songs" :key="song">
<div class="album-art image"></div> <div class="album-art image"></div>
@@ -27,12 +27,12 @@
</template> </template>
<script> <script>
import { ref } from "@vue/reactivity"; import { toRefs } from "@vue/reactivity";
export default { export default {
props: ["up_next"], props: ["up_next"],
emits: ["updateCollapser"], emits: ["expandQueue"],
setup(props, context) { setup(props, { emit }) {
const songs = [ const songs = [
{ {
title: "Hard to forget", title: "Hard to forget",
@@ -112,13 +112,13 @@ export default {
}, },
]; ];
const toggle = ref(props.up_next); const is_expanded = toRefs(props).up_next;
let collapse = () => { let collapse = () => {
context.emit("updateCollapser"); emit("expandQueue");
}; };
return { songs, collapse, toggle }; return { songs, collapse, is_expanded };
}, },
}; };
</script> </script>
@@ -230,4 +230,4 @@ export default {
font-size: small; font-size: small;
color: rgba(255, 255, 255, 0.637); color: rgba(255, 255, 255, 0.637);
} }
</style> </style>