From 3f3fe3ecc7d2a53995660bfeec850b4c11a7dadc Mon Sep 17 00:00:00 2001 From: Juan Azambuja Date: Sat, 1 Jun 2013 12:14:16 -0300 Subject: [PATCH] Add participants preview con conversations --- Changelog.md | 3 +- app/assets/javascripts/inbox.js | 29 +++++++++++++++++-- app/assets/stylesheets/application.css.sass | 22 ++++++++++---- app/views/conversations/_conversation.haml | 22 +++++--------- .../conversations/_conversation.mobile.haml | 21 ++++++++++++++ .../conversations/_conversation_subject.haml | 9 ++++++ .../conversations/_participants_popover.haml | 7 +++++ app/views/conversations/_show.haml | 8 +++-- config/locales/diaspora/en.yml | 2 ++ config/locales/javascript/javascript.en.yml | 3 ++ features/conversations.feature | 9 ++++-- .../step_definitions/conversations_steps.rb | 17 +++++++++++ 12 files changed, 125 insertions(+), 27 deletions(-) create mode 100644 app/views/conversations/_conversation.mobile.haml create mode 100644 app/views/conversations/_conversation_subject.haml create mode 100644 app/views/conversations/_participants_popover.haml diff --git a/Changelog.md b/Changelog.md index 3c225432e..1b8d604c0 100644 --- a/Changelog.md +++ b/Changelog.md @@ -172,7 +172,8 @@ everything is set up. ## Features -* Deleting a post that was shared to Facebook now deletes it from Facebook too [#3980](https://github.com/diaspora/diaspora/pull/3980) +* Improvement on how participants are displayed on each conversation without opening it [#4149](https://github.com/diaspora/diaspora/pull/4149) +* Deleting a post that was shared to Facebook now deletes it from Facebook too [#3980]( https://github.com/diaspora/diaspora/pull/3980) * Include reshares in a users public atom feed [#1781](https://github.com/diaspora/diaspora/issues/1781) * Add the ability to upload photos from the mobile site. [#4004](https://github.com/diaspora/diaspora/issues/4004) * Show timestamp when hovering on comment time-ago string. [#4042](https://github.com/diaspora/diaspora/issues/4042) diff --git a/app/assets/javascripts/inbox.js b/app/assets/javascripts/inbox.js index 899fb27d0..1df6c0abf 100644 --- a/app/assets/javascripts/inbox.js +++ b/app/assets/javascripts/inbox.js @@ -10,8 +10,8 @@ $(document).ready(function(){ $("html").scrollTop($('#first_unread').offset().top-45); } - $('a.conversation').live('click', function(){ - $.getScript(this.href, function() { + $('.conversation-wrapper').live('click', function(){ + $.getScript($(this).data('conversation-path'), function() { Diaspora.page.directionDetector.updateBinds(); }); history.pushState(null, "", this.href); @@ -62,7 +62,7 @@ $(document).ready(function(){ loadingText: "", loadingImg: '/assets/ajax-loader.gif' }, function(){ - $('.conversation', '.stream').bind('mousedown', function(){ + $('.conversation-wrapper', '.stream').bind('mousedown', function(){ bindIt($(this)); }); }); @@ -87,6 +87,29 @@ $(document).ready(function(){ $('#message_text').focus(); }); }); + + $('.participants_link').popover({ + html: true, + title: function(){ + return Diaspora.I18n.t('conversation.participants') + '
'; + }, + content: function() { + var conv_id = $(this).data('conversation-id'); + return $('[data-content-conversation-id="' + conv_id + '"]').html(); + }, + trigger: 'manual' + }); + + $('.participants_link').click(function(e) { + e.stopPropagation(); + var self = $(this); + self.popover('show'); + var popup = self.data('popover').$tip[0]; + var close = $(popup).find('.close'); + close.click(function(){ + self.popover('hide'); + }) + }); }); var resize = function(){ diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass index 29b5f5048..ef628f090 100644 --- a/app/assets/stylesheets/application.css.sass +++ b/app/assets/stylesheets/application.css.sass @@ -1947,10 +1947,8 @@ ul#press_logos .conversation_participants - :z-index 3 :background :color $background - :position relative :margin :bottom 10px @@ -1958,9 +1956,10 @@ ul#press_logos :-moz-box-shadow 0 2px 3px -3px #666 :box-shadow 0 2px 3px -3px #666 - .right - :top 118px - :right 5px + a.close_conversation + :display block + :margin-top 20px + :float right .icons-deletelabel :height 14px @@ -2054,6 +2053,16 @@ ul#press_logos :weight normal :color $blue + .participants_link + :float left + + .conversation_participants_popover_content + :display none + + .conversation_participants_popover + :margin 0 auto + :padding-left 12px + .avatar :display inline :width 35px @@ -2062,6 +2071,9 @@ ul#press_logos :right 10px :bottom 10px + .participants_left + :display block + &:hover:not(.selected) :background :color #fafafa diff --git a/app/views/conversations/_conversation.haml b/app/views/conversations/_conversation.haml index ed7764419..9a165a43e 100644 --- a/app/views/conversations/_conversation.haml +++ b/app/views/conversations/_conversation.haml @@ -2,29 +2,23 @@ -# licensed under the Affero General Public License version 3 or later. See -# the COPYRIGHT file. -%a.conversation{:href => conversation_path(conversation)} +.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 .img = person_image_tag(conversation.author) .bg - .subject - .message_count - = conversation.messages.size - - if unread_counts[conversation.id].to_i > 0 - .unread_message_count - = unread_counts[conversation.id].to_i - - %div{ :class => direction_for(conversation.subject) } - = conversation.subject[0..30] + = render(:partial => 'conversation_subject', + :locals => { :conversation => conversation, + :unread_count => unread_counts[conversation.id].to_i }) .last_author .timestamp = t('ago', :time => time_ago_in_words(conversation.updated_at)) + - if authors[conversation.id].present? = authors[conversation.id].name - - - if conversation.participants.size > 2 - %span.participant_count - = "(+#{conversation.participants.size - 1})" + + = link_to t('.participants'), '#', :class => 'participants_link', :"data-conversation-id" => conversation.id + = render :partial => 'participants_popover', :locals => { :conversation => conversation } diff --git a/app/views/conversations/_conversation.mobile.haml b/app/views/conversations/_conversation.mobile.haml new file mode 100644 index 000000000..73dd5bd98 --- /dev/null +++ b/app/views/conversations/_conversation.mobile.haml @@ -0,0 +1,21 @@ +%a.conversation{ :href => conversation_path(conversation) } + .stream_element.conversation{:data=>{:guid=>conversation.id}, :class => ('unread' if unread_counts[conversation.id].to_i > 0)} + .media + .img + = person_image_tag(conversation.author) + + .bg + = render(:partial => 'conversation_subject', + :locals => { :conversation => conversation, + :unread_count => unread_counts[conversation.id].to_i }) + + .last_author + .timestamp + = t('ago', :time => time_ago_in_words(conversation.updated_at)) + + - if authors[conversation.id].present? + = authors[conversation.id].name + + - if conversation.participants.size > 2 + %span.participant_count + = "(+#{conversation.participants.size - 1})" diff --git a/app/views/conversations/_conversation_subject.haml b/app/views/conversations/_conversation_subject.haml new file mode 100644 index 000000000..dc0b32b15 --- /dev/null +++ b/app/views/conversations/_conversation_subject.haml @@ -0,0 +1,9 @@ +.subject + .message_count + = conversation.messages.size + - if unread_count > 0 + .unread_message_count + = unread_count + + %div{ :class => direction_for(conversation.subject) } + = conversation.subject[0..30] diff --git a/app/views/conversations/_participants_popover.haml b/app/views/conversations/_participants_popover.haml new file mode 100644 index 000000000..d6adb542e --- /dev/null +++ b/app/views/conversations/_participants_popover.haml @@ -0,0 +1,7 @@ +.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) + - participants_count = conversation.participants.count + - if participants_count > 20 + %span{ :class => 'participants_left' } And #{participants_count - 20} more diff --git a/app/views/conversations/_show.haml b/app/views/conversations/_show.haml index b918f5dc6..61b1af12c 100644 --- a/app/views/conversations/_show.haml +++ b/app/views/conversations/_show.haml @@ -3,8 +3,12 @@ -# the COPYRIGHT file. .conversation_participants - .right - = link_to(content_tag(:div, nil, :class => 'icons-deletelabel'), conversation_visibility_path(conversation), :method => 'delete', :data => { :confirm => "#{t('.delete')}?" }, :title => t('.delete')) + = link_to(content_tag(:div, nil, :class => 'icons-deletelabel'), + conversation_visibility_path(conversation), + :method => 'delete', + :data => { :confirm => "#{t('.delete')}?" }, + :title => t('.delete'), + :class => 'close_conversation') %h3{ :class => direction_for(conversation.subject) } = conversation.subject diff --git a/config/locales/diaspora/en.yml b/config/locales/diaspora/en.yml index 6b98b10b2..1efd46ebf 100644 --- a/config/locales/diaspora/en.yml +++ b/config/locales/diaspora/en.yml @@ -327,6 +327,8 @@ en: create_a_new_message: "create a new message" no_messages: "no messages" inbox: "Inbox" + conversation: + participants: "Participants" show: reply: "reply" replying: "Replying..." diff --git a/config/locales/javascript/javascript.en.yml b/config/locales/javascript/javascript.en.yml index 4c2507c2f..76ce08576 100644 --- a/config/locales/javascript/javascript.en.yml +++ b/config/locales/javascript/javascript.en.yml @@ -88,6 +88,9 @@ en: people: not_found: "and no one was found..." + conversation: + participants: "Participants" + stream: hide: "Hide" public: "Public" diff --git a/features/conversations.feature b/features/conversations.feature index 1ea9a316b..bf69da0b1 100644 --- a/features/conversations.feature +++ b/features/conversations.feature @@ -5,15 +5,20 @@ Feature: private messages I want to converse with people Background: - Given a user with username "bob" + Given a user named "Robert Grimm" with email "bob@bob.bob" And a user named "Alice Awesome" with email "alice@alice.alice" When I sign in as "bob@bob.bob" - And a user with username "bob" is connected with "alice_awesome" + And a user with username "robert_grimm" is connected with "alice_awesome" Scenario: send a message 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" + 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" diff --git a/features/step_definitions/conversations_steps.rb b/features/step_definitions/conversations_steps.rb index 90ffa4d5b..d3d9d8c96 100644 --- a/features/step_definitions/conversations_steps.rb +++ b/features/step_definitions/conversations_steps.rb @@ -36,3 +36,20 @@ Then /^I send a mobile message with subject "([^"]*)" and text "([^"]*)" to "([^ step %(I press "Send") step %(I wait for the ajax to finish) end + +Then /^I should see the participants popover$/ do + step %(I should see "Participants" within ".popover-title") +end + +Then /^I should see "([^"]*)" as part of the participants popover$/ do |name| + within(".conversation_participants_popover") do + find("img.avatar[title^='#{name}']").should_not be_nil + end +end + +Then /^I close the participants popover$/ do + within('.popover-title') do + find('.close').click + end +end +