Add participants to conversations menu

Changelog.md

@@ -61,6 +61,7 @@ For more details see https://wiki.diasporafoundation.org/Updating
 * Slight redesign of mobile publisher [#4604](https://github.com/diaspora/diaspora/pull/4604)
 * Port conversations to Bootstrap [#4622](https://github.com/diaspora/diaspora/pull/4622)
 * Remove participants popover and improve conversations menu [#4644](https://github.com/diaspora/diaspora/pull/4644)
+* Add participants to conversations menu [#4656](https://github.com/diaspora/diaspora/pull/4656)
 
 ## Bug fixes
 * Highlight down arrow at the user menu on hover [#4441](https://github.com/diaspora/diaspora/pull/4441)

app/assets/javascripts/inbox.js

@@ -24,6 +24,16 @@ $(document).ready(function(){
     jqe.attr('title', '');
   });
 
+  $('.stream_element.conversation').hover(
+    function(){
+      $(this).find('.participants').slideDown('300');
+    },
+    
+    function(){
+      $(this).find('.participants').slideUp('300');
+    }
+  );
+
   $('.conversation-wrapper').live('click', function(){
     var conversation_path = $(this).data('conversation-path');
 

app/assets/stylesheets/conversations.css.scss

@@ -28,7 +28,7 @@
     }
 
     .new_message { border-bottom: none; }
-    .timeago { font-size: 11px; }
+    .timestamp { font-size: 11px; }
   }
 }
 
@@ -84,7 +84,7 @@
 .stream_element.conversation {
   padding: 8px;
   .media { 
-    margin-bottom: 5px; 
+    margin-bottom: 0px; 
     margin-left: 0px;
   }
 
@@ -120,7 +120,41 @@
     font-size: 12px;
     font-weight: normal;
   }
-  
+
+  .participants_count {
+    @include opacity(0.5);
+    &:before { content: '+'; }
+    float: left;
+    background-color: #fff;
+    margin-top: 35px;
+    margin-left: -50px;
+    text-align: center;
+    width: 50px;
+    height: 15px;
+    line-height: 15px;
+    font-size: 13px;
+    font-weight: bold;
+  }
+
+  .participants {
+    display: none;
+    float: left;
+    clear: both;
+    margin-top: 5px;
+    padding-top: 5px;
+    height: 25px;
+    width: 100%;
+    overflow: hidden;
+    border-top: 1px dotted $border-grey;
+    .avatar {
+      margin: 0 5px 0 0;
+      height: 25px;
+      width: 25px;
+    }
+  }
+
+  .img { line-height: 15px; }
+
   .subject {
     font-size: 14px;
     > * {

app/views/conversations/_conversation.haml

@@ -9,6 +9,9 @@
         - other_participants = ordered_participants[conversation.id] - [current_user.person]
         - if other_participants.first.present?
           = person_image_tag(other_participants.first)
+          - if other_participants.count > 1
+            .participants_count
+              = other_participants.count - 1
 
       .bg
         .badge.badge-dafault.message_count
@@ -27,4 +30,8 @@
             = authors[conversation.id].name
         .last_message
           - if conversation.messages.present?
-            = '»' + conversation.messages.last.text + '«'
+            = '»' + conversation.messages.last.text + '«'
+        - if other_participants.count > 1
+          .participants
+            - other_participants.drop(1).take(15).each do |participant|
+              = person_image_tag(participant)

features/desktop/conversations.feature

@@ -16,6 +16,7 @@ Feature: private conversations
     And I should see "Greetings" within "#conversation_show"
     And I should see "less than a minute ago" within "#conversation_inbox"
     And I should see "less than a minute ago" within "#conversation_show"
+    And I should see "Alice Awesome" as a participant
     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

@@ -30,3 +30,7 @@ Then /^I send a mobile message with subject "([^"]*)" and text "([^"]*)" to "([^
   step %(I fill in "conversation_text" with "#{text}")
   step %(I press "Send")
 end
+
+Then /^I should see "([^"]*)" as a participant$/ do |name|
+  find(".conversation.stream_element img.avatar[title^='#{name}']").should_not be_nil
+end