Vibrancy (fixes #5) (#383)

app/index.pug

@@ -9,7 +9,7 @@ html
         script(src='./preload.js')
         script(src='./bundle.js', defer)
         style#custom-css
-    body(style='background: ; min-height: 100vh; overflow: hidden')
+    body(style='min-height: 100vh; overflow: hidden')
         app-root
             .preload-logo
                 div

app/main.js

@@ -1,5 +1,7 @@
 if (process.platform == 'win32' && require('electron-squirrel-startup')) process.exit(0)
+
 const electron = require('electron')
+
 if (process.argv.indexOf('--debug') !== -1) {
     require('electron-debug')({enabled: true, showDevTools: 'undocked'})
 }
@@ -217,7 +219,7 @@ start = () => {
         //- background to avoid the flash of unstyled window
         backgroundColor: '#131d27',
         frame: false,
-        //type: 'toolbar',
+        show: false,
     }
     Object.assign(options, windowConfig.get('windowBoundaries'))
 
@@ -229,18 +231,24 @@ start = () => {
         }
     }
 
+    if (['darwin', 'win32'].includes(process.platform)) {
+      options.transparent = true
+      delete options.backgroundColor
+    }
+
     app.commandLine.appendSwitch('disable-http-cache')
 
     app.window = new electron.BrowserWindow(options)
+    app.window.once('ready-to-show', () => {
+      app.window.show()
+      app.window.focus()
+    })
     app.window.loadURL(`file://${app.getAppPath()}/dist/index.html`, {extraHeaders: "pragma: no-cache\n"})
 
     if (process.platform != 'darwin') {
         app.window.setMenu(null)
     }
 
-    app.window.show()
-    app.window.focus()
-
     setupWindowManagement()
 
     if (process.platform == 'darwin') {

app/src/preload.scss

@@ -66,3 +66,7 @@
 [ngbradiogroup] input[type="radio"] {
     display: none;
 }
+
+body {
+    background: #131d27;
+}

scripts/build-native.js

@@ -3,6 +3,11 @@ const rebuild = require('electron-rebuild').default
 const path = require('path')
 const vars = require('./vars')
 
+rebuild({
+  buildPath: path.resolve(__dirname, '../app'),
+  electronVersion: vars.electronVersion,
+  force: true,
+})
 rebuild({
   buildPath: path.resolve(__dirname, '../terminus-ssh'),
   electronVersion: vars.electronVersion,

scripts/vars.js

@@ -20,5 +20,5 @@ exports.bundledModules = [
   '@angular',
   '@ng-bootstrap',
 ]
-exports.nativeModules = ['node-pty-tmp', 'font-manager', 'xkeychain']
+exports.nativeModules = ['node-pty-tmp', 'font-manager', 'xkeychain', 'electron-vibrancy']
 exports.electronVersion = pkgInfo.devDependencies.electron

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

@@ -8,8 +8,8 @@ title-bar(
 )
     .tab-bar(
         *ngIf='!hostApp.isFullScreen',
-        [class.inset]='hostApp.platform == Platform.macOS && config.store.appearance.frame == "thin" && config.store.appearance.tabsLocation == "top"'
     )
+        .inset.background(*ngIf='hostApp.platform == Platform.macOS && config.store.appearance.frame == "thin" && config.store.appearance.tabsLocation == "top"')
         .tabs
             tab-header(
                 *ngFor='let tab of app.tabs; let idx = index',
@@ -22,7 +22,7 @@ title-bar(
                 (click)='app.selectTab(tab)',
             )
 
-        .btn-group
+        .btn-group.background
             button.btn.btn-secondary.btn-tab-bar(
                 *ngFor='let button of leftToolbarButtons',
                 [title]='button.title',
@@ -30,9 +30,9 @@ title-bar(
             )
                 i.fa([class]='"fa fa-" + button.icon')
 
-        .drag-space([class.persistent]='config.store.appearance.frame == "thin" && hostApp.platform != Platform.macOS')
+        .drag-space.background([class.persistent]='config.store.appearance.frame == "thin" && hostApp.platform != Platform.macOS')
 
-        .btn-group
+        .btn-group.background
             button.btn.btn-secondary.btn-tab-bar(
                 *ngFor='let button of rightToolbarButtons',
                 [title]='button.title',
@@ -47,7 +47,7 @@ title-bar(
                 i.fa.fa-arrow-up.text-info
                 span.text-info Update
 
-        window-controls(
+        window-controls.background(
             *ngIf='config.store.appearance.frame == "thin" && (hostApp.platform == Platform.Windows || hostApp.platform == Platform.Linux)',
         )
 

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

@@ -66,8 +66,9 @@ $tab-border-radius: 4px;
         }
     }
 
-    &.inset {
+    & > .inset {
-        padding-left: 85px;
+        width: 85px;
+        flex: none;
     }
 
     window-controls {

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

@@ -126,6 +126,9 @@ export class AppRootComponent {
         })
 
         this.touchbar.update()
+
+        config.changed$.subscribe(() => this.updateVibrancy())
+        this.updateVibrancy()
     }
 
     onGlobalHotkey () {
@@ -189,4 +192,10 @@ export class AppRootComponent {
             .filter((button) => (button.weight > 0) === aboveZero)
             .sort((a: IToolbarButton, b: IToolbarButton) => (a.weight || 0) - (b.weight || 0))
     }
+
+    private updateVibrancy () {
+        document.body.classList.toggle('vibrant', 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)
+    }
 }

terminus-core/src/configDefaults.yaml

@@ -7,3 +7,5 @@ appearance:
   theme: Standard
   frame: thin
   css: '/* * { color: blue !important; } */'
+  opacity: 1.0
+  vibrancy: false

terminus-core/src/theme.scss

@@ -15,9 +15,10 @@ $pink:   #ff5b77 !default;
 $purple: #613d7c !default;
 
 
-$body-bg: #1D272D;
+$content-bg: rgba(39, 49, 60, 0.65); //#1D272D;
-$body-bg2: #131d27;
+$content-bg-solid: #1D272D;
-$body-bg3: #20333e;
+$body-bg: #131d27;
+$body-bg2: #20333e;
 
 $body-color: #aaa;
 $font-family-sans-serif: "Source Sans Pro";
@@ -31,10 +32,10 @@ $btn-secondary-border:           #444;
 //$btn-warning-bg:                 rgba($orange, .5);
 
 
-$nav-tabs-border-color:                       $body-bg2;
+$nav-tabs-border-color:                       $body-bg;
 $nav-tabs-border-width:                       1px;
 $nav-tabs-border-radius:                      0;
-$nav-tabs-link-hover-border-color:            $body-bg2;
+$nav-tabs-link-hover-border-color:            $body-bg;
 $nav-tabs-active-link-hover-color:            $white;
 $nav-tabs-active-link-hover-bg:               $blue;
 $nav-tabs-active-link-hover-border-color:     darken($blue, 30%);
@@ -52,20 +53,20 @@ $input-bg-focus:                 $input-bg;
 //$input-border-focus:             lighten($brand-primary, 25%);
 //$input-box-shadow-focus:         $input-box-shadow, rgba($input-border-focus, .6);
 $input-color-focus:              $input-color;
-$input-group-addon-bg:           $body-bg2;
+$input-group-addon-bg:           $body-bg;
 $input-group-addon-border-color: $input-border-color;
 
-$modal-content-bg:               $body-bg;
+$modal-content-bg:               $content-bg-solid;
-$modal-content-border-color:     $body-bg2;
+$modal-content-border-color:     $body-bg;
 $modal-header-border-color:      transparent;
 $modal-footer-border-color:      transparent;
 
-$popover-bg:                     $body-bg2;
+$popover-bg:                     $body-bg;
 
-$dropdown-bg:                    $body-bg2;
+$dropdown-bg:                    $body-bg;
 $dropdown-link-color:            $body-color;
 $dropdown-link-hover-color:      #333;
-$dropdown-link-hover-bg:         $body-bg3;
+$dropdown-link-hover-bg:         $body-bg2;
 //$dropdown-link-active-color:     $component-active-color;
 //$dropdown-link-active-bg:        $component-active-bg;
 $dropdown-link-disabled-color:   #333;
@@ -80,7 +81,7 @@ $list-group-link-active-bg: rgba(255,255,255,.2);
 $pre-bg: $dropdown-bg;
 $pre-color: $dropdown-link-color;
 
-$alert-danger-bg: $body-bg2;
+$alert-danger-bg: $body-bg;
 $alert-danger-text: $red;
 $alert-danger-border: $red;
 
@@ -89,10 +90,6 @@ $headings-color: #eee;
 
 @import '~bootstrap/scss/bootstrap.scss';
 
-title-bar {
-    background: $body-bg2;
-}
-
 window-controls {
     svg {
         transition: 0.25s fill;
@@ -110,35 +107,32 @@ window-controls {
 
 $border-color: #111;
 
+body {
+    background: $body-bg;
+
+    &.vibrant {
+        background: rgba($body-bg, 0.65);
+    }
+}
+
 app-root  {
     &> .content {
-        background: $body-bg2;
-
         .tab-bar {
             .btn-tab-bar {
                 &:not(:hover):not(:active) {
-                    background: $body-bg2;
+                    background: transparent;
                 }
             }
 
-            .drag-space {
-                background: $body-bg2;
-            }
-
             &>.tabs {
-                &:empty {
-                    background: $body-bg2;
-                }
-
                 tab-header {
-                    background: $body-bg2;
                     border-left: 1px solid transparent;
                     border-right: 1px solid transparent;
 
                     transition: 0.25s all;
 
                     .index {
-                        color: #555;
+                        color: #888;
                     }
 
                     button {
@@ -152,7 +146,7 @@ app-root  {
 
                     &.active {
                         color: white;
-                        background: $body-bg;
+                        background: $content-bg;
                         border-left: 1px solid $border-color;
                         border-right: 1px solid $border-color;
                     }
@@ -161,11 +155,12 @@ app-root  {
         }
 
         &.tabs-on-top .tab-bar {
-            border-bottom: 1px solid $border-color;
+            &>.background {
+                border-bottom: 1px solid $border-color;
+            }
 
             tab-header {
                 border-bottom: 1px solid $border-color;
-                margin-bottom: -1px;
 
                 &.active {
                     border-bottom-color: transparent;
@@ -178,11 +173,12 @@ app-root  {
         }
 
         &:not(.tabs-on-top) .tab-bar {
-            border-top: 1px solid $border-color;
+            &>.background {
+                border-top: 1px solid $border-color;
+            }
 
             tab-header {
                 border-top: 1px solid $border-color;
-                margin-top: -1px;
 
                 &.active {
                     margin-top: -1px;
@@ -204,14 +200,14 @@ app-root  {
 }
 
 tab-body {
-    background: $body-bg;
+    background: $content-bg;
 }
 
 settings-tab > ngb-tabset {
-    border-right: 1px solid $body-bg2;
+    border-right: 1px solid $body-bg;
 
     & > .nav {
-        background: $body-bg3;
+        background: $body-bg2;
 
         & > .nav-item > .nav-link {
             border-left: none;
@@ -239,7 +235,7 @@ settings-tab > ngb-tabset {
 
 multi-hotkey-input {
     .item {
-        background: $body-bg3;
+        background: $body-bg2;
         border: 1px solid $blue;
         border-radius: 3px;
         margin-right: 5px;
@@ -249,7 +245,7 @@ multi-hotkey-input {
 
             .stroke {
                 padding: 0 6px;
-                border-right: 1px solid $body-bg;
+                border-right: 1px solid $content-bg;
             }
         }
 
@@ -264,8 +260,8 @@ multi-hotkey-input {
     }
 
     .add, .item .body, .item .remove {
-        &:hover { background: darken($body-bg3, 5%); }
+        &:hover { background: darken($body-bg2, 5%); }
-        &:active { background: darken($body-bg3, 15%); }
+        &:active { background: darken($body-bg2, 15%); }
     }
 }
 
@@ -278,7 +274,7 @@ hotkey-input-modal {
         height: 55px;
 
         .stroke {
-            background: $body-bg3;
+            background: $body-bg2;
             border: 1px solid $blue;
             border-radius: 3px;
             margin-right: 10px;

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

@@ -38,6 +38,42 @@ ngb-tabset.vertical(type='tabs', [activeId]='activeTab')
                                     [value]='"bottom"'
                                 )
                                 | At the bottom
+
+                    .form-group(*ngIf='hostApp.platform === Platform.macOS')
+                        label Vibrancy
+                        br
+                        .btn-group(
+                            '[(ngModel)]'='config.store.appearance.vibrancy'
+                            '(ngModelChange)'='config.save()'
+                            ngbRadioGroup
+                        )
+                            label.btn.btn-secondary(ngbButtonLabel)
+                                input(
+                                    type='radio',
+                                    ngbButton,
+                                    [value]='true'
+                                )
+                                | Enable
+                            label.btn.btn-secondary(ngbButtonLabel)
+                                input(
+                                    type='radio',
+                                    ngbButton,
+                                    [value]='false'
+                                )
+                                | Disable
+
+                    .form-group(*ngIf='hostApp.platform !== Platform.Linux')
+                        label Opacity
+                        br
+                        input(
+                            type='range',
+                            '[(ngModel)]'='config.store.appearance.opacity',
+                            '(ngModelChange)'='config.save()',
+                            min='0.05',
+                            max='1',
+                            step='0.01'
+                        )                
+
                 .col.col-lg-6
                     .form-group
                         label Window frame

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

@@ -1,5 +1,5 @@
 import { Component, Inject, Input } from '@angular/core'
-import { ElectronService, DockingService, ConfigService, IHotkeyDescription, HotkeyProvider, BaseTabComponent, Theme, HostAppService } from 'terminus-core'
+import { ElectronService, DockingService, ConfigService, IHotkeyDescription, HotkeyProvider, BaseTabComponent, Theme, HostAppService, Platform } from 'terminus-core'
 
 import { SettingsTabProvider } from '../api'
 
@@ -16,6 +16,7 @@ export class SettingsTabComponent extends BaseTabComponent {
     hotkeyFilter = ''
     hotkeyDescriptions: IHotkeyDescription[]
     screens: any[]
+    Platform = Platform
 
     constructor (
         public config: ConfigService,

terminus-terminal/src/components/terminalTab.component.ts

@@ -2,7 +2,7 @@ import { Observable, BehaviorSubject, Subject, Subscription } from 'rxjs'
 import { first } from 'rxjs/operators'
 import { ToastrService } from 'ngx-toastr'
 import { Component, NgZone, Inject, Optional, ViewChild, HostBinding, Input } from '@angular/core'
-import { AppService, ConfigService, BaseTabComponent, ElectronService, ThemesService, HostAppService, HotkeysService, Platform } from 'terminus-core'
+import { AppService, ConfigService, BaseTabComponent, ElectronService, HostAppService, HotkeysService, Platform } from 'terminus-core'
 
 import { IShell } from '../api'
 import { Session, SessionsService } from '../services/sessions.service'
@@ -50,7 +50,6 @@ export class TerminalTabComponent extends BaseTabComponent {
     constructor (
         private zone: NgZone,
         private app: AppService,
-        private themes: ThemesService,
         private hostApp: HostAppService,
         private hotkeys: HotkeysService,
         private sessions: SessionsService,
@@ -393,7 +392,7 @@ export class TerminalTabComponent extends BaseTabComponent {
         } else {
             this.backgroundColor = null
             // hterm can't parse "transparent"
-            preferenceManager.set('background-color', this.themes.findCurrentTheme().terminalBackground)
+            preferenceManager.set('background-color', 'transparent')
         }
         if (config.terminal.colorScheme.colors) {
             preferenceManager.set('color-palette-overrides', config.terminal.colorScheme.colors)