transparency support on Linux

app/lib/app.ts

@@ -1,4 +1,5 @@
 import { app, ipcMain, Menu, Tray, shell } from 'electron'
+import { loadConfig } from './config'
 import { Window } from './window'
 
 export class Application {
@@ -9,6 +10,14 @@ export class Application {
         ipcMain.on('app:config-change', () => {
             this.broadcast('host:config-change')
         })
+
+        const configData = loadConfig()
+        if (process.platform === 'linux' && ((configData.appearance || {}).opacity || 1) !== 1) {
+            app.commandLine.appendSwitch('enable-transparent-visuals')
+            app.disableHardwareAcceleration()
+        }
+
+        app.commandLine.appendSwitch('disable-http-cache')
     }
 
     async newWindow (): Promise<Window> {

app/lib/config.ts

@@ -0,0 +1,13 @@
+import * as fs from 'fs'
+import * as path from 'path'
+import * as yaml from 'js-yaml'
+import { app } from 'electron'
+
+export function loadConfig (): any {
+    let configPath = path.join(app.getPath('userData'), 'config.yaml')
+    if (fs.existsSync(configPath)) {
+        return yaml.safeLoad(fs.readFileSync(configPath, 'utf8'))
+    } else {
+        return {}
+    }
+}

app/lib/index.ts

@@ -11,8 +11,6 @@ if (!process.env.TERMINUS_PLUGINS) {
 
 const application = new Application()
 
-app.commandLine.appendSwitch('disable-http-cache')
-
 ipcMain.on('app:new-window', () => {
     console.log('new-window')
     application.newWindow()

app/lib/window.ts

@@ -1,10 +1,9 @@
 import { Subject, Observable } from 'rxjs'
 import { BrowserWindow, app, ipcMain, Rectangle } from 'electron'
 import ElectronConfig = require('electron-config')
-import * as yaml from 'js-yaml'
-import * as fs from 'fs'
 import * as os from 'os'
-import * as path from 'path'
+
+import { loadConfig } from './config'
 
 let SetWindowCompositionAttribute: any
 let AccentState: any
@@ -25,13 +24,7 @@ export class Window {
     get visible$ (): Observable<boolean> { return this.visible }
 
     constructor () {
-        let configPath = path.join(app.getPath('userData'), 'config.yaml')
-        let configData
-        if (fs.existsSync(configPath)) {
-            configData = yaml.safeLoad(fs.readFileSync(configPath, 'utf8'))
-        } else {
-            configData = {}
-        }
+        let configData = loadConfig()
 
         this.windowConfig = new ElectronConfig({ name: 'window' })
         this.windowBounds = this.windowConfig.get('windowBoundaries')

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

@@ -66,16 +66,16 @@ ngb-tabset.vertical(type='pills', [activeId]='activeTab')
                     
                 toggle(
                     [(ngModel)]='config.store.appearance.vibrancy',
-                    (ngModelChange)='config.save(); (hostApp.platform === Platform.Windows && config.requestRestart())'
+                    (ngModelChange)='config.save()'
                 )
 
-            .form-line(*ngIf='hostApp.platform !== Platform.Linux')
+            .form-line
                 .header
                     .title Window opacity
                 input(
                     type='range',
                     [(ngModel)]='config.store.appearance.opacity',
-                    (ngModelChange)='config.save()',
+                    (ngModelChange)='config.save(); (hostApp.platform === Platform.Linux && config.requestRestart())',
                     min='0.05',
                     max='1',
                     step='0.01'