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

hide album/artist name when hovered over nowPlayingItem

Browse source
This commit is contained in:
Jason Chen 2022-01-18 22:53:41 -08:00
parent 0b4d771d23
commit e0f1fcc795
2 changed files with 49 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/renderer/style.less
View file

@ -827,12 +827,43 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
margin-right: 6px; margin-right: 6px;
} }
.app-chrome-item.volume-icon { .volume-button {
opacity: 0.7;
background-image: url("./assets/feather/volume-2.svg"); background-image: url("./assets/feather/volume-2.svg");
height: 15px; height: 15px;
width: 30px; width: 30px;
padding: 0px;
background: transparent;
border: 0px;
border-radius: 0px;
box-shadow: unset;
background-size: 12px;
background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
opacity: 0.70;
border-radius: 6px;
}
.volume-button:active, .volume-button--small:active {
transform: scale(0.9);
}
.volume-button.active, .volume-button--small.active {
background-image: url("./assets/feather/volume.svg");
}
.volume-button--small {
border-radius: 6px;
color: inherit;
background-size: 16px;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
height: 15px;
width: 30px;
border: 0px;
box-shadow: unset;
opacity: 0.70;
background-image: url("./assets/feather/volume-2.svg");
} }
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb { .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb {
@ -3980,6 +4011,15 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
height: 5vh; height: 5vh;
justify-content: space-evenly; justify-content: space-evenly;
.volume {
background-image: url("./assets/feathers/volume.svg");
padding: 0.5vh;
width: 2vh;
height: 2vh;
background-origin: content-box;
background-repeat: no-repeat;
}
.queue { .queue {
background-image: url("./assets/list.svg"); background-image: url("./assets/list.svg");
padding: 0.5vh; padding: 0.5vh;
@ -4043,6 +4083,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.song-artist { .song-artist {
font-size: 0.875em; font-size: 0.875em;
font-weight: 400;
} }
.song-name { .song-name {

8
src/renderer/views/main.ejs
View file

@ -87,11 +87,13 @@
</div> </div>
<div class="song-artist " <div class="song-artist "
style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;"> style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;">
<div class="item-navigate song-artist" style="display: inline-block;" <div class="item-navigate song-artist" style="display: inline-block"
:style="[chrome.progresshover ? {'opacity': '0'} : {'opacity' : '1'} ]"
@click="getNowPlayingItemDetailed(`artist`)"> @click="getNowPlayingItemDetailed(`artist`)">
{{ mk.nowPlayingItem["attributes"]["artistName"] }} {{ mk.nowPlayingItem["attributes"]["artistName"] }}
</div> </div>
<div class="song-artist item-navigate" style="display: inline-block;" <div class="song-artist item-navigate" style="display: inline-block"
:style="[chrome.progresshover ? {'opacity': '0'} : {'opacity' : '1'}]"
@click="getNowPlayingItemDetailed('album')"> @click="getNowPlayingItemDetailed('album')">
<div class="separator" style="display: inline-block;">{{"—"}}</div> <div class="separator" style="display: inline-block;">{{"—"}}</div>
{{(mk.nowPlayingItem["attributes"]["albumName"]) ? {{(mk.nowPlayingItem["attributes"]["albumName"]) ?
@ -127,7 +129,7 @@
</div> </div>
<div class="app-chrome--right"> <div class="app-chrome--right">
<div class="app-chrome-item volume display--large"> <div class="app-chrome-item volume display--large">
<div class="app-chrome-item volume-icon"></div> <button class="volume-button--small volume"></button>
<input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1" <input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1"
v-model="mk.volume" v-model="mk.volume"
v-if="typeof mk.volume != 'undefined'"> v-if="typeof mk.volume != 'undefined'">