feat: add vibrancy sidebar for macos

agalwood · May 18, 2021 · e436aef · e436aef
1 parent b0242d3
commit e436aef
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -240,7 +240,7 @@
     "css-loader": "^5.2.4",
     "css-minimizer-webpack-plugin": "^3.0.0",
     "del": "^6.0.0",
-    "electron": "^11.4.5",
+    "electron": "^11.4.7",
     "electron-builder": "22.10.5",
     "electron-builder-notarize": "^1.2.0",
     "electron-devtools-installer": "^3.2.0",

diff --git a/src/main/ui/WindowManager.js b/src/main/ui/WindowManager.js
@@ -11,6 +11,9 @@ const defaultBrowserOptions = {
   show: false,
   width: 1024,
   height: 768,
+  vibrancy: 'ultra-dark',
+  visualEffectState: 'active',
+  backgroundColor: is.macOS() ? '#00000000' : '#FFF',
   webPreferences: {
     nodeIntegration: true
   }
@@ -87,8 +90,7 @@ export default class WindowManager extends EventEmitter {
         contextIsolation: false,
         nodeIntegration: true,
         nodeIntegrationInWorker: true
-      },
-      hasShadow: !is.macOS()
+      }
     })
 
     const bounds = this.getPageBounds(page)

diff --git a/src/renderer/components/Aside/Index.vue b/src/renderer/components/Aside/Index.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-aside width="78px" :class="['aside', 'hidden-sm-and-down', { 'draggable': asideDraggable }]">
+  <el-aside width="78px" :class="['aside', 'hidden-sm-and-down', { 'draggable': asideDraggable }]" :style="vibrancy">
     <div class="aside-inner">
       <mo-logo-mini />
       <ul class="menu top-menu">
@@ -59,6 +59,18 @@
           console.log(err)
         })
       }
+    },
+    data: function () {
+      return is.macOS()
+        ? {
+          vibrancy: {
+            backgroundColor: 'transparent'
+          }
+        }
+        : {
+          vibrancy: {
+          }
+        }
     }
   }
 </script>

diff --git a/src/renderer/pages/index/main.js b/src/renderer/pages/index/main.js
@@ -1,6 +1,5 @@
 import is from 'electron-is'
 import { ipcRenderer } from 'electron'
-import { getCurrentWindow } from '@electron/remote'
 import Vue from 'vue'
 import VueI18Next from '@panter/vue-i18next'
 import { sync } from 'vuex-router-sync'
@@ -99,7 +98,6 @@ function init (config) {
 
   setTimeout(() => {
     loading.close()
-    getCurrentWindow().setHasShadow(true)
   }, 400)
 }
 

diff --git a/yarn.lock b/yarn.lock
@@ -3351,10 +3351,10 @@ electron-updater@^4.3.9:
     lodash.isequal "^4.5.0"
     semver "^7.3.5"
 
-electron@^11.4.5:
-  version "11.4.6"
-  resolved "https://registry.npmjs.org/electron/-/electron-11.4.6.tgz#0a5e3aebca0bf576633a5adb8fb4295eb7221afc"
-  integrity sha512-WN7zUwaAmcB1lXyyaMxPsNWAFCpRMDltQb4zCjvoD5TBBoePcjd6UwyVUD93pSKJXjmWoae8PbZWrbZlXowcSg==
+electron@^11.4.7:
+  version "11.4.7"
+  resolved "https://registry.npmjs.org/electron/-/electron-11.4.7.tgz#8833297da7f188cf33ef1cf55d47051144fa1e87"
+  integrity sha512-ZObBEsLrD1mIjF15tClcyDsOisOmwpE/+EcZNhBmB5N2WBjskhQHkFczNEOSTTzQ9w0kSWQUPQjLbmKQ3fD/NQ==
   dependencies:
     "@electron/get" "^1.0.1"
     "@types/node" "^12.0.12"