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

Merge pull request #4622 from svbergerem/improve-conversations-view

Browse source 
Improve conversations view, port to bootstrap
This commit is contained in:
Jonne Haß 2013-12-16 12:54:03 +01:00
commit b3ebe1a408
12 changed files with 363 additions and 319 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Changelog.md
View file

@ -19,6 +19,7 @@ A new feature [has been added](https://github.com/diaspora/diaspora/pull/4602) t
* Reorder the left bar side menu to put the stream first [#4569](https://github.com/diaspora/diaspora/pull/4569)
* 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)
## Bug fixes
* Highlight down arrow at the user menu on hover [#4441](https://github.com/diaspora/diaspora/pull/4441)

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

@ -60,11 +60,6 @@ $(document).ready(function(){
}
});
resize();
$(window).resize(function(){
resize();
});
$('#conversation_inbox .stream').infinitescroll({
navSelector : ".pagination",
// selector for the paged navigation (it will be hidden)
@ -134,11 +129,3 @@ $(document).ready(function(){
})
});
});
var resize = function(){
var inboxSidebar = $('#conversation_inbox'),
inboxSidebarOffset = inboxSidebar.offset().top,
windowHeight = $(window).height();
inboxSidebar.css('height', windowHeight - inboxSidebarOffset);
};

232
app/assets/stylesheets/application.css.sass
View file

@ -15,6 +15,7 @@
@import 'publisher'
@import 'facebox'
@import 'aspects'
@import 'popover'
/* ====== media ====== */
.media
@ -1086,210 +1087,8 @@ ul#press_logos
iframe, .thumb img
:width 100%
.conversation_participants
:background
:color $background-white
:margin
:bottom 10px
:-webkit-box-shadow 0 2px 3px -3px #666
:-moz-box-shadow 0 2px 3px -3px #666
:box-shadow 0 2px 3px -3px #666
a.close_conversation
:display block
:margin-top 20px
:float right
.icons-deletelabel
:height 14px
:width 14px
h3
:margin 0
:top 6px
:bottom 0px
:padding
:bottom 10px
.avatar
:height 30px
:width 30px
:line
:height 0
a img
:margin
:bottom 4px
.conversation_controls
a
:margin
:right 10px
:margin
:bottom 10px
:border
:bottom 1px solid $border-grey
:padding 10px
:top 101px
:bottom 10px
:width 560px
:margin
:top -100px
.avatars
:text
:align right
:margin
:top 9px
.conversation_participants
a:hover
:text-decoration none
.stream_element.conversation
:padding 8px
.message_count
@include border-radius(5px)
:float right
:right 0px
:padding 0 5px
:position relative
:background
:color #999
:color #eee
:font
:size 12px
:weight normal
.unread_message_count
@include border-radius(5px)
:float right
:right 5px
:padding 0 5px
:position relative
:background
:color #b11
:color #eee
:font
:size 12px
:weight normal
.participant_count
:font
:weight normal
.timestamp
:position relative
:float right
:font
:weight normal
:color $blue
.participants_link
:margin-top 5px
:clear right
:float right
:color #aaa
.icons-users
:display block
:width 25px
:height 16px
.conversation_participants_popover_content
:display none
.conversation_participants_popover
:margin 0 auto
:padding-left 12px
.avatar
:display inline
:width 35px
:height 35px
:margin
:right 10px
:bottom 10px
.participants_left
:display block
&:hover:not(.selected)
:background
:color $highlight-white
&.selected:hover
:background
:color lighten($blue,5%)
&:hover
:cursor pointer
.conversation.unread
:background
:color darken($background-white,5%)
.conversation.selected
:background
:color $blue
.subject
:color #fff
.last_author
:color #fff
.timestamp
:color #eee
:border
:bottom 1px solid darken($blue, 10%)
:top 1px solid darken($blue, 10%)
#conversation_inbox
:height 100%
:overflow-y auto
:overflow-x none
a:hover
:text
:decoration none
#left_pane
:position fixed
:width 337px
h3
:padding
:bottom 0
:margin
:bottom 15px
#left_pane_header
:padding 10px
:height 55px
:border
:bottom 1px solid $border-grey
#no_conversation_text
:font
:size 20px
:weight bold
:color #ccc
:text
:align center
:margin
:top 100px
#no_conversation_controls
:text
:align center
:font
:size 12px
#contact_visibility_padlock:hover
@include opacity(0.7)
.side_stream
.stream_element
@ -2055,31 +1854,6 @@ a.toggle_selector
&.hidden
:display none
.popover
.close
@include opacity(0)
@include transition(opacity, 0.2s)
:position relative
:top 1px
:right -5px
:float right
.icons-deletelabel
:height 14px
:width 14px
img
margin-top: 10px
&:hover
.close
@include opacity(0.5)
&:hover
@include opacity(1)
body
.popover
:z-index 1000
.nsfw-shield
@include border-radius(3px)
:background-color $background-grey

250
app/assets/stylesheets/conversations.css.scss Normal file
View file

@ -0,0 +1,250 @@
.conversations_container {
padding-top: 40px;
.stream_element {
border-bottom: 1px solid $border-grey;
&:first-child {
border-top: none;
}
.last_author {
font-size: 12px;
color: $text-dark-grey;
}
a.author{
font-weight: bold;
unicode-bidi: bidi-override;
}
}
.stream .stream_element {
padding: 10px;
p {
margin: 0 0 1em 0;
word-wrap: break-word;
&:last-child { margin-bottom: 0; }
}
.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%);
cursor: pointer;
white-space: nowrap;
&:hover {
@include button-gradient-hover($creation-blue);
border: 1px solid darken($button-border-color,35%);
text-decoration: none;
}
}
}
}
.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;
.icons-deletelabel {
height: 14px;
width: 14px;
}
}
.avatar {
height: 30px;
width: 30px;
}
.avatars {
text-align: right;
margin-top: 9px;
}
a img { margin-bottom: 4px; }
.conversation_controls {
margin-bottom: 10px;
a { margin-right: 10px; }
}
}
.conversation_participants a:hover { text-decoration: none; }
.stream_element.conversation {
padding: 8px;
.subject {
font-size: 14px;
}
.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,
.last_author,
.last_message {
color: $white;
}
.timestamp { color: $background-grey; }
}
&.selected:hover { background-color: lighten($blue,5%); }
&:hover { cursor: pointer; }
}
.conversation.unread {
background-color: darken($background-white, 5%);
}
.conversation.selected {
background-color: $blue;
.subject,
.last_author,
.last_message {
color: $white;
}
.timestamp { color: $background-grey; }
}
#left_pane {
border-right: solid 1px $border-grey;
h3 {
padding-bottom: 0;
}
#left_pane_header {
padding: 10px;
padding-right: 20px;
border-bottom: 1px solid $border-grey;
}
#conversation_inbox {
a:hover {
text-decoration: none;
}
}
}
#no_conversations,
#no_conversation_text {
font-weight: bold;
color: #ccc;
text-align: center;
margin-top: 100px;
}
#no_conversation_text {
font-size: 20px;
}
#no_conversation_controls {
text-align: center;
font-size: 12px;
}
#new_message_pane {
ul.as-selections { width: 100% !important; }
input#contact_ids { box-shadow: none; }
textarea { width: 98%; }
.bottom_submit_section {
text-align: right;
}
.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%);
cursor: pointer;
white-space: nowrap;
&:hover {
@include button-gradient-hover($creation-blue);
border: 1px solid darken($button-border-color,35%);
text-decoration: none;
}
}
}

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

@ -26,3 +26,8 @@
@import 'bootstrap-headerfix';
@import 'opengraph';
@import 'single-post-view';
/* conversations */
@import 'conversations';
@import 'popover';
@import 'facebox';

28
app/assets/stylesheets/popover.css.scss Normal file
View file

@ -0,0 +1,28 @@
.popover {
.close {
@include opacity(0);
@include transition(opacity, 0.2s);
position: relative;
top: 1px;
right: -5px;
float: right;
.icons-deletelabel {
height: 14px;
width: 14px;
}
img { margin-top: 10px; }
}
&:hover {
.close {
@include opacity(0.5);
&:hover { @include opacity(1); }
}
}
}
body {
.popover { z-index: 1000; }
}

3
app/controllers/conversations_controller.rb
View file

@ -1,6 +1,9 @@
class ConversationsController < ApplicationController
before_filter :authenticate_user!
layout ->(c) { request.format == :mobile ? "application" : "with_header" }
before_filter -> { @css_framework = :bootstrap }
respond_to :html, :mobile, :json, :js
def index

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

