Improve participants link style in conversation, close #4236

Move it to the right and replace the text by an image with the nice tooltip, modify the test.

app/assets/javascripts/inbox.js

@@ -100,6 +100,8 @@ $(document).ready(function(){
     trigger: 'manual'
   });
   
+  $('.participants_link > span').tooltip({placement: 'bottom'});
+
   $('.participants_link').click(function(e) {
     e.stopPropagation();
     var self = $(this);

app/assets/stylesheets/application.css.sass

@@ -2051,7 +2051,15 @@ ul#press_logos
     :color $blue
 
   .participants_link
-    :float left
+    :margin-top 5px
+    :clear right
+    :float right
+    :color #aaa
+    
+  .icons-users
+    :display block
+    :width 25px
+    :height 16px
 
   .conversation_participants_popover_content
     :display none

app/views/conversations/_conversation.haml

@@ -20,5 +20,5 @@
           - if authors[conversation.id].present?
             = authors[conversation.id].name
  
-          = link_to t('.participants'), '#', :class => 'participants_link', :"data-conversation-id" => conversation.id
+          = 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 }

features/conversations.feature

@@ -14,7 +14,7 @@ Feature: private messages
     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"
+    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