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

replace background image with svg

Browse Source 
- add symlink svg
- fix validate playlist thumbnails
This commit is contained in:
geoffrey45
2022-06-23 12:32:07 +03:00
parent de7aba3ba7
commit 3eaab97f1f
14 changed files with 835 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/icons/album.svg
+1 -1
View File
@@ -1,3 +1,3 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.9912 22.7422C18.9746 22.7422 23.0879 18.6289 23.0879 13.6543C23.0879 8.67969 18.9658 4.56641 13.9824 4.56641C9.00781 4.56641 4.90332 8.67969 4.90332 13.6543C4.90332 18.6289 9.0166 22.7422 13.9912 22.7422ZM13.9912 20.9316C9.95703 20.9316 6.73145 17.6885 6.73145 13.6543C6.73145 9.62012 9.95703 6.38574 13.9824 6.38574C18.0166 6.38574 21.2598 9.62012 21.2686 13.6543C21.2773 17.6885 18.0254 20.9316 13.9912 20.9316ZM14 17.0996C15.9072 17.0996 17.4453 15.5615 17.4453 13.6455C17.4453 11.7471 15.9072 10.2002 14 10.2002C12.084 10.2002 10.5459 11.7471 10.5459 13.6455C10.5459 15.5615 12.084 17.0996 14 17.0996Z" fill="#F2F2F2"/>
<path d="M13.9912 22.7422C18.9746 22.7422 23.0879 18.6289 23.0879 13.6543C23.0879 8.67969 18.9658 4.56641 13.9824 4.56641C9.00781 4.56641 4.90332 8.67969 4.90332 13.6543C4.90332 18.6289 9.0166 22.7422 13.9912 22.7422ZM13.9912 20.9316C9.95703 20.9316 6.73145 17.6885 6.73145 13.6543C6.73145 9.62012 9.95703 6.38574 13.9824 6.38574C18.0166 6.38574 21.2598 9.62012 21.2686 13.6543C21.2773 17.6885 18.0254 20.9316 13.9912 20.9316ZM14 17.0996C15.9072 17.0996 17.4453 15.5615 17.4453 13.6455C17.4453 11.7471 15.9072 10.2002 14 10.2002C12.084 10.2002 10.5459 11.7471 10.5459 13.6455C10.5459 15.5615 12.084 17.0996 14 17.0996Z" fill="#fff"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 740 B

After

Width:  |  Height:  |  Size: 737 B

src/assets/icons/symlink.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.1318 14.1377C25.5928 14.1377 27.6582 12.0811 27.6582 9.61133C27.6582 7.12402 25.6104 5.08496 23.1318 5.08496C20.6533 5.08496 18.6055 7.13281 18.6055 9.61133C18.6055 12.0986 20.6533 14.1377 23.1318 14.1377ZM6.81055 21.7666H21.3916C23.0879 21.7666 24.0723 20.7822 24.0723 18.9014V15.3066C23.5977 15.4121 22.8857 15.4209 22.3232 15.3066V18.752C22.3232 19.5957 21.875 20.0176 21.0664 20.0176H6.9248C6.11621 20.0176 5.66797 19.5957 5.66797 18.7432V12.0723H17.9551C17.709 11.5977 17.5244 11.0791 17.4365 10.5342H5.66797V8.33691C5.66797 7.53711 6.11621 7.11523 6.89844 7.11523H8.56836C9.19238 7.11523 9.56152 7.26465 10.0625 7.66895L10.5547 8.08203C11.1699 8.57422 11.6445 8.75 12.5674 8.75H17.4453C17.5156 8.12598 17.6562 7.58105 17.9551 6.99219H13.0332C12.4004 6.99219 12.0225 6.85156 11.5303 6.44727L11.0381 6.04297C10.4141 5.5332 9.95703 5.36621 9.03418 5.36621H6.54688C4.89453 5.36621 3.91895 6.33301 3.91895 8.1875V18.9014C3.91895 20.791 4.91211 21.7666 6.81055 21.7666ZM23.0176 10.71C22.6836 10.71 22.4463 10.5166 22.4463 10.1826V10.1562C22.4463 9.64648 22.7451 9.36523 23.1406 9.09277C23.6064 8.76758 23.8789 8.58301 23.8789 8.22266C23.8789 7.89746 23.6152 7.67773 23.2109 7.67773C22.8594 7.67773 22.6309 7.82715 22.4375 8.0293C22.2793 8.1875 22.1387 8.35449 21.8662 8.35449C21.5234 8.35449 21.3213 8.14355 21.3213 7.84473C21.3213 7.12402 22.2617 6.63184 23.2285 6.63184C24.3711 6.63184 25.1357 7.27344 25.1357 8.16113C25.1357 8.88184 24.6699 9.1543 24.1689 9.51465C23.8438 9.76074 23.6592 9.91895 23.6152 10.2441C23.5625 10.543 23.3604 10.71 23.0176 10.71ZM23.0176 12.5293C22.6133 12.5293 22.2881 12.2217 22.2881 11.8262C22.2881 11.4307 22.6133 11.123 23.0176 11.123C23.4307 11.123 23.7471 11.4307 23.7471 11.8262C23.7471 12.2217 23.4307 12.5293 23.0176 12.5293Z" fill="#fff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

src/components/FolderView/FolderItem.vue
+18 -21
View File
@@ -1,33 +1,36 @@
<template>
<router-link
:to="{ name: 'FolderView', params: { path: props.folder.path } }"
>
<router-link :to="{ name: 'FolderView', params: { path: folder.path } }">
<div class="f-item">
<div class="icon image"></div>
<div class="icon">
<FolderSvg v-if="!folder.is_sym" />
<SymLinkSvg v-if="folder.is_sym" />
</div>
<div class="info">
<div class="f-item-text ellip">{{ props.folder.name }}</div>
<div class="f-item-text ellip">{{ folder.name }}</div>
<div class="separator no-border"></div>
<div class="f-item-count">{{ props.folder.trackcount }} tracks</div>
<div class="f-item-count">{{ folder.trackcount }} tracks</div>
</div>
</div>
</router-link>
</template>
<script setup lang="ts">
const props = defineProps({
folder: {
type: Object,
required: true,
},
});
import { Folder } from "@/interfaces";
import FolderSvg from "../../assets/icons/folder.svg";
import SymLinkSvg from "../../assets/icons/symlink.svg";
defineProps<{
folder: Folder;
}>();
</script>
<style lang="scss">
.f-container .f-item {
height: 5rem;
display: flex;
display: grid;
grid-template-columns: max-content 1fr;
padding-right: 1rem;
align-items: center;
position: relative;
background-color: $gray4;
transition: all 0.2s ease;
border-radius: 0.75rem;
@@ -37,16 +40,10 @@ const props = defineProps({
}
.icon {
background-image: url(../../assets/icons/folder.svg);
width: 2rem;
height: 1.5rem;
margin-right: 1rem;
margin-left: 1rem;
margin: 0 0.75rem;
}
.info {
width: 100%;
.f-item-count {
font-size: 0.8rem;
color: rgba(219, 217, 217, 0.63);
src/components/LeftSidebar/Navigation.vue
+54 -48
View File
@@ -7,7 +7,10 @@
>
<div class="nav-button" id="home-button" v-motion-slide-from-left-100>
<div class="in">
<div class="nav-icon image" :id="`${menu.name}-icon`"></div>
<!-- <div class="nav-icon image" :id="`${menu.name}-icon`"></div> -->
<!-- <img src="../../assets/icons/a.svg" alt="" /> -->
<!-- <HomeSvg /> -->
<component :is="menu.icon"></component>
<span>{{ menu.name }}</span>
</div>
</div>
@@ -16,39 +19,47 @@
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import HomeSvg from "../../assets/icons/home.svg";
import AlbumSvg from "../../assets/icons/album.svg";
import ArtistSvg from "../../assets/icons/artist.svg";
import PlaylistSvg from "../../assets/icons/playlist.svg";
import FolderSvg from "../../assets/icons/folder.svg";
const menus = [
{
name: "home",
route_name: "Home",
},
{
name: "albums",
route_name: "AlbumsView",
},
{
name: "artists",
route_name: "ArtistsView",
},
// {
// name: "home",
// route_name: "Home",
// icon: HomeSvg,
// },
// {
// name: "albums",
// route_name: "AlbumsView",
// icon: AlbumSvg,
// },
// {
// name: "artists",
// route_name: "ArtistsView",
// icon: ArtistSvg,
// },
{
name: "playlists",
route_name: "Playlists",
icon: PlaylistSvg,
},
{
name: "folders",
route_name: "FolderView",
params: { path: "$home" },
icon: FolderSvg,
},
{
name: "tags",
},
{
name: "settings",
route_name: "SettingsView",
},
// {
// name: "tags",
// },
// {
// name: "settings",
// route_name: "SettingsView",
// },
];
</script>
<style lang="scss">
@@ -85,35 +96,30 @@ const menus = [
}
}
#home-icon {
background-image: url(../../assets/icons/home.svg);
}
// #mixes-icon {
// background-image: url(../../assets/icons/mix.svg);
// }
#albums-icon {
background-image: url(../../assets/icons/album.svg);
}
// #folders-icon {
// background-image: url(../../assets/icons/folder.svg);
// }
// #settings-icon {
// background-image: url(../../assets/icons/settings.svg);
// }
// #tags-icon {
// background-image: url(../../assets/icons/tag.svg);
// }
}
#artists-icon {
background-image: url(../../assets/icons/artist.svg);
}
svg {
width: 2rem;
height: 2rem;
margin: 0 $small 0 $small;
border-radius: $small;
}
#playlists-icon {
background-image: url(../../assets/icons/playlist.svg);
}
#mixes-icon {
background-image: url(../../assets/icons/mix.svg);
}
#folders-icon {
background-image: url(../../assets/icons/folder.svg);
}
#settings-icon {
background-image: url(../../assets/icons/settings.svg);
}
#tags-icon {
background-image: url(../../assets/icons/tag.svg);
}
svg > path {
fill: $red !important;
}
}
</style>
src/interfaces.ts
+1
View File
@@ -22,6 +22,7 @@ export interface Folder {
path: string;
trackcount: number;
subdircount: number;
is_sym: boolean;
}
export interface AlbumInfo {
src/svg.d.ts
Vendored
+4
View File
@@ -0,0 +1,4 @@
declare module "*.svg" {
const content: string;
export default content;
}