@ -5,21 +5,24 @@
.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])
.bg
= render(:partial => 'conversation_subject',
:locals => { :conversation => conversation,
:unread_count => unread_counts[conversation.id].to_i })
%time.timeago.timestamp{:datetime => conversation.updated_at.iso8601}
= t('ago', :time => time_ago_in_words(conversation.updated_at))
.last_author
%time.timeago.timestamp{:datetime => conversation.updated_at.iso8601}
= t('ago', :time => time_ago_in_words(conversation.updated_at))
- if authors[conversation.id].present?
= authors[conversation.id].name
.last_message
- if conversation.messages.present?
= conversation.messages.last.text[0..40]
= 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 }

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

@ -1,8 +1,8 @@
.subject
.message_count
.label.label-dafault.message_count
= conversation.messages.size
- if unread_count > 0
.unread_message_count
.label.label-important.unread_message_count
= unread_count
%div{ :class => direction_for(conversation.subject) }

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

@ -16,16 +16,15 @@
- for participant in conversation.participants
= person_image_link(participant, :size => :thumb_small)
.span-15.last
.stream
= render :partial => 'messages/message', :collection => conversation.messages
.stream
= render :partial => 'messages/message', :collection => conversation.messages
.stream_element.new_message
.media
.img
= owner_image_tag(:thumb_small)
.stream_element.new_message
.media
.img
= owner_image_tag(:thumb_small)
.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
.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

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

@ -9,38 +9,33 @@
- content_for :page_title do
= t('.message_inbox')
:css
footer{ display:none;}
.container-fluid.conversations_container
.row-fluid
.span4
#left_pane
#left_pane_header
%h3
.pull-right
= link_to t('.new_message'), new_conversation_path, :class => 'btn btn-default', :rel => 'facebox'
= t('.inbox')
#left_pane
#left_pane_header
%h3
.right
= link_to t('.new_message'), new_conversation_path, :class => 'button', :rel => 'facebox'
= t('.inbox')
#conversation_inbox
.stream.conversations
- if @conversations.count > 0
= render :partial => 'conversations/conversation', :collection => @conversations, :locals => {:authors => @authors, :unread_counts => @unread_counts}
- else
%br
%br
%br
%br
%div{:style => 'text-align:center;'}
%i
= t('.no_messages')
= will_paginate @conversations
#conversation_inbox
.stream.conversations
- if @conversations.count > 0
= render :partial => 'conversations/conversation', :collection => @conversations, :locals => {:authors => @authors, :unread_counts => @unread_counts}
- else
#no_conversations
= t('.no_messages')
= will_paginate @conversations
.span-15.prepend-9.last
.stream_container
#conversation_show
- if @conversation
= render 'conversations/show', :conversation => @conversation
- else
#no_conversation_text
= t('.no_conversation_selected')
#no_conversation_controls
= link_to t('.create_a_new_message'), new_conversation_path, :rel => 'facebox'
.span8
.stream_container
#conversation_show
- if @conversation
= render 'conversations/show', :conversation => @conversation
- else
#no_conversation_text
= t('.no_conversation_selected')
#no_conversation_controls
= link_to t('.create_a_new_message'), new_conversation_path, :rel => 'facebox'

47
app/views/conversations/new.haml
View file

@ -26,29 +26,28 @@
autocompleteInput.focus();
});
#new_message_pane
.span-12.last
#facebox_header
%h3
= t('conversations.index.new_message')
.span6#new_message_pane
.span5#facebox_header
%h3
= t('conversations.index.new_message')
= form_for Conversation.new, html: {class: "new_conversation form_do_not_clear"}, remote: true do |conversation|
= form_for Conversation.new, html: {class: "new_conversation form_do_not_clear"}, remote: true do |conversation|
.span-2
%h4
= t('.to')
.span-10.last
= text_field_tag "contact_autocomplete"
.clearfix
%br
.span-2
%h4
= t('.subject')
.span-10.last
= conversation.text_field :subject
%br
.span-10.prepend-2.last
= text_area_tag "conversation[text]", '', :rows => 5
.clearfix
.bottom_submit_section
= conversation.submit t('.send'), 'data-disable-with' => t('.sending'), :class => 'button creation'
.span1
%h4
= t('.to')
.span4
= text_field_tag "contact_autocomplete"
.clearfix
%br
.span1
%h4
= t('.subject')
.span4
= conversation.text_field :subject
%br
.span4.offset1
= text_area_tag "conversation[text]", '', :rows => 5
.clearfix
.bottom_submit_section
= conversation.submit t('.send'), 'data-disable-with' => t('.sending'), :class => 'button creation'