1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 17:33:14 +01:00

finalize contract styles

This commit is contained in:
Tim Daubenschütz 2015-09-08 10:15:26 +02:00
parent 2c9370e555
commit 38b7dcd79f
2 changed files with 35 additions and 19 deletions

View File

@ -12,8 +12,12 @@ let ActionPanel = React.createClass({
]),
buttons: React.PropTypes.element,
onClick: React.PropTypes.func,
ignoreFocus: React.PropTypes.bool
ignoreFocus: React.PropTypes.bool,
leftColumnWidth: React.PropTypes.string,
rightColumnWidth: React.PropTypes.string
},
getInitialState() {
return {
isFocused: false
@ -40,14 +44,21 @@ let ActionPanel = React.createClass({
},
render() {
let { leftColumnWidth, rightColumnWidth } = this.props;
return (
<div className={classnames('ascribe-panel-wrapper', {'is-focused': this.state.isFocused})}>
<div className="ascribe-panel-table">
<div
className="ascribe-panel-table"
style={{width: leftColumnWidth}}>
<div className="ascribe-panel-content">
{this.props.content}
</div>
</div>
<div className="ascribe-panel-table">
<div
className="ascribe-panel-table"
style={{width: rightColumnWidth}}>
<div className="ascribe-panel-content">
{this.props.buttons}
</div>

View File

@ -81,7 +81,7 @@ let ContractSettings = React.createClass({
title={contract.name}
content={contract.name}
buttons={
<span>
<div className="pull-right">
<button className="btn btn-default btn-sm margin-left-2px">
UPDATE
</button>
@ -89,8 +89,11 @@ let ContractSettings = React.createClass({
onClick={this.removeContract.bind(this, contract)}>
REMOVE
</button>
</span>
}/>
</div>
}
leftColumnWidth="40%"
rightColumnWidth="60%"
/>
);
})}
</CollapsibleParagraph>
@ -104,7 +107,7 @@ let ContractSettings = React.createClass({
title={contract.name}
content={contract.name}
buttons={
<span>
<div className="pull-right">
<button className="btn btn-default btn-sm margin-left-2px">
UPDATE
</button>
@ -116,8 +119,10 @@ let ContractSettings = React.createClass({
onClick={this.makeContractPublic.bind(this, contract)}>
MAKE PUBLIC
</button>
</span>
}/>
</div>
}
leftColumnWidth="40%"
rightColumnWidth="60%"/>
);
})}
</CollapsibleParagraph>