Permalink
Browse files

quick story adding and basic fly in

  • Loading branch information...
1 parent 021f2eb commit c17bf74a197dc0b61e00dbb349592bbbc26ba527 @dextermilo committed Mar 3, 2012
@@ -79,7 +79,8 @@ var AppRouter = Backbone.Router.extend({
});
-tpl.loadTemplates(['project-row', 'project-details', 'story-details', 'story-table', 'story-row', 'story-state'], function () {
+
+tpl.loadTemplates(['header', 'story-details', 'story-table', 'story-row', 'story-state', 'story-quick-add'], function () {
app = new AppRouter();
Backbone.history.start();
});
@@ -26,7 +26,7 @@ Story = Backbone.Model.extend({
"summary": "",
"details": "",
"owner": "",
- "state": "",
+ "state": "idea",
"blocked": "",
"iteration": "",
"points": "",
@@ -0,0 +1,64 @@
+StoryQuickAddView = Backbone.View.extend({
+
+ tagName:'div',
+ attributes: {
+ class: "add-story-quick"
+ },
+
+ events: {
+ 'click .btn': 'add_story'
+ },
+
+ add_story: function (event) {
+ var new_story = app.stories.create({
+ title: $(this.el).find('.add-story-quick-input').val()
+ });
+ if($('.story-quick-add-details:checked').length > 0) {
+ app.showView('#sidebar', new StoryView({model:new_story}));
+ }
+ var flyer = new StoryFlyView({model: new_story});
+ var start_pos = $(this.el).find('.btn').position();
+ flyer.fly_in($('div.stories'), start_pos.top, start_pos.left + 100, $('div.stories').height(), 0);
+ return false;
+ },
+
+ initialize:function () {
+ this.template = _.template(tpl.get('story-quick-add'));
+ },
+
+ render:function (eventName) {
+ $(this.el).html(this.template());
+ return this;
+ }
+});
+
+StoryFlyView = Backbone.View.extend({
+ tagName:'div',
+ attributes: {
+ class: 'story-flying'
+ },
+
+ fly_in:function (node, start_top, start_left, target_top, target_left) {
+ var story = $(this.render().el).css({
+ opacity: 0.9,
+ top: start_top,
+ left: start_left,
+ 'z-index': 10
+ });
+ node.append(story);
+ story.animate({
+ opacity: 0,
+ top: target_top+'',
+ left: target_left+'',
+ }, 600, function() {
+ $(this).remove();
+ });
+
+ },
+ render:function (event) {
+ $(this.el).html(new StoryRowView({model:this.model}).render().el);
+
+ return this;
+ }
+
+});
@@ -13,6 +13,7 @@ StoryTableView = Backbone.View.extend({
render:function (eventName) {
$(this.el).html(this.template(this.model.toJSON()));
+ $(this.el).find('.quick-add-placeholder').replaceWith(new StoryQuickAddView().render().el);
_.each(this.model.models, function (model) {
$(this.el).find('.stories').append(new StoryRowView({model:model}).render().el);
}, this);
@@ -39,7 +40,6 @@ StateSelectorView = Backbone.View.extend({
},
events: {
- /*'click .story-active-state': 'toggleMenu',*/
'click .sel-state': 'selectState',
'click .sel-blocked a': 'selectBlock'
},
@@ -55,6 +55,7 @@ StateSelectorView = Backbone.View.extend({
this.model.set('state', $(event.target).attr('data-state'));
$(this.el).removeClass('selected');
this.model.save();
+ return false;
},
selectBlock: function(event) {
View
@@ -49,22 +49,11 @@ ul {
padding-left: 0px;
margin-top: 0px;
}
-input, textarea {
- border: 1px solid #ccc;
- min-height: 30px;
- outline: none;
-}
.form-left-col input {
margin-bottom: 15px;
margin-top: 5px;
width: 280px;
}
-textarea {
- margin-bottom: 15px;
- margin-top: 5px;
- height: 200px;
- width: 250px;
-}
label {
display: block;
}
@@ -73,7 +62,15 @@ button {
}
/* Stories */
.stories {
- padding-left: 50px;
+ margin-left: 150px;
+ position: relative;
+}
+.add-story-quick {
+ margin-bottom: 1em;
+}
+.add-story-quick-input {
+ clear: both;
+ width: 98%;
}
.story {
position: relative;
@@ -85,6 +82,11 @@ button {
margin-bottom: 1em;
background: #f8f8f8;
}
+.story-flying {
+ position: absolute;
+ width: 98%;
+ box-shadow: 0px 0px 10px rgba(44, 153, 172, 0.8);
+}
.story.selected {
background: #fff;
}
@@ -110,9 +112,9 @@ button {
border-top-color: #990000;
}
.sel-states {
- position: absolute;
- top: -12px;
- left: 0;
+ float: left;
+ margin-left: -15px;
+ margin-top: -16px;
font-size: 11px;
}
.story-active-state {
@@ -190,10 +192,9 @@ button {
background-color: #990000;
}
.story-detail {
- position: absolute;
- top: 0;
- left: 0;
+ float: left;
padding: 5px 0 0 15px;
+ margin-left: -130px;
width: 120px;
}
.story-summary {
@@ -209,11 +210,11 @@ button {
text-align: right;
}
.story-points {
- background-color: #A7A7A7;
+ background-color: #b5b5b5;
color: #fff;
- border-radius: 8px;
+ border-radius: 5px;
+ width: 40px;
display: inline-block;
text-align: center;
- width: 40px;
- line-height: 1.8em;
+ line-height: 1.5em;
}
View
@@ -86,25 +86,12 @@ ul {
margin-top: 0px;
}
-input, textarea {
- border: 1px solid #ccc;
- min-height: 30px;
- outline: none;
-}
-
.form-left-col input {
margin-bottom: 15px;
margin-top: 5px;
width: 280px;
}
-textarea {
- margin-bottom: 15px;
- margin-top: 5px;
- height: 200px;
- width: 250px;
-}
-
label {
display: block;
}
@@ -116,7 +103,17 @@ button {
/* Stories */
.stories {
- padding-left: 50px;
+ margin-left: 150px;
+ position: relative;
+}
+
+.add-story-quick {
+ margin-bottom: 1em;
+}
+
+.add-story-quick-input {
+ clear: both;
+ width: 98%;
}
.story {
@@ -130,6 +127,11 @@ button {
background: #f8f8f8;
}
+.story-flying {
+ position: absolute;
+ width: 98%;
+ box-shadow: 0px 0px 10px rgba(44,153,172, 0.8);
+}
.story.selected {
background: #fff;
@@ -156,9 +158,9 @@ button {
border-top-color: @blockedColor;
}
.sel-states {
- position: absolute;
- top: -12px;
- left: 0;
+ float: left;
+ margin-left: -15px;
+ margin-top: -16px;
font-size: 11px;
}
@@ -247,11 +249,10 @@ button {
}
.story-detail {
- position: absolute;
- top: 0;
- left: 0;
+ float: left;
padding: 5px 0 0 15px;
- width: 120px
+ margin-left: -130px;
+ width: 120px;
}
.story-summary {
@@ -268,11 +269,11 @@ button {
text-align: right;
}
.story-points {
- background-color: #A7A7A7;
+ background-color: #b5b5b5;
color: #fff;
- border-radius: 8px;
+ border-radius: 5px;
+ width: 40px;
display: inline-block;
text-align: center;
- width: 40px;
- line-height: 1.8em;
+ line-height: 1.5em;
}
@@ -0,0 +1,2 @@
+<textarea class="add-story-quick-input"></textarea>
+<a class="btn" href="#">Add</a> <input type="checkbox" class="story-quick-add-details"></input> edit details
@@ -1,4 +1,3 @@
<div class="stories">
-
-
+ <div class="quick-add-placeholder"></div>
</div>
@@ -28,6 +28,7 @@
<script src="static/js/project-list.js"></script>
<script src="static/js/story-details.js"></script>
<script src="static/js/story-table.js"></script>
+ <script src="static/js/story-quick-add.js"></script>
<script src="static/js/main.js"></script>
</body>
</html>
View
@@ -21,7 +21,7 @@ def json_handler(obj):
def index(request):
try:
cursor = mongo.fragile.stories.find();
- return {'storydata': json.dumps(list(cursor), default=json_handler).replace("'", r"\'") }
+ return {'storydata': json.dumps(list(cursor), default=json_handler).replace("'", r"\'").replace(r'\"', r'\\"') }
finally:
mongo.end_request()

0 comments on commit c17bf74

Please sign in to comment.