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

fix for new context menus

Browse source
This commit is contained in:
booploops 2022-01-13 02:49:43 -08:00
parent 677bbea95c
commit 559354906e
3 changed files with 572 additions and 532 deletions
Download patch file Download diff file Expand all files Collapse all files

49
src/renderer/style.less
View file

@ -239,6 +239,7 @@ input[type="text"], input[type="number"] {
left: 0;
//mix-blend-mode: luminosity;
}
.bg-artwork.b {
bottom: 0;
right: 0;
@ -443,6 +444,7 @@ padding: 11px;
justify-content: center;
align-content: center;
}
.volume {
display: flex;
}
@ -524,9 +526,11 @@ padding: 20px 0px;
&.libraryNotification {
flex-direction: row;
padding: 0px;
.message {
flex-grow: 1;
}
.spinner {
width: 46px;
height: 30px;
@ -1857,6 +1861,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
image-rendering: -webkit-optimize-contrast;
}
}
.sponsorBtn {
display: inline-flex;
justify-content: center;
@ -1942,6 +1947,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.folder-button-active {
background: rgb(255 255 255 / 12%);
}
.folder-body {
background: #ffffff0a;
border-radius: 10px;
@ -2316,6 +2322,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
// Library - Songs page
.library-page {
padding: 0px;
.library-header {
position: sticky;
top: 0;
@ -2793,10 +2800,29 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
}
.menu-panel {
height: 100%;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: #000000a3;
display: flex;
justify-content: center;
align-items: center;
.menu-panel-body {
display: flex;
flex-flow: column;
background: #585858ba;
position: relative;
min-height: 300px;
min-width: 300px;
box-shadow: var(--ciderShadow-Generic);
border-radius: var(--mediaItemRadius);
backdrop-filter: blur(16px) saturate(180%);
overflow: hidden;
font-size: 14px;
.menu-option {
text-align: left;
@ -2817,9 +2843,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
background: var(--selected-click);
}
}
}
.menu-header-text {
margin: 18px 6px;
.close-btn {
width: 50px;
height: 42px;
@ -2948,6 +2977,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
&.hmedia-scroller-card {
height: 370px;
.mediaitem-card {
margin: 12px;
}
@ -3056,6 +3086,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
flex: 0 0 auto;
width: 40px;
text-align: center;
button {
appearance: none;
border: 0px;
@ -3068,6 +3099,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
&:hover {
background: rgb(200 200 200 / 10%);
box-shadow: var(--mediaItemShadow);
.overlay-play {
opacity: 1;
}
@ -3089,6 +3121,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
&.compact {
height: 40px;
font-size: 13px;
.artwork {
display: none;
}
@ -3445,6 +3478,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
background: rgba(50, 50, 50, 0.7);
cursor: pointer;
transition: opacity 0.1s var(--appleEase);
:hover {
border-radius: 50%;
background: rgba(250, 0, 0, 0.7);
@ -3549,6 +3583,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
overflow: hidden;
border-radius: 0px;
margin: 0;
.mediaitem-artwork {
border-radius: 0px;
@ -3775,6 +3810,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
display: flex !important;
}
}
.display--large {
display: flex;
@ -3842,7 +3878,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
}
.lyrics-col {
height: 62vh;
@ -3963,9 +3998,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
}
}
}
.song-artist {
font-size: 0.875em;
}
.song-name {
width: unset !important;
margin-top: 0.15vh;
@ -3988,6 +4025,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
input[type="range"] {
width: 100%;
}
> div {
width: 100%;
text-align: center;
@ -4075,6 +4113,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
width: 18px;
background: var(--color);
}
.sidebar-icon {
width: 18px;
height: 18px;
@ -4085,6 +4124,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
height: 100%;
--color: #aaa;
}
> svg {
width: 100%;
height: 100%;
@ -4115,6 +4155,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.bgArtworkMaterial {
display: block;
&::before {
top: -50%;
left: -20%;
@ -4137,8 +4178,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
transform-origin: center;
animation: fsLyricIn var(--appleEase) .2s;
opacity: 0.9;
text-shadow:
-1px -1px 0 #000,
text-shadow: -1px -1px 0 #000,
0 -1px 0 #000,
1px -1px 0 #000,
1px 0 0 #000,
@ -4474,6 +4514,7 @@ body.no-gpu {
.bg-artwork-container {
display: none;
}
#navigation-bar {
backdrop-filter: unset;
mix-blend-mode: unset;

9
src/renderer/views/components/menu-panel.ejs
View file

@ -1,12 +1,13 @@
<script type="text/x-template" id="cider-menu-panel">
<div class="menu-panel">
<div class="menu-header-text">
<div class="menu-panel" @click.self="menuPanel.visible = false" >
<div class="menu-panel-body">
<div class="menu-header-text" v-if="content.name != ''">
<div class="row">
<div class="col">
<h3 class="queue-header-text">{{ content.name }}</h3>
</div>
</div>
<button @click="menuPanel.visible = false" class="close-btn"></button>
</div>
<div class="menu-body">
<template v-for="item in content.items">
@ -19,6 +20,7 @@
</template>
</div>
</div>
</div>
</script>
@ -34,7 +36,6 @@
}
},
mounted() {
},
methods: {
canDisplay(item) {

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

@ -326,7 +326,7 @@
</div>
</div>
</div>
<div id="app-content" @click="menuPanel.visible = false">
<div id="app-content">
<div id="navigation-bar">
<button class="nav-item" @click="navigateBack()"><%- include('svg/chevron-left.svg') %></button>
<button class="nav-item"
@ -538,11 +538,9 @@
<cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue>
</div>
</transition>
<transition name="drawertransition">
<div class="app-drawer" v-if="menuPanel.visible">
<cider-menu-panel>
<transition name="modal">
<cider-menu-panel v-if="menuPanel.visible">
</cider-menu-panel>
</div>
</transition>
</div>