GuanM/tabby
1
0
Fork 0
mirror of https://github.com/Eugeny/tabby.git synced 2025-06-08 05:20:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

Vibrancy (fixes #5) (#383)

Browse Source
This commit is contained in:
Eugene Pankov 2018-08-02 10:34:46 -07:00 committed by GitHub
parent 7e253d72ea
commit cc9c66c4a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 120 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/index.pug
View File

@ -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

16
app/main.js
View File

@ -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') {

4
app/src/preload.scss
View File

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

5
scripts/build-native.js
View File

@ -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,

2
scripts/vars.js
View File

@ -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

10
terminus-core/src/components/appRoot.component.pug
View File

@ -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)',
)

5
terminus-core/src/components/appRoot.component.scss
View File

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

9
terminus-core/src/components/appRoot.component.ts
View File

@ -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)
}
}

2
terminus-core/src/configDefaults.yaml
View File

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

76
terminus-core/src/theme.scss
View File

@ -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 {
&>.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 {
&>.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;

36
terminus-settings/src/components/settingsTab.component.pug
View File

@ -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

3
terminus-settings/src/components/settingsTab.component.ts
View File

@ -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,

5
terminus-terminal/src/components/terminalTab.component.ts
View File

@ -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)