diff --git a/Changelog.md b/Changelog.md index 779b3ea38..004bb298b 100644 --- a/Changelog.md +++ b/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) diff --git a/app/assets/javascripts/inbox.js b/app/assets/javascripts/inbox.js index 965e21a1f..eed96cb21 100644 --- a/app/assets/javascripts/inbox.js +++ b/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') + '
'; - }, - 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'); - }) - }); }); diff --git a/app/assets/stylesheets/conversations.css.scss b/app/assets/stylesheets/conversations.css.scss index 05bbad354..cc5c06459 100644 --- a/app/assets/stylesheets/conversations.css.scss +++ b/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; } - 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%); + .timeago { font-size: 11px; } + } +} - cursor: pointer; - white-space: nowrap; +#conversation_show { + .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; + + background-color: $background-white; + margin-bottom: 5px; + border-bottom: 1px solid $border-grey; + padding: 5px; + line-height: 0px; - &:hover { - @include button-gradient-hover($creation-blue); - border: 1px solid darken($button-border-color,35%); - text-decoration: none; + a.close_conversation { + display: block; + margin-top: 10px; + float: right; + + .icons-deletelabel { + height: 14px; + width: 14px; } } - } -} - -.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; - - background-color: $background-white; - margin-bottom: 5px; - border-bottom: 1px solid $border-grey; - padding: 5px; - line-height: 0px; - a.close_conversation { - display: block; - margin-top: 10px; - float: right; + .avatar { + height: 30px; + width: 30px; + } - .icons-deletelabel { - height: 14px; - width: 14px; + .avatars { + text-align: right; + margin-top: 9px; + } + + a img { margin-bottom: 4px; } + + .conversation_controls { + margin-bottom: 10px; + + a { margin-right: 10px; } } } - .avatar { - height: 30px; - width: 30px; - } - - .avatars { - text-align: right; - margin-top: 9px; - } + .conversation_participants a:hover { text-decoration: none; } - a img { margin-bottom: 4px; } - - .conversation_controls { - margin-bottom: 10px; - - a { margin-right: 10px; } + .stream .stream_element { + padding: 10px; } } -.conversation_participants a:hover { text-decoration: none; } - .stream_element.conversation { padding: 8px; - - .subject { - font-size: 14px; + .media { + margin-bottom: 5px; + 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 { diff --git a/app/assets/stylesheets/new-templates.css.scss b/app/assets/stylesheets/new-templates.css.scss index bd0026331..72ec0ad1d 100644 --- a/app/assets/stylesheets/new-templates.css.scss +++ b/app/assets/stylesheets/new-templates.css.scss @@ -29,5 +29,4 @@ /* conversations */ @import 'conversations'; -@import 'popover'; @import 'facebox'; diff --git a/app/controllers/conversations_controller.rb b/app/controllers/conversations_controller.rb index a4be3ea0c..acc024dca 100644 --- a/app/controllers/conversations_controller.rb +++ b/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 } diff --git a/app/views/conversations/_conversation.haml b/app/views/conversations/_conversation.haml index 5459acf38..65686ae92 100644 --- a/app/views/conversations/_conversation.haml +++ b/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? - = person_image_tag(authors[conversation.id]) + - other_participants = ordered_participants[conversation.id] - [current_user.person] + = 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 + '«' diff --git a/app/views/conversations/_conversation_subject.haml b/app/views/conversations/_conversation_subject.haml index 82c7f4d77..cde73f0ed 100644 --- a/app/views/conversations/_conversation_subject.haml +++ b/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) } diff --git a/app/views/conversations/_participants_popover.haml b/app/views/conversations/_participants_popover.haml deleted file mode 100644 index e955a6792..000000000 --- a/app/views/conversations/_participants_popover.haml +++ /dev/null @@ -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 diff --git a/app/views/conversations/_show.haml b/app/views/conversations/_show.haml index 3f5e16f65..8a21e4fda 100644 --- a/app/views/conversations/_show.haml +++ b/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.submit t('.reply').capitalize, 'data-disable-with' => t('.replying'), :class => 'button creation', :tabindex => 2 + = message.text_area :text, :class => 'span12', :rows => 5, :tabindex => 1 + = message.submit t('.reply').capitalize, 'data-disable-with' => t('.replying'), :class => 'btn btn-primary', :tabindex => 2 diff --git a/app/views/conversations/index.haml b/app/views/conversations/index.haml index dd2127274..269a1c75b 100644 --- a/app/views/conversations/index.haml +++ b/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 diff --git a/features/desktop/conversations.feature b/features/desktop/conversations.feature index b78e7af43..99f276600 100644 --- a/features/desktop/conversations.feature +++ b/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" diff --git a/features/step_definitions/conversations_steps.rb b/features/step_definitions/conversations_steps.rb index a813f1f17..edf138ddc 100644 --- a/features/step_definitions/conversations_steps.rb +++ b/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 -