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

Change conversation page style

Browse source
This commit is contained in:
Steffen van Bergerem 2015-09-27 12:44:06 +02:00
parent c60e32c513
commit ff99db1fd3
9 changed files with 98 additions and 158 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

210
app/assets/stylesheets/conversations.scss
View file

@ -1,45 +1,82 @@
#conversations_container { .page-conversations {
.stream_container { border-left: none; } background-color: $sidebars-background;
.stream_element:not(.conversation) .avatar { .left-pane,
min-width: 50px; .new-conversation,
.stream_container .conversation-participants {
background-color: $white;
border: 1px solid $light-grey;
box-shadow: $card-shadow;
margin-top: -10px;
}
.new-conversation,
.left-pane-header,
.stream_container .conversation-participants {
padding: 10px;
}
.left-pane {
margin-bottom: 50px;
.pagination { margin: 5px; }
}
.pagination-container > .pagination {
border-radius: 0;
border-top: 1px solid $border-grey;
margin: 0;
padding: 10px;
text-align: center;
width: 100%;
} }
.stream_element { .stream_element {
border-bottom: 1px solid $border-grey; background-color: $white;
&:first-child { border-top: none; } padding: 10px;
a.author{
font-weight: bold;
unicode-bidi: bidi-override;
}
.avatar{ .avatar {
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
> .media { margin: 0; }
}
.stream_element.message,
.stream_element.new-message {
border: 1px solid $light-grey;
box-shadow: $card-shadow;
margin-bottom: 20px;
.avatar { min-width: 50px; }
.author {
font-weight: bold;
unicode-bidi: bidi-override;
}
p { p {
margin: 0 0 1em 0; margin: 0 0 1em 0;
&:last-child { margin-bottom: 0; } &:last-child { margin-bottom: 0; }
} }
&.new_message { }
border-bottom: none;
#new_message #message_text{ .stream_element.new-message,
width: 100%; .new-conversation {
max-width: 100%; label { font-weight: bold; }
min-width: 100%;
} textarea {
max-width: 100%;
min-width: 100%;
width: 100%;
} }
.timestamp { font-size: $font-size-small; }
} }
.stream_element.conversation { .stream_element.conversation {
padding: 8px; border-top: 1px solid $border-grey;
.media {
margin-bottom: 0px; .timestamp { font-size: $font-size-small; }
margin-left: 0px; .media { margin: 0; }
}
&:hover:not(.selected), &.selected { &:hover:not(.selected), &.selected {
.subject, .subject,
@ -54,21 +91,16 @@
background-color: lighten($blue,5%); background-color: lighten($blue,5%);
cursor: pointer; cursor: pointer;
.participants { .participants {
border-color: rgba($border-grey, 1);
height: 31px; height: 31px;
margin-top: 5px; margin-top: 5px;
padding-top: 5px; padding-top: 5px;
border-color: rgba($border-grey, 1)
} }
} }
&.unread { background-color: darken($background-white, 5%); } &.unread { background-color: darken($background-white, 5%); }
&.selected { background-color: $blue; } &.selected { background-color: $blue; }
.avatar {
width: 50px;
height: 50px;
float: left;
}
.last_author, .last_message { .last_author, .last_message {
font-size: 12px; font-size: 12px;
line-height: 15px; line-height: 15px;
@ -89,26 +121,23 @@
background-color: rgba($white, 0.7); background-color: rgba($white, 0.7);
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
float: left;
font-size: 13px;
font-weight: bold; font-weight: bold;
height: 15px; height: 15px;
line-height: 15px; line-height: 15px;
margin-left: -50px; margin-top: -15px;
margin-top: 35px; position: absolute;
text-align: center; text-align: center;
width: 50px; width: 50px;
} }
.participants { .participants {
float: left;
clear: both;
height: 0; height: 0;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
border-top: 1px dotted rgba($border-grey, 0); border-top: 1px dotted rgba($border-grey, 0);
transition: height ease 300ms; transition: height ease 300ms;
.avatar { .avatar {
float: left;
margin: 0 5px 0 0; margin: 0 5px 0 0;
height: 25px; height: 25px;
width: 25px; width: 25px;
@ -133,80 +162,32 @@
color: $blue; color: $blue;
} }
} }
}
#conversation_show { .stream_container .conversation-participants {
.conversation_participants { margin-bottom: 20px;
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;
.hide_conversation, .delete_conversation { .hide_conversation, .delete_conversation {
display: block; display: block;
margin-top: 15px;
margin-left: 10px; margin-left: 10px;
margin-top: 10px;
} }
.avatar { .avatar {
display: inline; display: inline;
height: 30px; height: 50px;
width: 30px; margin-top: 4px;
} width: 50px;
.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; } .conversation-participants a:hover { text-decoration: none; }
.stream .stream_element { .no-conversations {
padding: 10px; color: $gray-light;
} font-size: $font-size-h4;
} font-weight: bold;
padding: 50px 0;
#left_pane { text-align: center;
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;
}
.pagination {
margin-left: auto;
margin-right: auto;
text-align: center;
.disabled a {
background: $background-grey;
}
}
div.pagination{
text-align: center;
width: 100%;
}
} }
} }
@ -216,39 +197,6 @@
} }
} }
#conversation_new {
label { font-weight: bold; }
.well {
font-weight: bold;
margin-top: 25px;
}
#new_conversation #conversation_text{
width: 100%;
max-width: 100%;
min-width: 100%;
}
}
#no_conversations,
#no_conversation_text {
color: $gray-light;
font-size: $font-size-h4;
font-weight: bold;
padding: 50px 0;
text-align: center;
}
#no_conversation_text {
font-size: 20px;
}
#no_conversation_controls {
text-align: center;
font-size: 12px;
}
#new_conversation_pane { #new_conversation_pane {
ul.as-selections { width: 100% !important; } ul.as-selections { width: 100% !important; }
input#contact_ids { box-shadow: none; } input#contact_ids { box-shadow: none; }

