diff --git a/index.html b/index.html
index 36ac64b..3a297fa 100644
--- a/index.html
+++ b/index.html
@@ -31,7 +31,7 @@
diff --git a/javascripts/models/task.js b/javascripts/models/task.js
index c17b91c..94d6088 100644
--- a/javascripts/models/task.js
+++ b/javascripts/models/task.js
@@ -8,6 +8,8 @@ var app = app || {};
parent_id: '',
content: ''
},
+
+ url: '/task'
});
diff --git a/javascripts/views/task.js b/javascripts/views/task.js
index 1deccd3..959ff5d 100644
--- a/javascripts/views/task.js
+++ b/javascripts/views/task.js
@@ -7,10 +7,32 @@ var app = app || {};
tagName: 'li',
template: $('#taskTemplate').html(),
+ events: {
+ 'click .task': 'edit',
+ 'blur .edit': 'close',
+ 'keypress .edit': 'add'
+ },
+
render: function() {
var tmpl = _.template(this.template);
this.$el.html(tmpl(this.model.toJSON()));
+ this.$input = this.$('.edit');
return this;
+ },
+
+ edit: function() {
+ this.$el.addClass('editing');
+ this.$input.focus();
+ },
+
+ close: function() {
+ var value = this.$input.val().trim();
+ this.model.save({content: value});
+ this.$el.removeClass('editing');
+ },
+
+ add: function() {
+ this.$input.blur();
}
});
diff --git a/sass/app.scss b/sass/app.scss
index c8afeb3..1842f76 100644
--- a/sass/app.scss
+++ b/sass/app.scss
@@ -74,6 +74,7 @@ body {
list-style: none;
.task {
margin: 10px 0;
+ height: 20px;
color: $fontcolor;
.link {
vertical-align: middle;
@@ -106,13 +107,30 @@ body {
z-index: 8;
background-color: #aaa;
}
- .content {
- padding-left: 10px;
- width: 90%;
- line-height: 20px;
- text-align: justify;
- vertical-align: middle;
- display: inline-block;
+ textarea.edit {
+ box-shadow: none;
+ display: inline;
+ background: transparent;
+ resize: none;
+ outline: 0;
+ border: 0;
+ padding: 0;
+ margin: 0;
+ width: 620px;
+ height: 18px;
+ font-family: inherit;
+ font-size: inherit;
+ font-weight: inherit;
+ line-height: inherit;
+ letter-spacing: inherit;
+ color: inherit;
+ overflow: hidden;
+ position: relative;
+ word-wrap: break-word;
+ }
+ textarea.edit:focus {
+ background-color: white;
+ height: 18px;
}
}
}
@@ -127,4 +145,4 @@ body {
font-size: 12px;
}
}
-}
+}
\ No newline at end of file
diff --git a/stylesheets/app.css b/stylesheets/app.css
index cf057e6..82422af 100644
--- a/stylesheets/app.css
+++ b/stylesheets/app.css
@@ -5571,9 +5571,10 @@ body #gofish #main .children li {
/* line 75, ../sass/app.scss */
body #gofish #main .children li .task {
margin: 10px 0;
+ height: 20px;
color: #333333;
}
-/* line 78, ../sass/app.scss */
+/* line 79, ../sass/app.scss */
body #gofish #main .children li .task .link {
vertical-align: middle;
display: inline-block;
@@ -5594,34 +5595,52 @@ body #gofish #main .children li .task .link {
-khtml-border-radius: 12px;
border-radius: 12px;
}
-/* line 98, ../sass/app.scss */
+/* line 99, ../sass/app.scss */
body #gofish #main .children li .task .with-children > .link {
background-color: #e0e0e0;
}
-/* line 101, ../sass/app.scss */
+/* line 102, ../sass/app.scss */
body #gofish #main .children li .task .open > .link {
background-color: white;
}
-/* line 104, ../sass/app.scss */
+/* line 105, ../sass/app.scss */
body #gofish #main .children li .task .link:hover {
cursor: pointer;
z-index: 8;
background-color: #aaa;
}
-/* line 109, ../sass/app.scss */
-body #gofish #main .children li .task .content {
- padding-left: 10px;
- width: 90%;
- line-height: 20px;
- text-align: justify;
- vertical-align: middle;
- display: inline-block;
+/* line 110, ../sass/app.scss */
+body #gofish #main .children li .task textarea.edit {
+ box-shadow: none;
+ display: inline;
+ background: transparent;
+ resize: none;
+ outline: 0;
+ border: 0;
+ padding: 0;
+ margin: 0;
+ width: 620px;
+ height: 18px;
+ font-family: inherit;
+ font-size: inherit;
+ font-weight: inherit;
+ line-height: inherit;
+ letter-spacing: inherit;
+ color: inherit;
+ overflow: hidden;
+ position: relative;
+ word-wrap: break-word;
}
-/* line 121, ../sass/app.scss */
+/* line 131, ../sass/app.scss */
+body #gofish #main .children li .task textarea.edit:focus {
+ background-color: white;
+ height: 18px;
+}
+/* line 139, ../sass/app.scss */
body #gofish #main > .children {
margin-left: 0;
}
-/* line 124, ../sass/app.scss */
+/* line 142, ../sass/app.scss */
body #gofish #footer {
color: #333333;
margin: 10px 0;