From 8a01f8a48ba1fef388a9062f3f10b3d44828bd86 Mon Sep 17 00:00:00 2001 From: Guillermo Rauch Date: Mon, 19 Sep 2016 08:47:33 +0200 Subject: [PATCH] Add window bgcolor updates (#524) * transparent + reactive background colors * refactor header to not set its own background color * make terms not set background color * dramatically improve tab borders * remove background color from electron windows * Revert "remove background color from electron windows" This reverts commit ca4de3c5dc28095f1a598f7ac79d4dff4b66ccd5. * put alpha first for electron * remove initial bg color setting, but maintain reactive one * fix --- app/index.js | 9 ++++-- app/utils/to-electron-background-color.js | 14 ++++++++++ lib/components/header.js | 4 +-- lib/components/tab.js | 34 ++++++++++------------- lib/components/tabs.js | 25 +++++++++++++---- lib/components/term.js | 6 +--- lib/components/terms.js | 1 - lib/containers/hyperterm.js | 3 +- 8 files changed, 59 insertions(+), 37 deletions(-) create mode 100644 app/utils/to-electron-background-color.js diff --git a/app/index.js b/app/index.js index aa51e29b..80107cda 100644 --- a/app/index.js +++ b/app/index.js @@ -7,7 +7,7 @@ const { parse: parseUrl } = require('url'); const fileUriToPath = require('file-uri-to-path'); const isDev = require('electron-is-dev'); const AutoUpdater = require('./auto-updater'); -const toHex = require('convert-css-color-name-to-hex'); +const toElectronBackgroundColor = require('./utils/to-electron-background-color'); const notify = require('./notify'); app.commandLine.appendSwitch('js-flags', '--harmony'); @@ -87,7 +87,7 @@ app.on('ready', () => { minWidth: 370, titleBarStyle: 'hidden-inset', title: 'HyperTerm', - backgroundColor: toHex(cfg.backgroundColor || '#000'), + backgroundColor: toElectronBackgroundColor(cfg.backgroundColor || '#000'), transparent: true, icon: resolve(__dirname, 'static/icon.png'), // we only want to show when the prompt @@ -110,8 +110,10 @@ app.on('ready', () => { const cfgUnsubscribe = config.subscribe(() => { const cfg_ = plugins.getDecoratedConfig(); + // notify renderer win.webContents.send('config change'); + // notify user that shell changes require new sessions if (cfg_.shell !== cfg.shell || cfg_.shellArgs !== cfg.shellArgs) { notify( 'Shell configuration changed!', @@ -119,6 +121,9 @@ app.on('ready', () => { ); } + // update background color if necessary + win.setBackgroundColor(toElectronBackgroundColor(cfg_.backgroundColor || '#000')); + cfg = cfg_; }); diff --git a/app/utils/to-electron-background-color.js b/app/utils/to-electron-background-color.js new file mode 100644 index 00000000..a76825ae --- /dev/null +++ b/app/utils/to-electron-background-color.js @@ -0,0 +1,14 @@ +const Color = require('color'); + +// returns a background color that's in hex +// format including the alpha channel (e.g.: `#00000050`) +// input can be any css value (rgb, hsl, string…) +module.exports = function toElectronBackgroundColor (bgColor) { + const color = Color(bgColor); + if (1 !== color.alpha()) { + // (╯°□°）╯︵ ┻━┻ + return '#' + Math.floor(color.alpha() * 100) + color.hexString().substr(1); + } else { + return color.hexString(); + } +}; diff --git a/lib/components/header.js b/lib/components/header.js index eca266c1..4c6f215a 100644 --- a/lib/components/header.js +++ b/lib/components/header.js @@ -65,7 +65,7 @@ export default class Header extends Component { } template (css) { - const { isMac, backgroundColor } = this.props; + const { isMac } = this.props; const props = getTabsProps(this.props, { tabs: this.props.tabs, borderColor: this.props.borderColor, @@ -73,7 +73,6 @@ export default class Header extends Component { onChange: this.onChangeIntent }); return
@@ -90,7 +89,6 @@ export default class Header extends Component { top: '1px', left: '1px', right: '1px', - background: '#000', zIndex: '100' }, diff --git a/lib/components/tab.js b/lib/components/tab.js index 20795129..2ec8f9d5 100644 --- a/lib/components/tab.js +++ b/lib/components/tab.js @@ -44,6 +44,7 @@ export default class Tab extends Component { 'tab', isFirst && 'first', isActive && 'active', + isFirst && isActive && 'firstActive', hasActivity && 'hasActivity' ) }> { this.props.customChildrenBefore } @@ -76,6 +77,11 @@ export default class Tab extends Component { return { tab: { color: '#ccc', + borderColor: '#ccc', + borderBottomWidth: 1, + borderBottomStyle: 'solid', + borderLeftWidth: 1, + borderLeftStyle: 'solid', listStyleType: 'none', flexGrow: 1, position: 'relative', @@ -85,20 +91,18 @@ export default class Tab extends Component { }, first: { - marginLeft: process.platform === 'darwin' ? 76 : 0 + borderLeftWidth: 0, + paddingLeft: 1 + }, + + firstActive: { + borderLeftWidth: 1, + paddingLeft: 0 }, active: { color: '#fff', - ':before': { - position: 'absolute', - content: '" "', - borderBottom: '1px solid #000', - display: 'block', - left: '0px', - right: '0px', - bottom: '-1px' - }, + borderBottomWidth: 0, ':hover': { color: '#fff' } @@ -117,8 +121,6 @@ export default class Tab extends Component { display: 'block', width: '100%', position: 'relative', - borderLeft: '1px solid transparent', - borderRight: '1px solid transparent', overflow: 'hidden' }, @@ -131,14 +133,6 @@ export default class Tab extends Component { textAlign: 'center' }, - textLast: { - borderRightWidth: 0 - }, - - textActive: { - borderColor: 'inherit' - }, - icon: { transition: `opacity .2s ease, color .2s ease, transform .25s ease, background-color .1s ease`, diff --git a/lib/components/tabs.js b/lib/components/tabs.js index d5209fcf..146b1050 100644 --- a/lib/components/tabs.js +++ b/lib/components/tabs.js @@ -4,6 +4,7 @@ import Component from '../component'; import { decorate, getTabProps } from '../utils/plugins'; const Tab = decorate(Tab_, 'Tab'); +const isMac = /Mac/.test(navigator.userAgent); export default class Tabs extends Component { @@ -21,8 +22,8 @@ export default class Tabs extends Component { tabs.length ? 1 === tabs.length ?
{ tabs[0].title }
- : + , + isMac &&
+ ] : null } { this.props.customChildren } @@ -60,6 +65,7 @@ export default class Tabs extends Component { verticalAlign: 'middle', color: '#9B9B9B', cursor: 'default', + position: 'relative', WebkitUserSelect: 'none', WebkitAppRegion: 'drag' }, @@ -70,10 +76,19 @@ export default class Tabs extends Component { }, list: { - borderBottom: '1px solid #333', maxHeight: '34px', display: 'flex', - flexFlow: 'row' + flexFlow: 'row', + marginLeft: isMac ? 76 : 0 + }, + + borderShim: { + position: 'absolute', + width: '76px', + bottom: 0, + borderColor: '#ccc', + borderBottomStyle: 'solid', + borderBottomWidth: '1px' } }; } diff --git a/lib/components/term.js b/lib/components/term.js index 9a69151d..37b488f1 100644 --- a/lib/components/term.js +++ b/lib/components/term.js @@ -32,7 +32,7 @@ export default class Term extends Component { this.term.prefs_.set('cursor-color', this.validateColor(props.cursorColor, 'rgba(255,255,255,0.5)')); this.term.prefs_.set('enable-clipboard-notice', false); this.term.prefs_.set('foreground-color', props.foregroundColor); - this.term.prefs_.set('background-color', props.backgroundColor); + this.term.prefs_.set('background-color', 'transparent'); this.term.prefs_.set('color-palette-overrides', getColorList(props.colors)); this.term.prefs_.set('user-css', this.getStylesheet(props.customCSS)); this.term.prefs_.set('scrollbar-visible', false); @@ -202,10 +202,6 @@ export default class Term extends Component { this.term.prefs_.set('foreground-color', nextProps.foregroundColor); } - if (this.props.backgroundColor !== nextProps.backgroundColor) { - this.term.prefs_.set('background-color', nextProps.backgroundColor); - } - if (this.props.fontFamily !== nextProps.fontFamily) { this.term.prefs_.set('font-family', nextProps.fontFamily); } diff --git a/lib/components/terms.js b/lib/components/terms.js index f7995fa9..454987f0 100644 --- a/lib/components/terms.js +++ b/lib/components/terms.js @@ -136,7 +136,6 @@ export default class Terms extends Component { fontFamily: this.props.fontFamily, fontSmoothing: this.props.fontSmoothing, foregroundColor: this.props.foregroundColor, - backgroundColor: this.props.backgroundColor, colors: this.props.colors, url: session.url, cleared: session.cleared, diff --git a/lib/containers/hyperterm.js b/lib/containers/hyperterm.js index 98a6b720..acd896f2 100644 --- a/lib/containers/hyperterm.js +++ b/lib/containers/hyperterm.js @@ -13,12 +13,13 @@ class HyperTerm extends Component { constructor (props) { super(props); this.focusActive = this.focusActive.bind(this); - document.body.style.backgroundColor = props.backgroundColor; this.onTermsRef = this.onTermsRef.bind(this); } componentWillReceiveProps (next) { if (this.props.backgroundColor !== next.backgroundColor) { + // this can be removed when `setBackgroundColor` in electron + // starts working again document.body.style.backgroundColor = next.backgroundColor; } }