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

fancier popover

Browse source
This commit is contained in:
booploops 2022-05-24 01:07:38 -07:00
parent b5ea40ac71
commit 1acbd4e957
4 changed files with 64 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/renderer/less/bootstrap.less vendored
View file

@ -7693,7 +7693,7 @@ fieldset:disabled .btn {
word-wrap: break-word; word-wrap: break-word;
background-color: var(--modalBackground); background-color: var(--modalBackground);
background-clip: padding-box; background-clip: padding-box;
box-shadow: var(--mediaItemShadow), var(--mediaItemShadow-ShadowSubtle); box-shadow: var(--mediaItemShadow), var(--mediaItemShadow-Shadow);
border-radius: var(--mediaItemRadius); border-radius: var(--mediaItemRadius);
} }
.popover .popover-arrow { .popover .popover-arrow {

40
src/renderer/less/helpers.less
View file

@ -489,21 +489,35 @@
.mediainfo-popover { .mediainfo-popover {
user-select: none; user-select: none;
.popover-artwork { background-color: rgb(0 0 0 / 100%);
width: 200px; overflow: hidden;
height: 200px;
margin: 0 0 20px 0;
}
.song-name { .content {
font-weight: 600; .shadow-artwork {
} height: 100%;
.song-artist,.song-album { width: 100%;
opacity: 0.75; position: absolute;
cursor: pointer; top: 0;
left: 0;
z-index: -1;
filter:blur(32px) brightness(50%) saturate(280%);
}
.popover-artwork {
width: 200px;
height: 200px;
margin: 0 0 20px 0;
}
&:hover { .song-name {
text-decoration: underline; font-weight: 600;
}
.song-artist,.song-album {
opacity: 0.75;
cursor: pointer;
&:hover {
text-decoration: underline;
}
} }
} }
} }

31
src/renderer/views/app/chrome-bottom.ejs
View file

@ -8,19 +8,24 @@
<mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork> <mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
</div> </div>
<b-popover custom-class="mediainfo-popover" target="artworkLCD" triggers="hover" placement="right"> <b-popover custom-class="mediainfo-popover" target="artworkLCD" triggers="hover" placement="right">
<div class="popover-artwork"> <div class="content">
<mediaitem-artwork :size="210" :url="currentArtUrlRaw"></mediaitem-artwork> <div class="shadow-artwork">
</div> <mediaitem-artwork :url="currentArtUrl" :url="currentArtUrlRaw"></mediaitem-artwork>
<div class="song-name">{{ mk.nowPlayingItem["attributes"]["name"] }}</div> </div>
<div class="song-artist" @click="getNowPlayingItemDetailed(`artist`)">{{ mk.nowPlayingItem["attributes"]["artistName"] }}</div> <div class="popover-artwork">
<div class="song-album" @click="getNowPlayingItemDetailed(`album`)"> <mediaitem-artwork :size="210" :url="currentArtUrlRaw"></mediaitem-artwork>
{{(mk.nowPlayingItem["attributes"]["albumName"]) ? </div>
(mk.nowPlayingItem["attributes"]["albumName"]) : "" }} <div class="song-name">{{ mk.nowPlayingItem["attributes"]["name"] }}</div>
</div> <div class="song-artist" @click="getNowPlayingItemDetailed(`artist`)">{{ mk.nowPlayingItem["attributes"]["artistName"] }}</div>
<hr> <div class="song-album" @click="getNowPlayingItemDetailed(`album`)">
<div class="btn-group" style="width:100%;"> {{(mk.nowPlayingItem["attributes"]["albumName"]) ?
<button class="md-btn md-btn-small" style="width: 100%;" @click="drawer.open = false; miniPlayer(true)">{{ $root.getLz("term.miniplayer") }}</button> (mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
<button class="md-btn md-btn-small" style="width: 100%;" @click="drawer.open = false; fullscreen(true)">{{ $root.getLz("term.fullscreenView") }}</button> </div>
<hr>
<div class="btn-group" style="width:100%;">
<button class="md-btn md-btn-small" style="width: 100%;" @click="drawer.open = false; miniPlayer(true)">{{ $root.getLz("term.miniplayer") }}</button>
<button class="md-btn md-btn-small" style="width: 100%;" @click="drawer.open = false; fullscreen(true)">{{ $root.getLz("term.fullscreenView") }}</button>
</div>
</div> </div>
</b-popover> </b-popover>
<div class="playback-info"> <div class="playback-info">

31
src/renderer/views/app/chrome-top.ejs
View file

@ -80,19 +80,24 @@
<mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork> <mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
</div> </div>
<b-popover custom-class="mediainfo-popover" target="artworkLCD" triggers="hover" placement="bottom"> <b-popover custom-class="mediainfo-popover" target="artworkLCD" triggers="hover" placement="bottom">
<div class="popover-artwork"> <div class="content">
<mediaitem-artwork :size="210" :url="currentArtUrlRaw"></mediaitem-artwork> <div class="shadow-artwork">
</div> <mediaitem-artwork :url="currentArtUrl" :url="currentArtUrlRaw"></mediaitem-artwork>
<div class="song-name">{{ mk.nowPlayingItem["attributes"]["name"] }}</div> </div>
<div class="song-artist" @click="getNowPlayingItemDetailed(`artist`)">{{ mk.nowPlayingItem["attributes"]["artistName"] }}</div> <div class="popover-artwork">
<div class="song-album" @click="getNowPlayingItemDetailed(`album`)"> <mediaitem-artwork :size="210" :url="currentArtUrlRaw"></mediaitem-artwork>
{{(mk.nowPlayingItem["attributes"]["albumName"]) ? </div>
(mk.nowPlayingItem["attributes"]["albumName"]) : "" }} <div class="song-name">{{ mk.nowPlayingItem["attributes"]["name"] }}</div>
</div> <div class="song-artist" @click="getNowPlayingItemDetailed(`artist`)">{{ mk.nowPlayingItem["attributes"]["artistName"] }}</div>
<hr> <div class="song-album" @click="getNowPlayingItemDetailed(`album`)">
<div class="btn-group" style="width:100%;"> {{(mk.nowPlayingItem["attributes"]["albumName"]) ?
<button class="md-btn md-btn-small" style="width: 100%;" @click="drawer.open = false; miniPlayer(true)">{{ $root.getLz("term.miniplayer") }}</button> (mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
<button class="md-btn md-btn-small" style="width: 100%;" @click="drawer.open = false; fullscreen(true)">{{ $root.getLz("term.fullscreenView") }}</button> </div>
<hr>
<div class="btn-group" style="width:100%;">
<button class="md-btn md-btn-small" style="width: 100%;" @click="drawer.open = false; miniPlayer(true)">{{ $root.getLz("term.miniplayer") }}</button>
<button class="md-btn md-btn-small" style="width: 100%;" @click="drawer.open = false; fullscreen(true)">{{ $root.getLz("term.fullscreenView") }}</button>
</div>
</div> </div>
</b-popover> </b-popover>
<div class="playback-info"> <div class="playback-info">