reimp e133b2c, adjustments for macOS

.circleci/config.yml

@@ -147,6 +147,7 @@ jobs:
       - run:
           name: Publish Release
           command: |
+            echo "Creating release for Cider v${APP_VERSION} on the ${CIRCLE_BRANCH} branch."
             gh release create "v${APP_VERSION}" --title "Cider Version ${APP_VERSION} (${CIRCLE_BRANCH})" --generate-notes -R ciderapp/cider-releases ~/Cider/dist/artifacts/*.deb ~/Cider/dist/artifacts/*.AppImage ~/Cider/dist/artifacts/*.snap ~/Cider/dist/artifacts/*.exe ~/Cider/dist/artifacts/*.yml ~/Cider/dist/artifacts/*.blockmap
 
 # Orchestrate our job run sequence

src/renderer/less/macos.less

@@ -1,6 +1,6 @@
 body[platform="darwin"] {
     html {
-        background: transparent!important;
+        background: transparent !important;
     }
 
     &.notransparency::before {
@@ -11,6 +11,7 @@ body[platform="darwin"] {
         &.simplebg {
             background: transparent;
         }
+
         &::before {
             display: none;
         }
@@ -26,6 +27,7 @@ body[platform="darwin"] {
             .app-chrome .app-chrome-item.search {
                 margin-right: 12px;
             }
+
             .app-chrome .app-mainmenu {
                 width: 46px;
             }
@@ -35,15 +37,20 @@ body[platform="darwin"] {
             }
         }
 
-        // &::after {
+        &[window-state="normal"] {
-        //     position: fixed;
+            &::after {
-        //     top:0;left:0;right:0;bottom:0;
+                position: fixed;
-        //     box-shadow: inset 0px 0px .5px 1px rgb(200 200 200 / 40%);
+                top: 0;
-        //     border-radius: 10px;
+                left: 0;
-        //     content: " ";
+                right: 0;
-        //     z-index: 999999;
+                bottom: 0;
-        //     pointer-events: none;
+                box-shadow: inset 0px 0px .5px 1px rgb(200 200 200 / 40%);
-        // }
+                border-radius: 10px;
+                content: " ";
+                z-index: 999999;
+                pointer-events: none;
+            }
+        }
     }
 
     #app-main {
@@ -58,6 +65,13 @@ body[platform="darwin"] {
         }
     }
 
+    .settings-window.maxed {
+        .tabs>.col-auto {
+            transition: padding-top .3s linear;
+            padding-top: var(--chromeHeight1);
+        }
+    }
+
     #apple-music-video-player-controls #player-exit {
         margin-top: 18px;
         left: 70px;

src/renderer/less/pages.less

@@ -54,7 +54,7 @@
     width: 320px;
     font-size: 14px;
     position: absolute;
-    overflow: auto;
+    overflow: overlay;
     padding-bottom: 16px;
 
     > .list-group {
@@ -80,7 +80,7 @@
     padding: 16px 32px;
     overflow: auto;
     position: fixed;
-    width: calc(100% - 574px);
+    // width: calc(100% - 574px);
     margin-left: 320px;
     padding-bottom: 16px;
   }
@@ -118,7 +118,10 @@
 
 //Styles Page
 .installed-themes-page {
-
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
   .themeContextMenu {
     background: transparent;
     color: var(--keyColor);
@@ -157,7 +160,11 @@
 
   .gh-header {
     z-index: 5;
-
+    padding: 16px;
+    flex: 0 0 auto;
+    height: 64px;
+    display: grid;
+    align-content: center;
     .header-text {
       position: initial !important;
       justify-content: left !important;
@@ -165,17 +172,17 @@
   }
 
   .gh-content {
-    display: contents;
+    display: flex;
-    flex-direction: column;
+    flex-direction: row;
     padding: 0px;
+    height: 100%;
+    flex: 0 0 auto;
 
     .repos-list {
       width: 320px;
-      position: fixed;
+      overflow: overlay;
-      overflow: auto;
       height: 90%;
       font-size: 14px;
-      margin: 0 auto;
       white-space: nowrap;
 
       > .list-group {
@@ -197,13 +204,11 @@
     }
 
     .style-editor-container {
-      height: 90%;
+      height: 100%;
       flex: 1;
       padding: 0px;
-      margin-left: 320px;
+      width: 100%;
-      position: fixed;
+      overflow: hidden;
-      overflow: auto;
-      width: calc(100% - 574px);
       
       .stylestack-editor {
         padding-bottom: 16px;
@@ -2070,7 +2075,7 @@
 
   .settings-window {
     background: var(--baseColorMix);
-    max-width: 80%;
+    max-width: 90%;
     max-height: 90%;
     width: 100%;
     height: 100%;
@@ -2107,6 +2112,9 @@
       display: flex;
       gap: 10px;
       align-items: center;
+
+      :nth-child(2) {
+      }
     }
 
 
@@ -2165,6 +2173,11 @@
         background-color: rgb(196, 43, 28)
       }
 
+      &.back-btn {
+        left: 10px;
+        right: unset;
+      }
+
       &.minmax-btn {
         right: 52px;
 
@@ -2192,6 +2205,9 @@
 
       > .col-auto {
         width: 230px;
+        overflow-x: hidden;
+        overflow-y: overlay;
+        transition: width 0.25s ease-in-out;
       }
 
       .tab-content {
@@ -2203,9 +2219,48 @@
       overflow-y: overlay;
       height: 100%;
       background-color: var(--panelColor2);
+      padding:0px;
       padding-top: 48px;
       border-left: 1px solid var(--borderColor);
     }
+
+    .github-themes-page, .installed-themes-page {
+      .header-text {
+        font-size: 1.25em;
+      }
+    }
+
+    .tab-pane {
+      height:100%;
+    }
+
+    .settings-tab-content {
+      height:100%;
+    }
+    
+    &.no-sidebar {
+      .gh-header {
+        >.row {
+          &:last-child {
+            padding-right: 90px;
+          }
+        }
+      }
+      .tab-content {
+        padding-top:0px;
+      }
+
+      .tabs {
+        .nav-pills .nav-link {
+          :nth-child(2) {
+            display: none;
+          }
+        }
+        >.col-auto {
+          width: 80px;
+        }
+      }
+    }
   }
 }
 

src/renderer/style.css

@@ -12985,7 +12985,6 @@ input[type=checkbox][switch]:checked:active::before {
 .github-themes-page {
   display: flex;
   flex-direction: column;
-  padding-top: var(--chromeHeight1);
   height: 100%;
 }
 .github-themes-page .github-avatar {
@@ -13009,10 +13008,12 @@ input[type=checkbox][switch]:checked:active::before {
   margin: 0px;
 }
 .github-themes-page .repos-list {
-  height: 100%;
+  height: 85%;
-  overflow-y: overlay;
   width: 320px;
   font-size: 14px;
+  position: absolute;
+  overflow: auto;
+  padding-bottom: 16px;
 }
 .github-themes-page .repos-list > .list-group {
   margin: 0px;
@@ -13027,11 +13028,14 @@ input[type=checkbox][switch]:checked:active::before {
   filter: brightness(0.8);
 }
 .github-themes-page .github-preview {
-  height: 100%;
+  height: 85%;
   flex: 1;
-  background: var(--color2);
   padding: 16px 32px;
-  overflow-y: overlay;
+  overflow: auto;
+  position: fixed;
+  width: calc(100% - 574px);
+  margin-left: 320px;
+  padding-bottom: 16px;
 }
 .github-themes-page .gh-content {
   display: flex;
@@ -13042,6 +13046,10 @@ input[type=checkbox][switch]:checked:active::before {
 .github-themes-page .gh-header {
   padding: 16px;
 }
+.github-themes-page .gh-header .header-text {
+  position: initial !important;
+  justify-content: left !important;
+}
 .github-themes-page .installed-themes-page .style-editor-container {
   height: 100%;
   flex: 1;
@@ -13086,8 +13094,8 @@ input[type=checkbox][switch]:checked:active::before {
   z-index: 5;
 }
 .installed-themes-page .gh-header .header-text {
-  position: initial;
+  position: initial !important;
-  justify-content: left;
+  justify-content: left !important;
 }
 .installed-themes-page .gh-content {
   display: contents;
@@ -13096,10 +13104,12 @@ input[type=checkbox][switch]:checked:active::before {
 }
 .installed-themes-page .gh-content .repos-list {
   width: 320px;
-  position: absolute;
+  position: fixed;
   overflow: auto;
   height: 90%;
   font-size: 14px;
+  margin: 0 auto;
+  white-space: nowrap;
 }
 .installed-themes-page .gh-content .repos-list > .list-group {
   margin: 0px;
@@ -13117,12 +13127,11 @@ input[type=checkbox][switch]:checked:active::before {
 .installed-themes-page .gh-content .style-editor-container {
   height: 90%;
   flex: 1;
-  /* background: var(--color2); */
   padding: 0px;
   margin-left: 320px;
