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;
justify-content: center;
align-items: center;
cursor: pointer;
border-bottom: 1px solid rgb(200 200 200 / 10%);
.artwork {
@ -1955,6 +1954,26 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
margin: 12px;
border: 0px;
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 {
@ -2020,6 +2039,10 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
}
}
&.mediaitem-selected {
background: var(--selected);
}
&:hover {
background: rgb(200 200 200 / 10%);
}

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

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