mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2025-02-22 06:22:54 +03:00
Another ugly coded draft, without the timeline, action & state separately expandable
This commit is contained in:
Benjamin Kniffler
parent
dba48a6128
commit
e159133a21
|
|
@ -138,7 +138,7 @@ export default class LogMonitor {
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="timeline">
|
||||
<ul className="redux-timeline">
|
||||
{elements}
|
||||
</ul>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user