tcsenpai/swingmusic
1
0
Fork 0
mirror of https://github.com/tcsenpai/swingmusic.git synced 2025-07-23 18:10:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

client: folder view improvements

Browse Source
This commit is contained in:
geoffrey45 2021-12-17 01:41:56 +03:00
parent 4df1d01c0d
commit 6f35af6aeb
6 changed files with 55 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/icons/file.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8.342C20 8.07556 19.9467 7.81181 19.8433 7.56624C19.7399 7.32068 19.5885 7.09824 19.398 6.912L14.958 2.57C14.5844 2.20466 14.0826 2.00007 13.56 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V4Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 13H15" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 17H12" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14 2V6C14 6.53043 14.2107 7.03914 14.5858 7.41421C14.9609 7.78929 15.4696 8 16 8H20" stroke="white" stroke-width="2" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 931 B

4
src/assets/icons/info.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 1.875C7.75195 1.875 1.875 7.75195 1.875 15C1.875 22.248 7.75195 28.125 15 28.125C22.248 28.125 28.125 22.248 28.125 15C28.125 7.75195 22.248 1.875 15 1.875ZM15 25.8984C8.98242 25.8984 4.10156 21.0176 4.10156 15C4.10156 8.98242 8.98242 4.10156 15 4.10156C21.0176 4.10156 25.8984 8.98242 25.8984 15C25.8984 21.0176 21.0176 25.8984 15 25.8984Z" fill="white"/>
<path d="M13.5938 9.84375C13.5938 10.2167 13.7419 10.5744 14.0056 10.8381C14.2694 11.1018 14.627 11.25 15 11.25C15.373 11.25 15.7306 11.1018 15.9944 10.8381C16.2581 10.5744 16.4062 10.2167 16.4062 9.84375C16.4062 9.47079 16.2581 9.1131 15.9944 8.84938C15.7306 8.58566 15.373 8.4375 15 8.4375C14.627 8.4375 14.2694 8.58566 14.0056 8.84938C13.7419 9.1131 13.5938 9.47079 13.5938 9.84375V9.84375ZM15.7031 13.125H14.2969C14.168 13.125 14.0625 13.2305 14.0625 13.3594V21.3281C14.0625 21.457 14.168 21.5625 14.2969 21.5625H15.7031C15.832 21.5625 15.9375 21.457 15.9375 21.3281V13.3594C15.9375 13.2305 15.832 13.125 15.7031 13.125Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

22
src/components/FolderView/SearchBox.vue
View File

@ -1,7 +1,9 @@
<template>
<div class="folder-top flex">
<div class="fname">
<span>Oldies Volume 1</span>
<div>
<div class="ellip">{{ path.split('/').splice(-1) + "" }}</div>
</div>
</div>
<div class="fsearch">
<div>
@ -12,10 +14,12 @@
</template>
<script>
export default {};
export default {
props: ["path"]
};
</script>
<style>
<style lang="scss">
.folder-top {
padding-bottom: 1rem;
margin-bottom: 1rem;
@ -28,6 +32,16 @@ export default {};
text-transform: uppercase;
display: flex;
align-items: center;
// border: solid;
// height: 4rem;
// .name {
// font-size: large;
// }
// .path {
// font-size: $small;
// }
}
.folder-top .fsearch {
@ -44,7 +58,7 @@ export default {};
.folder-top .fsearch input {
width: 30rem;
border: none;
border-radius: .5rem;
border-radius: 0.5rem;
padding-left: 1rem;
background-color: #4645456c;
color: rgba(255, 255, 255, 0.521);

29
src/components/FolderView/SongList.vue
View File

@ -12,7 +12,9 @@
<td :style="{ width: songTitleWidth + 'px' }" class="flex">
<div
class="album-art rounded image"
:style='{ backgroundImage: `url("${image_path + song.image}")` }'
:style="{
backgroundImage: `url(&quot;${image_path + song.image}&quot;)`,
}"
></div>
<div>
<span class="ellipsis">{{ song.title }}</span>
@ -28,7 +30,7 @@
:style="{ width: songTitleWidth + 'px' }"
v-if="songTitleWidth > minWidth"
>
{{ song.length/60 }}
{{ `${Math.trunc(song.length / 60)} min` }}
</td>
</tr>
</table>
@ -45,6 +47,7 @@ export default {
props: ["songs"],
setup() {
const songtitle = ref(null);
console.log(songtitle);
const songTitleWidth = ref(null);
const image_path = "http://127.0.0.1:8900/images/thumbnails/";
@ -79,7 +82,7 @@ export default {
.table {
width: 100%;
height: calc(100%);
background: transparent;
background-color: rgba(56, 56, 56, 0.363);
overflow-y: auto;
&::-webkit-scrollbar {
@ -89,17 +92,24 @@ export default {
.folder .table table {
border-collapse: collapse;
width: 100%;
text-transform: capitalize;
position: relative;
margin: 1rem;
tr {
&:hover {
td {
background-color: rgba(255, 174, 0, 0.534);
}
}
}
}
.folder .table table td .album-art {
width: 3rem;
height: 3rem;
margin-right: 1rem;
// background-color: rgb(194, 67, 67);
// background-image: url(../../assets/images/jw.jpeg);
background-image: url(../../assets/icons/file.svg);
}
.folder .table .flex {
@ -112,22 +122,19 @@ export default {
bottom: 1.5rem;
width: calc(100% - 6rem);
}
td,
th {
text-align: left;
padding: 8px;
text-align: left;
}
th {
height: 3rem;
}
tr:nth-child(even) {
background-color: rgba(29, 29, 29, 0.767);
}
tr:nth-child(odd) {
background-color: rgba(56, 56, 56, 0.363);
}
th {
text-transform: uppercase;

4
src/components/LeftSidebar/Navigation.vue
View File

@ -45,7 +45,7 @@
</div>
</router-link>
<hr />
<router-link :to="{ name: 'FolderView', params: { path: ' ' } }">
<router-link :to="{ name: 'FolderView', params: { path: '/' } }">
<div class="nav-button" id="folders-button">
<div class="in">
<div class="nav-icon image" id="folders-icon"></div>
@ -54,7 +54,7 @@
</div>
</router-link>
<hr />
<router-link :to="{ name: 'FolderView', params: { path: ' ' } }">
<router-link :to="{ name: 'FolderView', params: { path: '/' } }">
<div class="nav-button" id="folders-button">
<div class="in">
<div class="nav-icon image" id="settings-icon"></div>

12
src/views/FolderView.vue
View File

@ -1,11 +1,11 @@
<template>
<div id="f-view-parent" class="rounded">
<div class="fixed">
<SearchBox />
<SearchBox :path="path"/>
</div>
<div id="scrollable">
<SongList :songs="songs" />
<FolderList :folders="folders" />
<SongList :songs="songs" />
</div>
</div>
</template>
@ -36,6 +36,7 @@ export default {
const getPathFolders = (path) => {
getData(path).then((data) => {
document.getElementById('scrollable').scrollTop = 0;
songs.value = data.songs.value;
folders.value = data.folders.value;
});
@ -44,13 +45,14 @@ export default {
getPathFolders(path.value);
watch(route, (new_route) => {
const path = ref(new_route.params.path);
getPathFolders(path.value);
path.value = new_route.params.path;
getPathFolders(encodeURI(path.value));
});
return {
songs,
folders,
path
};
},
};
@ -76,6 +78,6 @@ export default {
#scrollable {
overflow-y: scroll;
height: 100%;
padding-right: 1rem;
padding: $small 1rem 0 0;
}
</style>