From cc9c66c4a9cadd6e3151e69a554ae3442018a375 Mon Sep 17 00:00:00 2001 From: Eugene Pankov Date: Thu, 2 Aug 2018 10:34:46 -0700 Subject: [PATCH] Vibrancy (fixes #5) (#383) --- app/index.pug | 2 +- app/main.js | 16 +++- app/src/preload.scss | 4 + scripts/build-native.js | 5 ++ scripts/vars.js | 2 +- .../src/components/appRoot.component.pug | 10 +-- .../src/components/appRoot.component.scss | 5 +- .../src/components/appRoot.component.ts | 9 +++ terminus-core/src/configDefaults.yaml | 2 + terminus-core/src/theme.scss | 80 +++++++++---------- .../src/components/settingsTab.component.pug | 36 +++++++++ .../src/components/settingsTab.component.ts | 3 +- .../src/components/terminalTab.component.ts | 5 +- 13 files changed, 120 insertions(+), 59 deletions(-) diff --git a/app/index.pug b/app/index.pug index 82238d51..5f95f5ac 100644 --- a/app/index.pug +++ b/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 diff --git a/app/main.js b/app/main.js index bcadcf6d..45eb3f3d 100644 --- a/app/main.js +++ b/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') { diff --git a/app/src/preload.scss b/app/src/preload.scss index c9b65145..191e4a59 100644 --- a/app/src/preload.scss +++ b/app/src/preload.scss @@ -66,3 +66,7 @@ [ngbradiogroup] input[type="radio"] { display: none; } + +body { + background: #131d27; +} diff --git a/scripts/build-native.js b/scripts/build-native.js index a136ac0d..a363ab22 100755 --- a/scripts/build-native.js +++ b/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, diff --git a/scripts/vars.js b/scripts/vars.js index a9906299..edd97cb2 100755 --- a/scripts/vars.js +++ b/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 diff --git a/terminus-core/src/components/appRoot.component.pug b/terminus-core/src/components/appRoot.component.pug index 822230e1..caa16f7f 100644 --- a/terminus-core/src/components/appRoot.component.pug +++ b/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)', ) diff --git a/terminus-core/src/components/appRoot.component.scss b/terminus-core/src/components/appRoot.component.scss index de910495..7a0d9e16 100644 --- a/terminus-core/src/components/appRoot.component.scss +++ b/terminus-core/src/components/appRoot.component.scss @@ -66,8 +66,9 @@ $tab-border-radius: 4px; } } - &.inset { - padding-left: 85px; + & > .inset { + width: 85px; + flex: none; } window-controls { diff --git a/terminus-core/src/components/appRoot.component.ts b/terminus-core/src/components/appRoot.component.ts index bd0648e7..adbe7529 100644 --- a/terminus-core/src/components/appRoot.component.ts +++ b/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) + } } diff --git a/terminus-core/src/configDefaults.yaml b/terminus-core/src/configDefaults.yaml index 101b8968..d435a8e4 100644 --- a/terminus-core/src/configDefaults.yaml +++ b/terminus-core/src/configDefaults.yaml @@ -7,3 +7,5 @@ appearance: theme: Standard frame: thin css: '/* * { color: blue !important; } */' + opacity: 1.0 + vibrancy: false diff --git a/terminus-core/src/theme.scss b/terminus-core/src/theme.scss index a7fb58c8..3c52bf2d 100644 --- a/terminus-core/src/theme.scss +++ b/terminus-core/src/theme.scss @@ -15,9 +15,10 @@ $pink: #ff5b77 !default; $purple: #613d7c !default; -$body-bg: #1D272D; -$body-bg2: #131d27; -$body-bg3: #20333e; +$content-bg: rgba(39, 49, 60, 0.65); //#1D272D; +$content-bg-solid: #1D272D; +$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-border-color: $body-bg2; +$modal-content-bg: $content-bg-solid; +$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%); } - &:active { background: darken($body-bg3, 15%); } + &:hover { background: darken($body-bg2, 5%); } + &: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; diff --git a/terminus-settings/src/components/settingsTab.component.pug b/terminus-settings/src/components/settingsTab.component.pug index 1b5e9942..beed783c 100644 --- a/terminus-settings/src/components/settingsTab.component.pug +++ b/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 diff --git a/terminus-settings/src/components/settingsTab.component.ts b/terminus-settings/src/components/settingsTab.component.ts index 29b6f7a9..689c580b 100644 --- a/terminus-settings/src/components/settingsTab.component.ts +++ b/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, diff --git a/terminus-terminal/src/components/terminalTab.component.ts b/terminus-terminal/src/components/terminalTab.component.ts index 0fc8140b..445ec471 100644 --- a/terminus-terminal/src/components/terminalTab.component.ts +++ b/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)