1
0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-28 00:06:53 +01:00

minor layout formatting

This commit is contained in:
ivaosthu 2014-11-29 12:12:48 +01:00
parent 6eaf18a7f7
commit 2256861333
4 changed files with 15 additions and 11 deletions

View File

@ -13,4 +13,8 @@
border-radius: 50%; border-radius: 50%;
width: 20px; width: 20px;
height: 20px; height: 20px;
}
.no-border {
border: none;
} }

View File

@ -33,14 +33,11 @@ var Feature = React.createClass({
this.toggleEditMode(); this.toggleEditMode();
}, },
render: function() {
return this.state.editMode ? this.renderEditMode() : this.renderViewMode();
},
renderEditMode: function() { renderEditMode: function() {
return ( return (
<tr> <tr>
<td colSpan="5"> <td colSpan="5" className="pan man no-border">
<FeatureForm feature={this.props.feature} onSubmit={this.saveFeature} onCancel={this.toggleEditMode} /> <FeatureForm feature={this.props.feature} onSubmit={this.saveFeature} onCancel={this.toggleEditMode} />
</td> </td>
</tr> </tr>
@ -48,10 +45,10 @@ var Feature = React.createClass({
}, },
renderViewMode: function() { render: function() {
return ( return (
<tbody> <tbody>
<tr> <tr className={this.state.editMode ? "edit bg-lilac-xlt" : ""}>
<td width="20"> <td width="20">
<span className={this.props.feature.enabled ? "toggle-active" : "toggle-inactive"} title="Status"> <span className={this.props.feature.enabled ? "toggle-active" : "toggle-inactive"} title="Status">
</span> </span>
@ -71,18 +68,19 @@ var Feature = React.createClass({
<td width="100"> <td width="100">
<div className="line"> <div className="line">
<div className="unit size1of2"> <div className="unit size1of2">
<button className="mrs mbs" type='button' title='Edit' onClick={this.toggleEditMode}> <button className={this.state.editMode ? "primary" : ""} title='Edit' onClick={this.toggleEditMode}>
<span className="icon-redigere" /> <span className="icon-redigere" />
</button> </button>
</div> </div>
<div className="unit size1of2"> <div className="unit size1of2">
<button type='button' title='History' onClick={this.toggleHistory}> <button className={this.state.showHistory ? "primary" : ""} title='History' onClick={this.toggleHistory}>
<span className="icon-visning_liste" /> <span className="icon-visning_liste" />
</button> </button>
</div> </div>
</div> </div>
</td> </td>
</tr> </tr>
{this.state.editMode ? this.renderEditMode() : this.renderEmptyRow()}
{this.state.showHistory ? this.renderHistory() : this.renderEmptyRow()} {this.state.showHistory ? this.renderHistory() : this.renderEmptyRow()}
</tbody> </tbody>
); );
@ -94,7 +92,9 @@ var Feature = React.createClass({
renderHistory: function() { renderHistory: function() {
return (<tr> return (<tr>
<td colSpan="5"><LogEntryList events={this.state.events} /></td> <td colSpan="5" className="pan man no-border">
<LogEntryList events={this.state.events} />
</td>
</tr>); </tr>);
} }

View File

@ -23,7 +23,7 @@ var FeatureForm = React.createClass({
enabled: false enabled: false
}; };
var title = this.props.feature ? "Edit '" + this.props.feature.name + "'" : "Create new toggle"; var title = this.props.feature ? "" : "Create new toggle";
return ( return (
<div className="bg-lilac-xlt r-pam"> <div className="bg-lilac-xlt r-pam">

View File

@ -12,7 +12,7 @@ var LogEntryList = React.createClass({
}); });
return ( return (
<div className='r-margin'> <div className='r-margin'>
<table className='outerborder'> <table className='condensed outerborder zebra-striped'>
<thead> <thead>
<tr> <tr>
<th>When</th> <th>When</th>