remove participants popover + improve conversations menu

Changelog.md

@@ -33,6 +33,7 @@ For more details see https://wiki.diasporafoundation.org/Updating
 * Improve notifications and conversations views design on mobile [#4593](https://github.com/diaspora/diaspora/pull/4593)
 * 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)
 
 ## Bug fixes
 * Highlight down arrow at the user menu on hover [#4441](https://github.com/diaspora/diaspora/pull/4441)

app/assets/javascripts/inbox.js

@@ -98,34 +98,4 @@ $(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 > span').tooltip({placement: 'bottom'});
-
-  $('.participants_link').click(function(e) {
-    e.stopPropagation();
-    var self = $(this);
-    self.popover('show');
-    var popup = self.data('popover').$tip[0];
-
-    // attach tooltips to each avatar showing the name
-    $(popup).find('.avatar').tooltip({ placement: 'bottom' });
-
-    // register handler for the close button
-    var close = $(popup).find('.close');
-    close.click(function(){
-      self.popover('hide');
-    })
-  });
 });

app/assets/stylesheets/conversations.css.scss

@@ -14,9 +14,13 @@
       font-weight: bold;
       unicode-bidi: bidi-override;
     }
+
+    .avatar{
+      width: 50px;
+      height: 50px;
+    }
   }
   .stream .stream_element {
-    padding: 10px;
     p {
       margin: 0 0 1em 0;
       word-wrap: break-word;
@@ -24,134 +28,66 @@
     }
 
     .new_message { border-bottom: none; }
-    .timeago { font-size: smaller; }
+    .timeago { font-size: 11px; }
-    textarea { width: 95%; }
+  }
-    .button.creation {
+}
-      $button-border-color: #aaa;
-      @include border-radius(3px);
-      @include box-shadow(0,1px,1px,#cfcfcf);
-      @include transition(border);
-      @include button-gradient($creation-blue);
-      font-size: 12px;
-      color: #fff;
-      padding: 4px 9px;
-      min-width: 90px;
-      min-height: 10px;
-      border: 1px solid darken($button-border-color,20%);
 
-      cursor: pointer;
+#conversation_show {
-      white-space: nowrap;
+  .conversation_participants {
+    box-shadow: 0 2px 3px -3px #666;
+    -webkit-box-shadow: 0 2px 3px -3px #666;
+    -moz-box-shadow: 0 2px 3px -3px #666;
     
-      &:hover {
+    background-color: $background-white;
-        @include button-gradient-hover($creation-blue);
+    margin-bottom: 5px;
-        border: 1px solid darken($button-border-color,35%);
+    border-bottom: 1px solid $border-grey;
-        text-decoration: none;
+    padding: 5px;
+    line-height: 0px;
+
+    a.close_conversation {
+      display: block;
+      margin-top: 10px;
+      float: right;
+
+      .icons-deletelabel {
+        height: 14px;
+        width: 14px;
       }
     }
-  }
-}
 
-.conversation_participants {
+    .avatar {
-  box-shadow: 0 2px 3px -3px #666;
+      height: 30px;
-  -webkit-box-shadow: 0 2px 3px -3px #666;
+      width: 30px;
-  -moz-box-shadow: 0 2px 3px -3px #666;
+    }
 
-  background-color: $background-white;
+    .avatars {
-  margin-bottom: 5px;
+      text-align: right;
-  border-bottom: 1px solid $border-grey;
+      margin-top: 9px;
-  padding: 5px;
+    }
-  line-height: 0px;
     
-  a.close_conversation {
+    a img { margin-bottom: 4px; }
-    display: block;
-    margin-top: 10px;
-    float: right;
 
-    .icons-deletelabel {
+    .conversation_controls {
-      height: 14px;
+      margin-bottom: 10px;
-      width: 14px;
+      
+      a { margin-right: 10px; }
     }
   }
 
-  .avatar {
+  .conversation_participants a:hover { text-decoration: none; }
-    height: 30px;
-    width: 30px;
-  }
   
-  .avatars {
+  .stream .stream_element {
-    text-align: right;
+    padding: 10px;
-    margin-top: 9px;
-  }
-  
-  a img { margin-bottom: 4px; }
-
-  .conversation_controls {
-    margin-bottom: 10px;
-    
-    a { margin-right: 10px; }
   }
 }
 
-.conversation_participants a:hover { text-decoration: none; }
-
 .stream_element.conversation {
   padding: 8px;
-  
+  .media { 
-  .subject {
+    margin-bottom: 5px; 
-    font-size: 14px;
+    margin-left: 0px;
   }
 
-  .message_count, .unread_message_count {
-    margin-right: 3px;
-    float: right;
-    font-size: 12px;
-    font-weight: normal;
-  }
-  
-  .participants_link {
-    clear: right;
-    float: right;
-    color: #aaa;
-  }
-
-  .icons-users {
-    display: block;
-    width: 25px;
-    height: 16px;
-  }
-  .participant_count { font-weight: normal; }
-
-  .timestamp {
-    position: relative;
-    float: right;
-    font-weight: normal;
-    color: $blue;
-  }
-
-  .last_message {
-    font-size: 12px;
-  }
-  .conversation_participants_popover_content {
-    display: none;
-  }
-
-  .conversation_participants_popover {
-    .avatar {
-      margin-bottom: 10px;
-      margin-right: 10px;
-    }
-    margin: 0px auto;
-    padding-left: 12px;
-  }
-
-  .avatar {
-    display: inline;
-    width: 35px;
-    height: 35px;
-    margin-top: 5px;
-  }
-
-  .participants_left { display: block; }
   &:hover:not(.selected) { 
     background-color: lighten($blue,5%);
     .subject,
@@ -163,6 +99,43 @@
   }
   &.selected:hover { background-color: lighten($blue,5%); }
   &:hover { cursor: pointer; }
+ 
+  .avatar {
+    width: 50px;
+    height: 50px;
+    float: left;
+  }
+  
+  .last_author, .last_message {
+    font-size: 12px;
+    line-height: 15px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .message_count, .unread_message_count {
+    margin-left: 3px;
+    float: right;
+    font-size: 12px;
+    font-weight: normal;
+  }
+  
+  .subject {
+    font-size: 14px;
+    > * {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .timestamp {
+    float: right;
+    line-height: normal;
+    font-weight: normal;
+    color: $blue;
+  }
 }
 
 .conversation.unread {

app/assets/stylesheets/new-templates.css.scss

@@ -29,5 +29,4 @@
 
 /* conversations */
 @import 'conversations';
-@import 'popover';
 @import 'facebox';

app/controllers/conversations_controller.rb

@@ -24,6 +24,9 @@ class ConversationsController < ApplicationController
     @authors = {}
     @conversations.each { |c| @authors[c.id] = c.last_author }
 
+    @ordered_participants = {}
+    @conversations.each { |c| @ordered_participants[c.id] = (c.messages.map{|m| m.author}.reverse + c.participants).uniq }
+
     respond_with do |format|
       format.html
       format.json { render :json => @conversations, :status => 200 }

app/views/conversations/_conversation.haml

@@ -5,24 +5,25 @@
 .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
-      = link_to content_tag(:span, nil, class: 'icons-users', title: t('.participants')), '#', :class => 'participants_link', "data-conversation-id" => conversation.id
-      = render :partial => 'participants_popover', :locals => { :conversation => conversation }
-      = render(:partial => 'conversation_subject',
-                  :locals => { :conversation => conversation,
-                               :unread_count => unread_counts[conversation.id].to_i })
-      
       .img
-        - if authors[conversation.id].present?
+        - other_participants = ordered_participants[conversation.id] - [current_user.person]
-          = person_image_tag(authors[conversation.id])
+        = person_image_tag(other_participants.first)
 
       .bg
+        .badge.badge-dafault.message_count
+          = conversation.messages.size
+        - unread_count = unread_counts[conversation.id].to_i
+        - if unread_count > 0
+          .badge.badge-important.unread_message_count
+            = unread_count
+        .subject
+          %div{ :class => direction_for(conversation.subject) }
+            = conversation.subject
         %time.timeago.timestamp{:datetime => conversation.updated_at.iso8601}
           = t('ago', :time =>  time_ago_in_words(conversation.updated_at))
         .last_author
-
           - if authors[conversation.id].present?
             = authors[conversation.id].name
         .last_message
           - if conversation.messages.present?
-            = conversation.messages.last.text[0..40]
+            = '»' + conversation.messages.last.text + '«'
- 

app/views/conversations/_conversation_subject.haml

@@ -1,8 +1,8 @@
 .subject
-  .label.label-dafault.message_count
+  .badge.badge-dafault.message_count
     = conversation.messages.size
   - if unread_count > 0
-    .label.label-important.unread_message_count
+    .badge.badge-important.unread_message_count
       = unread_count
 
   %div{ :class => direction_for(conversation.subject) }

app/views/conversations/_participants_popover.haml

@@ -1,10 +0,0 @@
-.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,
-          :data => {:toggle => 'tooltip'})
-    - participants_count = conversation.participants.count
-    - if participants_count > 20
-      %span{ :class => 'participants_left' } And #{participants_count - 20} more

app/views/conversations/_show.haml

@@ -26,5 +26,5 @@
 
       .bd
         = form_for [conversation, Message.new] do |message|
-          = message.text_area :text, :rows => 5, :tabindex => 1
+          = message.text_area :text, :class => 'span12', :rows => 5, :tabindex => 1
-          = message.submit t('.reply').capitalize, 'data-disable-with' => t('.replying'), :class => 'button creation', :tabindex => 2
+          = message.submit t('.reply').capitalize, 'data-disable-with' => t('.replying'), :class => 'btn btn-primary', :tabindex => 2

app/views/conversations/index.haml

@@ -22,11 +22,11 @@
         #conversation_inbox
           .stream.conversations
             - if @conversations.count > 0
-              = render :partial => 'conversations/conversation', :collection => @conversations, :locals => {:authors => @authors, :unread_counts => @unread_counts}
+              = render :partial => 'conversations/conversation', :collection => @conversations, :locals => {:authors => @authors, :ordered_participants => @ordered_participants, :unread_counts => @unread_counts}
             - else
               #no_conversations
                 = t('.no_messages')
-            = will_paginate @conversations
+            = will_paginate @conversations, :renderer => WillPaginate::ActionView::BootstrapLinkRenderer
 
 
     .span8

features/desktop/conversations.feature

@@ -16,11 +16,6 @@ Feature: private messages
     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 click on selector "a.participants_link"
-    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

@@ -30,18 +30,3 @@ 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 the participants popover$/ do
-  page.execute_script("$('.popover').css('position', 'static')")
-  page.should have_css ".popover"
-end
-
-Then /^I should see "([^"]*)" as part of the participants popover$/ do |name|
-  find(".conversation_participants_popover img.avatar[data-original-title^='#{name}']").should_not be_nil
-end
-
-Then /^I close the participants popover$/ do
-  find('.popover').hover
-  find('.popover-title .close').click
-end
-