mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2025-04-20 08:22:00 +03:00
Polished code, ready for processing (i guess)
This commit is contained in:
Benjamin Kniffler
parent
e159133a21
commit
1a227489e3
|
|
@ -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>
|
||||
|
|
|
|||
43
src/react/LogMonitorEntries.less
Normal file
43
src/react/LogMonitorEntries.less
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user