Merge pull request #1790 from weaveworks/1639-add-term-popout-tooltip

Adds tooltip to terminal-popout button

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

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 (
       <div className="terminal-header" style={style}>
-          <div className="terminal-header-tools">
-            <span className="terminal-header-tools-icon fa fa-external-link"
-              onClick={this.handlePopoutTerminal} />
-            <span className="terminal-header-tools-icon fa fa-close"
-              onClick={this.handleCloseClick} />
-          </div>
-          <span className="terminal-header-title">{this.getTitle()}</span>
+        <div className="terminal-header-tools">
+          <span
+            title="Open in new browser window"
+            className="terminal-header-tools-item"
+            onClick={this.handlePopoutTerminal}>
+          Pop out
+          </span>
+          <span title="Close" className="terminal-header-tools-item-icon fa fa-close"
+            onClick={this.handleCloseClick} />
+        </div>
+        <span className="terminal-header-title">{this.getTitle()}</span>
       </div>
     );
   }
@@ -272,10 +272,10 @@ class Terminal extends React.Component {
       return (
         <div>
           <h3>Connection Closed</h3>
-          <p>
+          <div className="termina-status-bar-message">
             The connection to this container has been closed.
             <div className="link" onClick={this.handleCloseClick}>Close terminal</div>
-          </p>
+          </div>
         </div>
       );
     }

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;