windows vibrancy support (#5)

app/main.js

@@ -1,6 +1,7 @@
 if (process.platform == 'win32' && require('electron-squirrel-startup')) process.exit(0)
 
 const electron = require('electron')
+const electronVibrancy = require('electron-vibrancy')
 
 if (process.argv.indexOf('--debug') !== -1) {
     require('electron-debug')({enabled: true, showDevTools: 'undocked'})
@@ -86,6 +87,15 @@ setupWindowManagement = () => {
     electron.ipcMain.on('window-set-always-on-top', (event, flag) => {
         app.window.setAlwaysOnTop(flag)
     })
+
+    electron.ipcMain.on('window-set-vibrancy', (event, enabled) => {
+      if (enabled && !app.window.vibrancyViewID) {
+        app.window.vibrancyViewID = electronVibrancy.SetVibrancy(app.window, 0)
+      } else if (!enabled && app.window.vibrancyViewID) {
+        electronVibrancy.RemoveView(app.window, app.window.vibrancyViewID)
+        app.window.vibrancyViewID = null
+      }
+    })
 }
 
 

app/package.json

@@ -25,6 +25,7 @@
     "electron-debug": "^1.0.1",
     "electron-is-dev": "0.1.2",
     "electron-squirrel-startup": "^1.0.0",
+    "electron-vibrancy": "^0.1.3",
     "js-yaml": "3.8.2",
     "mz": "^2.6.0",
     "ngx-toastr": "^8.7.3",

app/yarn.lock

@@ -72,6 +72,10 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
+bindings@^1.2.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.3.0.tgz#b346f6ecf6a95f5a815c5839fc7cdb22502f1ed7"
+
 conf@^0.11.1:
   version "0.11.2"
   resolved "https://registry.yarnpkg.com/conf/-/conf-0.11.2.tgz#879f479267600483e502583462ca4063fc9779b2"
@@ -135,6 +139,13 @@ electron-squirrel-startup@^1.0.0:
   dependencies:
     debug "^2.2.0"
 
+electron-vibrancy@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/electron-vibrancy/-/electron-vibrancy-0.1.3.tgz#04382dd6e030e5ca5e60f8e024033738cb8479e3"
+  dependencies:
+    bindings "^1.2.1"
+    nan "^2.0.5"
+
 env-paths@^0.3.0:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-0.3.1.tgz#c30ccfcbc30c890943dc08a85582517ef00da463"
@@ -195,6 +206,10 @@ mz@^2.6.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
+nan@^2.0.5:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.10.0.tgz#96d0cd610ebd58d4b4de9cc0c6828cda99c7548f"
+
 ngx-toastr@^8.7.3:
   version "8.7.3"
   resolved "https://registry.yarnpkg.com/ngx-toastr/-/ngx-toastr-8.7.3.tgz#d3b7a8077ba1c860dd8a44779ccad38c5ea15c92"

terminus-core/src/components/appRoot.component.ts

@@ -218,8 +218,7 @@ export class AppRootComponent {
     }
 
     private updateVibrancy () {
-        document.body.classList.toggle('vibrant', this.config.store.appearance.vibrancy)
+      this.hostApp.setVibrancy(this.config.store.appearance.vibrancy)
-        this.hostApp.getWindow().setVibrancy(this.config.store.appearance.vibrancy ? 'dark' : null)
+      this.hostApp.getWindow().setOpacity(this.config.store.appearance.opacity)
-        this.hostApp.getWindow().setOpacity(this.config.store.appearance.opacity)
     }
 }

terminus-core/src/services/hostApp.service.ts

@@ -118,6 +118,16 @@ export class HostAppService {
         this.electron.ipcRenderer.send('window-set-always-on-top', flag)
     }
 
+    setVibrancy (enable: boolean) {
+      document.body.classList.toggle('vibrant', enable)
+      if (this.platform === Platform.macOS) {
+        this.hostApp.getWindow().setVibrancy(enable ? 'dark' : null)
+      }
+      if (this.platform === Platform.Windows) {
+        this.electron.ipcRenderer.send('window-set-vibrancy', enable)
+      }
+    }
+
     quit () {
         this.logger.info('Quitting')
         this.electron.app.quit()

terminus-settings/src/components/settingsTab.component.pug

@@ -39,7 +39,7 @@ ngb-tabset.vertical(type='tabs', [activeId]='activeTab')
                                 )
                                 | At the bottom
 
-                    .form-group(*ngIf='hostApp.platform === Platform.macOS')
+                    .form-group(*ngIf='hostApp.platform !== Platform.Linux')
                         label Vibrancy
                         br
                         .btn-group(
@@ -72,7 +72,7 @@ ngb-tabset.vertical(type='tabs', [activeId]='activeTab')
                             min='0.05',
                             max='1',
                             step='0.01'
-                        )                
+                        )
 
                 .col.col-lg-6
                     .form-group
@@ -200,7 +200,7 @@ ngb-tabset.vertical(type='tabs', [activeId]='activeTab')
                     [(ngModel)]='config.store.appearance.css',
                     '(ngModelChange)'='config.save()',
                 )
-                    
+
     ngb-tab(id='hotkeys')
         ng-template(ngbTabTitle)
             | Hotkeys
@@ -212,7 +212,7 @@ ngb-tabset.vertical(type='tabs', [activeId]='activeTab')
                     tr
                         th Name
                         th ID
-                        th Hotkey 
+                        th Hotkey
                     tr(*ngFor='let hotkey of hotkeyDescriptions|filterBy:["name"]:hotkeyFilter')
                         td {{hotkey.name}}
                         td {{hotkey.id}}
@@ -221,7 +221,7 @@ ngb-tabset.vertical(type='tabs', [activeId]='activeTab')
                                 '[(model)]'='config.store.hotkeys[hotkey.id]'
                                 '(modelChange)'='config.save(); docking.dock()'
                             )
-                    
+
     ngb-tab(*ngFor='let provider of settingsProviders', [id]='provider.id')
         ng-template(ngbTabTitle)
             | {{provider.title}}