Add participants preview con conversations

Changelog.md

@@ -172,7 +172,8 @@ everything is set up.
 
 ## Features
 
-* Deleting a post that was shared to Facebook now deletes it from Facebook too [#3980](https://github.com/diaspora/diaspora/pull/3980)
+* Improvement on how participants are displayed on each conversation without opening it [#4149](https://github.com/diaspora/diaspora/pull/4149)
+* Deleting a post that was shared to Facebook now deletes it from Facebook too [#3980]( https://github.com/diaspora/diaspora/pull/3980)
 * Include reshares in a users public atom feed [#1781](https://github.com/diaspora/diaspora/issues/1781)
 * Add the ability to upload photos from the mobile site. [#4004](https://github.com/diaspora/diaspora/issues/4004)
 * Show timestamp when hovering on comment time-ago string. [#4042](https://github.com/diaspora/diaspora/issues/4042)

app/assets/javascripts/inbox.js

@@ -10,8 +10,8 @@ $(document).ready(function(){
     $("html").scrollTop($('#first_unread').offset().top-45);
   }
 
-  $('a.conversation').live('click', function(){
+  $('.conversation-wrapper').live('click', function(){
-    $.getScript(this.href, function() {
+    $.getScript($(this).data('conversation-path'), function() {
       Diaspora.page.directionDetector.updateBinds();
     });
     history.pushState(null, "", this.href);
@@ -62,7 +62,7 @@ $(document).ready(function(){
     loadingText: "",
     loadingImg: '/assets/ajax-loader.gif'
   }, function(){
-    $('.conversation', '.stream').bind('mousedown', function(){
+    $('.conversation-wrapper', '.stream').bind('mousedown', function(){
       bindIt($(this));
     });
   });
@@ -87,6 +87,29 @@ $(document).ready(function(){
       $('#message_text').focus();
      });
   });
+
+  $('.participants_link').popover({
+    html: true,
+    title: function(){
+       return Diaspora.I18n.t('conversation.participants') + '<a href="#" class="close"><div class="icons-deletelabel"></div></a>';
+    },
+    content: function() {
+      var conv_id = $(this).data('conversation-id');
+      return $('[data-content-conversation-id="' + conv_id + '"]').html();
+    },
+    trigger: 'manual'
+  });
+
+  $('.participants_link').click(function(e) {
+    e.stopPropagation();
+    var self = $(this);
+    self.popover('show');
+    var popup = self.data('popover').$tip[0];
+    var close = $(popup).find('.close');
+    close.click(function(){
+      self.popover('hide');
+    })
+  });
 });
 
 var resize = function(){

app/assets/stylesheets/application.css.sass

@@ -1947,10 +1947,8 @@ ul#press_logos
 
 
 .conversation_participants
-  :z-index 3
   :background
     :color $background
-  :position relative
   :margin
     :bottom 10px
 
@@ -1958,9 +1956,10 @@ ul#press_logos
   :-moz-box-shadow 0 2px 3px -3px #666
   :box-shadow 0 2px 3px -3px #666
 
-  .right
+  a.close_conversation
-    :top 118px
+    :display block
-    :right 5px
+    :margin-top 20px
+    :float right
 
     .icons-deletelabel
       :height 14px
@@ -2054,6 +2053,16 @@ ul#press_logos
       :weight normal
     :color $blue
 
+  .participants_link
+    :float left
+
+  .conversation_participants_popover_content
+    :display none
+
+  .conversation_participants_popover
+    :margin 0 auto
+    :padding-left 12px
+
   .avatar
     :display inline
     :width 35px
@@ -2062,6 +2071,9 @@ ul#press_logos
       :right 10px
       :bottom 10px
 
+  .participants_left
+    :display block
+
   &:hover:not(.selected)
     :background
       :color #fafafa

app/views/conversations/_conversation.haml

@@ -2,29 +2,23 @@
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
-%a.conversation{:href => conversation_path(conversation)}
+.conversation-wrapper{ :"data-conversation-path" => conversation_path(conversation) }
   .stream_element.conversation{:data=>{:guid=>conversation.id}, :class => ('unread' if unread_counts[conversation.id].to_i > 0)}
     .media
       .img
         = person_image_tag(conversation.author)
 
       .bg
-        .subject
+        = render(:partial => 'conversation_subject',
-          .message_count
+                  :locals => { :conversation => conversation,
-            = conversation.messages.size
+                               :unread_count => unread_counts[conversation.id].to_i })
-          - if unread_counts[conversation.id].to_i > 0
-            .unread_message_count
-              = unread_counts[conversation.id].to_i
-
-          %div{ :class => direction_for(conversation.subject) }
-            = conversation.subject[0..30]
 
         .last_author
           .timestamp
             = t('ago', :time =>  time_ago_in_words(conversation.updated_at))
+
           - if authors[conversation.id].present?
             = authors[conversation.id].name
  
-          - if conversation.participants.size > 2
+          = link_to t('.participants'), '#', :class => 'participants_link', :"data-conversation-id" => conversation.id
-            %span.participant_count
+          = render :partial => 'participants_popover', :locals => { :conversation => conversation }
-              = "(+#{conversation.participants.size - 1})"

app/views/conversations/_conversation.mobile.haml

@@ -0,0 +1,21 @@
+%a.conversation{ :href => conversation_path(conversation) }
+  .stream_element.conversation{:data=>{:guid=>conversation.id}, :class => ('unread' if unread_counts[conversation.id].to_i > 0)}
+    .media
+      .img
+        = person_image_tag(conversation.author)
+
+      .bg
+        = render(:partial => 'conversation_subject',
+                  :locals => { :conversation => conversation,
+                               :unread_count => unread_counts[conversation.id].to_i })
+
+        .last_author
+          .timestamp
+            = t('ago', :time =>  time_ago_in_words(conversation.updated_at))
+
+          - if authors[conversation.id].present?
+            = authors[conversation.id].name
+
+          - if conversation.participants.size > 2
+            %span.participant_count
+              = "(+#{conversation.participants.size - 1})"

app/views/conversations/_conversation_subject.haml

@@ -0,0 +1,9 @@
+.subject
+  .message_count
+    = conversation.messages.size
+  - if unread_count > 0
+    .unread_message_count
+      = unread_count
+
+  %div{ :class => direction_for(conversation.subject) }
+    = conversation.subject[0..30]

app/views/conversations/_participants_popover.haml

@@ -0,0 +1,7 @@
+.conversation_participants_popover_content{ :"data-content-conversation-id" => conversation.id }
+  .conversation_participants_popover
+    - conversation.participants.limit(20).each do |participant|
+      = image_tag(participant.profile.image_url_small, :class => 'avatar', :title => participant.name)
+    - participants_count = conversation.participants.count
+    - if participants_count > 20
+      %span{ :class => 'participants_left' } And #{participants_count - 20} more

app/views/conversations/_show.haml

@@ -3,8 +3,12 @@
 -#   the COPYRIGHT file.
 
 .conversation_participants
-  .right
+  = link_to(content_tag(:div, nil, :class => 'icons-deletelabel'),
-    = link_to(content_tag(:div, nil, :class => 'icons-deletelabel'), conversation_visibility_path(conversation), :method => 'delete', :data => { :confirm => "#{t('.delete')}?" }, :title => t('.delete'))
+            conversation_visibility_path(conversation),
+            :method => 'delete',
+            :data => { :confirm => "#{t('.delete')}?" },
+            :title => t('.delete'),
+            :class => 'close_conversation')
 
   %h3{ :class => direction_for(conversation.subject) }
     = conversation.subject

config/locales/diaspora/en.yml

@@ -327,6 +327,8 @@ en:
       create_a_new_message: "create a new message"
       no_messages: "no messages"
       inbox: "Inbox"
+    conversation:
+      participants: "Participants"
     show:
       reply: "reply"
       replying: "Replying..."

config/locales/javascript/javascript.en.yml

@@ -88,6 +88,9 @@ en:
     people:
       not_found: "and no one was found..."
 
+    conversation:
+      participants: "Participants"
+
     stream:
       hide: "Hide"
       public: "Public"

features/conversations.feature

@@ -5,15 +5,20 @@ Feature: private messages
     I want to converse with people
 
   Background:
-    Given a user with username "bob"
+    Given a user named "Robert Grimm" with email "bob@bob.bob"
     And a user named "Alice Awesome" with email "alice@alice.alice"
     When I sign in as "bob@bob.bob"
-    And a user with username "bob" is connected with "alice_awesome"
+    And a user with username "robert_grimm" is connected with "alice_awesome"
 
   Scenario: send a message
     Given I send a message with subject "Greetings" and text "hello, alice!" to "Alice Awesome"
     Then I should see "Greetings" within "#conversation_inbox"
     And I should see "Greetings" within "#conversation_show"
+    And I follow "Participants"
+    Then I should see the participants popover
+    And I should see "Alice Awesome" as part of the participants popover
+    And I should see "Robert Grimm" as part of the participants popover
+    Then I close the participants popover
     And "Alice Awesome" should be part of active conversation
     And I should see "hello, alice!" within ".stream_container"
     When I sign in as "alice@alice.alice"

features/step_definitions/conversations_steps.rb

@@ -36,3 +36,20 @@ Then /^I send a mobile message with subject "([^"]*)" and text "([^"]*)" to "([^
   step %(I press "Send")
   step %(I wait for the ajax to finish)
 end
+
+Then /^I should see the participants popover$/ do
+  step %(I should see "Participants" within ".popover-title")
+end
+
+Then /^I should see "([^"]*)" as part of the participants popover$/ do |name|
+  within(".conversation_participants_popover") do
+    find("img.avatar[title^='#{name}']").should_not be_nil
+  end
+end
+
+Then /^I close the participants popover$/ do
+  within('.popover-title') do
+    find('.close').click
+  end
+end
+