Merge pull request #642 from weaveworks/controls-bar

Control bar below node details header

client/app/scripts/components/node-details-controls.js

@@ -5,17 +5,25 @@ const NodeControlButton = require('./node-control-button');
 const NodeDetailsControls = React.createClass({
 
   render: function() {
+    let spinnerClassName = 'fa fa-circle-o-notch fa-spin';
+    if (this.props.pending) {
+      spinnerClassName += ' node-details-controls-spinner';
+    } else {
+      spinnerClassName += ' node-details-controls-spinner hide';
+    }
+
     return (
       <div className="node-details-controls">
-        {this.props.error && <div className="node-details-controls-error" title={this.props.error}>
-          <span className="node-details-controls-error-icon fa fa-warning" />
-          <span className="node-details-controls-error-messages">{this.props.error}</span>
-        </div>}
         {this.props.controls && this.props.controls.map(control => {
           return (
             <NodeControlButton control={control} pending={this.props.pending} />
           );
         })}
+        {this.props.controls && <span title="Applying..." className={spinnerClassName}></span>}
+        {this.props.error && <div className="node-details-controls-error" title={this.props.error}>
+          <span className="node-details-controls-error-icon fa fa-warning" />
+          <span className="node-details-controls-error-messages">{this.props.error}</span>
+        </div>}
       </div>
     );
   }

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

@@ -59,15 +59,19 @@ const NodeDetails = React.createClass({
       return this.renderLoading();
     }
 
-    const style = {
-      'backgroundColor': this.getNodeColorDark(details.label_major)
+    const nodeColor = this.getNodeColorDark(details.label_major);
+    const styles = {
+      controls: {
+        'backgroundColor': this.brightenColor(nodeColor)
+      },
+      header: {
+        'backgroundColor': nodeColor
+      }
     };
 
     return (
       <div className="node-details">
-        <div className="node-details-header" style={style}>
-          <NodeDetailsControls controls={details.controls}
-            pending={this.props.controlPending} error={this.props.controlError} />
+        <div className="node-details-header" style={styles.header}>
           <h2 className="node-details-header-label truncate" title={details.label_major}>
             {details.label_major}
           </h2>
@@ -76,6 +80,11 @@ const NodeDetails = React.createClass({
           </div>
         </div>
 
+        {details.controls && details.controls.length > 0 && <div className="node-details-controls-wrapper" style={styles.controls}>
+          <NodeDetailsControls controls={details.controls}
+            pending={this.props.controlPending} error={this.props.controlError} />
+        </div>}
+
         <div className="node-details-content">
           {details.tables.map(function(table) {
             const key = _.snakeCase(table.title);

client/app/scripts/mixins/node-color-mixin.js

@@ -16,10 +16,21 @@ const NodeColorMixin = {
     let hsl = color.hsl();
 
     // ensure darkness
-    // if (hsl.l > 0.5) {
-    hsl = hsl.darker();
-    // }
+    if (hsl.l > 0.7) {
+      hsl = hsl.darker(1.5);
+    } else {
+      hsl = hsl.darker(1);
+    }
 
+    return hsl.toString();
+  },
+  brightenColor: function(color) {
+    let hsl = d3.rgb(color).hsl();
+    if (hsl.l > 0.5) {
+      hsl = hsl.brighter(0.5);
+    } else {
+      hsl = hsl.brighter(0.8);
+    }
     return hsl.toString();
   }
 };

client/app/styles/main.less

@@ -324,10 +324,12 @@ h2 {
   height: 100%;
   width: 100%;
   background-color: rgba(255, 255, 255, 0.86);
+  display: flex;
+  flex-flow: column;
 
   &-header {
 
-    padding: 24px 36px 24px 36px;
+    padding: 24px 36px 16px 36px;
 
     &-row {
       display: flex;
@@ -360,8 +362,10 @@ h2 {
 
   &-controls {
     white-space: nowrap;
-    text-align: right;
-    margin: -8px -8px 0 0;
+
+    &-wrapper {
+      padding: 8px 36px 8px 32px;
+    }
 
     .node-control-button {
       .palable;
@@ -384,10 +388,16 @@ h2 {
       }
     }
 
+    &-spinner {
+      .hideable;
+      color: @white;
+      margin-left: 8px;
+    }
+
     &-error {
       .truncate;
-      float: left;
-      width: 66%;
+      float: right;
+      width: 55%;
       padding-top: 6px;
       text-align: left;
       color: @white;
@@ -400,9 +410,7 @@ h2 {
   }
 
   &-content {
-    position: absolute;
-    top: 128px;
-    bottom: 0;
+    flex: 1;
     padding: 0 36px 0 36px;
     overflow-y: scroll;
     width: 100%;