Use a dialog to send new stories.

This commit is contained in:
Tom Willemse 2013-07-15 19:51:45 +02:00
parent d746bfc8e5
commit 86b448369e
4 changed files with 58 additions and 20 deletions

View file

@ -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)

View file

@ -1,3 +1,8 @@
.clickable {
cursor: pointer;
}
button.nothing {
background-color: inherit;
border: none;
}

View file

@ -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">
&times;
</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>
);
}
});

View file

@ -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>