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

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

@ -1,20 +1,24 @@
#app.navbar {
--navigationBarHeight: 38px;
}
#app.twopanel { #app.twopanel {
--chromeHeight1: 42px; --chromeHeight1: 42px;
--chromeHeight2: 76px; --chromeHeight2: 76px;
--chromeHeight: calc(var(--chromeHeight1) + var(--chromeHeight2)); --chromeHeight : calc(var(--chromeHeight1) + var(--chromeHeight2));
.app-chrome { .app-chrome {
.app-mainmenu { .app-mainmenu {
margin-left: 10px; width : 30px;
width: 88px; height: 30px;
} }
height: var(--chromeHeight1); height: var(--chromeHeight1);
&.chrome-bottom { &.chrome-bottom {
height: var(--chromeHeight2); height : var(--chromeHeight2);
box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25); 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.play,
.playback-button.pause { .playback-button.pause {
width: 42px; width : 42px;
height: 42px; height : 42px;
background-color: rgb(200 200 200 / 20%); background-color: rgb(200 200 200 / 20%);
border-radius: 50%; border-radius : 50%;
margin: 6px; margin : 6px;
box-shadow: 0px 0px 0px 2px var(--keyColor); box-shadow : 0px 0px 0px 2px var(--keyColor);
} }
.app-chrome--center { .app-chrome--center {
display: flex; display : flex;
flex-direction: column; flex-direction: column;
.app-chrome-playback-controls { .app-chrome-playback-controls {
display: flex; display : flex;
z-index: 1; z-index : 1;
// margin-bottom: 12px; // margin-bottom: 12px;
} }
.app-chrome-playback-duration { .app-chrome-playback-duration {
position: relative; position : relative;
width: 80%; width : 80%;
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
height: 16px; height : 16px;
.song-progress { .song-progress {
@bgColor: transparent; @bgColor : transparent;
height: 16px; height : 16px;
position: absolute; position : absolute;
bottom: 4px; bottom : 4px;
left: 0px; left : 0px;
right: 4px; right : 4px;
background: @bgColor; background: @bgColor;
z-index: 0; z-index : 0;
.song-duration { .song-duration {
@ -70,41 +74,41 @@
.song-duration p { .song-duration p {
font-weight: 400; font-weight: 400;
font-size: 10px; font-size : 10px;
height: 1.2em; height : 1.2em;
line-height: 1.3em; line-height: 1.3em;
overflow: hidden; overflow : hidden;
margin: 0 0 0 0.25em; margin : 0 0 0 0.25em;
} }
&:hover { &:hover {
> input[type=range] { >input[type=range] {
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
opacity: 1; opacity : 1;
transform: scale(1); transform: scale(1);
z-index: 1; z-index : 1;
} }
} }
} }
input[type=range] { input[type=range] {
appearance: none; appearance : none;
width: 100%; width : 100%;
height: 4px; height : 4px;
background-color: rgb(200 200 200 / 10%); background-color: rgb(200 200 200 / 10%);
border-radius: 2px; border-radius : 2px;
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
opacity: 0; opacity : 0;
transform: scale(0.5); transform : scale(0.5);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance : none;
width: 12px; width : 12px;
height: 12px; height : 12px;
border-radius: 100%; border-radius : 100%;
background: var(--keyColor); background : var(--keyColor);
cursor: default; cursor : default;
transition: opacity .10s var(--appleEase), transform .10s var(--appleEase); transition : opacity .10s var(--appleEase), transform .10s var(--appleEase);
} }
} }
} }
@ -113,40 +117,40 @@
} }
.app-chrome--left { .app-chrome--left {
width: 30%; width : 30%;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items : flex-start;
.playback-controls { .playback-controls {
.artwork { .artwork {
width: var(--chromeHeight2); width : var(--chromeHeight2);
height: var(--chromeHeight2); height : var(--chromeHeight2);
margin: 0px 6px 0px 0px; margin : 0px 6px 0px 0px;
box-shadow: unset; box-shadow: unset;
border: 0px; border : 0px;
.mediaitem-artwork, .mediaitem-artwork,
img { img {
border-radius: 0px; border-radius: 0px;
box-shadow: unset; box-shadow : unset;
border: 0px; border : 0px;
} }
} }
.playback-info { .playback-info {
align-items: flex-start; align-items: flex-start;
margin: 6px; margin : 6px;
.song-name { .song-name {
text-align: left; text-align : left;
font-size: 15px; font-size : 15px;
font-weight: initial; font-weight : initial;
width: 100%; width : 100%;
-webkit-mask-image: linear-gradient(-90deg, transparent 0%, transparent 10%, black 20%); -webkit-mask-image: linear-gradient(-90deg, transparent 0%, transparent 10%, black 20%);
} }
.song-artist-album { .song-artist-album {
width: 100%; width : 100%;
-webkit-mask-image: linear-gradient(-90deg, transparent 0%, transparent 10%, black 20%); -webkit-mask-image: linear-gradient(-90deg, transparent 0%, transparent 10%, black 20%);
} }
@ -156,29 +160,30 @@
.song-artist-album-content { .song-artist-album-content {
text-align: left; text-align: left;
font-size: 12px; font-size : 12px;
} }
} }
width: 100%; width : 100%;
height: 100%; height : 100%;
max-width: 100%; max-width: 100%;
border: 0px; border : 0px;
} }
flex: 0 0 auto; flex: 0 0 auto;
} }
.app-chrome--right { .app-chrome--right {
width: 30%; width : 30%;
flex: 0 0 auto; flex : 0 0 auto;
padding-right: 8px; padding-right: 8px;
} }
} }
.collection-page { .collection-page {
.top-fab { .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'); 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 { .playback-buttons {
display: flex; display: flex;
align-items: center; 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", "handle": "CiderUser",
"artwork": { "url": "./assets/logocut.png" } "artwork": { "url": "./assets/logocut.png" }
} }
},
forceDirectives: {
}, },
menuOpened: false, menuOpened: false,
maximized: false, maximized: false,
@ -573,6 +576,10 @@ const app = new Vue({
this.setTheme(this.cfg.visual.theme) this.setTheme(this.cfg.visual.theme)
} }
if(this.platform == "darwin") {
this.chrome.windowControlPosition = "left"
}
this.setLz(this.cfg.general.language) this.setLz(this.cfg.general.language)
this.setLzManual() this.setLzManual()
clearTimeout(this.hangtimer) clearTimeout(this.hangtimer)
@ -933,13 +940,20 @@ const app = new Vue({
less.refresh() less.refresh()
} }
}, },
macOSEmu () {
this.chrome.forceDirectives["macosemu"] = {
value: true
}
this.chrome.windowControlPosition = "left"
},
getThemeDirective(directive = "") { getThemeDirective(directive = "") {
let directives = {} let directives = {}
if (typeof this.chrome.appliedTheme.info.directives == "object") { if (typeof this.chrome.appliedTheme.info.directives == "object") {
directives = this.chrome.appliedTheme.info.directives directives = this.chrome.appliedTheme.info.directives
} }
directives = Object.assign(directives, this.chrome.forceDirectives)
if (directives[directive]) { if (directives[directive]) {
return this.chrome.appliedTheme.info.directives[directive].value return directives[directive].value
} else if (this.cfg.visual.directives[directive]) { } else if (this.cfg.visual.directives[directive]) {
return this.cfg.visual.directives.windowLayout return this.cfg.visual.directives.windowLayout
} else { } else {
@ -966,6 +980,9 @@ const app = new Vue({
if (this.getThemeDirective('windowLayout') == 'twopanel') { if (this.getThemeDirective('windowLayout') == 'twopanel') {
classes.twopanel = true classes.twopanel = true
} }
if(this.getThemeDirective("macosemu") == true){
classes.macosemu = true
}
return classes return classes
}, },
invokeDrawer(panel) { invokeDrawer(panel) {

35
src/renderer/style.less
View file

@ -37,7 +37,7 @@
--keyColor-deepPressed: #ff8a9c; --keyColor-deepPressed: #ff8a9c;
--keyColor-deepPressed-rgb: 255, 138, 156; --keyColor-deepPressed-rgb: 255, 138, 156;
--keyColor-disabled: rgba(250, 88, 106, 0.35); --keyColor-disabled: rgba(250, 88, 106, 0.35);
--navigationBarHeight: 38px; --navigationBarHeight: 0px;
--modalBackground: #262626; --modalBackground: #262626;
--songProgressColor: var(--keyColor); --songProgressColor: var(--keyColor);
--songProgressBackground: #333; --songProgressBackground: #333;
@ -853,6 +853,14 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
-webkit-app-region: drag; -webkit-app-region: drag;
.vdiv {
width: 1px;
background: white;
opacity: 0.25;
height: 50%;
margin: 6px;
}
} }
.mv-chrome { .mv-chrome {
@ -996,13 +1004,13 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
} }
.app-chrome .app-chrome-item > .app-mainmenu { .app-chrome .app-chrome-item > .app-mainmenu {
width: 110px; width: 34px;
font-size: 13px; font-size: 13px;
background: url("./assets/AppChromeBtn.svg"); background: url("./assets/CiderMenu.svg");
background-size: contain; background-size: auto;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
height: 70%; height: 34px;
margin-right: 16px; margin-right: 16px;
margin-left: 16px; margin-left: 16px;
margin-top: 1.5px; margin-top: 1.5px;
@ -1016,10 +1024,6 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
&:active, &.active { &:active, &.active {
background-color: var(--selected-click); background-color: var(--selected-click);
} }
&.active {
background-image: url("./assets/AppChromeBtn-Open.svg");
}
} }
.app-chrome .app-chrome-item > .window-controls { .app-chrome .app-chrome-item > .window-controls {
@ -1027,6 +1031,10 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
font-size: 13px; font-size: 13px;
height: 100%; height: 100%;
display: flex; display: flex;
&-macos {
width: 96px;
}
} }
.app-chrome .app-chrome-item > .window-controls > div { .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; display: none;
} }
body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls { //body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls {
display: none; // display: none;
} //}
body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.minmax { body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.minmax {
display: none; display: none;
@ -3216,4 +3224,5 @@ body[platform='darwin'] {
@import url("less/macos.less"); @import url("less/macos.less");
@import url("less/linux.less"); @import url("less/linux.less");
@import url("less/compact.less"); @import url("less/compact.less");
@import url("less/directives.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="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()"> <button class="nav-item" @click="navigateBack()">
<%- include('../svg/chevron-left.svg') %> <%- include('../svg/chevron-left.svg') %>
</button> </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" :style="{'display': chrome.topChromeVisible ? '' : 'none'}">
<div class="app-chrome--left"> <div class="app-chrome--left">
<div class="app-chrome-item full-height" v-if="chrome.windowControlPosition == '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="close" @click="ipcRenderer.send('close')"></div>
<div class="minimize" @click="ipcRenderer.send('minimize')"></div> <div class="minimize" @click="ipcRenderer.send('minimize')"></div>
<div class="minmax restore" v-if="chrome.maximized" <div class="minmax restore" v-if="chrome.maximized"
@ -16,6 +16,20 @@
@click="mainMenuVisibility(true)" @click="mainMenuVisibility(true)"
:class="{active: chrome.menuOpened}"></button> :class="{active: chrome.menuOpened}"></button>
</div> </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'"> <template v-if="getThemeDirective('windowLayout') != 'twopanel'">
<div class="app-chrome-item display--large"> <div class="app-chrome-item display--large">
<button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0" <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
@ -142,7 +156,8 @@
</template> </template>
</div> </div>
</template> </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="window-controls">
<div class="minimize" @click="ipcRenderer.send('minimize')"></div> <div class="minimize" @click="ipcRenderer.send('minimize')"></div>
<div class="minmax restore" v-if="chrome.maximized" <div class="minmax restore" v-if="chrome.maximized"
@ -152,5 +167,11 @@
<div class="close" @click="ipcRenderer.send('close')"></div> <div class="close" @click="ipcRenderer.send('close')"></div>
</div> </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>
</div> </div>