nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

remove participants popover + improve conversations menu

Browse source
This commit is contained in:
Steffen van Bergerem 2013-12-19 04:14:53 +01:00
parent 54def634a7
commit 55b967caf9
12 changed files with 107 additions and 190 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Changelog.md
View file

@ -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)

30
app/assets/javascripts/inbox.js
View file

@ -98,34 +98,4 @@ $(document).ready(function(){
$('#message_text').focus();
});
});
$('.participants_link').popover({
html: true,
title: function(){
return Diaspora.I18n.t('conversation.participants') + '<a href="#" class="close"><div class="icons-deletelabel"></div></a>';
},
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');
})
});
});

197
app/assets/stylesheets/conversations.css.scss
View file

@ -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 {

1
app/assets/stylesheets/new-templates.css.scss
View file

@ -29,5 +29,4 @@
/* conversations */
@import 'conversations';
@import 'popover';
@import 'facebox';

3
app/controllers/conversations_controller.rb
View file

@ -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 }

23
app/views/conversations/_conversation.haml
View file

@ -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 + '«'

4
app/views/conversations/_conversation_subject.haml
View file

@ -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) }

10
app/views/conversations/_participants_popover.haml
View file

@ -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

4
app/views/conversations/_show.haml
View file

@ -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

4
app/views/conversations/index.haml
View file

@ -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

5
features/desktop/conversations.feature
View file

@ -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"

15
features/step_definitions/conversations_steps.rb
View file

@ -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