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* :csss ,(list *scrumli-bootstrap-css-location*
*scrumli-font-awesome-css-location* *scrumli-font-awesome-css-location*
(genurl 'scrumli-css)) (genurl 'scrumli-css))
:jss ,(list *scrumli-bootstrap-js-location* :jss ,(list *scrumli-jquery-js-location*
*scrumli-jquery-js-location* *scrumli-bootstrap-js-location*
*scrumli-react-js-location* *scrumli-react-js-location*
*scrumli-jsxtransformer-js-location*) *scrumli-jsxtransformer-js-location*)
:username ,(hunchentoot:session-value :username) :username ,(hunchentoot:session-value :username)

View file

@ -1,3 +1,8 @@
.clickable { .clickable {
cursor: pointer; 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 headline = this.refs.headline.getDOMNode().value.trim();
var content = this.refs.content.getDOMNode().value.trim(); var content = this.refs.content.getDOMNode().value.trim();
$(".myModal").modal('hide');
this.props.onStorySubmit({role: role, this.props.onStorySubmit({role: role,
necessity: necessity, necessity: necessity,
headline: headline, headline: headline,
@ -243,27 +244,51 @@ var StoryForm = React.createClass({
}), }),
render: function() { render: function() {
return ( return (
<form onSubmit={this.handleSubmit}> <div class="myModal modal fade hide">
<fieldset> <form onSubmit={this.handleSubmit} class="form-horizontal">
<legend class="toggle">New story</legend> <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 id="new-story">
<div class="input-prepend input-append"> <div class="control-group">
<span class="add-on">As a </span> <label class="control-label">As a</label>
<input type="text" class="input-medium" ref="role" <div class="controls">
placeholder="person" /> <input type="text" ref="role" placeholder="person" />
<span class="add-on"> I </span> </div>
<input type="text" class="input-small" </div>
ref="necessity" placeholder="would like" /> <div class="control-group">
<span class="add-on"> to </span> <label class="control-label">I</label>
<input type="text" class="input-xxlarge" <div class="controls">
ref="headline" placeholder="fill in this form..." /> <input type="text" ref="necessity"
<button class="btn btn-primary" type="submit">!</button> placeholder="would like" />
<br /> </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> <textarea ref="content"></textarea>
</div> </div>
</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> </form>
</div>
); );
} }
}); });

View file

@ -34,7 +34,15 @@
</div> </div>
<div class="container"> <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> <div id="content"></div>
<script src="{$umainjs}" type="text/jsx"></script> <script src="{$umainjs}" type="text/jsx"></script>
</div> </div>