From 1a227489e3e87c91ddc41bf3818eb93bbd9b00f1 Mon Sep 17 00:00:00 2001
From: Benjamin Kniffler <bkniffler@me.com>
Date: Wed, 5 Aug 2015 03:13:43 +0200
Subject: [PATCH] Polished code, ready for processing (i guess)

---
 src/react/LogMonitor.js          |   4 +-
 src/react/LogMonitorEntries.less |  43 ++++++++++
 src/react/LogMonitorEntry.js     | 131 ++++++++++---------------------
 src/react/timeline.less          |  87 --------------------
 4 files changed, 86 insertions(+), 179 deletions(-)
 create mode 100644 src/react/LogMonitorEntries.less
 delete mode 100644 src/react/timeline.less

diff --git a/src/react/LogMonitor.js b/src/react/LogMonitor.js
index 904d61b5..ec3dc0dc 100644
--- a/src/react/LogMonitor.js
+++ b/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>
diff --git a/src/react/LogMonitorEntries.less b/src/react/LogMonitorEntries.less
new file mode 100644
index 00000000..9eeff48a
--- /dev/null
+++ b/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;
+   }
+}
diff --git a/src/react/LogMonitorEntry.js b/src/react/LogMonitorEntry.js
index 3ce04b55..a258e51d 100644
--- a/src/react/LogMonitorEntry.js
+++ b/src/react/LogMonitorEntry.js
@@ -38,8 +38,8 @@ export default class LogMonitorEntry extends Component {
    constructor(props) {
       super(props);
       this.state = {
-         maximized: false,
-         maximizedBody: false
+         maximizedAction: 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})`};
+
+      // Heading
+      let headingComponent = !maximizedAction ? (
+         <h4 style={{color: `rgb(${r}, ${g}, ${b})`,}}>
+            <i className="fa fa-plus-square"></i>
+            {" " + action.type}
+         </h4>
+      ) : (
+         <pre>
+           <a style={colorStyle}>
+              <i className="fa fa-minus-square"></i>
+              {JSON.stringify(action, null, 2)}
+           </a>
+        </pre>
+      );
+
+      // State
+      let stateComponent = !maximizedState ? (
+         <h4 style={{color: "white"}}>
+            <i className="fa fa-plus-square"></i>
+            {" State: object {...}"}
+         </h4>
+      ) : (
+         <pre>
+            <i className="fa fa-minus-square"></i>
+            {this.printState(state, error)}
+         </pre>
+      );
 
       return (
-         <li className="redux-timeline-inverted">
-            {/*<a className="timeline-badge" onClick={::this.handleCollapseClick} href="javascript:;">
-               <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:;">
+         <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 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>) :
-                           (<pre className="redux-timeline-pre">
-                             <a style={{color: `rgb(${r}, ${g}, ${b})`,}}>
-                                <i className="fa fa-minus-square"></i>
-                                {JSON.stringify(action, null, 2)}
-                             </a>
-                          </pre>)
-                        }
+                     <a onClick={()=>this.setState({maximizedAction: !maximizedAction})} href="javascript:;">
+                        {headingComponent}
                      </a>
-                     <a className="redux-timeline-body" onClick={::this.handleMaximizeBodyClick} href="javascript:;">
-                        {!maximizedBody ?
-                           (<h4 class="redux-timeline-title" style={{color: "white"}}>
-                              <i className="fa fa-plus-square"></i>
-                              {" State: object {...}"}
-                           </h4>) :
-                           (<pre className="redux-timeline-pre">
-                              <i className="fa fa-minus-square"></i>
-                             {this.printState(state, error)}
-                           </pre>)
-                        }
+                     <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) {
diff --git a/src/react/timeline.less b/src/react/timeline.less
deleted file mode 100644
index 6fc3b49c..00000000
--- a/src/react/timeline.less
+++ /dev/null
@@ -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;
-}