From e2a591249a97ad6022bd79e41860d528b0effe4b Mon Sep 17 00:00:00 2001 From: Christophe Date: Thu, 26 Feb 2015 22:48:54 +0100 Subject: [PATCH 1/2] Replace JQuery slide with transition Conflicts: app/assets/javascripts/inbox.js app/assets/stylesheets/conversations.css.scss --- .../app/views/conversations_view.js | 10 ---------- app/assets/javascripts/inbox.js | 19 +++++++++++++++++++ app/assets/stylesheets/conversations.scss | 8 ++++++-- 3 files changed, 25 insertions(+), 12 deletions(-) diff --git a/app/assets/javascripts/app/views/conversations_view.js b/app/assets/javascripts/app/views/conversations_view.js index a8ba1127e..e3810c1c2 100644 --- a/app/assets/javascripts/app/views/conversations_view.js +++ b/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 diff --git a/app/assets/javascripts/inbox.js b/app/assets/javascripts/inbox.js index e270e121b..efbb3f176 100644 --- a/app/assets/javascripts/inbox.js +++ b/app/assets/javascripts/inbox.js @@ -1,5 +1,24 @@ // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later $(document).ready(function(){ + + if ($('#first_unread').length > 0) { + $("html").scrollTop($('#first_unread').offset().top-45); + } + + $('time.timeago').each(function(i,e) { + var jqe = $(e); + jqe.attr('data-original-title', new Date(jqe.attr('datetime')).toLocaleString()); + jqe.attr('title', ''); + }); + + $('.timeago').tooltip(); + $('.timeago').timeago(); + + $('time.timeago').each(function(i,e) { + var jqe = $(e); + jqe.attr('title', ''); + }); + $(document).on('click', '.conversation-wrapper', function(){ var conversation_path = $(this).data('conversation-path'); $.getScript(conversation_path, function() { diff --git a/app/assets/stylesheets/conversations.scss b/app/assets/stylesheets/conversations.scss index 1f66bf31a..1b2b434f5 100644 --- a/app/assets/stylesheets/conversations.scss +++ b/app/assets/stylesheets/conversations.scss @@ -81,20 +81,24 @@ } .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; + transition: height ease 300ms; .avatar { margin: 0 5px 0 0; height: 25px; width: 25px; } + + .conversation & { + height: 25px; + } } .img { line-height: 15px; } From a11322fd5dc643eef8c4c9c352d7546bff8fead3 Mon Sep 17 00:00:00 2001 From: Lisa Passing Date: Sat, 14 Mar 2015 15:12:18 +0100 Subject: [PATCH 2/2] make css nicer update Changelog remove weird merge thing think of the padding and margin --- Changelog.md | 1 + app/assets/javascripts/inbox.js | 19 ------------------- app/assets/stylesheets/conversations.scss | 14 +++++++------- 3 files changed, 8 insertions(+), 26 deletions(-) diff --git a/Changelog.md b/Changelog.md index 6245cdb4a..41b049067 100644 --- a/Changelog.md +++ b/Changelog.md @@ -101,6 +101,7 @@ diaspora.yml file**. The existing settings from 0.4.x and before will not work a * Partial Backbone port of the notification dropdown [#5707](https://github.com/diaspora/diaspora/pull/5707) * 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) +* Rewrite slide effect in conversations as css transition for better performance ## Bug fixes * orca cannot see 'Add Contact' button [#5158](https://github.com/diaspora/diaspora/pull/5158) diff --git a/app/assets/javascripts/inbox.js b/app/assets/javascripts/inbox.js index efbb3f176..e270e121b 100644 --- a/app/assets/javascripts/inbox.js +++ b/app/assets/javascripts/inbox.js @@ -1,24 +1,5 @@ // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later $(document).ready(function(){ - - if ($('#first_unread').length > 0) { - $("html").scrollTop($('#first_unread').offset().top-45); - } - - $('time.timeago').each(function(i,e) { - var jqe = $(e); - jqe.attr('data-original-title', new Date(jqe.attr('datetime')).toLocaleString()); - jqe.attr('title', ''); - }); - - $('.timeago').tooltip(); - $('.timeago').timeago(); - - $('time.timeago').each(function(i,e) { - var jqe = $(e); - jqe.attr('title', ''); - }); - $(document).on('click', '.conversation-wrapper', function(){ var conversation_path = $(this).data('conversation-path'); $.getScript(conversation_path, function() { diff --git a/app/assets/stylesheets/conversations.scss b/app/assets/stylesheets/conversations.scss index 1b2b434f5..44d005798 100644 --- a/app/assets/stylesheets/conversations.scss +++ b/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; } @@ -83,22 +89,16 @@ .participants { float: left; clear: both; - margin-top: 5px; - padding-top: 5px; 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; width: 25px; } - - .conversation & { - height: 25px; - } } .img { line-height: 15px; }