TDvorak/swingmusic-extended
1
0
Fork 0
mirror of https://github.com/Dvorinka/swingmusic-extended.git synced 2026-06-04 12:33:03 +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/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>