Merge pull request #673 from weaveworks/667-close-details

Add x to close details panel again

client/app/scripts/components/details.js

@@ -1,15 +1,26 @@
 const React = require('react');
 
+const AppActions = require('../actions/app-actions');
 const NodeDetails = require('./node-details');
 
 const Details = React.createClass({
 
+  handleClickClose: function(ev) {
+    ev.preventDefault();
+    AppActions.clickCloseDetails();
+  },
+
   render: function() {
     return (
       <div id="details">
         <div style={{height: '100%', paddingBottom: 8, borderRadius: 2,
           backgroundColor: '#fff',
           boxShadow: '0 10px 30px rgba(0, 0, 0, 0.19), 0 6px 10px rgba(0, 0, 0, 0.23)'}}>
+          <div className="details-tools-wrapper">
+            <div className="details-tools">
+              <span className="fa fa-close" onClick={this.handleClickClose} />
+            </div>
+          </div>
           <NodeDetails {...this.props} />
         </div>
       </div>

client/app/styles/main.less

@@ -316,6 +316,33 @@ h2 {
   top: 24px;
   bottom: 48px;
   width: 420px;
+
+  .details-tools-wrapper {
+    position: relative;
+  }
+
+  .details-tools {
+    position: absolute;
+    top: 16px;
+    right: 24px;
+
+    span {
+      .palable;
+      padding: 4px;
+      margin-left: 2px;
+      font-size: 110%;
+      color: @white;
+      cursor: pointer;
+      opacity: 0.7;
+      border: 1px solid rgba(255, 255, 255, 0);
+      border-radius: 10%;
+
+      &:hover {
+        opacity: 1;
+        border-color: rgba(255, 255, 255, 0.6);
+      }
+    }
+  }
 }
 
 .node-details {
@@ -327,7 +354,7 @@ h2 {
 
   &-header {
 
-    padding: 24px 36px 16px 36px;
+    padding: 36px 36px 16px 36px;
 
     &-row {
       display: flex;