mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2025-07-11 08:42:22 +03:00
Remove bootstrap/fontawesome dependencies, use +/- characters and unicode check/cross
This commit is contained in:
parent
ea57dd92aa
commit
e993425245
|
@ -7,6 +7,13 @@ const preStyle = {
|
||||||
margin: 0,
|
margin: 0,
|
||||||
padding: 0
|
padding: 0
|
||||||
};
|
};
|
||||||
|
const h4Style = {
|
||||||
|
fontWeight: 500,
|
||||||
|
lineHeight: 1.1,
|
||||||
|
fontSize: "18px",
|
||||||
|
marginTop: "10px",
|
||||||
|
marginBottom: "10px"
|
||||||
|
}
|
||||||
const liStyle = {
|
const liStyle = {
|
||||||
marginBottom: "20px",
|
marginBottom: "20px",
|
||||||
position: "relative"
|
position: "relative"
|
||||||
|
@ -21,6 +28,10 @@ const wrap2Style = {
|
||||||
width: "100%"
|
width: "100%"
|
||||||
};
|
};
|
||||||
const wrap3Style = {
|
const wrap3Style = {
|
||||||
|
width: "100%",
|
||||||
|
display: "table-cell"
|
||||||
|
};
|
||||||
|
const wrap3StyleMax = {
|
||||||
width: "800px",
|
width: "800px",
|
||||||
display: "table-cell"
|
display: "table-cell"
|
||||||
};
|
};
|
||||||
|
@ -113,45 +124,43 @@ export default class LogMonitorEntry extends Component {
|
||||||
const { r, g, b } = colorFromString(action.type);
|
const { r, g, b } = colorFromString(action.type);
|
||||||
const colorStyle = {color: `rgb(${r}, ${g}, ${b})`};
|
const colorStyle = {color: `rgb(${r}, ${g}, ${b})`};
|
||||||
|
|
||||||
|
|
||||||
// Heading
|
// Heading
|
||||||
let headingComponent = !maximizedAction ? (
|
const actionComponent = !maximizedAction ? (
|
||||||
<h4 style={{color: `rgb(${r}, ${g}, ${b})`,}}>
|
<h4 style={{...h4Style, color: `rgb(${r}, ${g}, ${b})`,}}>
|
||||||
<i className="fa fa-plus-square"></i>
|
{"+ " + action.type}
|
||||||
{" " + action.type}
|
|
||||||
</h4>
|
</h4>
|
||||||
) : (
|
) : (
|
||||||
<pre style={preStyle}>
|
<pre style={preStyle}>
|
||||||
<a style={colorStyle}>
|
<a style={colorStyle}>
|
||||||
<i className="fa fa-minus-square"></i>
|
{"- " + JSON.stringify(action, null, 2)}
|
||||||
{JSON.stringify(action, null, 2)}
|
|
||||||
</a>
|
</a>
|
||||||
</pre>
|
</pre>
|
||||||
);
|
);
|
||||||
|
|
||||||
// State
|
// Action
|
||||||
let stateComponent = !maximizedState ? (
|
const stateComponent = !maximizedState ? (
|
||||||
<h4 style={{color: "white"}}>
|
<h4 style={{...h4Style, color: "white"}}>
|
||||||
<i className="fa fa-plus-square"></i>
|
{"+ State: object {...}"}
|
||||||
{" State: object {...}"}
|
|
||||||
</h4>
|
</h4>
|
||||||
) : (
|
) : (
|
||||||
<pre style={preStyle}>
|
<pre style={preStyle}>
|
||||||
<i className="fa fa-minus-square"></i>
|
{"- " + this.printState(state, error)}
|
||||||
{this.printState(state, error)}
|
|
||||||
</pre>
|
</pre>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const collapsedComponent = !collapsed ? <span>✔ Enabled</span> : <span>✘ Disabled</span>;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<li style={liStyle}>
|
<li style={liStyle}>
|
||||||
<div style={wrap1Style}>
|
<div style={wrap1Style}>
|
||||||
<div style={wrap2Style}>
|
<div style={wrap2Style}>
|
||||||
<div style={wrap3Style}>
|
<div style={maximizedAction || maximizedState ? wrap3StyleMax : wrap3Style}>
|
||||||
<a onClick={::this.handleCollapseClick} href="javascript:;">
|
<a onClick={::this.handleCollapseClick} href="javascript:;">
|
||||||
<i className={"fa fa-" + (collapsed ? "ban" : "check")}></i>
|
{collapsedComponent}
|
||||||
{!collapsed ? " Enabled" : " Disabled"}
|
|
||||||
</a>
|
</a>
|
||||||
<a onClick={()=>this.setState({maximizedAction: !maximizedAction})} href="javascript:;">
|
<a onClick={()=>this.setState({maximizedAction: !maximizedAction})} href="javascript:;">
|
||||||
{headingComponent}
|
{actionComponent}
|
||||||
</a>
|
</a>
|
||||||
<a onClick={()=>this.setState({maximizedState: !maximizedState})} href="javascript:;">
|
<a onClick={()=>this.setState({maximizedState: !maximizedState})} href="javascript:;">
|
||||||
{stateComponent}
|
{stateComponent}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user