Mirrors/VILLASweb
1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00
Code Issues Releases Wiki Activity

issue #25 edit buttons position

Browse source
This commit is contained in:
Ricardo Hernandez-Montoya 2017-03-22 17:25:50 +01:00
parent 3ed9c607c4
commit 12f92786ae
2 changed files with 52 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/containers/visualization.js
View file

@ -261,21 +261,28 @@ class Visualization extends Component {
return (
<div>
<div>
<h1>
{this.state.visualization.name}
</h1>
<div>
{this.state.editing ? (
<div>
<Button bsStyle="link" onClick={() => this.saveChanges()}>Save</Button>
<Button bsStyle="link" onClick={() => this.discardChanges()}>Cancel</Button>
</div>
) : (
<Button bsStyle="link" onClick={() => this.setState({ editing: true })}>Edit</Button>
)}
<div className='section-header'>
<div className="section-title">
<span>
{this.state.visualization.name}
</span>
</div>
{this.state.editing ? (
<div className='section-buttons-group'>
<Button bsStyle="link" onClick={() => this.saveChanges()}>
<span className="glyphicon glyphicon-floppy-disk"></span> Save
</Button>
<Button bsStyle="link" onClick={() => this.discardChanges()}>
<span className="glyphicon glyphicon-remove"></span> Cancel
</Button>
</div>
) : (
<div className='section-buttons-group'>
<Button bsStyle="link" onClick={() => this.setState({ editing: true })}>
<span className="glyphicon glyphicon-pencil"></span> Edit
</Button>
</div>
)}
</div>
<div>

31
src/styles/app.css
View file

@ -174,3 +174,34 @@ body {
cursor: default !important;
}
/**
* Sections
*/
.section-header div {
display: inline-block;
vertical-align: middle;
height: 100%;
}
.section-title {
font-size: 1.5em;
}
.section-header .section-buttons-group {
margin-right: 10px;
margin-left: 10px;
}
.section-header button {
padding-left: 3px;
padding-right: 3px;
}
.section-header .btn-link:hover, .section-header .btn-link:focus {
text-decoration: none;
}
.section-header .glyphicon {
font-size: 0.8em;
}