refactoring the conversation views, wip

app/helpers/application_helper.rb

@@ -133,8 +133,8 @@ module ApplicationHelper
     "<img alt=\"#{h(person.name)}\" class=\"avatar\" #{("data-owner_id="+@user_id.to_s) if @user_id} data-person_id=\"#{person.id}\" src=\"#{person.profile.image_url(size)}\" title=\"#{h(person.name)}\">".html_safe
   end
 
-  def person_link(person)
-    "<a href='/people/#{person.id}'>
+  def person_link(person, opts={})
+    "<a href='/people/#{person.id}' class='#{opts[:class]}'>
   #{h(person.name)}
 </a>".html_safe
   end

app/views/conversations/_conversation.haml

@@ -2,18 +2,17 @@
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
-.stream_element.conversation{:data=>{:guid=>conversation.id}}
+.stream_element.conversation{:data=>{:guid=>conversation.id}, :class => ('selected' if conversation.id == conversation.id)}
   - if conversation.author.owner_id == current_user.id
     .right.hidden.controls
       /= link_to image_tag('deletelabel.png'), status_message_path(conversation), :confirm => t('are_you_sure'), :method => :delete, :remote => true, :class => "delete", :title => t('delete')
 
-  %strong
-    = person_link(conversation.author)
-
+  .from
+    = person_link(conversation.author, :class => 'author')
   .subject
     = conversation.subject
   .message
-    = "#{conversation.messages.first.text[0..20]}..."
+    = "#{conversation.messages.first.text[0..60]}..."
 
   .info
     /%span.timeago= link_to(how_long_ago(conversation), status_message_path(conversation))

app/views/conversations/_show.haml

@@ -3,6 +3,8 @@
 -#   the COPYRIGHT file.
 
 .conversation_participants
+  %h3
+    = conversation.subject
   .right
     = link_to t('delete'), conversation_conversation_visibility_path(conversation), :method => 'delete', :confirm => t('are_you_sure')
   - for participant in conversation.participants

app/views/conversations/index.haml

@@ -5,8 +5,12 @@
 :javascript
   $(document).ready(function(){
     $('.conversation', '.stream').click(function(){
-      var conversationGuid = $(this).attr('data-guid');
+      var conversationSummary = $(this),
+          conversationGuid = conversationSummary.attr('data-guid');
       $.get("conversations/"+conversationGuid, function(data){
+
+        $('.conversation', '.stream').removeClass('selected');
+        conversationSummary.addClass('selected');
         $('#conversation_show').html(data);
       });
     });
@@ -21,9 +25,9 @@
   %br
   %br
 
-.span-6.append-1
+.span-7
   - if @conversations.count > 0
-    .stream
+    .stream.conversations
       = render :partial => 'conversations/conversation', :collection => @conversations
   - else
     %i

app/views/messages/_message.haml

@@ -5,13 +5,12 @@
 .stream_element{:data=>{:guid=>message.id}}
   = person_image_link(message.author, :size => :thumb_small)
 
-  .right
-    %span.timeago= link_to(how_long_ago(message), status_message_path(message))
-
   .content
-    %strong
-      = person_link(message.author)
+    .from
+      = person_link(message.author, :class => 'author')
+      %time.timeago{:datetime => message.created_at}
+        = how_long_ago(message)
 
-    .message
+    %p
       = message.text
 

app/views/shared/_stream_element.html.haml

@@ -13,8 +13,10 @@
   = person_image_link(post.author, :size => :thumb_small)
 
   .content
-    %strong
-      = person_link(post.author)
+    .from
+      = person_link(post.author, :class => 'author')
+      %time.timeago{:datetime => post.created_at}
+        = link_to(how_long_ago(post), status_message_path(post))
 
     = render 'status_messages/status_message', :post => post, :photos => post.photos
 
@@ -27,7 +29,6 @@
         %span.aspect_badges
           = aspect_badges(aspects_with_post(all_aspects, post))
 
-      %span.timeago= link_to(how_long_ago(post), status_message_path(post))
       = link_to t('comments.new_comment.comment').downcase, '#', :class => 'focus_comment_textarea'
 
     = render "comments/comments", :post_id => post.id, :comments => post.comments, :current_user => current_user, :condensed => true, :commenting_disabled => defined?(@commenting_disabled)

public/stylesheets/sass/application.sass

@@ -247,21 +247,12 @@ header
 
 .stream
   .stream_element
-    :font
-      :family 'arial', 'helvetica', sans-serif
-    :padding 10px 14px
-      :right 75px
+    :padding 20px 20px
     :min-height 50px
     :border
       :bottom 1px solid #ddd
       :top 1px solid #fff
 
-    :font
-      :size 13px
-    :line
-      :height 19px
-
-
     &:hover
       :border
         :bottom 1px solid #ddd
@@ -273,9 +264,14 @@ header
       :height 370px
       :width 500px
 
+    time
+      :font
+        :weight normal
+        :size smaller
+      :position absolute
+      :right 20px
+
 .from
-  :text
-    :shadow 0 1px #fff
   a
     :font
       :weight bold
@@ -334,11 +330,15 @@ header
 .stream_element
   :position relative
   :word-wrap break-word
-  :color #777
+  :color #888
 
-  .from
-    h5
-      :display inline
+  :font
+    :size 14px
+
+  a.author
+    :font
+      :weight bold
+    :color #444
 
   .content
     :margin
@@ -346,17 +346,17 @@ header
     :padding
       :left 60px
 
-    :color #444
+    :color #666
     :font
       :weight normal
 
     p
       :margin
-        :bottom 6px
-      :padding
-        :right 1em
+        :bottom 0px
       :font
-        :family 'arial', 'helvetica', 'sans-serif'
+        :size 12px
+      :line
+        :height 16px
 
     .photo_attachments
       :margin
@@ -406,8 +406,9 @@ header
 
 .time,
 .timeago
+  :color #ccc
   a
-    :color #bbb
+    :color #ccc
   :margin
     :right 1px
   :text
@@ -2485,9 +2486,25 @@ ul.show_comments
 .stream_element
   .subject
     :font
+      :size 13px
       :weight bold
+  .message
+    :font
+      :size 12px
+
+  .participants
+    .avatar
+      :float none
+      :height 24px
+      :width 24px
+    :margin
+      :top 3px
 
 .conversation_participants
+  .avatar
+    :height 30px
+    :width 30px
+
   :background
     :color #eee
   :border
@@ -2508,3 +2525,13 @@ ul.show_comments
   .right
     :right -11px
 
+.stream_element.conversation
+  :padding 10px
+
+.stream.conversations
+  :border
+    :right 1px solid #ccc
+
+.conversation.selected
+  :background
+    :color #ccc