From e159133a21a0f2ce759bb7c13c549852797f5b47 Mon Sep 17 00:00:00 2001
From: Benjamin Kniffler <bkniffler@me.com>
Date: Wed, 5 Aug 2015 02:46:32 +0200
Subject: [PATCH] Another ugly coded draft, without the timeline, action &
 state separately expandable

---
 src/react/LogMonitor.js      |   2 +-
 src/react/LogMonitorEntry.js |  72 +++++++++--------
 src/react/timeline.less      | 146 +++++------------------------------
 3 files changed, 60 insertions(+), 160 deletions(-)

diff --git a/src/react/LogMonitor.js b/src/react/LogMonitor.js
index d3e05636..904d61b5 100644
--- a/src/react/LogMonitor.js
+++ b/src/react/LogMonitor.js
@@ -138,7 +138,7 @@ export default class LogMonitor {
             </a>
           </div>
         </div>
-         <ul className="timeline">
+         <ul className="redux-timeline">
             {elements}
          </ul>
         <div>
diff --git a/src/react/LogMonitorEntry.js b/src/react/LogMonitorEntry.js
index 07bae1e9..3ce04b55 100644
--- a/src/react/LogMonitorEntry.js
+++ b/src/react/LogMonitorEntry.js
@@ -39,7 +39,7 @@ export default class LogMonitorEntry extends Component {
       super(props);
       this.state = {
          maximized: false,
-         time: new Date()
+         maximizedBody: false
       }
    }
 
@@ -83,56 +83,60 @@ export default class LogMonitorEntry extends Component {
       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, time } = this.state;
+      const { maximized, maximizedBody } = this.state;
       if (!action.type) {
          return null;
       }
       const { r, g, b } = colorFromString(action.type);
 
       return (
-         <li className="timeline-inverted">
-            <a className="timeline-badge" onClick={::this.handleCollapseClick} href="javascript:;">
+         <li className="redux-timeline-inverted">
+            {/*<a className="timeline-badge" onClick={::this.handleCollapseClick} href="javascript:;">
                <i className={"fa fa-" + (collapsed ? "ban" : "check")}></i>
-            </a>
-            {maximized ?
-               <div className="timeline-panel" style={{whiteSpace: "nowrap", overflow: "auto"}}>
-                  <div style={{display: "table", tableLayout: "fixed", width: "100%"}}>
-                     <div style={{ width: "400px", display: "table-cell"}}>
-                        <a className="timeline-heading" onClick={::this.handleMaximizeClick} href="javascript:;">
-                          <pre className="timeline-pre">
+            </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>) :
+                           (<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>
-
-                        <div className="timeline-body">
-                          <pre className="timeline-pre">
+                          </pre>)
+                        }
+                     </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>
-                        </div>
-                     </div>
+                           </pre>)
+                        }
+                     </a>
                   </div>
-               </div> :
-               <div className="timeline-panel">
-                  <a class="timeline-heading" onClick={::this.handleMaximizeClick} href="javascript:;">
-                     <h4 class="timeline-title" style={{color: `rgb(${r}, ${g}, ${b})`,}}>
-                        <i className="fa fa-plus-square"></i>
-                        {" " + action.type}
-                     </h4>
-                     <p>
-                        <small className="text-muted">
-                           <i className="fa fa-clock-o"></i>
-                           {" " + getTimestring(time)}
-                        </small>
-                     </p>
-                  </a>
                </div>
-            }
+            </div>
          </li>
       );
       return (
diff --git a/src/react/timeline.less b/src/react/timeline.less
index 628b4224..6fc3b49c 100644
--- a/src/react/timeline.less
+++ b/src/react/timeline.less
@@ -1,10 +1,10 @@
-.timeline {
+.redux-timeline {
    list-style: none;
    padding: 20px 0 20px;
    position: relative;
 }
 
-.timeline-pre {
+.redux-timeline-pre {
    background-color: transparent;
    color: white;
    border: 0;
@@ -12,44 +12,33 @@
    padding: 0;
 }
 
-.timeline:before {
-   top: 0;
-   bottom: 0;
-   position: absolute;
-   content: " ";
-   width: 3px;
-   background-color: #eeeeee;
-   left: 20px;
-   margin-left: -1.5px;
-}
-
-.timeline > li {
+.redux-timeline > li {
    margin-bottom: 20px;
    position: relative;
 }
 
-.timeline > li:before,
-.timeline > li:after {
+.redux-timeline > li:before,
+.redux-timeline > li:after {
    content: " ";
    display: table;
 }
 
-.timeline > li:after {
+.redux-timeline > li:after {
    clear: both;
 }
 
-.timeline > li:before,
-.timeline > li:after {
+.redux-timeline > li:before,
+.redux-timeline > li:after {
    content: " ";
    display: table;
 }
 
-.timeline > li:after {
+.redux-timeline > li:after {
    clear: both;
 }
 
-.timeline > li > .timeline-panel {
-   width: 80%;
+.redux-timeline > li > .redux-timeline-panel {
+   width: 100%;
    float: left;
    border: 1px solid #d4d4d4;
    border-radius: 2px;
@@ -59,133 +48,40 @@
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
 }
 
-.timeline > li > .timeline-panel:before {
-   position: absolute;
-   top: 26px;
-   right: -15px;
-   display: inline-block;
-   border-top: 15px solid transparent;
-   border-left: 15px solid #ccc;
-   border-right: 0 solid #ccc;
-   border-bottom: 15px solid transparent;
-   content: " ";
-}
-
-.timeline > li > .timeline-panel:after {
-   position: absolute;
-   top: 27px;
-   right: -14px;
-   display: inline-block;
-   border-top: 14px solid transparent;
-   border-left: 14px solid #fff;
-   border-right: 0 solid #fff;
-   border-bottom: 14px solid transparent;
-   content: " ";
-}
-
-.timeline > li > .timeline-badge {
-   color: #fff;
-   width: 50px;
-   height: 50px;
-   line-height: 50px;
-   font-size: 1.4em;
-   text-align: center;
-   position: absolute;
-   top: 16px;
-   left: 20px;
-   margin-left: -25px;
-   background-color: #999999;
-   z-index: 100;
-   border-top-right-radius: 50%;
-   border-top-left-radius: 50%;
-   border-bottom-right-radius: 50%;
-   border-bottom-left-radius: 50%;
-}
-
-.timeline > li.timeline-inverted > .timeline-panel {
+.redux-timeline > li.redux-timeline-inverted > .redux-timeline-panel {
    float: right;
 }
 
-.timeline > li.timeline-inverted > .timeline-panel:before {
-   border-left-width: 0;
-   border-right-width: 15px;
-   left: -15px;
-   right: auto;
-}
-
-.timeline > li.timeline-inverted > .timeline-panel:after {
-   border-left-width: 0;
-   border-right-width: 14px;
-   left: -14px;
-   right: auto;
-}
-
-.timeline-badge.primary {
+.redux-timeline-badge.primary {
    background-color: #2e6da4 !important;
 }
 
-.timeline-badge.success {
+.redux-timeline-badge.success {
    background-color: #3f903f !important;
 }
 
-.timeline-badge.warning {
+.redux-timeline-badge.warning {
    background-color: #f0ad4e !important;
 }
 
-.timeline-badge.danger {
+.redux-timeline-badge.danger {
    background-color: #d9534f !important;
 }
 
-.timeline-badge.info {
+.redux-timeline-badge.info {
    background-color: #5bc0de !important;
 }
 
-.timeline-title {
+.redux-timeline-title {
    margin-top: 0;
    //color: inherit;
 }
 
-.timeline-body > p,
-.timeline-body > ul {
+.redux-timeline-body > p,
+.redux-timeline-body > ul {
    margin-bottom: 0;
 }
 
-.timeline-body > p + p {
+.redux-timeline-body > p + p {
    margin-top: 5px;
 }
-
-@media (max-width: 767px) {
-   ul.timeline:before {
-      left: 40px;
-   }
-
-   ul.timeline > li > .timeline-panel {
-      width: calc(100% - 90px);
-      width: -moz-calc(100% - 90px);
-      width: -webkit-calc(100% - 90px);
-   }
-
-   ul.timeline > li > .timeline-badge {
-      left: 15px;
-      margin-left: 0;
-      top: 16px;
-   }
-
-   ul.timeline > li > .timeline-panel {
-      float: right;
-   }
-
-   ul.timeline > li > .timeline-panel:before {
-      border-left-width: 0;
-      border-right-width: 15px;
-      left: -15px;
-      right: auto;
-   }
-
-   ul.timeline > li > .timeline-panel:after {
-      border-left-width: 0;
-      border-right-width: 14px;
-      left: -14px;
-      right: auto;
-   }
-}