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

square sp update

Browse source
This commit is contained in:
vapormusic 2021-12-06 22:14:24 +07:00
parent 6ade28819f
commit 4eece88979
2 changed files with 54 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

44
resources/cider-ui-tests/index.html
View file

@ -617,7 +617,7 @@
</div> </div>
</div> </div>
<div class="cd-mediaitem-square-large-overlay"> <div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
<div class="button" style = " <div class="button" style = "
border-radius: 50%; border-radius: 50%;
background: rgba(50,50,50,0.7);" background: rgba(50,50,50,0.7);"
@ -626,9 +626,10 @@
height: '40px',} : height: '40px',} :
{margin: '35px', {margin: '35px',
width: '120px', width: '120px',
height: '120px',}]" @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"> height: '120px',}]"
<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph"><path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path></svg></div> @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)">
</div> <svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph"><path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path></svg></div>
</div>
</div> </div>
</template> </template>
</script> </script>
@ -636,14 +637,26 @@
<!-- MediaItem Square SP --> <!-- MediaItem Square SP -->
<script type="text/x-template" id="mediaitem-square-sp"> <script type="text/x-template" id="mediaitem-square-sp">
<template> <template>
<div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)" <div style="position: relative; display: inline-flex;">
<div @click.self='app.routeView(item)'
class="cd-mediaitem-square-sp" class="cd-mediaitem-square-sp"
:style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}" :style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}">
>
<div class="artwork" <div class="artwork"
:class="{'round': item.type == 'artists'}" :class="{'round': item.type == 'artists'}"
:style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 300) }"></div> :style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 300) }"></div>
<div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
<div class="button" style = "
border-radius: 50%;
background: rgba(50,50,50,0.7);"
:style = "[((item.attributes.playParams.kind ?? item.type) != 'radioStation') ? {'margin': '140px',
width: '40px',
height: '40px',} :
{margin: '35px',
width: '120px',
height: '120px',}]"
@click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)">
<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph"><path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path></svg></div>
</div>
<div class="title text-overflow-elipsis" <div class="title text-overflow-elipsis"
:style="{'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}" :style="{'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}"
style="font-weight: 600"> style="font-weight: 600">
@ -655,7 +668,22 @@
{{ (item.attributes.editorialNotes != null) ? item.attributes.editorialNotes.short {{ (item.attributes.editorialNotes != null) ? item.attributes.editorialNotes.short
:(item.attributes.artistName ?? '') }} :(item.attributes.artistName ?? '') }}
</div> </div>
</div> </div>
<div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
<div class="button" style = "
border-radius: 50%;
background: rgba(50,50,50,0.7);"
:style = "[((item.attributes.playParams.kind ?? item.type) != 'radioStation') ? {'margin': '140px',
width: '40px',
height: '40px',} :
{margin: '35px',
width: '120px',
height: '120px',}]"
@click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)">
<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph"><path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path></svg></div>
</div>
</div>
</template> </template>
</script> </script>
<script type="text/x-template" id="lyrics-view"> <script type="text/x-template" id="lyrics-view">

18
resources/cider-ui-tests/style.css
View file

@ -1519,6 +1519,24 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
font-size: 12px; font-size: 12px;
} }
.cd-mediaitem-square-sp > .cd-mediaitem-square-large-overlay {
z-index: 3;
}
.cd-mediaitem-square-sp > .cd-mediaitem-square-large-overlay:hover {
opacity: 1;
}
.cd-mediaitem-square-sp + .cd-mediaitem-square-large-overlay {
pointer-events: none;
}
.cd-mediaitem-square-sp:hover + .cd-mediaitem-square-large-overlay {
opacity: 1;
}
/* mediaitem-square-large */ /* mediaitem-square-large */
.cd-mediaitem-square-large { .cd-mediaitem-square-large {
width: 190px; width: 190px;