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;