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

port conversations view to bootstrap

Browse source
This commit is contained in:
Steffen van Bergerem 2013-12-15 01:24:18 +01:00
parent c24d5193e4
commit c11b744a7f
8 changed files with 191 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -15,7 +15,7 @@
@import 'publisher'
@import 'facebox'
@import 'aspects'
@import 'conversations'
@import 'popover'
/* ====== media ====== */
.media
@ -1854,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

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

@ -1,19 +1,77 @@
.span-24 {
width: 100%;
margin: 0;
padding: 0;
}
.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: 10px;
margin-bottom: 5px;
border-bottom: 1px solid $border-grey;
padding: 10px;
padding-top: 0px;
width: 560px;
padding: 5px;
line-height: 0px;
a.close_conversation {
display: block;
margin-top: 5px;
margin-top: 10px;
float: right;
.icons-deletelabel {
@ -22,12 +80,6 @@
}
}
h3 {
margin: 0px;
margin-top: 6px;
padding-bottom: 10px;
}
.avatar {
height: 30px;
width: 30px;
@ -51,20 +103,42 @@
.stream_element.conversation {
padding: 8px;
.subject {
font-size: 14px;
}
.message_count, .unread_message_count {
@include border-radius(5px);
float: right;
right: 5px;
padding: 0px 5px;
padding: 0px 6px;
position: relative;
color: $background-grey;
font-size: 12px;
font-weight: normal;
}
.message_count { background-color: #999; }
.unread_message_count { background-color: #b11; }
.message_count {
background-color: #999;
right: 0px;
}
.unread_message_count {
background-color: #b11;
right: 4px;
}
.participants_link {
clear: right;
float: right;
color: #aaa;
}
.icons-users {
margin-left: 4px;
display: block;
width: 25px;
height: 16px;
}
.participant_count { font-weight: normal; }
.timestamp {
@ -74,24 +148,18 @@
color: $blue;
}
.participants_link {
margin-top: 5px;
clear: right;
float: right;
color: #aaa;
.last_message {
font-size: 12px;
}
.icons-users {
display: block;
width: 25px;
height: 16px;
}
.conversation_participants_popover_content {
display: none;
}
.conversation_participants_popover {
.avatar {
margin-bottom: 10px;
margin-right: 10px;
}
margin: 0px auto;
padding-left: 12px;
}
@ -100,12 +168,19 @@
display: inline;
width: 35px;
height: 35px;
margin-right: 10px;
margin-bottom: 10px;
margin-top: 5px;
}
.participants_left { display: block; }
&:hover:not(.selected) { background-color: $highlight-white; }
&: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; }
}
@ -118,32 +193,27 @@
background-color: $blue;
.subject,
.last_author {
.last_author,
.last_message {
color: $white;
}
.timestamp { color: $background-grey; }
}
#left_pane {
border-right: solid 1px $border-grey;
h3 {
padding-bottom: 0;
margin-bottom: 15px;
}
#left_pane_header {
position: fixed;
top: 50px;
width: 320px;
height: 40px;
padding: 10px;
padding-right: 20px;
border-bottom: 1px solid $border-grey;
}
#conversation_inbox {
position: fixed;
bottom: 0px;
top: 125px;
width: 350px;
overflow-y: auto;
overflow-x: none;

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

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

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

1
app/controllers/conversations_controller.rb
View file

@ -1,5 +1,6 @@
class ConversationsController < ApplicationController
before_filter :authenticate_user!
before_filter -> { @css_framework = :bootstrap }
respond_to :html, :mobile, :json, :js

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 }

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

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

@ -12,30 +12,33 @@
:css
footer{ display:none;}
#left_pane
#left_pane_header
%h3
.right
= link_to t('.new_message'), new_conversation_path, :class => 'button', :rel => 'facebox'
= t('.inbox')
.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')
#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
#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'