Polished code, ready for processing (i guess)

src/react/LogMonitor.js

@@ -2,7 +2,7 @@ import React, { PropTypes, findDOMNode } from 'react';
 import LogMonitorEntry from './LogMonitorEntry';
 
 if(BROWSER){
-   require("./timeline.less");
+   require("./LogMonitorEntries.less");
 }
 export default class LogMonitor {
   constructor() {
@@ -138,7 +138,7 @@ export default class LogMonitor {
             </a>
           </div>
         </div>
-         <ul className="redux-timeline">
+         <ul className="redux-devtool-entries">
             {elements}
          </ul>
         <div>

src/react/LogMonitorEntries.less

@@ -0,0 +1,43 @@
+.redux-devtool-entries {
+   list-style: none;
+   padding: 20px 0 20px;
+   position: relative;
+   pre {
+      background-color: transparent;
+      color: white;
+      border: 0;
+      margin: 0;
+      padding: 0;
+   }
+   > li {
+      margin-bottom: 20px;
+      position: relative;
+   }
+   > li:before, > li:after {
+      content: " ";
+      display: table;
+   }
+   > li:after {
+      clear: both;
+   }
+   > li:before, > li:after {
+      content: " ";
+      display: table;
+   }
+   > li:after {
+      clear: both;
+   }
+   .wrap-1{
+      whiteSpace: nowrap;
+      overflow: auto;
+   }
+   .wrap-2{
+      display: table;
+      tableLayout: fixed;
+      width: 100%;
+   }
+   .wrap-3{
+      width: 400px;
+      display: table-cell;
+   }
+}

src/react/LogMonitorEntry.js

@@ -38,8 +38,8 @@ export default class LogMonitorEntry extends Component {
    constructor(props) {
       super(props);
       this.state = {
-         maximized: false,
+         maximizedAction: false,
-         maximizedBody: false
+         maximizedState: false
       }
    }
 
@@ -79,112 +79,63 @@ export default class LogMonitorEntry extends Component {
       }
    }
 
-   handleMaximizeClick() {
-      const { maximized } = this.state;
-      this.setState({maximized: !maximized});
-   }
-   handleMaximizeBodyClick() {
-      const { maximizedBody } = this.state;
-      this.setState({maximizedBody: !maximizedBody});
-   }
-
    render() {
       const { index, error, action, state, collapsed } = this.props;
-      const { maximized, maximizedBody } = this.state;
+      const { maximizedAction, maximizedState } = this.state;
       if (!action.type) {
          return null;
       }
       const { r, g, b } = colorFromString(action.type);
+      const colorStyle = {color: `rgb(${r}, ${g}, ${b})`};
 
-      return (
+      // Heading
-         <li className="redux-timeline-inverted">
+      let headingComponent = !maximizedAction ? (
-            {/*<a className="timeline-badge" onClick={::this.handleCollapseClick} href="javascript:;">
+         <h4 style={{color: `rgb(${r}, ${g}, ${b})`,}}>
-               <i className={"fa fa-" + (collapsed ? "ban" : "check")}></i>
-            </a>*/}
-            <div className="redux-timeline-panel" style={{whiteSpace: "nowrap", overflow: "auto"}}>
-               <div style={{display: "table", tableLayout: "fixed", width: "100%"}}>
-                  <div style={{ width: "400px", display: "table-cell"}}>
-                     <a className="redux-timeline-heading" onClick={::this.handleCollapseClick} href="javascript:;">
-                        <i className={"fa fa-" + (collapsed ? "ban" : "check")}></i>
-                        {!collapsed ? " Enabled" : " Disabled"}
-                     </a>
-                     <a className="redux-timeline-heading" onClick={::this.handleMaximizeClick} href="javascript:;">
-                        {!maximized ?
-                           (<h4 class="redux-timeline-title" style={{color: `rgb(${r}, ${g}, ${b})`,}}>
             <i className="fa fa-plus-square"></i>
             {" " + action.type}
-                           </h4>) :
+         </h4>
-                           (<pre className="redux-timeline-pre">
+      ) : (
-                             <a style={{color: `rgb(${r}, ${g}, ${b})`,}}>
+         <pre>
+           <a style={colorStyle}>
               <i className="fa fa-minus-square"></i>
               {JSON.stringify(action, null, 2)}
            </a>
-                          </pre>)
+        </pre>
-                        }
+      );
-                     </a>
+
-                     <a className="redux-timeline-body" onClick={::this.handleMaximizeBodyClick} href="javascript:;">
+      // State
-                        {!maximizedBody ?
+      let stateComponent = !maximizedState ? (
-                           (<h4 class="redux-timeline-title" style={{color: "white"}}>
+         <h4 style={{color: "white"}}>
             <i className="fa fa-plus-square"></i>
             {" State: object {...}"}
-                           </h4>) :
+         </h4>
-                           (<pre className="redux-timeline-pre">
+      ) : (
+         <pre>
             <i className="fa fa-minus-square"></i>
             {this.printState(state, error)}
-                           </pre>)
+         </pre>
-                        }
+      );
+
+      return (
+         <li>
+            <div className={"wrap-1"}>
+               <div className={"wrap-2"}>
+                  <div className={"wrap-3"}>
+                     <a onClick={::this.handleCollapseClick} href="javascript:;">
+                        <i className={"fa fa-" + (collapsed ? "ban" : "check")}></i>
+                        {!collapsed ? " Enabled" : " Disabled"}
+                     </a>
+                     <a onClick={()=>this.setState({maximizedAction: !maximizedAction})} href="javascript:;">
+                        {headingComponent}
+                     </a>
+                     <a onClick={()=>this.setState({maximizedState: !maximizedState})} href="javascript:;">
+                        {stateComponent}
                      </a>
                   </div>
                </div>
             </div>
          </li>
       );
-      return (
-         <pre style={{
-        textDecoration: collapsed ? 'line-through' : 'none',
-        backgroundColor: "transparent",
-        border: "0px"
-      }}>
-        <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, null, 2)}
-        </a>
-
-            {!collapsed &&
-            <p style={{
-            textAlign: 'center',
-            transform: 'rotate(180deg)',
-            color: 'lightyellow',
-            fontSize: "2em"
-          }}>
-               ⇧
-            </p>
-            }
-
-            {!collapsed &&
-            <div style={{
-            paddingBottom: '1em',
-            paddingTop: '1em',
-            color: 'lightyellow'
-          }}>
-               {this.printState(state, error)}
-            </div>
-            }
-
-            <hr style={{
-          marginBottom: '2em'
-        }}/>
-      </pre>
-      );
    }
 }
 function getTimestring(d) {

src/react/timeline.less

@@ -1,87 +0,0 @@
-.redux-timeline {
-   list-style: none;
-   padding: 20px 0 20px;
-   position: relative;
-}
-
-.redux-timeline-pre {
-   background-color: transparent;
-   color: white;
-   border: 0;
-   margin: 0;
-   padding: 0;
-}
-
-.redux-timeline > li {
-   margin-bottom: 20px;
-   position: relative;
-}
-
-.redux-timeline > li:before,
-.redux-timeline > li:after {
-   content: " ";
-   display: table;
-}
-
-.redux-timeline > li:after {
-   clear: both;
-}
-
-.redux-timeline > li:before,
-.redux-timeline > li:after {
-   content: " ";
-   display: table;
-}
-
-.redux-timeline > li:after {
-   clear: both;
-}
-
-.redux-timeline > li > .redux-timeline-panel {
-   width: 100%;
-   float: left;
-   border: 1px solid #d4d4d4;
-   border-radius: 2px;
-   padding: 5px;
-   position: relative;
-   -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
-   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
-}
-
-.redux-timeline > li.redux-timeline-inverted > .redux-timeline-panel {
-   float: right;
-}
-
-.redux-timeline-badge.primary {
-   background-color: #2e6da4 !important;
-}
-
-.redux-timeline-badge.success {
-   background-color: #3f903f !important;
-}
-
-.redux-timeline-badge.warning {
-   background-color: #f0ad4e !important;
-}
-
-.redux-timeline-badge.danger {
-   background-color: #d9534f !important;
-}
-
-.redux-timeline-badge.info {
-   background-color: #5bc0de !important;
-}
-
-.redux-timeline-title {
-   margin-top: 0;
-   //color: inherit;
-}
-
-.redux-timeline-body > p,
-.redux-timeline-body > ul {
-   margin-bottom: 0;
-}
-
-.redux-timeline-body > p + p {
-   margin-top: 5px;
-}