Merge e993425245 into b1367c61d4

src/react/LogMonitor.js

@@ -1,6 +1,12 @@
 import React, { PropTypes, findDOMNode } from 'react';
 import LogMonitorEntry from './LogMonitorEntry';
 
+const ulStyle = {
+   listStyle: "none",
+   padding: "20px 0 20px",
+   position: "relative"
+};
+
 export default class LogMonitor {
   constructor() {
     if (typeof window !== 'undefined') {
@@ -137,7 +143,9 @@ export default class LogMonitor {
             </a>
           </div>
         </div>
+         <ul style={ulStyle}>
             {elements}
+         </ul>
         <div>
           {computedStates.length > 1 &&
             <a onClick={::this.handleRollback}

src/react/LogMonitorEntry.js

@@ -1,4 +1,40 @@
-import React, { PropTypes } from 'react';
+import React, { PropTypes, Component } from 'react';
+
+const preStyle = {
+   backgroundColor: "transparent",
+   color: "white",
+   border: 0,
+   margin: 0,
+   padding: 0
+};
+const h4Style = {
+   fontWeight: 500,
+   lineHeight: 1.1,
+   fontSize: "18px",
+   marginTop: "10px",
+   marginBottom: "10px"
+}
+const liStyle = {
+   marginBottom: "20px",
+   position: "relative"
+};
+const wrap1Style = {
+   whiteSpace: "nowrap",
+   overflow: "auto"
+};
+const wrap2Style = {
+   display: "table",
+   tableLayout: "fixed",
+   width: "100%"
+};
+const wrap3Style = {
+   width: "100%",
+   display: "table-cell"
+};
+const wrap3StyleMax = {
+   width: "800px",
+   display: "table-cell"
+};
 
 function hsvToRgb(h, s, v) {
    const i = Math.floor(h);
@@ -34,7 +70,15 @@ function colorFromString(token) {
    return hsvToRgb(h, s, v);
 }
 
-export default class LogMonitorEntry {
+export default class LogMonitorEntry extends Component {
+   constructor(props) {
+      super(props);
+      this.state = {
+         maximizedAction: false,
+         maximizedState: false
+      }
+   }
+
    static propTypes = {
       index: PropTypes.number.isRequired,
       state: PropTypes.object.isRequired,
@@ -49,7 +93,7 @@ export default class LogMonitorEntry {
       let errorText = error;
       if (!errorText) {
          try {
-        return JSON.stringify(this.props.select(state));
+            return JSON.stringify(this.props.select(state), null, 2);
          } catch (err) {
             errorText = 'Error selecting state.';
          }
@@ -64,7 +108,7 @@ export default class LogMonitorEntry {
       );
    }
 
-  handleActionClick() {
+   handleCollapseClick() {
       const { index, onActionClick } = this.props;
       if (index > 0) {
          onActionClick(index);
@@ -73,49 +117,72 @@ export default class LogMonitorEntry {
 
    render() {
       const { index, error, action, state, collapsed } = this.props;
+      const { maximizedAction, maximizedState } = this.state;
+      if (!action.type) {
+         return null;
+      }
       const { r, g, b } = colorFromString(action.type);
+      const colorStyle = {color: `rgb(${r}, ${g}, ${b})`};
+
+
+      // Heading
+      const actionComponent = !maximizedAction ? (
+         <h4 style={{...h4Style, color: `rgb(${r}, ${g}, ${b})`,}}>
+            {"+ " + action.type}
+         </h4>
+      ) : (
+         <pre style={preStyle}>
+           <a style={colorStyle}>
+              {"- " + JSON.stringify(action, null, 2)}
+           </a>
+        </pre>
+      );
+
+      // Action
+      const stateComponent = !maximizedState ? (
+         <h4 style={{...h4Style, color: "white"}}>
+            {"+ State: object {...}"}
+         </h4>
+      ) : (
+         <pre style={preStyle}>
+            {"- " + this.printState(state, error)}
+         </pre>
+      );
+
+      const collapsedComponent = !collapsed ? <span>&#10004; Enabled</span> : <span>&#10008; Disabled</span>;
 
       return (
-      <div style={{
-        textDecoration: collapsed ? 'line-through' : 'none'
-      }}>
-        <a onClick={::this.handleActionClick}
-           style={{
-             opacity: collapsed ? 0.5 : 1,
-             marginTop: '1em',
-             display: 'block',
-             paddingBottom: '1em',
-             paddingTop: '1em',
-             color: `rgb(${r}, ${g}, ${b})`,
-             cursor: (index > 0) ? 'pointer' : 'default',
-             WebkitUserSelect: 'none'
-           }}>
-          {JSON.stringify(action)}
+         <li style={liStyle}>
+            <div style={wrap1Style}>
+               <div style={wrap2Style}>
+                  <div style={maximizedAction || maximizedState ? wrap3StyleMax : wrap3Style}>
+                     <a onClick={::this.handleCollapseClick} href="javascript:;">
+                        {collapsedComponent}
+                     </a>
+                     <a onClick={()=>this.setState({maximizedAction: !maximizedAction})} href="javascript:;">
+                        {actionComponent}
+                     </a>
+                     <a onClick={()=>this.setState({maximizedState: !maximizedState})} href="javascript:;">
+                        {stateComponent}
                      </a>
-
-        {!collapsed &&
-          <p style={{
-            textAlign: 'center',
-            transform: 'rotate(180deg)'
-          }}>
-            ⇧
-          </p>
-        }
-
-        {!collapsed &&
-          <div style={{
-            paddingBottom: '1em',
-            paddingTop: '1em',
-            color: 'lightyellow'
-          }}>
-            {this.printState(state, error)}
                   </div>
-        }
-
-        <hr style={{
-          marginBottom: '2em'
-        }} />
                </div>
+            </div>
+         </li>
       );
    }
 }
+function getTimestring(d) {
+   var x = document.getElementById("demo");
+   var h = addZero(d.getHours(), 2);
+   var m = addZero(d.getMinutes(), 2);
+   var s = addZero(d.getSeconds(), 2);
+   var ms = addZero(d.getMilliseconds(), 3);
+   return h + ":" + m + ":" + s + ":" + ms;
+}
+function addZero(x, n) {
+   if (x.toString().length < n) {
+      x = "0" + x;
+   }
+   return x;
+}