From e222f98be6afa10fac2cc0f67cb218aaa63b64fc Mon Sep 17 00:00:00 2001
From: dzannotti <d.zannotti@me.com>
Date: Tue, 11 Aug 2015 23:00:54 +0100
Subject: [PATCH] added disabled state to button, and always show all buttons
 even if disabled

---
 src/react/LogMonitor.js       | 12 +++---------
 src/react/LogMonitorButton.js | 22 +++++++++++++++++++---
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/react/LogMonitor.js b/src/react/LogMonitor.js
index fc738e91..e2b482e6 100644
--- a/src/react/LogMonitor.js
+++ b/src/react/LogMonitor.js
@@ -161,15 +161,9 @@ export default class LogMonitor {
       <div style={{...styles.container, backgroundColor: theme.base00}}>
         <div style={styles.buttonBar}>
           <LogMonitorButton theme={theme} onClick={::this.handleReset}>Reset</LogMonitorButton>
-          {computedStates.length > 1 &&
-            <LogMonitorButton theme={theme} onClick={::this.handleRollback}>Revert</LogMonitorButton>
-          }
-          {Object.keys(skippedActions).some(key => skippedActions[key]) &&
-            <LogMonitorButton theme={theme} onClick={::this.handleSweep}>Sweep</LogMonitorButton>
-          }
-          {computedStates.length > 1 &&
-            <LogMonitorButton theme={theme} onClick={::this.handleCommit}>Commit</LogMonitorButton>
-          }
+          <LogMonitorButton theme={theme} onClick={::this.handleRollback} enabled={computedStates.length}>Revert</LogMonitorButton>
+          <LogMonitorButton theme={theme} onClick={::this.handleSweep} enabled={Object.keys(skippedActions).some(key => skippedActions[key])}>Sweep</LogMonitorButton>
+          <LogMonitorButton theme={theme} onClick={::this.handleCommit} enabled={computedStates.length > 1}>Commit</LogMonitorButton>
         </div>
         <div style={styles.elements} ref="elements">
           {elements}
diff --git a/src/react/LogMonitorButton.js b/src/react/LogMonitorButton.js
index 81714bfc..b5a4d34e 100644
--- a/src/react/LogMonitorButton.js
+++ b/src/react/LogMonitorButton.js
@@ -37,22 +37,38 @@ export default class LogMonitorButton extends React.Component {
     this.setState({ active: false });
   }
 
+  onClick() {
+    if (!this.props.enabled) {
+      return;
+    }
+    if (this.props.onClick) {
+      this.props.onClick();
+    }
+  }
+
   render() {
     let style = {
-      ...styles.base
+      ...styles.base,
+      backgroundColor: this.props.theme.base01
     };
-    if (this.state.hovered) {
+    if (this.props.enabled && this.state.hovered) {
       style = {
         ...style,
         backgroundColor: this.props.theme.base00
       };
     }
+    if (!this.props.enabled) {
+      style = {
+        ...style,
+        opacity: 0.5
+      }
+    }
     return (
       <a onMouseEnter={::this.handleMouseEnter}
           onMouseLeave={::this.handleMouseLeave}
           onMouseDown={::this.handleMouseDown}
           onMouseUp={::this.handleMouseUp}
-          style={style} onClick={this.props.onClick}>
+          style={style} onClick={::this.onClick}>
         {this.props.children}
       </a>
     );