diff --git a/client/app/scripts/components/terminal-app.js b/client/app/scripts/components/terminal-app.js index b48da142d..34f15efaf 100644 --- a/client/app/scripts/components/terminal-app.js +++ b/client/app/scripts/components/terminal-app.js @@ -2,7 +2,9 @@ import React from 'react'; import { connect } from 'react-redux'; import Terminal from './terminal'; -import { receiveControlPipeFromParams } from '../actions/app-actions'; +import { receiveControlPipeFromParams, hitEsc } from '../actions/app-actions'; + +const ESC_KEY_CODE = 27; class TerminalApp extends React.Component { @@ -18,6 +20,28 @@ class TerminalApp extends React.Component { titleBarColor: params.titleBarColor, statusBarColor: params.statusBarColor }; + + this.onKeyUp = this.onKeyUp.bind(this); + } + + componentDidMount() { + window.addEventListener('keyup', this.onKeyUp); + } + + componentWillUnmount() { + window.removeEventListener('keyup', this.onKeyUp); + } + + onKeyUp(ev) { + if (ev.keyCode === ESC_KEY_CODE) { + this.props.hitEsc(); + } + } + + componentWillReceiveProps(nextProps) { + if (!nextProps.controlPipe) { + window.close(); + } } render() { @@ -44,5 +68,5 @@ function mapStateToProps(state) { export default connect( mapStateToProps, - { receiveControlPipeFromParams } + { receiveControlPipeFromParams, hitEsc } )(TerminalApp); diff --git a/client/app/scripts/components/terminal.js b/client/app/scripts/components/terminal.js index 617b2e662..a514a7b3b 100644 --- a/client/app/scripts/components/terminal.js +++ b/client/app/scripts/components/terminal.js @@ -210,11 +210,7 @@ class Terminal extends React.Component { handleCloseClick(ev) { ev.preventDefault(); - if (this.isEmbedded()) { - this.props.dispatch(clickCloseTerminal(this.getPipeId(), true)); - } else { - window.close(); - } + this.props.dispatch(clickCloseTerminal(this.getPipeId(), true)); } handlePopoutTerminal(ev) { @@ -256,13 +252,17 @@ class Terminal extends React.Component { }; return (
-
- - -
- {this.getTitle()} +
+ + Pop out + + +
+ {this.getTitle()}
); } @@ -272,10 +272,10 @@ class Terminal extends React.Component { return (

Connection Closed

-

+

The connection to this container has been closed.
Close terminal
-

+
); } diff --git a/client/app/styles/main.less b/client/app/styles/main.less index e00bbdab6..12cab739b 100644 --- a/client/app/styles/main.less +++ b/client/app/styles/main.less @@ -1010,7 +1010,7 @@ h2 { right: 8px; top: 6px; - &-icon { + &-item, &-item-icon { .palable; padding: 4px 5px; color: @white; @@ -1018,11 +1018,21 @@ h2 { opacity: 0.7; border: 1px solid rgba(255, 255, 255, 0); border-radius: 10%; + + font-size: 0.8em; + font-weight: bold; + text-transform: uppercase; + word-spacing: -4px; + &:hover { opacity: 1; border-color: rgba(255, 255, 255, 0.6); } } + + &-item-icon { + font-size: 1em; + } } } @@ -1056,10 +1066,11 @@ h2 { margin: 4px 0; } - p { + &-message { margin: 4px 0; color: @white; } + .link { text-transform: uppercase; font-weight: bold;