client: remove search box in folder view

- 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

11
Pipfile
View File

@ -1,11 +0,0 @@
[[source]]
url = "https://pypi.python.org/simple"
verify_ssl = true
name = "pypi"
[packages]
[dev-packages]
[requires]
python_version = "3.8"

View File

@ -70,12 +70,10 @@ export default {
const expandQueue = () => {
up_next.value = !up_next.value;
search.value = false;
};
const expandSearch = () => {
search.value = true;
up_next.value = false;
};
const collapseSearch = () => {

View File

@ -4,7 +4,6 @@
}
* {
user-select: none;
box-sizing: border-box;
}
@ -51,6 +50,17 @@ a {
display: none;
}
button {
border: none;
color: inherit;
font-size: 1rem;
cursor: pointer;
&:hover {
background-color: rgb(158, 58, 58) !important;
}
}
.l-container {
display: grid;
grid-template-columns: min-content 4fr min-content;
@ -91,7 +101,6 @@ a {
transition: all 0.3s ease;
}
.ellip {
display: -webkit-box;
-webkit-line-clamp: 1;
@ -172,7 +181,7 @@ a {
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: rgb(163, 163, 163);
background: $blue;
}
@-webkit-keyframes similarAlbums {
@ -237,5 +246,4 @@ a {
.not_active {
background-image: url(../../assets/icons/playing.webp);
transition: all 0.3s ease-in-out;
}
}

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>

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;

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 {

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;

View File

@ -73,7 +73,7 @@ const readQueue = () => {
if (prev_queue) {
state.queue.value = prev_queue;
updateNext(state.current.value);
updatePrev(state.current.value);
}
@ -107,9 +107,11 @@ setTimeout(() => {
});
}, 1000);
window.addEventListener('keyup', (e) => {
if (e.code) {
console.log(e.code);
window.addEventListener("keyup", (e) => {
e.preventDefault();
if (e.ctrlKey && e.code == "KeyF") {
console.log('Ctrl F')
}
});

View File

@ -79,7 +79,7 @@ export default {
#f-view-parent {
position: relative;
background-color: $card-dark;
padding: 5rem $small 0 $small;
padding: 4rem $small 0 $small;
overflow: hidden;
margin: $small 0 $small 0;
}
@ -87,17 +87,14 @@ export default {
#f-view-parent .fixed {
position: absolute;
height: min-content;
width: calc(100% - 2rem);
width: calc(100% - 1rem);
top: 0.5rem;
}
#scrollable {
overflow-y: scroll;
height: calc(100% - 1rem);
height: calc(100% - $small);
padding-right: $small;
.separator {
margin: 0 1rem 0 1rem;
}
}
</style>