okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

working on multi select for list item

Browse source
This commit is contained in:
booploops 2021-12-16 00:15:43 -08:00
parent 64a8529f65
commit fc015ea559
2 changed files with 34 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

25
resources/cider-ui/style.less
View file

@ -1941,7 +1941,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
font-size: 14px; font-size: 14px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer;
border-bottom: 1px solid rgb(200 200 200 / 10%); border-bottom: 1px solid rgb(200 200 200 / 10%);
.artwork { .artwork {
@ -1955,6 +1954,26 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
margin: 12px; margin: 12px;
border: 0px; border: 0px;
outline: none; outline: none;
position: relative;
overflow: hidden;
.overlay-play {
background: rgba(0, 0, 0, 0.5);
opacity: 0;
appearance: none;
border: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0px;
z-index: 5;
cursor: pointer;
&:hover {
opacity: 1;
}
}
} }
.artwork.round { .artwork.round {
@ -2020,6 +2039,10 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
} }
} }
&.mediaitem-selected {
background: var(--selected);
}
&:hover { &:hover {
background: rgb(200 200 200 / 10%); background: rgb(200 200 200 / 10%);
} }

15
resources/cider-ui/views/components/mediaitem-list-item.ejs
View file

@ -2,20 +2,24 @@
<template> <template>
<div v-observe-visibility="{callback: visibilityChanged}" <div v-observe-visibility="{callback: visibilityChanged}"
@contextmenu="contextMenu" @contextmenu="contextMenu"
class="cd-mediaitem-list-item"> @click.shift="selected = !selected"
:data-id="item.attributes.playParams.id ?? item.id"
:data-type="item.attributes.playParams.kind ?? item.type"
class="cd-mediaitem-list-item" :class="{'mediaitem-selected': selected}">
<template v-if="isVisible"> <template v-if="isVisible">
<div class="isLibrary" v-if="showLibraryStatus == true"> <div class="isLibrary" v-if="showLibraryStatus == true">
<button @click="addToLibrary()" v-if="!app.isInLibrary(item.attributes.playParams) && !addedToLibrary">🖤</button> <button @click="addToLibrary()" v-if="!app.isInLibrary(item.attributes.playParams) && !addedToLibrary">🖤</button>
<button v-else>❤️</button> <button v-else>❤️</button>
</div> </div>
<div class="artwork" v-if="showArtwork == true" @click="playTrack()"> <div class="artwork" v-if="showArtwork == true">
<mediaitem-artwork <mediaitem-artwork
:url="item.attributes.artwork ? item.attributes.artwork.url : ''" :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
size="34" size="34"
:type="item.type"></mediaitem-artwork> :type="item.type"></mediaitem-artwork>
<button class="overlay-play" @click="playTrack()"><%- include("../svg/play.svg") %></button>
</div> </div>
<div class="info-rect" :style="{'padding-left': (showArtwork ? '' : '16px')}" @click.self="playTrack()"> <div class="info-rect" :style="{'padding-left': (showArtwork ? '' : '16px')}" @dblclick="playTrack()">
<div class="title text-overflow-elipsis" @click.self="playTrack()"> <div class="title text-overflow-elipsis" @dblclick="playTrack()">
{{ item.attributes.name }} {{ item.attributes.name }}
</div> </div>
<div class="subtitle text-overflow-elipsis" style="-webkit-box-orient: horizontal;"> <div class="subtitle text-overflow-elipsis" style="-webkit-box-orient: horizontal;">
@ -58,7 +62,8 @@
data: function () { data: function () {
return { return {
isVisible: false, isVisible: false,
addedToLibrary: false addedToLibrary: false,
selected: false
} }
}, },
props: { props: {