Animate terminal appearance, slide in from details panel.

- Terminal shadow has been lost.

client/app/scripts/components/details-card.js

@@ -46,7 +46,11 @@ class DetailsCard extends React.Component {
         transform = `translateX(${shiftX}px)`;
       }
     }
-    const style = {transform, left: showingTerminal ? 36 : null};
+    const style = {
+      transform,
+      left: showingTerminal ? 36 : null,
+      width: showingTerminal ? null : 420
+    };
     return (
       <div className="details-wrapper" style={style}>
         {showingTerminal && <EmbeddedTerminal />}

client/app/scripts/components/embedded-terminal.js

@@ -5,6 +5,36 @@ import { brightenColor, getNodeColorDark } from '../utils/color-utils';
 import Terminal from './terminal';
 
 class EmeddedTerminal extends React.Component {
+
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      mounted: null,
+      animated: null,
+    };
+
+    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
+  }
+
+  componentDidMount() {
+    setTimeout(() => {
+      this.setState({mounted: true});
+    });
+  }
+
+  getTransform() {
+    //
+    // lazy but close enough for a quick transition
+    //
+    const dx = this.state.mounted ? 0 : window.innerWidth - 420;
+    console.log('dx', dx);
+    return `translateX(${dx}px)`;
+  }
+
+  handleTransitionEnd() {
+    this.setState({ animated: true });
+  }
+
   render() {
     const { pipe, details } = this.props;
     const nodeId = pipe.get('nodeId');
@@ -18,9 +48,18 @@ class EmeddedTerminal extends React.Component {
     // the term.js and creating a new one for the new pipe.
     return (
       <div className="terminal-embedded">
-        <Terminal key={pipe.get('id')} pipe={pipe} titleBarColor={titleBarColor}
-          statusBarColor={statusBarColor}
-          title={title} />
+        <div
+          onTransitionEnd={this.handleTransitionEnd}
+          className="terminal-animation-wrapper"
+          style={{transform: this.getTransform()}} >
+          <Terminal
+            key={pipe.get('id')}
+            pipe={pipe}
+            connect={this.state.animated}
+            titleBarColor={titleBarColor}
+            statusBarColor={statusBarColor}
+            title={title} />
+        </div>
       </div>
     );
   }

client/app/scripts/components/terminal.js

@@ -141,7 +141,19 @@ class Terminal extends React.Component {
     this.socket = socket;
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (this.props.connect !== nextProps.connect && nextProps.connect) {
+      this.mountTerminal();
+    }
+  }
+
   componentDidMount() {
+    if (this.props.connect) {
+      this.mountTerminal();
+    }
+  }
+
+  mountTerminal() {
     this.term = new Term({
       cols: this.state.cols,
       rows: this.state.rows,
@@ -341,4 +353,10 @@ class Terminal extends React.Component {
   }
 }
 
+
+Terminal.defaultProps = {
+  connect: true
+};
+
+
 export default connect()(Terminal);

client/app/styles/main.less

@@ -584,7 +584,6 @@ h2 {
     top: 24px;
     bottom: 48px;
     transition: transform 0.33333s cubic-bezier(0,0,0.21,1);
-    .shadow-2;
   }
 }
 
@@ -598,6 +597,7 @@ h2 {
   padding-bottom: 2px;
   border-radius: 2px;
   background-color: #fff;
+  .shadow-2;
 
   &:last-child {
     margin-bottom: 0;
@@ -982,6 +982,13 @@ h2 {
   &-embedded {
     position: relative;
     flex: 1;
+    overflow-x: hidden;
+  }
+
+  &-animation-wrapper {
+    width: 100%;
+    height: 100%;
+    transition: transform 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000);
   }
 
   &-wrapper {