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

added popover to lcd artwork, replaced mini with cast button

Browse source
This commit is contained in:
booploops 2022-05-24 00:47:50 -07:00
parent e65ab71388
commit b5ea40ac71
5 changed files with 138 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -7671,9 +7671,7 @@ fieldset:disabled .btn {
.popover {
position: absolute;
top: 0;
left : 0
/* rtl:ignore */
;
left: 0 /* rtl:ignore */;
z-index: 1070;
display: block;
max-width: 276px;
@ -7693,21 +7691,18 @@ fieldset:disabled .btn {
line-break: auto;
font-size: 0.875rem;
word-wrap: break-word;
background-color: #fff;
background-color: var(--modalBackground);
background-clip: padding-box;
border : 1px solid rgba(0, 0, 0, 0.2);
border-radius : 0.3rem;
box-shadow: var(--mediaItemShadow), var(--mediaItemShadow-ShadowSubtle);
border-radius: var(--mediaItemRadius);
}
.popover .popover-arrow {
position: absolute;
display: block;
width: 1rem;
height: 0.5rem;
}
.popover .popover-arrow::before,
.popover .popover-arrow::after {
.popover .popover-arrow::before, .popover .popover-arrow::after {
position: absolute;
display: block;
content: "";
@ -7715,67 +7710,50 @@ fieldset:disabled .btn {
border-style: solid;
}
.bs-popover-top>.popover-arrow,
.bs-popover-auto[data-popper-placement^=top]>.popover-arrow {
.bs-popover-top > .popover-arrow, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow {
bottom: calc(-0.5rem - 1px);
}
.bs-popover-top>.popover-arrow::before,
.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before {
.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before {
bottom: 0;
border-width: 0.5rem 0.5rem 0;
border-top-color: rgba(0, 0, 0, 0.25);
}
.bs-popover-top>.popover-arrow::after,
.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after {
.bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after {
bottom: 1px;
border-width: 0.5rem 0.5rem 0;
border-top-color: #fff;
}
.bs-popover-end>.popover-arrow,
.bs-popover-auto[data-popper-placement^=right]>.popover-arrow {
.bs-popover-end > .popover-arrow, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow {
left: calc(-0.5rem - 1px);
width: 0.5rem;
height: 1rem;
}
.bs-popover-end>.popover-arrow::before,
.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before {
.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before {
left: 0;
border-width: 0.5rem 0.5rem 0.5rem 0;
border-right-color: rgba(0, 0, 0, 0.25);
}
.bs-popover-end>.popover-arrow::after,
.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after {
.bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after {
left: 1px;
border-width: 0.5rem 0.5rem 0.5rem 0;
border-right-color: #fff;
}
.bs-popover-bottom>.popover-arrow,
.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow {
.bs-popover-bottom > .popover-arrow, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow {
top: calc(-0.5rem - 1px);
}
.bs-popover-bottom>.popover-arrow::before,
.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before {
.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before {
top: 0;
border-width: 0 0.5rem 0.5rem 0.5rem;
border-bottom-color: rgba(0, 0, 0, 0.25);
}
.bs-popover-bottom>.popover-arrow::after,
.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after {
.bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {
top: 1px;
border-width: 0 0.5rem 0.5rem 0.5rem;
border-bottom-color: #fff;
}
.bs-popover-bottom .popover-header::before,
.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before {
.bs-popover-bottom .popover-header::before, .bs-popover-auto[data-popper-placement^=bottom] .popover-header::before {
position: absolute;
top: 0;
left: 50%;
@ -7786,22 +7764,17 @@ fieldset:disabled .btn {
border-bottom: 1px solid #f0f0f0;
}
.bs-popover-start>.popover-arrow,
.bs-popover-auto[data-popper-placement^=left]>.popover-arrow {
.bs-popover-start > .popover-arrow, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow {
right: calc(-0.5rem - 1px);
width: 0.5rem;
height: 1rem;
}
.bs-popover-start>.popover-arrow::before,
.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before {
.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before {
right: 0;
border-width: 0.5rem 0 0.5rem 0.5rem;
border-left-color: rgba(0, 0, 0, 0.25);
}
.bs-popover-start>.popover-arrow::after,
.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after {
.bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after {
right: 1px;
border-width: 0.5rem 0 0.5rem 0.5rem;
border-left-color: #fff;
@ -7816,14 +7789,13 @@ fieldset:disabled .btn {
border-top-left-radius: calc(0.3rem - 1px);
border-top-right-radius: calc(0.3rem - 1px);
}
.popover-header:empty {
display: none;
}
.popover-body {
padding: 1rem 1rem;
color : #212529;
color: var(--textColor);
}
// carousel

1
src/renderer/less/directives.less
View file

@ -184,7 +184,6 @@
width: var(--size);
height: var(--size);
margin: 0 calc(var(--offset) / var(--marginOffset)) 0 calc(var(--offset) / var(--marginOffset));
cursor: pointer;
.mediaitem-artwork,
img {

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

@ -486,3 +486,24 @@
}
}
}
.mediainfo-popover {
user-select: none;
.popover-artwork {
width: 200px;
height: 200px;
margin: 0 0 20px 0;
}
.song-name {
font-weight: 600;
}
.song-artist,.song-album {
opacity: 0.75;
cursor: pointer;
&:hover {
text-decoration: underline;
}
}
}

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

@ -4,9 +4,25 @@
<template v-if="mkReady()">
<div class="app-playback-controls" @mouseover="chrome.progresshover = true"
@mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu">
<div class="artwork" @click="drawer.open = false; fullscreen(true)">
<div class="artwork" id="artworkLCD">
<mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
</div>
<b-popover custom-class="mediainfo-popover" target="artworkLCD" triggers="hover" placement="right">
<div class="popover-artwork">
<mediaitem-artwork :size="210" :url="currentArtUrlRaw"></mediaitem-artwork>
</div>
<div class="song-name">{{ mk.nowPlayingItem["attributes"]["name"] }}</div>
<div class="song-artist" @click="getNowPlayingItemDetailed(`artist`)">{{ mk.nowPlayingItem["attributes"]["artistName"] }}</div>
<div class="song-album" @click="getNowPlayingItemDetailed(`album`)">
{{(mk.nowPlayingItem["attributes"]["albumName"]) ?
(mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
</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>
</b-popover>
<div class="playback-info">
<div class="song-name"
:class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') ? 'marquee' : '']">

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

@ -76,9 +76,25 @@
<template v-if="mkReady()">
<div class="app-playback-controls" @mouseover="chrome.progresshover = true"
@mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu">
<div class="artwork" @click="drawer.open = false; fullscreen(true)">
<div class="artwork" id="artworkLCD">
<mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
</div>
<b-popover custom-class="mediainfo-popover" target="artworkLCD" triggers="hover" placement="bottom">
<div class="popover-artwork">
<mediaitem-artwork :size="210" :url="currentArtUrlRaw"></mediaitem-artwork>
</div>
<div class="song-name">{{ mk.nowPlayingItem["attributes"]["name"] }}</div>
<div class="song-artist" @click="getNowPlayingItemDetailed(`artist`)">{{ mk.nowPlayingItem["attributes"]["artistName"] }}</div>
<div class="song-album" @click="getNowPlayingItemDetailed(`album`)">
{{(mk.nowPlayingItem["attributes"]["albumName"]) ?
(mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
</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>
</b-popover>
<div class="playback-info">
<div class="chrome-icon-container">
<div class="audio-type private-icon" v-if="cfg.general.privateEnabled === true"></div>
@ -170,10 +186,11 @@
v-b-tooltip.hover :title="formatVolumeTooltip()">
</div>
<div class="app-chrome-item generic">
<button class="playback-button--small miniplayer"
:title="$root.getLz('term.miniplayer')"
<button class="playback-button--small cast"
:title="$root.getLz('term.cast')"
@click="cfg.advanced.AudioContext ? modals.castMenu = true : $root.notyf.error($root.getLz('settings.warn.enableAdvancedFunctionality'))"
v-b-tooltip.hover
@click="drawer.open = false; miniPlayer(true)"></button>
></button>
</div>
<div class="app-chrome-item generic">
<button class="playback-button--small queue"
@ -196,14 +213,6 @@
</template>
</div>
</template>
<template v-else>
<div class="app-chrome-item generic">
<button class="playback-button--small miniplayer"
:title="$root.getLz('term.miniplayer')"
v-b-tooltip.hover
@click="drawer.open = false; miniPlayer(true)"></button>
</div>
</template>
<div class="app-chrome-item full-height" id="window-controls-container"
v-if="chrome.windowControlPosition == 'right' && !chrome.nativeControls">
<div class="window-controls">