Merge pull request #5776 from lislis/rewrite-conversation-hover-in-css

Rewrite hover effect on conversations with multiple participants in css

Conflicts:
	Changelog.md

Changelog.md

@@ -102,6 +102,7 @@ diaspora.yml file**. The existing settings from 0.4.x and before will not work a
 * Add rounded corners for avatars [#5733](https://github.com/diaspora/diaspora/pull/5733)
 * Move registration form to a partial [#5764](https://github.com/diaspora/diaspora/pull/5764)
 * Add tests for liking and unliking posts [#5741](https://github.com/diaspora/diaspora/pull/5741)
+* Rewrite slide effect in conversations as css transition for better performance [#5776](https://github.com/diaspora/diaspora/pull/5776)
 
 ## Bug fixes
 * orca cannot see 'Add Contact' button [#5158](https://github.com/diaspora/diaspora/pull/5158)

app/assets/javascripts/app/views/conversations_view.js

@@ -5,8 +5,6 @@ app.views.Conversations = Backbone.View.extend({
   el: "#conversations_container",
 
   events: {
-    "mouseenter .stream_element.conversation" : "showParticipants",
-    "mouseleave .stream_element.conversation" : "hideParticipants",
     "conversation:loaded" : "setupConversation"
   },
 
@@ -45,14 +43,6 @@ app.views.Conversations = Backbone.View.extend({
     } else {
       $("html").animate({scrollTop:0});
     }
-  },
-
-  hideParticipants: function(e){
-    $(e.currentTarget).find('.participants').slideUp('300');
-  },
-
-  showParticipants: function(e){
-    $(e.currentTarget).find('.participants').slideDown('300');
   }
 });
 // @license-end

app/assets/stylesheets/conversations.scss

@@ -39,6 +39,12 @@
     &:hover, &.unread:hover, &.selected:hover {
       background-color: lighten($blue,5%);
       cursor: pointer;
+      .participants {
+        height: 25px;
+        margin-top: 5px;
+        padding-top: 5px;
+        border-color: rgba($border-grey, 1)
+      }
     }
     &.unread { background-color: darken($background-white, 5%); }
     &.selected { background-color: $blue; }
@@ -81,15 +87,13 @@
     }
 
     .participants {
-      display: none;
       float: left;
       clear: both;
-      margin-top: 5px;
-      padding-top: 5px;
-      height: 25px;
+      height: 0;
       width: 100%;
       overflow: hidden;
-      border-top: 1px dotted $border-grey;
+      border-top: 1px dotted rgba($border-grey, 0);
+      transition: height ease 300ms;
       .avatar {
         margin: 0 5px 0 0;
         height: 25px;