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

changes to mediaitem elements

Browse source
This commit is contained in:
booploops 2021-12-21 17:26:06 -08:00
parent 773b397bbc
commit 287f8a490b
8 changed files with 78 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/renderer/views/components/mediaitem-artwork.ejs
View file

@ -1,12 +1,12 @@
<script type="text/x-template" id="mediaitem-artwork">
<template v-if="type == 'artists'">
<div class="mediaitem-artwork rounded" :key="url" :style="{'box-shadow': shadow ? 'var(--mediaItemShadow-Shadow)' : ''}">
<div class="mediaitem-artwork rounded" :key="url" :style="getStyle()">
<img :src="app.getMediaItemArtwork(url, size)"
class="mediaitem-artwork--img">
</div>
</template>
<template v-else>
<div class="mediaitem-artwork" :key="url" :style="{'box-shadow': shadow ? 'var(--mediaItemShadow-Shadow)' : ''}"
<div class="mediaitem-artwork" :key="url" :style="getStyle()"
v-observe-visibility="{callback: visibilityChanged}">
<img :src="app.getMediaItemArtwork(url, size)" v-if="isVisible"
class="mediaitem-artwork--img">
@ -38,16 +38,32 @@
required: false
},
shadow: {
type: Boolean,
default: false
type: String,
default: 'none'
}
},
data: function () {
return {
isVisible: false
isVisible: false,
style: {
"box-shadow": ""
}
}
},
methods: {
getStyle() {
switch(this.shadow) {
case "large":
this.style["box-shadow"] = "var(--mediaItemShadow-Shadow)"
break;
case "subtle":
this.style["box-shadow"] = "var(--mediaItemShadow-ShadowSubtle)"
break;
default:
break;
}
return this.style;
},
getArtworkStyle() {
return {
width: this.size + 'px',