-  position: absolute;
+  position: fixed;
   overflow: auto;
-  width: calc(-webkit-fill-available - 320px);
+  width: calc(100% - 574px);
 }
 .installed-themes-page .gh-content .style-editor-container .stylestack-editor {
   padding-bottom: 16px;

src/renderer/views/components/settings-window.ejs

@@ -1,7 +1,7 @@
 <script type="text/x-template" id="settings-window">
-<div class="settings-panel" @click.self="close()">
+  <div class="settings-panel" @click.self="close()">
-    <div class="settings-window" :class="{'maxed': $store.state.pageState['settings'].fullscreen}">
+    <div class="settings-window" :class="{'maxed': $store.state.pageState['settings'].fullscreen, 'no-sidebar': sidebarVis()}">
-        <button class="close-btn minmax-btn" @click="$store.state.pageState['settings'].fullscreen = !$store.state.pageState['settings'].fullscreen" :class="{'min': $store.state.pageState['settings'].fullscreen}" @click="minmax()"></button>
+        <button class="close-btn minmax-btn" @click="$store.state.pageState['settings'].fullscreen = !$store.state.pageState['settings'].fullscreen" :class="{'min': $store.state.pageState['settings'].fullscreen}"></button>
         <button class="close-btn" @click="close()"></button>
         <b-tabs class="no-style" pills vertical content-class="mt-3" v-model="$store.state.pageState['settings'].currentTabIndex">
             <b-tab>
@@ -1486,177 +1486,185 @@
 </div>
 </script>
 <script>
-    Vue.component("settings-window", {
+  Vue.component("settings-window", {
-        template: "#settings-window",
+    template: "#settings-window",
-        data: function () {
+    data: function() {
-            return {
+      return {
-                app: this.$root,
+        app: this.$root,
-                themes: ipcRenderer.sendSync("get-themes"),
+        themes: ipcRenderer.sendSync("get-themes"),
-                tabIndex: 0,
+        tabIndex: 0,
-                canChangeHash: false,
+        canChangeHash: false,
-                lastfmConnecting: false
+        lastfmConnecting: false
-            }
+      }
-        }, watch: {
+    },
-            tabIndex: function (val) {
+    watch: {
-                if (this.canChangeHash) {
+      tabIndex: function(val) {
-                    // window.location.hash = `#settings/${val}`
+        if (this.canChangeHash) {
-                }
+          // window.location.hash = `#settings/${val}`
-            }
-        },
-        methods: {
-            close() {
-                this.$root.modals.settings = false
-            },
-            windowBgStyleChange() {
-                this.$root.getNowPlayingArtworkBG(undefined, true)
-                if (this.$root.cfg.visual.window_background_style === "mica") {
-                    this.$root.spawnMica()
-                }
-            },
-            reinstallWidevineCDM() {
-                app.confirm(app.getLz("settings.option.experimental.reinstallwidevine.confirm"), (ok) => {
-                    if (ok) {
-                        ipcRenderer.invoke("reinstall-widevine-cdm");
-                    }
-                })
-            },
-            gitHubExplore() {
-                app.openSettingsPage("github-themes")
-            },
-            copyLogs() {
-                ipcRenderer.send('fetch-log')
-                notyf.success(app.getLz('term.share.success'));
-            },
-            openAppData() {
-                ipcRenderer.send('open-appdata')
-            },
-            getLanguages: function () {
-                let langs = this.$root.lzListing
-                let categories = {
-                    "main": [],
-                    "fun": [],
-                    "unsorted": []
-                }
-                // sort by category if category is undefined or empty put it in "unsorted"
-                for (let i = 0; i < langs.length; i++) {
-                    if (langs[i].category === undefined || langs[i].category === "") {
-                        categories.unsorted.push(langs[i])
-                    } else {
-                        categories[langs[i].category].push(langs[i])
-                    }
-                }
-                // return
-                return categories
-            },
-            addExperiment(flag) {
-                app.cfg.advanced.experiments.push(flag);
-            },
-            removeExperiment(flag) {
-                app.cfg.advanced.experiments.splice(app.cfg.advanced.experiments.indexOf(flag), 1);
-            },
-            toggleAudioContext: function () {
-                if (app.cfg.advanced.AudioContext === true) {
-                    if (navigator.hardwareConcurrency < 6) {
-                        app.confirm(app.getLz("settings.warn.audio.enableAdvancedFunctionality.lowcores"), function (result) {
-                            if (result) {
-                                CiderAudio.init();
-                                if (app.cfg.audio.normalization === true) {
-                                    CiderAudio.normalizerOn()
-                                }
-                            }
-                        })
-                    } else {
-                        CiderAudio.init();
-                        if (app.cfg.audio.normalization === true) {
-                            CiderAudio.normalizerOn()
-                        }
-                    }
-                } else {
-                    CiderAudio.off();
-                }
-            },
-            toggleNormalization: function () {
-                if (app.cfg.audio.normalization) {
-                    CiderAudio.normalizerOn()
-                } else {
-                    CiderAudio.normalizerOff()
-                }
-            },
-            changeAudioQuality: function () {
-                app.mk.bitrate = MusicKit.PlaybackBitrate[app.cfg.audio.quality];
-            },
-            toggleUserInfo: function () {
-                app.chrome.hideUserInfo = !app.cfg.visual.showuserinfo
-            },
-            sendDataToMTT: function () {
-                ipcRenderer.invoke('setStoreValue', 'general.close_behavior', app.cfg.general.close_behavior);
-                //  setStoreValue does not change plugin store values somehow
-                ipcRenderer.invoke('update-store-mtt', app.cfg.general.close_behavior);
-            },
-            checkIfUpdateDisabled() {
-                if (app.cfg.main.UPDATABLE) return;
-
-                let updateFields = document.getElementsByClassName('update-check');
-                for (let i = 0; i < updateFields.length; i++) {
-                    updateFields[i].style = "opacity: 0.5; pointer-events: none;";
-                    updateFields[i].title = "Not available on this type of build";
-                }
-
-            },
-            promptForRelaunch() {
-                app.confirm(app.getLz('action.relaunch.confirm'), function (result) {
-                    if (result) {
-                        ipcRenderer.send('relaunchApp', '');
-                    }
-                });
-            },
-            authCC() {
-                ipcRenderer.send('cc-auth')
-            },
-            logoutCC() {
-                ipcRenderer.send('cc-logout')
-            },
-            reloadDiscordRPC() {
-                ipcRenderer.send('reloadRPC')
-            },
-	        lfmDisconnect() {
-		        this.$root.cfg.connectivity.lastfm.enabled = false;
-		        this.$root.cfg.connectivity.lastfm.secrets.username = "";
-		        this.$root.cfg.connectivity.lastfm.secrets.key = "";
-		        ipcRenderer.send('lastfm:disconnect');
-	        },
-	        async lfmAuthorize() {
-				this.lastfmConnecting = true;
-		        window.open(await ipcRenderer.invoke('lastfm:url'));
-		        app.notyf.success(app.getLz('settings.notyf.connectivity.lastfmScrobble.connecting'));
-
-		        /* Just a timeout for the button */
-		        setTimeout(() => {
-			        if (!this.$root.cfg.connectivity.lastfm.enabled) {
-				        app.notyf.error(app.getLz('settings.notyf.connectivity.lastfmScrobble.connectError'));
-				        console.warn('[lastfm:authorize] Last.fm authorization timed out.');
-				        this.lastfmConnecting = false;
-			        }
-		        }, 20000);
-
-		        ipcRenderer.once('lastfm:authenticated', (_e, session) => {
-			        this.$root.cfg.connectivity.lastfm.secrets.username = session.username
-			        this.$root.cfg.connectivity.lastfm.secrets.key = session.key
-			        this.$root.cfg.connectivity.lastfm.enabled = true
-                    this.lastfmConnecting = false;
-			        app.notyf.success(app.getLz('settings.notyf.connectivity.lastfmScrobble.connectSuccess'));
-		        })
-	        },
-	        filterChange(e) {
-		        this.$root.cfg.connectivity.lastfm.filter_types[e.target.value] = e.target.checked;
-	        },
-	        submitToken() {
-                const token = document.getElementById('lfmToken').value;
-                ipcRenderer.send('lastfm:auth', token);
-            },
-            openLocalSongsPathMenu() {
-                app.modals.pathMenu = true
-            }
         }
-    })
+      }
+    },
+    methods: {
+      sidebarVis() {
+        const tabIndex = app.$store.state.pageState['settings'].currentTabIndex
+        if(tabIndex == 3 || tabIndex == 5 || tabIndex == 10 || tabIndex == 11) {
+            return true;
+        }
+        return false
+      },
+      close() {
+        this.$root.modals.settings = false
+      },
+      windowBgStyleChange() {
+        this.$root.getNowPlayingArtworkBG(undefined, true)
+        if (this.$root.cfg.visual.window_background_style === "mica") {
+          this.$root.spawnMica()
+        }
+      },
+      reinstallWidevineCDM() {
+        app.confirm(app.getLz("settings.option.experimental.reinstallwidevine.confirm"), (ok) => {
+          if (ok) {
+            ipcRenderer.invoke("reinstall-widevine-cdm");
+          }
+        })
+      },
+      gitHubExplore() {
+        app.openSettingsPage("github-themes")
+      },
+      copyLogs() {
+        ipcRenderer.send('fetch-log')
+        notyf.success(app.getLz('term.share.success'));
+      },
+      openAppData() {
+        ipcRenderer.send('open-appdata')
+      },
+      getLanguages: function() {
+        let langs = this.$root.lzListing
+        let categories = {
+          "main": [],
+          "fun": [],
+          "unsorted": []
+        }
+        // sort by category if category is undefined or empty put it in "unsorted"
+        for (let i = 0; i < langs.length; i++) {
+          if (langs[i].category === undefined || langs[i].category === "") {
+            categories.unsorted.push(langs[i])
+          } else {
+            categories[langs[i].category].push(langs[i])
+          }
+        }
+        // return
+        return categories
+      },
+      addExperiment(flag) {
+        app.cfg.advanced.experiments.push(flag);
+      },
+      removeExperiment(flag) {
+        app.cfg.advanced.experiments.splice(app.cfg.advanced.experiments.indexOf(flag), 1);
+      },
+      toggleAudioContext: function() {
+        if (app.cfg.advanced.AudioContext === true) {
+          if (navigator.hardwareConcurrency < 6) {
+            app.confirm(app.getLz("settings.warn.audio.enableAdvancedFunctionality.lowcores"), function(result) {
+              if (result) {
+                CiderAudio.init();
+                if (app.cfg.audio.normalization === true) {
+                  CiderAudio.normalizerOn()
+                }
+              }
+            })
+          } else {
+            CiderAudio.init();
+            if (app.cfg.audio.normalization === true) {
+              CiderAudio.normalizerOn()
+            }
+          }
+        } else {
+          CiderAudio.off();
+        }
+      },
+      toggleNormalization: function() {
+        if (app.cfg.audio.normalization) {
+          CiderAudio.normalizerOn()
+        } else {
+          CiderAudio.normalizerOff()
+        }
+      },
+      changeAudioQuality: function() {
+        app.mk.bitrate = MusicKit.PlaybackBitrate[app.cfg.audio.quality];
+      },
+      toggleUserInfo: function() {
+        app.chrome.hideUserInfo = !app.cfg.visual.showuserinfo
+      },
+      sendDataToMTT: function() {
+        ipcRenderer.invoke('setStoreValue', 'general.close_behavior', app.cfg.general.close_behavior);
+        //  setStoreValue does not change plugin store values somehow
+        ipcRenderer.invoke('update-store-mtt', app.cfg.general.close_behavior);
+      },
+      checkIfUpdateDisabled() {
+        if (app.cfg.main.UPDATABLE) return;
+
+        let updateFields = document.getElementsByClassName('update-check');
+        for (let i = 0; i < updateFields.length; i++) {
+          updateFields[i].style = "opacity: 0.5; pointer-events: none;";
+          updateFields[i].title = "Not available on this type of build";
+        }
+
+      },
+      promptForRelaunch() {
+        app.confirm(app.getLz('action.relaunch.confirm'), function(result) {
+          if (result) {
+            ipcRenderer.send('relaunchApp', '');
+          }
+        });
+      },
+      authCC() {
+        ipcRenderer.send('cc-auth')
+      },
+      logoutCC() {
+        ipcRenderer.send('cc-logout')
+      },
+      reloadDiscordRPC() {
+        ipcRenderer.send('reloadRPC')
+      },
+      lfmDisconnect() {
+        this.$root.cfg.connectivity.lastfm.enabled = false;
+        this.$root.cfg.connectivity.lastfm.secrets.username = "";
+        this.$root.cfg.connectivity.lastfm.secrets.key = "";
+        ipcRenderer.send('lastfm:disconnect');
+      },
+      async lfmAuthorize() {
+        this.lastfmConnecting = true;
+        window.open(await ipcRenderer.invoke('lastfm:url'));
+        app.notyf.success(app.getLz('settings.notyf.connectivity.lastfmScrobble.connecting'));
+
+        /* Just a timeout for the button */
+        setTimeout(() => {
+          if (!this.$root.cfg.connectivity.lastfm.enabled) {
+            app.notyf.error(app.getLz('settings.notyf.connectivity.lastfmScrobble.connectError'));
+            console.warn('[lastfm:authorize] Last.fm authorization timed out.');
+            this.lastfmConnecting = false;
+          }
+        }, 20000);
+
+        ipcRenderer.once('lastfm:authenticated', (_e, session) => {
+          this.$root.cfg.connectivity.lastfm.secrets.username = session.username
+          this.$root.cfg.connectivity.lastfm.secrets.key = session.key
+          this.$root.cfg.connectivity.lastfm.enabled = true
+          this.lastfmConnecting = false;
+          app.notyf.success(app.getLz('settings.notyf.connectivity.lastfmScrobble.connectSuccess'));
+        })
+      },
+      filterChange(e) {
+        this.$root.cfg.connectivity.lastfm.filter_types[e.target.value] = e.target.checked;
+      },
+      submitToken() {
+        const token = document.getElementById('lfmToken').value;
+        ipcRenderer.send('lastfm:auth', token);
+      },
+      openLocalSongsPathMenu() {
+        app.modals.pathMenu = true
+      }
+    }
+  })
 </script>