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

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

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