Use a dialog to send new stories.
This commit is contained in:
parent
d746bfc8e5
commit
86b448369e
4 changed files with 58 additions and 20 deletions
|
@ -59,8 +59,8 @@
|
|||
:csss ,(list *scrumli-bootstrap-css-location*
|
||||
*scrumli-font-awesome-css-location*
|
||||
(genurl 'scrumli-css))
|
||||
:jss ,(list *scrumli-bootstrap-js-location*
|
||||
*scrumli-jquery-js-location*
|
||||
:jss ,(list *scrumli-jquery-js-location*
|
||||
*scrumli-bootstrap-js-location*
|
||||
*scrumli-react-js-location*
|
||||
*scrumli-jsxtransformer-js-location*)
|
||||
:username ,(hunchentoot:session-value :username)
|
||||
|
|
|
@ -1,3 +1,8 @@
|
|||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button.nothing {
|
||||
background-color: inherit;
|
||||
border: none;
|
||||
}
|
||||
|
|
|
@ -229,6 +229,7 @@ var StoryForm = React.createClass({
|
|||
var headline = this.refs.headline.getDOMNode().value.trim();
|
||||
var content = this.refs.content.getDOMNode().value.trim();
|
||||
|
||||
$(".myModal").modal('hide');
|
||||
this.props.onStorySubmit({role: role,
|
||||
necessity: necessity,
|
||||
headline: headline,
|
||||
|
@ -243,27 +244,51 @@ var StoryForm = React.createClass({
|
|||
}),
|
||||
render: function() {
|
||||
return (
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<fieldset>
|
||||
<legend class="toggle">New story</legend>
|
||||
<div class="myModal modal fade hide">
|
||||
<form onSubmit={this.handleSubmit} class="form-horizontal">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">
|
||||
×
|
||||
</button>
|
||||
<h3 id="myModalLabel">New story</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="new-story">
|
||||
<div class="input-prepend input-append">
|
||||
<span class="add-on">As a </span>
|
||||
<input type="text" class="input-medium" ref="role"
|
||||
placeholder="person" />
|
||||
<span class="add-on"> I </span>
|
||||
<input type="text" class="input-small"
|
||||
ref="necessity" placeholder="would like" />
|
||||
<span class="add-on"> to </span>
|
||||
<input type="text" class="input-xxlarge"
|
||||
ref="headline" placeholder="fill in this form..." />
|
||||
<button class="btn btn-primary" type="submit">!</button>
|
||||
<br />
|
||||
<div class="control-group">
|
||||
<label class="control-label">As a</label>
|
||||
<div class="controls">
|
||||
<input type="text" ref="role" placeholder="person" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label">I</label>
|
||||
<div class="controls">
|
||||
<input type="text" ref="necessity"
|
||||
placeholder="would like" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label">to</label>
|
||||
<div class="controls">
|
||||
<input type="text" ref="headline"
|
||||
placeholder="fill in this form..." />
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<div class="controls">
|
||||
<textarea ref="content"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn" data-dismiss="modal" aria-hidden="true">
|
||||
Close
|
||||
</button>
|
||||
<button class="btn btn-primary" type="submit">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
|
@ -34,7 +34,15 @@
|
|||
</div>
|
||||
|
||||
<div class="container">
|
||||
<h1>Backlog</h1>
|
||||
<h1>
|
||||
<button data-target=".myModal" role="button"
|
||||
data-toggle="modal" class="nothing">
|
||||
<i class="icon-plus-sign icon-2x"></i>
|
||||
</button>
|
||||
Backlog
|
||||
</h1>
|
||||
|
||||
|
||||
<div id="content"></div>
|
||||
<script src="{$umainjs}" type="text/jsx"></script>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue