notes for each task

app/stylesheets/_mixins.sass

@@ -8,12 +8,18 @@
   background-color: $color 
   border: 1px solid $border 
 
-=pretty-bullets($bullet-icon, $width: image-width($bullet-icon), $height: image-height($bullet-icon), $line-height: 18px, $padding: 14px)
+=tags-bullet($width: image-width($bullet-icon), $height: image-height($bullet-icon), $line-height: 18px, $padding: 14px)
   margin-left: 0
-  li.bullet
-    background: image-url($bullet-icon) no-repeat ($padding - $width) / 2 ($line-height - $height) / 2
+  li.tags
+    background: image-url("tags.png") no-repeat ($padding - $width) / 2 ($line-height - $height) / 2
   li
     list-style-type: none
     padding-left: $padding
 
-
+=notes-bullet($width: image-width($bullet-icon), $height: image-height($bullet-icon), $line-height: 18px, $padding: 14px)
+  margin-left: 0
+  li.notes
+    background: image-url("notes.png") no-repeat ($padding - $width) / 2 ($line-height - $height) / 2
+  li
+    list-style-type: none
+    padding-left: $padding

app/stylesheets/screen.sass

@@ -11,6 +11,9 @@
   +box-shadow(#333,1px,1px,2px)
   form.mark_complete
     display: inline
+  img
+    padding-left: 5px
+    padding-right: 5px
   ul.tags
     display: inline
     float: right
@@ -22,7 +25,29 @@
       @include box(rgb(231,235,249),rgb(188,202,240), 7px, 4px, 0)
 
 form.edit_task ul
-  +pretty-bullets("tags.png", 14px, 14px, 20px, 25px)
+  width: 100%
+  +tags-bullet(14px, 14px, 20px, 25px)
+  +notes-bullet(14px, 14px, 20px, 25px)
+  input, textarea
+    width: 100%
+  input[type=submit]
+    margin-left: 25px
+
 
 ul#complete li.task
   text-decoration: line-through
+
+.task .notes
+  display: none
+
+form.new_task
+  textarea
+    width: 351px
+    height: 40px
+  input[type=text]
+    width: 350px
+  ul
+    +tags-bullet(14px, 14px, 20px, 25px)
+    +notes-bullet(14px, 14px, 20px, 25px)
+
+

app/views/lists/show.html.haml

@@ -10,9 +10,14 @@
 
 
 = form_for [@list, @task], :remote => true do |f|
-  %p
-    ~f.text_field :description, :placeholder => "New to do"
-    =f.text_field :tag_list, :placeholder => "Tags"
-    ~f.submit
+  %ul
+    %li
+      ~f.text_field :description, :placeholder => "New to do"
+    %li.tags
+      =f.text_field :tag_list, :placeholder => "Tags"
+    %li.notes
+      =f.text_area :notes, :placehoder => "Notes"
+    %li
+      =f.submit
 %hr
 = link_to "Back to list index", lists_path

app/views/tasks/_task.html.haml

@@ -3,9 +3,15 @@
     = form_tag complete_task_path(@list.id, task.id), :class => "mark_complete", :remote => true do
       = check_box_tag "complete", "1", false, "data-remote".to_sym => true, :action => complete_task_path(@list.id, task.id)
   = "#{task.description}" 
+  - unless task.notes.blank?
+    = image_tag "notes.png"
+
   = link_to "Edit", edit_list_task_path(@list.id, task.id)
   %ul.tags
     - task.tag_list.each do |tag|
       %li=tag
-
+  - unless task.notes.blank?
+    .notes
+      %hr
+      %p= task.notes
 

app/views/tasks/create.js.erb

@@ -1 +1,3 @@
 <%= render :template => 'tasks/complete' %>
+
+$('form.new_task').clearForm();

app/views/tasks/edit.html.haml

@@ -3,7 +3,11 @@
   %ul 
     %li
       =f.text_field :description, :placeholder => "To do"
-    %li.bullet
+    %li.tags
       =f.text_field :tag_list, :placeholder => "Tags"
+    %li.notes
+      =f.text_area :notes, :placeholder => "Notes"
   %p
-    =f.submit 
+    = link_to "Cancel", list_path(@list)
+    = " | "
+    = f.submit 

db/migrate/20100817165434_add_notes_to_tasks.rb

@@ -0,0 +1,9 @@
+class AddNotesToTasks < ActiveRecord::Migration
+  def self.up
+    add_column :tasks, :notes, :text
+  end
+
+  def self.down
+    remove_column :tasks, :notes
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended to check this file into your version control system.
 
-ActiveRecord::Schema.define(:version => 20100817123058) do
+ActiveRecord::Schema.define(:version => 20100817165434) do
 
   create_table "lists", :force => true do |t|
     t.string   "name"
@@ -42,6 +42,7 @@
     t.integer  "list_id"
     t.datetime "created_at"
     t.datetime "updated_at"
+    t.text     "notes"
   end
 
 end

public/javascripts/application.js

@@ -1 +1,21 @@
+$.fn.clearForm = function() {
+  return this.each(function() {
+    var type = this.type, tag = this.tagName.toLowerCase();
+    if (tag == 'form')
+      return $(':input',this).clearForm();
+    if (type == 'text' || type == 'password' || tag == 'textarea')
+      this.value = '';
+    else if (type == 'checkbox' || type == 'radio')
+      this.checked = false;
+    else if (tag == 'select')
+      this.selectedIndex = -1;
+  });
+};
+
+
+$(function(){
+  $(".task img").live('click', function () {
+    $(this).siblings(".task .notes").toggle();
+  });
+});
 

public/stylesheets/screen.css

@@ -400,12 +400,17 @@ section.content-sub {
   display: inline;
 }
 /* line 14, ../../app/stylesheets/screen.sass */
+.task img {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+/* line 17, ../../app/stylesheets/screen.sass */
 .task ul.tags {
   display: inline;
   float: right;
   margin-top: 2px;
 }
-/* line 18, ../../app/stylesheets/screen.sass */
+/* line 21, ../../app/stylesheets/screen.sass */
 .task ul.tags li {
   display: inline;
   list-style-type: none;
@@ -420,21 +425,78 @@ section.content-sub {
   border: 1px solid #bccaf0;
 }
 
-/* line 24, ../../app/stylesheets/screen.sass */
+/* line 27, ../../app/stylesheets/screen.sass */
 form.edit_task ul {
+  width: 100%;
+  margin-left: 0;
   margin-left: 0;
 }
 /* line 13, ../../app/stylesheets/_mixins.sass */
-form.edit_task ul li.bullet {
+form.edit_task ul li.tags {
   background: url('/images/tags.png?1282061111') no-repeat 5.5px 3px;
 }
 /* line 15, ../../app/stylesheets/_mixins.sass */
 form.edit_task ul li {
   list-style-type: none;
   padding-left: 25px;
 }
+/* line 21, ../../app/stylesheets/_mixins.sass */
+form.edit_task ul li.notes {
+  background: url('/images/notes.png?1282062393') no-repeat 5.5px 3px;
+}
+/* line 23, ../../app/stylesheets/_mixins.sass */
+form.edit_task ul li {
+  list-style-type: none;
+  padding-left: 25px;
+}
+/* line 31, ../../app/stylesheets/screen.sass */
+form.edit_task ul input, form.edit_task ul textarea {
+  width: 100%;
+}
+/* line 33, ../../app/stylesheets/screen.sass */
+form.edit_task ul input[type=submit] {
+  margin-left: 25px;
+}
 
-/* line 27, ../../app/stylesheets/screen.sass */
+/* line 37, ../../app/stylesheets/screen.sass */
 ul#complete li.task {
   text-decoration: line-through;
 }
+
+/* line 40, ../../app/stylesheets/screen.sass */
+.task .notes {
+  display: none;
+}
+
+/* line 44, ../../app/stylesheets/screen.sass */
+form.new_task textarea {
+  width: 351px;
+  height: 40px;
+}
+/* line 47, ../../app/stylesheets/screen.sass */
+form.new_task input[type=text] {
+  width: 350px;
+}
+/* line 49, ../../app/stylesheets/screen.sass */
+form.new_task ul {
+  margin-left: 0;
+  margin-left: 0;
+}
+/* line 13, ../../app/stylesheets/_mixins.sass */
+form.new_task ul li.tags {
+  background: url('/images/tags.png?1282061111') no-repeat 5.5px 3px;
+}
+/* line 15, ../../app/stylesheets/_mixins.sass */
+form.new_task ul li {
+  list-style-type: none;
+  padding-left: 25px;
+}
+/* line 21, ../../app/stylesheets/_mixins.sass */
+form.new_task ul li.notes {
+  background: url('/images/notes.png?1282062393') no-repeat 5.5px 3px;
+}
+/* line 23, ../../app/stylesheets/_mixins.sass */
+form.new_task ul li {
+  list-style-type: none;
+  padding-left: 25px;
+}