Remove bootstrap/fontawesome dependencies, use +/- characters and unicode check/cross

This commit is contained in:
Benjamin Kniffler 2015-08-05 10:40:46 +02:00
parent ea57dd92aa
commit e993425245

View File

@ -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>&#10004; Enabled</span> : <span>&#10008; 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}