From 6d4696faf0d3b1c16c5441e9d1d27ba9adb9f436 Mon Sep 17 00:00:00 2001
From: maxwell <maxwell@joindiaspora.com>
Date: Mon, 20 Dec 2010 18:05:08 -0800
Subject: [PATCH] MS DG notifications are now pretty decent

---
 app/controllers/notifications_controller.rb |   1 +
 app/views/notifications/index.html.haml     |  49 +++++++++++++-------
 public/images/icons/mail_big.png            | Bin 0 -> 6494 bytes
 public/stylesheets/sass/application.sass    |  16 +++++++
 4 files changed, 48 insertions(+), 18 deletions(-)
 create mode 100644 public/images/icons/mail_big.png

diff --git a/app/controllers/notifications_controller.rb b/app/controllers/notifications_controller.rb
index 2be753d14..3fc8f5a90 100644
--- a/app/controllers/notifications_controller.rb
+++ b/app/controllers/notifications_controller.rb
@@ -22,4 +22,5 @@ class NotificationsController < ApplicationController
     @group_days = @notifications.group_by{|note| note.created_at.strftime("%B %d") } 
     respond_with @notifications
   end
+
 end
diff --git a/app/views/notifications/index.html.haml b/app/views/notifications/index.html.haml
index 28c5d7e6d..0df4f64a0 100644
--- a/app/views/notifications/index.html.haml
+++ b/app/views/notifications/index.html.haml
@@ -1,21 +1,34 @@
 :javascript
-  $('.note a').live('click', function(evt){
-    var note_id = $(this).closest('.note').attr('id');
-    $.ajax({
-      url: 'notifications/' + note_id,
-      type: 'PUT'
-    });
+  $('.message').live('click', function(evt){
+    var note = $(this).closest('.message'),
+        note_id = note.attr('data-guid');
+
+    if(note.hasClass('unread') ){
+      note.removeClass('unread');
+      $.ajax({
+        url: 'notifications/' + note_id,
+        type: 'PUT'
+      });
+    }
   });
 
-%ul.notes
-  - @group_days.each do |day, notes|
-    %h3
-      %ul
-        %li
-          = day
-        - notes.each do |note|
-          %li.note{:id => note.id}
-            %h4{:class => "#{note.unread ? 'unread' : ''}"}
-              = link_to "#{note.person.name.titleize}", person_path(note.person)
-              = object_link(note)
-              %span.description=" #{t('ago', :time => time_ago_in_words(note.created_at))}"
+
+.span-1
+  = image_tag 'icons/mail_big.png', :height => 30, :width => 30, :style=>"margin-top:3px;"
+.span-23.last
+  %h2
+    Notifications
+
+.span-24.last
+  %ul.stream.notifications
+    - @group_days.each do |day, notes|
+      %li
+        %h4= day
+        %ul.notifications_for_day
+          - notes.each do |note|
+            %li.message{:data=>{:guid => note.id}, :class => "#{note.unread ? 'unread' : ''}"}
+              %span.from
+                = link_to "#{note.person.name.titleize}", person_path(note.person)
+                = object_link(note)
+
+              %span.time= "#{t('ago', :time => time_ago_in_words(note.created_at))}"
diff --git a/public/images/icons/mail_big.png b/public/images/icons/mail_big.png
new file mode 100644
index 0000000000000000000000000000000000000000..c3e181789ef786eaf4579b5aa2448e79ccf622e8
GIT binary patch
literal 6494
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
T5g~s7D;i*7YJ)2@@i_JmSwDGR

literal 0
HcmV?d00001

diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass
index e2d2c542c..d30b5513f 100644
--- a/public/stylesheets/sass/application.sass
+++ b/public/stylesheets/sass/application.sass
@@ -2134,3 +2134,19 @@ h3,h4
     :top 6px
     :right 0
 
+ul.notifications_for_day
+
+  :margin 0
+  :padding 0
+
+  li.message
+    :margin
+      :bottom 0.3em
+    :padding 0.2em 0.5em
+    :width 500px
+
+.stream.notifications
+  > li:hover
+    :background none
+    :border
+      :bottom 1px solid #eee