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

client: remove search box in folder view

Browse Source 
- add working ctrl f listener
This commit is contained in:
geoffrey45
2022-01-06 20:40:23 +03:00
parent 64d2c8c466
commit 9310382436
9 changed files with 116 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FolderView/SearchBox.vue
+41 -45
View File
@@ -1,13 +1,13 @@
<template>
<div class="folder-top flex">
<div class="fname">
<div>
<div class="ellip">{{ path.split("/").splice(-1) + "" }}</div>
</div>
</div>
<div class="fsearch">
<div>
<input type="search" placeholder="Search this directory" />
<button class="play image">
<div class="icon"></div>
Play
</button>
<div class="ellip text">
<div class="icon image"></div>
{{ path.split("/").splice(-1) + "" }}
</div>
</div>
</div>
@@ -21,55 +21,51 @@ export default {
<style lang="scss">
.folder-top {
padding-bottom: 1rem;
margin-bottom: 1rem;
border-bottom: 1px solid $separator;
width: calc(100% - 2rem);
margin-left: 1rem;
width: calc(100% - 0.5rem);
padding-bottom: $small;
height: 3rem;
}
.folder-top .fname {
width: 50%;
color: rgba(255, 255, 255, 0.438);
text-transform: uppercase;
display: flex;
align-items: center;
}
.folder-top .fsearch {
position: relative;
width: 50%;
padding-right: 3rem;
}
.play {
height: 100%;
width: 5em;
background-color: rgb(5, 74, 131);
border-radius: $small;
display: flex;
align-items: center;
padding-left: $small;
margin-right: $small;
.folder-top .fsearch div {
width: 100%;
display: flex;
justify-content: flex-end;
}
.icon {
height: 1.5rem;
width: 1.5rem;
background-image: url(../../assets/icons/play.svg);
background-size: 1.5rem;
background-position: 10%;
margin-right: $small;
}
}
.folder-top .fsearch input {
width: 30rem;
border: none;
border-radius: 0.5rem;
padding-left: 1rem;
background-color: #4645456c;
color: rgba(255, 255, 255, 0.521);
font-size: 1rem;
line-height: 3rem;
outline: none;
}
.text {
display: flex;
align-items: center;
.folder-top .fsearch input::-webkit-search-cancel-button {
position: relative;
right: 20px;
cursor: pointer;
width: 50px;
height: 50px;
}
border-radius: $small;
background-color: rgb(24, 22, 22);
padding: $small;
.folder-top .fsearch input:focus {
color: rgb(255, 255, 255);
outline: 1px solid #fafafa52;
.icon {
height: 1.5rem;
width: 1.5rem;
background-image: url(../../assets/icons/folder.svg);
margin-right: $small;
}
}
}
</style>
src/components/FolderView/SongList.vue
+2 -2
View File
@@ -210,13 +210,14 @@ export default {
}
td,
th {
padding: $small;
padding: $small 0 $small $small;
text-align: left;
}
th {
text-transform: uppercase;
font-weight: normal;
display: none;
}
td .artist {
@@ -227,7 +228,6 @@ td .artist {
border-collapse: collapse;
text-transform: capitalize;
position: relative;
margin: 1rem;
tbody tr {
cursor: pointer;
src/components/RightSideBar/UpNext.vue
+26 -7
View File
@@ -21,7 +21,10 @@
</div>
</div>
<div>
<div :class="{ hr: is_expanded }" class="all-items">
<div
:class="{ hr: is_expanded, v0x: !is_expanded, v1x: is_expanded }"
class="all-items"
>
<div :class="{ v0: !is_expanded, v1: is_expanded }" class="scrollable">
<div
class="song-item h-1"
@@ -114,15 +117,22 @@ export default {
</script>
<style lang="scss">
.up-next .hr {
border-top: 1px solid var(--separator);
}
.up-next .v0 {
max-height: 0em;
overflow: hidden;
transition: max-height 0.5s ease;
}
.up-next .v0x {
background-color: transparent !important;
transition: all 0.5s ease;
}
.up-next .v1x {
transition: all .5s ease;
background-color: rgb(218, 72, 96);
}
.up-next .v1 {
max-height: 21em;
transition: max-height 0.5s ease;
@@ -135,7 +145,7 @@ export default {
.up-next {
padding: 0.5rem;
margin-top: 1rem;
margin-top: $small;
background-color: $card-dark;
border-radius: 0.5rem;
}
@@ -165,6 +175,10 @@ export default {
border-radius: 0.5rem;
cursor: pointer;
margin-bottom: 0.5rem;
&:hover {
background-color: $blue;
}
}
.up-next .main-item .album-art {
@@ -189,17 +203,22 @@ export default {
width: 20rem;
margin: 0;
font-size: small;
color: rgba(255, 255, 255, 0.61);
}
.up-next .all-items {
padding-top: $small;
border-radius: 0.5rem;
padding: $small;
}
.up-next .all-items .scrollable {
overflow-y: auto;
width: 100%;
background-color: $card-dark;
border-radius: 0.5rem;
&::-webkit-scrollbar-track {
background-color: transparent;
}
}
.up-next .all-items p {
src/components/Search.vue
+24 -21
View File
@@ -47,12 +47,14 @@
<div class="scrollable" :class="{ v0: !is_hidden, v1: is_hidden }">
<div class="tracks-results">
<div class="heading">TRACKS<span class="more">SEE ALL</span></div>
<div class="result-item" v-for="song in songs" :key="song">
<div class="album-art image"></div>
<div class="tags">
<span class="title">{{ song.title }}</span>
<hr />
<span class="artist">{{ song.artist }}</span>
<div class="items">
<div class="result-item" v-for="song in songs" :key="song">
<div class="album-art image"></div>
<div class="tags">
<span class="title">{{ song.title }}</span>
<hr />
<span class="artist">{{ song.artist }}</span>
</div>
</div>
</div>
</div>
@@ -252,7 +254,7 @@ export default {
}
.right-search .v1 {
max-height: 26rem;
max-height: 25rem;
transition: max-height 0.5s ease;
}
@@ -361,19 +363,20 @@ export default {
.right-search .heading {
font-size: small;
position: relative;
padding: 1rem;
padding: $small;
display: flex;
align-items: center;
.more {
position: absolute;
right: 1rem;
right: $small;
padding: 0.5rem;
user-select: none;
}
.more:hover {
background: $blue;
border-radius: 0.5rem;
// background: $blue;
// border-radius: 0.5rem;
cursor: pointer;
}
}
@@ -398,20 +401,24 @@ export default {
}
}
/* */
/* tracks */
.right-search .tracks-results {
border-radius: 0.5rem;
background: #1f0012;
background: #ca0377;
margin-left: $small;
padding: $small;
.items {
border-radius: $small;
background-color: $card-dark;
}
.result-item {
display: flex;
align-items: center;
height: 4.5rem;
width: 100%;
background-color: rgba(20, 20, 20, 0.479);
.album-art {
width: 3.5rem;
@@ -419,7 +426,7 @@ export default {
background-color: rgb(27, 150, 74);
border-radius: 0.5rem;
margin: 0 $small 0 $small;
background-image: url(../assets/images/thriller.jpg);
background-image: url(../assets/images/girl3.jpg);
}
.tags .artist {
@@ -427,10 +434,6 @@ export default {
color: rgba(255, 255, 255, 0.63);
}
&:nth-child(odd) {
background-color: transparent;
}
&:hover {
background-color: $blue;
border-radius: $small;
@@ -443,7 +446,7 @@ export default {
border: none;
}
/* */
/* albums */
.right-search .albums-results {
border-radius: 0.5rem;
@@ -487,7 +490,7 @@ export default {
}
}
/* */
/* artits */
.right-search .artists-results {
border-radius: 0.5rem;