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

move nav folder-paths into a new component (#66)

Browse Source 
* move folder-paths into a new component

* move nav playlist title into new components
This commit is contained in:
Mungai Geoffrey
2022-06-07 12:51:47 +03:00
committed by GitHub
parent f7218875a6
commit 4e1e1b8979
5 changed files with 155 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/nav/NavBar.vue
+5 -130
View File
@@ -6,51 +6,8 @@
</div>
<div class="info">
<div
class="title"
v-show="$route.name == 'Playlists'"
v-motion
:initial="{
opacity: 0,
x: -20,
}"
:visible="{
opacity: 1,
x: 0,
transition: {
delay: 100,
},
}"
>
Playlists
</div>
<div
class="folder"
v-show="$route.name == 'FolderView'"
v-motion
:initial="{
opacity: 0,
x: -20,
}"
:visible="{
opacity: 1,
x: 0,
transition: {
delay: 100,
},
}"
>
<div class="fname">
<div class="icon image"></div>
<div class="paths">
<!-- {{ $route.params.path.split("/").splice(-1)[0] }} -->
<!-- {{ $route.params.path }} -->
<div class="path" v-for="path in subPaths" :key="path.path">
<span class="text">{{ path.name }}</span>
</div>
</div>
</div>
</div>
<Playlists v-show="$route.name == Routes.playlists" />
<Folder v-show="$route.name == Routes.folder" :subPaths="subPaths" />
</div>
</div>
@@ -73,10 +30,12 @@ import { onMounted, ref, watch } from "vue";
import { Routes } from "@/composables/enums";
import createSubPaths from "@/composables/createSubPaths";
import { subPath } from "@/interfaces";
import Folder from "./Titles/Folder.vue";
import Playlists from "./Titles/Playlists.vue";
const route = useRoute();
const subPaths = ref<subPath[]>();
const subPaths = ref<subPath[]>([]);
function useSubRoutes() {
watch(
@@ -129,90 +88,6 @@ onMounted(() => {
font-size: 1.5rem;
font-weight: bold;
}
.folder {
display: flex;
gap: $small;
.playbtnrect {
height: 2.25rem;
}
.drop-btn {
width: 2.25rem;
.drop-icon {
height: 2.25rem;
width: 2.25rem;
}
}
.fname {
background-color: $gray4;
border-radius: $small;
height: 2.25rem;
display: flex;
align-items: center;
margin-left: $smaller;
overflow: auto;
.icon {
height: 2rem;
aspect-ratio: 1;
background-image: url("../../assets/icons/folder.fill.svg");
background-size: 1.5rem;
background-position: 75% 50%;
}
.paths {
display: flex;
gap: $smaller;
overflow: auto;
height: 100%;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
.path {
white-space: nowrap;
display: flex;
align-items: center;
cursor: default;
.text {
padding: $smaller;
border-radius: $smaller;
}
&::before {
content: "";
height: $medium;
margin-right: $smaller;
border-right: solid 1px $white;
transform: rotate(20deg);
}
&:first-child {
&::before {
display: none;
}
}
&:last-child {
padding-right: $small;
}
&:hover {
.text {
background-color: $gray;
}
}
}
}
}
}
}
}
src/components/nav/Titles/Folder.vue
+127
View File
@@ -0,0 +1,127 @@
<template>
<div id="folder-nav-title">
<div
class="folder"
v-motion
:initial="{
opacity: 0,
x: -20,
}"
:visible="{
opacity: 1,
x: 0,
transition: {
delay: 100,
},
}"
>
<div class="fname">
<div class="icon image"></div>
<div class="paths">
<div class="path" v-for="path in subPaths" :key="path.path">
<span class="text">{{ path.name }}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { subPath } from "@/interfaces";
defineProps<{
subPaths: subPath[];
}>();
</script>
<style lang="scss">
#folder-nav-title {
.folder {
display: flex;
gap: $small;
.playbtnrect {
height: 2.25rem;
}
.drop-btn {
width: 2.25rem;
.drop-icon {
height: 2.25rem;
width: 2.25rem;
}
}
.fname {
background-color: $gray4;
border-radius: $small;
height: 2.25rem;
display: flex;
align-items: center;
margin-left: $smaller;
overflow: auto;
padding-right: $smaller;
.icon {
height: 2rem;
aspect-ratio: 1;
background-image: url("../../../assets/icons/folder.fill.svg");
background-size: 1.5rem;
margin-left: $smaller;
background-position: 65% 50%;
}
.paths {
display: flex;
gap: $smaller;
overflow: auto;
height: 100%;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
.path {
white-space: nowrap;
display: flex;
align-items: center;
cursor: default;
.text {
padding: $smaller;
border-radius: $smaller;
}
&::before {
content: "";
height: $medium;
margin-right: $smaller;
border-right: solid 1px $white;
transform: rotate(20deg);
}
&:first-child {
&::before {
display: none;
}
}
&:last-child {
padding-right: $smaller;
}
&:hover {
.text {
background-color: $gray;
}
}
}
}
}
}
}
</style>
src/components/nav/Titles/Playlists.vue
+20
View File
@@ -0,0 +1,20 @@
<template>
<div
class="title"
v-show="$route.name == 'Playlists'"
v-motion
:initial="{
opacity: 0,
x: -20,
}"
:visible="{
opacity: 1,
x: 0,
transition: {
delay: 100,
},
}"
>
Playlists
</div>
</template>