app chrome changes, added app.macOSEmu()

src/renderer/assets/CiderMenu.svg

@@ -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>

src/renderer/less/directives.less

@@ -1,3 +1,7 @@
+#app.navbar {
+  --navigationBarHeight: 38px;
+}
+
 #app.twopanel {
   --chromeHeight1: 42px;
   --chromeHeight2: 76px;
@@ -5,8 +9,8 @@
 
   .app-chrome {
     .app-mainmenu {
-      margin-left: 10px;
+      width : 30px;
-      width: 88px;
+      height: 30px;
     }
 
     height: var(--chromeHeight1);
@@ -176,6 +180,7 @@
       padding-right: 8px;
     }
   }
+
   .collection-page {
     .top-fab {
       bottom: 96px;

src/renderer/less/elements.less

@@ -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;

src/renderer/less/macosemu.less

@@ -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;
+      }
+    }
+  }
+}

src/renderer/main/vueapp.js

@@ -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) {

src/renderer/style.less

@@ -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: url("./assets/CiderMenu.svg");
-  background-size: contain;
+  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 {
+//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 {
   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");

src/renderer/views/app/app-content.ejs

@@ -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>

src/renderer/views/app/chrome-top.ejs

@@ -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>