added popover to lcd artwork, replaced mini with cast button
This commit is contained in:
booploops
parent
e65ab71388
commit
b5ea40ac71
5 changed files with 138 additions and 121 deletions
186
src/renderer/less/bootstrap.less
vendored
186
src/renderer/less/bootstrap.less
vendored
|
|
@ -7670,160 +7670,132 @@ fieldset:disabled .btn {
|
||||||
|
|
||||||
.popover {
|
.popover {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top : 0;
|
top: 0;
|
||||||
left : 0
|
left: 0 /* rtl:ignore */;
|
||||||
/* rtl:ignore */
|
z-index: 1070;
|
||||||
;
|
display: block;
|
||||||
z-index : 1070;
|
max-width: 276px;
|
||||||
display : block;
|
font-family: var(--bs-font-sans-serif);
|
||||||
max-width : 276px;
|
font-style: normal;
|
||||||
font-family : var(--bs-font-sans-serif);
|
font-weight: 400;
|
||||||
font-style : normal;
|
line-height: 1.5;
|
||||||
font-weight : 400;
|
text-align: left;
|
||||||
line-height : 1.5;
|
text-align: start;
|
||||||
text-align : left;
|
text-decoration: none;
|
||||||
text-align : start;
|
text-shadow: none;
|
||||||
text-decoration : none;
|
text-transform: none;
|
||||||
text-shadow : none;
|
letter-spacing: normal;
|
||||||
text-transform : none;
|
word-break: normal;
|
||||||
letter-spacing : normal;
|
word-spacing: normal;
|
||||||
word-break : normal;
|
white-space: normal;
|
||||||
word-spacing : normal;
|
line-break: auto;
|
||||||
white-space : normal;
|
font-size: 0.875rem;
|
||||||
line-break : auto;
|
word-wrap: break-word;
|
||||||
font-size : 0.875rem;
|
background-color: var(--modalBackground);
|
||||||
word-wrap : break-word;
|
background-clip: padding-box;
|
||||||
background-color: #fff;
|
box-shadow: var(--mediaItemShadow), var(--mediaItemShadow-ShadowSubtle);
|
||||||
background-clip : padding-box;
|
border-radius: var(--mediaItemRadius);
|
||||||
border : 1px solid rgba(0, 0, 0, 0.2);
|
|
||||||
border-radius : 0.3rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.popover .popover-arrow {
|
.popover .popover-arrow {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display : block;
|
display: block;
|
||||||
width : 1rem;
|
width: 1rem;
|
||||||
height : 0.5rem;
|
height: 0.5rem;
|
||||||
}
|
}
|
||||||
|
.popover .popover-arrow::before, .popover .popover-arrow::after {
|
||||||
.popover .popover-arrow::before,
|
position: absolute;
|
||||||
.popover .popover-arrow::after {
|
display: block;
|
||||||
position : absolute;
|
content: "";
|
||||||
display : block;
|
|
||||||
content : "";
|
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-popover-top>.popover-arrow,
|
.bs-popover-top > .popover-arrow, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow {
|
||||||
.bs-popover-auto[data-popper-placement^=top]>.popover-arrow {
|
|
||||||
bottom: calc(-0.5rem - 1px);
|
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,
|
bottom: 0;
|
||||||
.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before {
|
border-width: 0.5rem 0.5rem 0;
|
||||||
bottom : 0;
|
|
||||||
border-width : 0.5rem 0.5rem 0;
|
|
||||||
border-top-color: rgba(0, 0, 0, 0.25);
|
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,
|
bottom: 1px;
|
||||||
.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after {
|
border-width: 0.5rem 0.5rem 0;
|
||||||
bottom : 1px;
|
|
||||||
border-width : 0.5rem 0.5rem 0;
|
|
||||||
border-top-color: #fff;
|
border-top-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-popover-end>.popover-arrow,
|
.bs-popover-end > .popover-arrow, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow {
|
||||||
.bs-popover-auto[data-popper-placement^=right]>.popover-arrow {
|
left: calc(-0.5rem - 1px);
|
||||||
left : calc(-0.5rem - 1px);
|
width: 0.5rem;
|
||||||
width : 0.5rem;
|
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
}
|
}
|
||||||
|
.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before {
|
||||||
.bs-popover-end>.popover-arrow::before,
|
left: 0;
|
||||||
.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before {
|
border-width: 0.5rem 0.5rem 0.5rem 0;
|
||||||
left : 0;
|
|
||||||
border-width : 0.5rem 0.5rem 0.5rem 0;
|
|
||||||
border-right-color: rgba(0, 0, 0, 0.25);
|
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,
|
left: 1px;
|
||||||
.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after {
|
border-width: 0.5rem 0.5rem 0.5rem 0;
|
||||||
left : 1px;
|
|
||||||
border-width : 0.5rem 0.5rem 0.5rem 0;
|
|
||||||
border-right-color: #fff;
|
border-right-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-popover-bottom>.popover-arrow,
|
.bs-popover-bottom > .popover-arrow, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow {
|
||||||
.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow {
|
|
||||||
top: calc(-0.5rem - 1px);
|
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,
|
top: 0;
|
||||||
.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before {
|
border-width: 0 0.5rem 0.5rem 0.5rem;
|
||||||
top : 0;
|
|
||||||
border-width : 0 0.5rem 0.5rem 0.5rem;
|
|
||||||
border-bottom-color: rgba(0, 0, 0, 0.25);
|
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,
|
top: 1px;
|
||||||
.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after {
|
border-width: 0 0.5rem 0.5rem 0.5rem;
|
||||||
top : 1px;
|
|
||||||
border-width : 0 0.5rem 0.5rem 0.5rem;
|
|
||||||
border-bottom-color: #fff;
|
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,
|
position: absolute;
|
||||||
.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before {
|
top: 0;
|
||||||
position : absolute;
|
left: 50%;
|
||||||
top : 0;
|
display: block;
|
||||||
left : 50%;
|
width: 1rem;
|
||||||
display : block;
|
margin-left: -0.5rem;
|
||||||
width : 1rem;
|
content: "";
|
||||||
margin-left : -0.5rem;
|
|
||||||
content : "";
|
|
||||||
border-bottom: 1px solid #f0f0f0;
|
border-bottom: 1px solid #f0f0f0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-popover-start>.popover-arrow,
|
.bs-popover-start > .popover-arrow, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow {
|
||||||
.bs-popover-auto[data-popper-placement^=left]>.popover-arrow {
|
right: calc(-0.5rem - 1px);
|
||||||
right : calc(-0.5rem - 1px);
|
width: 0.5rem;
|
||||||
width : 0.5rem;
|
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
}
|
}
|
||||||
|
.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before {
|
||||||
.bs-popover-start>.popover-arrow::before,
|
right: 0;
|
||||||
.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before {
|
border-width: 0.5rem 0 0.5rem 0.5rem;
|
||||||
right : 0;
|
|
||||||
border-width : 0.5rem 0 0.5rem 0.5rem;
|
|
||||||
border-left-color: rgba(0, 0, 0, 0.25);
|
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,
|
right: 1px;
|
||||||
.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after {
|
border-width: 0.5rem 0 0.5rem 0.5rem;
|
||||||
right : 1px;
|
|
||||||
border-width : 0.5rem 0 0.5rem 0.5rem;
|
|
||||||
border-left-color: #fff;
|
border-left-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popover-header {
|
.popover-header {
|
||||||
padding : 0.5rem 1rem;
|
padding: 0.5rem 1rem;
|
||||||
margin-bottom : 0;
|
margin-bottom: 0;
|
||||||
font-size : 1rem;
|
font-size: 1rem;
|
||||||
background-color : #f0f0f0;
|
background-color: #f0f0f0;
|
||||||
border-bottom : 1px solid rgba(0, 0, 0, 0.2);
|
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||||
border-top-left-radius : calc(0.3rem - 1px);
|
border-top-left-radius: calc(0.3rem - 1px);
|
||||||
border-top-right-radius: calc(0.3rem - 1px);
|
border-top-right-radius: calc(0.3rem - 1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.popover-header:empty {
|
.popover-header:empty {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popover-body {
|
.popover-body {
|
||||||
padding: 1rem 1rem;
|
padding: 1rem 1rem;
|
||||||
color : #212529;
|
color: var(--textColor);
|
||||||
}
|
}
|
||||||
|
|
||||||
// carousel
|
// carousel
|
||||||
|
|
|
||||||
|
|
@ -184,7 +184,6 @@
|
||||||
width: var(--size);
|
width: var(--size);
|
||||||
height: var(--size);
|
height: var(--size);
|
||||||
margin: 0 calc(var(--offset) / var(--marginOffset)) 0 calc(var(--offset) / var(--marginOffset));
|
margin: 0 calc(var(--offset) / var(--marginOffset)) 0 calc(var(--offset) / var(--marginOffset));
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.mediaitem-artwork,
|
.mediaitem-artwork,
|
||||||
img {
|
img {
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -4,9 +4,25 @@
|
||||||
<template v-if="mkReady()">
|
<template v-if="mkReady()">
|
||||||
<div class="app-playback-controls" @mouseover="chrome.progresshover = true"
|
<div class="app-playback-controls" @mouseover="chrome.progresshover = true"
|
||||||
@mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu">
|
@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>
|
<mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
|
||||||
</div>
|
</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="playback-info">
|
||||||
<div class="song-name"
|
<div class="song-name"
|
||||||
:class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') ? 'marquee' : '']">
|
:class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') ? 'marquee' : '']">
|
||||||
|
|
|
||||||
|
|
@ -76,9 +76,25 @@
|
||||||
<template v-if="mkReady()">
|
<template v-if="mkReady()">
|
||||||
<div class="app-playback-controls" @mouseover="chrome.progresshover = true"
|
<div class="app-playback-controls" @mouseover="chrome.progresshover = true"
|
||||||
@mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu">
|
@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>
|
<mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
|
||||||
</div>
|
</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="playback-info">
|
||||||
<div class="chrome-icon-container">
|
<div class="chrome-icon-container">
|
||||||
<div class="audio-type private-icon" v-if="cfg.general.privateEnabled === true"></div>
|
<div class="audio-type private-icon" v-if="cfg.general.privateEnabled === true"></div>
|
||||||
|
|
@ -170,10 +186,11 @@
|
||||||
v-b-tooltip.hover :title="formatVolumeTooltip()">
|
v-b-tooltip.hover :title="formatVolumeTooltip()">
|
||||||
</div>
|
</div>
|
||||||
<div class="app-chrome-item generic">
|
<div class="app-chrome-item generic">
|
||||||
<button class="playback-button--small miniplayer"
|
<button class="playback-button--small cast"
|
||||||
:title="$root.getLz('term.miniplayer')"
|
:title="$root.getLz('term.cast')"
|
||||||
|
@click="cfg.advanced.AudioContext ? modals.castMenu = true : $root.notyf.error($root.getLz('settings.warn.enableAdvancedFunctionality'))"
|
||||||
v-b-tooltip.hover
|
v-b-tooltip.hover
|
||||||
@click="drawer.open = false; miniPlayer(true)"></button>
|
></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="app-chrome-item generic">
|
<div class="app-chrome-item generic">
|
||||||
<button class="playback-button--small queue"
|
<button class="playback-button--small queue"
|
||||||
|
|
@ -196,14 +213,6 @@
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</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"
|
<div class="app-chrome-item full-height" id="window-controls-container"
|
||||||
v-if="chrome.windowControlPosition == 'right' && !chrome.nativeControls">
|
v-if="chrome.windowControlPosition == 'right' && !chrome.nativeControls">
|
||||||
<div class="window-controls">
|
<div class="window-controls">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue