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

app chrome changes, added app.macOSEmu()

Browse source
This commit is contained in:
booploops 2022-03-28 22:15:40 -07:00
parent 474084deb8
commit 0d5be827c0
8 changed files with 210 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/renderer/assets/CiderMenu.svg Normal file
View file

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 75 75" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(0.30081,0,0,0.30081,-51.9562,-60.4543)">
<g transform="matrix(1.26848,0,0,1.26848,167,195.512)">
<circle cx="101" cy="102.5" r="79.5" style="fill:rgb(15,15,15);"/>
</g>
<g transform="matrix(0.260038,0,0,0.260038,167,195.511)">
<g id="Release.afdesign">
<g>
<path d="M501,21C765.367,21 980,235.633 980,500C980,764.367 765.367,979 501,979C236.633,979 22,764.367 22,500C22,235.633 236.633,21 501,21ZM501,169C683.684,169 832,317.316 832,500C832,682.684 683.684,831 501,831C318.316,831 170,682.684 170,500C170,317.316 318.316,169 501,169Z" style="fill:rgb(255,38,84);"/>
<path d="M501,224C653.053,224 776.5,347.447 776.5,499.5C776.5,651.553 653.053,775 501,775C348.947,775 225.5,651.553 225.5,499.5C225.5,347.447 348.947,224 501,224ZM589.165,492.207C595.163,495.672 595.163,504.328 589.165,507.793L439.502,594.256C433.502,597.722 426,593.392 426,586.463L426,413.537C426,406.608 433.502,402.278 439.502,405.744L589.165,492.207Z" style="fill:rgb(255,38,84);"/>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

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

@ -1,20 +1,24 @@
#app.navbar {
--navigationBarHeight: 38px;
}
#app.twopanel {
--chromeHeight1: 42px;
--chromeHeight2: 76px;
--chromeHeight: calc(var(--chromeHeight1) + var(--chromeHeight2));
--chromeHeight : calc(var(--chromeHeight1) + var(--chromeHeight2));
.app-chrome {
.app-mainmenu {
margin-left: 10px;
width: 88px;
width : 30px;
height: 30px;
}
height: var(--chromeHeight1);
&.chrome-bottom {
height: var(--chromeHeight2);
height : var(--chromeHeight2);
box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
z-index: 1;
z-index : 1;
}
}
@ -29,39 +33,39 @@
.playback-button.play,
.playback-button.pause {
width: 42px;
height: 42px;
width : 42px;
height : 42px;
background-color: rgb(200 200 200 / 20%);
border-radius: 50%;
margin: 6px;
box-shadow: 0px 0px 0px 2px var(--keyColor);
border-radius : 50%;
margin : 6px;
box-shadow : 0px 0px 0px 2px var(--keyColor);
}
.app-chrome--center {
display: flex;
display : flex;
flex-direction: column;
.app-chrome-playback-controls {
display: flex;
z-index: 1;
display : flex;
z-index : 1;
// margin-bottom: 12px;
}
.app-chrome-playback-duration {
position: relative;
width: 80%;
position : relative;
width : 80%;
-webkit-app-region: no-drag;
height: 16px;
height : 16px;
.song-progress {
@bgColor: transparent;
height: 16px;
position: absolute;
bottom: 4px;
left: 0px;
right: 4px;
@bgColor : transparent;
height : 16px;
position : absolute;
bottom : 4px;
left : 0px;
right : 4px;
background: @bgColor;
z-index: 0;
z-index : 0;
.song-duration {
@ -70,41 +74,41 @@
.song-duration p {
font-weight: 400;
font-size: 10px;
height: 1.2em;
font-size : 10px;
height : 1.2em;
line-height: 1.3em;
overflow: hidden;
margin: 0 0 0 0.25em;
overflow : hidden;
margin : 0 0 0 0.25em;
}
&:hover {
> input[type=range] {
>input[type=range] {
&::-webkit-slider-thumb {
opacity: 1;
opacity : 1;
transform: scale(1);
z-index: 1;
z-index : 1;
}
}
}
input[type=range] {
appearance: none;
width: 100%;
height: 4px;
appearance : none;
width : 100%;
height : 4px;
background-color: rgb(200 200 200 / 10%);
border-radius: 2px;
border-radius : 2px;
&::-webkit-slider-thumb {
opacity: 0;
transform: scale(0.5);
opacity : 0;
transform : scale(0.5);
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
border-radius: 100%;
background: var(--keyColor);
cursor: default;
transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
appearance : none;
width : 12px;
height : 12px;
border-radius : 100%;
background : var(--keyColor);
cursor : default;
transition : opacity .10s var(--appleEase), transform .10s var(--appleEase);
}
}
}
@ -113,40 +117,40 @@
}
.app-chrome--left {
width: 30%;
width : 30%;
justify-content: flex-start;
align-items: flex-start;
align-items : flex-start;
.playback-controls {
.artwork {
width: var(--chromeHeight2);
height: var(--chromeHeight2);
margin: 0px 6px 0px 0px;
width : var(--chromeHeight2);
height : var(--chromeHeight2);
margin : 0px 6px 0px 0px;
box-shadow: unset;
border: 0px;
border : 0px;
.mediaitem-artwork,
img {
border-radius: 0px;
box-shadow: unset;
border: 0px;
box-shadow : unset;
border : 0px;
}
}
.playback-info {
align-items: flex-start;
margin: 6px;
margin : 6px;
.song-name {
text-align: left;
font-size: 15px;
font-weight: initial;
width: 100%;
text-align : left;
font-size : 15px;
font-weight : initial;
width : 100%;
-webkit-mask-image: linear-gradient(-90deg, transparent 0%, transparent 10%, black 20%);
}
.song-artist-album {
width: 100%;
width : 100%;
-webkit-mask-image: linear-gradient(-90deg, transparent 0%, transparent 10%, black 20%);
}
@ -156,29 +160,30 @@
.song-artist-album-content {
text-align: left;
font-size: 12px;
font-size : 12px;
}
}
width: 100%;
height: 100%;
width : 100%;
height : 100%;
max-width: 100%;
border: 0px;
border : 0px;
}
flex: 0 0 auto;
}
.app-chrome--right {
width: 30%;
flex: 0 0 auto;
width : 30%;
flex : 0 0 auto;
padding-right: 8px;
}
}
.collection-page {
.top-fab {
bottom:96px;
bottom: 96px;
}
}
}

14
src/renderer/less/elements.less
View file

@ -1563,6 +1563,20 @@ input[type=checkbox][switch]:checked:active::before {
background-image: url('./assets/backward.svg');
}
.playback-button {
&.navigation {
display: flex;
justify-content: center;
align-items: center;
color: white;
>svg {
height:16px;
width:16px;
pointer-events: none;
}
}
}
.playback-buttons {
display: flex;
align-items: center;

45
src/renderer/less/macosemu.less Normal file
View file

@ -0,0 +1,45 @@
#app.macosemu {
.app-chrome .app-chrome-item > .window-controls-macos {
@controlSize: 12px;
display: flex;
justify-content: center;
align-items: center;
width: 96px;
@closeClr: rgb(255, 92, 92);
@minmaxClr: rgb(77, 202, 77);
@minClr: rgb(255, 189, 76);
@borderDarken: 55%;
div {
margin: 4px;
background-color: red;
border-radius: 100%;
flex: 0 0 auto;
background-image: unset !important;
//border: 1px solid white;
&.close {
box-shadow: 0px 0px 0px 1px darken(@closeClr, @borderDarken);
background-color: @closeClr;
width: @controlSize;
height: @controlSize;
}
&.minimize {
box-shadow: 0px 0px 0px 1px darken(@minClr, @borderDarken);
background-color: @minClr;
width: @controlSize;
height: @controlSize;
}
&.minmax {
box-shadow: 0px 0px 0px 1px darken(@minmaxClr, 45%);
background-color: @minmaxClr;
width: @controlSize;
height: @controlSize;
}
}
}
}

19
src/renderer/main/vueapp.js
View file

@ -166,6 +166,9 @@ const app = new Vue({
"handle": "CiderUser",
"artwork": { "url": "./assets/logocut.png" }
}
},
forceDirectives: {
},
menuOpened: false,
maximized: false,
@ -573,6 +576,10 @@ const app = new Vue({
this.setTheme(this.cfg.visual.theme)
}
if(this.platform == "darwin") {
this.chrome.windowControlPosition = "left"
}
this.setLz(this.cfg.general.language)
this.setLzManual()
clearTimeout(this.hangtimer)
@ -933,13 +940,20 @@ const app = new Vue({
less.refresh()
}
},
macOSEmu () {
this.chrome.forceDirectives["macosemu"] = {
value: true
}
this.chrome.windowControlPosition = "left"
},
getThemeDirective(directive = "") {
let directives = {}
if (typeof this.chrome.appliedTheme.info.directives == "object") {
directives = this.chrome.appliedTheme.info.directives
}
directives = Object.assign(directives, this.chrome.forceDirectives)
if (directives[directive]) {
return this.chrome.appliedTheme.info.directives[directive].value
return directives[directive].value
} else if (this.cfg.visual.directives[directive]) {
return this.cfg.visual.directives.windowLayout
} else {
@ -966,6 +980,9 @@ const app = new Vue({
if (this.getThemeDirective('windowLayout') == 'twopanel') {
classes.twopanel = true
}
if(this.getThemeDirective("macosemu") == true){
classes.macosemu = true
}
return classes
},
invokeDrawer(panel) {

33
src/renderer/style.less
View file

@ -37,7 +37,7 @@
--keyColor-deepPressed: #ff8a9c;
--keyColor-deepPressed-rgb: 255, 138, 156;
--keyColor-disabled: rgba(250, 88, 106, 0.35);
--navigationBarHeight: 38px;
--navigationBarHeight: 0px;
--modalBackground: #262626;
--songProgressColor: var(--keyColor);
--songProgressBackground: #333;
@ -853,6 +853,14 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
display: flex;
flex-direction: row;
-webkit-app-region: drag;
.vdiv {
width: 1px;
background: white;
opacity: 0.25;
height: 50%;
margin: 6px;
}
}
.mv-chrome {
@ -996,13 +1004,13 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
}
.app-chrome .app-chrome-item > .app-mainmenu {
width: 110px;
width: 34px;
font-size: 13px;
background: url("./assets/AppChromeBtn.svg");
background-size: contain;
background: url("./assets/CiderMenu.svg");
background-size: auto;
background-repeat: no-repeat;
background-position: center;
height: 70%;
height: 34px;
margin-right: 16px;
margin-left: 16px;
margin-top: 1.5px;
@ -1016,10 +1024,6 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
&:active, &.active {
background-color: var(--selected-click);
}
&.active {
background-image: url("./assets/AppChromeBtn-Open.svg");
}
}
.app-chrome .app-chrome-item > .window-controls {
@ -1027,6 +1031,10 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
font-size: 13px;
height: 100%;
display: flex;
&-macos {
width: 96px;
}
}
.app-chrome .app-chrome-item > .window-controls > div {
@ -1077,9 +1085,9 @@ body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.mi
display: none;
}
body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls {
display: none;
}
//body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls {
// display: none;
//}
body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.minmax {
display: none;
@ -3217,3 +3225,4 @@ body[platform='darwin'] {
@import url("less/linux.less");
@import url("less/compact.less");
@import url("less/directives.less");
@import url("less/macosemu.less");

2
src/renderer/views/app/app-content.ejs
View file

@ -1,5 +1,5 @@
<div id="app-content" @scroll.passive="setContentScrollPos" :scrollpos="chrome.contentScrollPosY" scrollaxis="y" :style="{'overflow': (chrome.contentAreaScrolling ? '' : 'hidden')}">
<div id="navigation-bar">
<div id="navigation-bar" v-if="getThemeDirective('appNavigation') == 'seperate'">
<button class="nav-item" @click="navigateBack()">
<%- include('../svg/chevron-left.svg') %>
</button>

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

@ -1,7 +1,7 @@
<div class="app-chrome" :style="{'display': chrome.topChromeVisible ? '' : 'none'}">
<div class="app-chrome--left">
<div class="app-chrome-item full-height" v-if="chrome.windowControlPosition == 'left'">
<div class="window-controls">
<div class="window-controls-macos">
<div class="close" @click="ipcRenderer.send('close')"></div>
<div class="minimize" @click="ipcRenderer.send('minimize')"></div>
<div class="minmax restore" v-if="chrome.maximized"
@ -16,6 +16,20 @@
@click="mainMenuVisibility(true)"
:class="{active: chrome.menuOpened}"></button>
</div>
<template v-if="getThemeDirective('appNavigation') != 'seperate'">
<div class="vdiv display--large" v-if="getThemeDirective('windowLayout') == 'twopanel'"></div>
<div class="app-chrome-item">
<button class="playback-button navigation" @click="navigateBack()">
<%- include('../svg/chevron-left.svg') %>
</button>
</div>
<div class="app-chrome-item">
<button class="playback-button navigation" @click="navigateForward()">
<%- include('../svg/chevron-right.svg') %>
</button>
</div>
<div class="vdiv display--large" v-if="getThemeDirective('windowLayout') != 'twopanel'"></div>
</template>
<template v-if="getThemeDirective('windowLayout') != 'twopanel'">
<div class="app-chrome-item display--large">
<button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
@ -142,7 +156,8 @@
</template>
</div>
</template>
<div class="app-chrome-item full-height" id="window-controls-container" v-if="chrome.windowControlPosition == 'right'">
<div class="app-chrome-item full-height" id="window-controls-container"
v-if="chrome.windowControlPosition == 'right'">
<div class="window-controls">
<div class="minimize" @click="ipcRenderer.send('minimize')"></div>
<div class="minmax restore" v-if="chrome.maximized"
@ -152,5 +167,11 @@
<div class="close" @click="ipcRenderer.send('close')"></div>
</div>
</div>
<div class="app-chrome-item full-height" v-else-if="platform != 'darwin'">
<button class="app-mainmenu"
@blur="mainMenuVisibility(false)"
@click="mainMenuVisibility(true)"
:class="{active: chrome.menuOpened}"></button>
</div>
</div>
</div>