4
app/assets/stylesheets/mobile/conversations.scss
View file

@ -3,7 +3,7 @@
h3 { display: inline; } h3 { display: inline; }
} }
.conversation { .conversation {
.conversation_participants { .conversation-participants {
padding: 1rem 1.2rem; padding: 1rem 1.2rem;
h3 { margin: 0; } h3 { margin: 0; }
@ -32,7 +32,7 @@
} }
.stream .stream_element .timeago, .stream .stream_element .timeago,
.conversation_participants .last_message_timeago { .conversation-participants .last-message-timeago {
display: block; display: block;
font-style: italic; font-style: italic;
color: $text-grey; color: $text-grey;

10
app/assets/stylesheets/rtl.scss
View file

@ -272,11 +272,6 @@ ul.left_nav .item_count, ul.left_nav .edit {
float: left; float: left;
} }
.conversation_participants .right, .stream .new_message .right {
right: auto;
left: 0;
}
.prepend-9 { .prepend-9 {
padding-left: 0; padding-left: 0;
padding-right: 361px; padding-right: 361px;
@ -287,11 +282,6 @@ ul.left_nav .item_count, ul.left_nav .edit {
border-right: 1px solid $border-grey; border-right: 1px solid $border-grey;
} }
.stream .new_message .right input[type=reset] {
float: left;
margin-right: 10px;
}
div.content span.rtl { div.content span.rtl {
display: block; display: block;
} }

2
app/views/conversations/_message.haml
View file

@ -2,7 +2,7 @@
-# licensed under the Affero General Public License version 3 or later. See -# licensed under the Affero General Public License version 3 or later. See
-# the COPYRIGHT file. -# the COPYRIGHT file.
.stream_element{:data=>{:guid=>message.id}, :id => ('first_unread' if @first_unread_message_id == message.id)} .stream_element.message{data: {guid: message.id}, id: ("first_unread" if @first_unread_message_id == message.id)}
.media .media
.media-left .media-left
= person_image_link(message.author, size: :thumb_small, class: "media-object") = person_image_link(message.author, size: :thumb_small, class: "media-object")

2
app/views/conversations/_messages.haml
View file

@ -1,7 +1,7 @@
.stream .stream
= render partial: "message", collection: conversation.messages = render partial: "message", collection: conversation.messages
.stream_element.new_message .stream_element.new-message
.media .media
.media-left .media-left
= owner_image_tag(:thumb_small) = owner_image_tag(:thumb_small)

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

@ -2,7 +2,7 @@
-# licensed under the Affero General Public License version 3 or later. See -# licensed under the Affero General Public License version 3 or later. See
-# the COPYRIGHT file. -# the COPYRIGHT file.
.conversation_participants .conversation-participants
.control-icons.pull-right .control-icons.pull-right
- if conversation.participants.count > 1 - if conversation.participants.count > 1
= link_to content_tag(:i, nil, class: "entypo-cross"), = link_to content_tag(:i, nil, class: "entypo-cross"),

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

@ -3,14 +3,14 @@
-# the COPYRIGHT file. -# the COPYRIGHT file.
.conversation .conversation
.conversation_participants.header-full-width .conversation-participants.header-full-width
.delete_conversation.pull-right .delete_conversation.pull-right
= link_to(raw("<i class='entypo-trash'></i>"), conversation_visibility_path(conversation), = link_to(raw("<i class='entypo-trash'></i>"), conversation_visibility_path(conversation),
method: 'delete', data: { confirm: "#{t('.delete')}?" }, class: "remove") method: 'delete', data: { confirm: "#{t('.delete')}?" }, class: "remove")
%h3 %h3
= conversation.subject = conversation.subject
.last_message_timeago .last-message-timeago
!= t('.last_message', timeago: timeago(conversation.updated_at)) != t('.last_message', timeago: timeago(conversation.updated_at))
.avatars .avatars

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

@ -7,8 +7,8 @@
.container-fluid#conversations_container .container-fluid#conversations_container
.row .row
.col-md-4 .col-md-4
#left_pane .left-pane#left_pane
#left_pane_header .left-pane-header#left_pane_header
%h3 %h3
.pull-right{ class: ("hidden" unless @visibilities)} .pull-right{ class: ("hidden" unless @visibilities)}
= link_to t('.new_conversation'), conversations_path, class: 'btn btn-default' = link_to t('.new_conversation'), conversations_path, class: 'btn btn-default'
@ -19,10 +19,11 @@
- if @visibilities.count > 0 - if @visibilities.count > 0
= render partial: "conversations/conversation", collection: @visibilities, as: :visibility = render partial: "conversations/conversation", collection: @visibilities, as: :visibility
- else - else
#no_conversations .no-conversations
= t('.no_messages') = t('.no_messages')
= will_paginate @visibilities, previous_label: "&laquo;", next_label: "&raquo;",inner_window: 1, .pagination-container
renderer: WillPaginate::ActionView::BootstrapLinkRenderer = will_paginate @visibilities, previous_label: "&laquo;", next_label: "&raquo;", inner_window: 1,
renderer: WillPaginate::ActionView::BootstrapLinkRenderer
.col-md-8 .col-md-8
@ -33,8 +34,9 @@
- else - else
.stream_container.hidden .stream_container.hidden
#conversation_show #conversation_show
#conversation_new .row#conversation_new
%h3.text-center
= t('conversations.index.new_conversation')
.col-md-10.col-md-offset-1 .col-md-10.col-md-offset-1
= render 'conversations/new' .new-conversation
%h3.text-center
= t("conversations.index.new_conversation")
= render "conversations/new"

2
features/step_definitions/conversations_steps.rb
View file

@ -1,5 +1,5 @@
Then /^"([^"]*)" should be part of active conversation$/ do |name| Then /^"([^"]*)" should be part of active conversation$/ do |name|
within(".conversation_participants") do within(".conversation-participants") do
find("img.avatar[title^='#{name}']").should_not be_nil find("img.avatar[title^='#{name}']").should_not be_nil
end end
end end