Commit ff99db1f authored by Steffen van Bergerem's avatar Steffen van Bergerem

Change conversation page style

parent c60e32c5
#conversations_container {
.stream_container { border-left: none; }
.page-conversations {
background-color: $sidebars-background;
.left-pane,
.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; }
}
.stream_element:not(.conversation) .avatar {
min-width: 50px;
.pagination-container > .pagination {
border-radius: 0;
border-top: 1px solid $border-grey;
margin: 0;
padding: 10px;
text-align: center;
width: 100%;
}
.stream_element {
border-bottom: 1px solid $border-grey;
&:first-child { border-top: none; }
a.author{
font-weight: bold;
unicode-bidi: bidi-override;
}
background-color: $white;
padding: 10px;
.avatar{
.avatar {
width: 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 {
margin: 0 0 1em 0;
&:last-child { margin-bottom: 0; }
}
&.new_message {
border-bottom: none;
}
#new_message #message_text{
width: 100%;
max-width: 100%;
min-width: 100%;
}
.stream_element.new-message,
.new-conversation {
label { font-weight: bold; }
textarea {
max-width: 100%;
min-width: 100%;
width: 100%;
}
.timestamp { font-size: $font-size-small; }
}
.stream_element.conversation {
padding: 8px;
.media {
margin-bottom: 0px;
margin-left: 0px;
}
border-top: 1px solid $border-grey;
.timestamp { font-size: $font-size-small; }
.media { margin: 0; }
&:hover:not(.selected), &.selected {
.subject,
......@@ -54,21 +91,16 @@
background-color: lighten($blue,5%);
cursor: pointer;
.participants {
border-color: rgba($border-grey, 1);
height: 31px;
margin-top: 5px;
padding-top: 5px;
border-color: rgba($border-grey, 1)
}
}
&.unread { background-color: darken($background-white, 5%); }
&.selected { background-color: $blue; }
.avatar {
width: 50px;
height: 50px;
float: left;
}
.last_author, .last_message {
font-size: 12px;
line-height: 15px;
......@@ -89,26 +121,23 @@
background-color: rgba($white, 0.7);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
float: left;
font-size: 13px;
font-weight: bold;
height: 15px;
line-height: 15px;
margin-left: -50px;
margin-top: 35px;
margin-top: -15px;
position: absolute;
text-align: center;
width: 50px;
}
.participants {
float: left;
clear: both;
height: 0;
width: 100%;
overflow: hidden;
border-top: 1px dotted rgba($border-grey, 0);
transition: height ease 300ms;
.avatar {
float: left;
margin: 0 5px 0 0;
height: 25px;
width: 25px;
......@@ -133,80 +162,32 @@
color: $blue;
}
}
}
#conversation_show {
.conversation_participants {
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;
.stream_container .conversation-participants {
margin-bottom: 20px;
.hide_conversation, .delete_conversation {
display: block;
margin-top: 15px;
margin-left: 10px;
margin-top: 10px;
}
.avatar {
display: inline;
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; }
height: 50px;
margin-top: 4px;
width: 50px;
}
}
.conversation_participants a:hover { text-decoration: none; }
.stream .stream_element {
padding: 10px;
}
}
#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;
}
.pagination {
margin-left: auto;
margin-right: auto;
text-align: center;
.conversation-participants a:hover { text-decoration: none; }
.disabled a {
background: $background-grey;
}
}
div.pagination{
text-align: center;
width: 100%;
}
.no-conversations {
color: $gray-light;
font-size: $font-size-h4;
font-weight: bold;
padding: 50px 0;
text-align: center;
}
}
......@@ -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 {
ul.as-selections { width: 100% !important; }
input#contact_ids { box-shadow: none; }
......
......@@ -3,7 +3,7 @@
h3 { display: inline; }
}
.conversation {
.conversation_participants {
.conversation-participants {
padding: 1rem 1.2rem;
h3 { margin: 0; }
......@@ -32,7 +32,7 @@
}
.stream .stream_element .timeago,
.conversation_participants .last_message_timeago {
.conversation-participants .last-message-timeago {
display: block;
font-style: italic;
color: $text-grey;
......
......@@ -272,11 +272,6 @@ ul.left_nav .item_count, ul.left_nav .edit {
float: left;
}
.conversation_participants .right, .stream .new_message .right {
right: auto;
left: 0;
}
.prepend-9 {
padding-left: 0;
padding-right: 361px;
......@@ -287,11 +282,6 @@ ul.left_nav .item_count, ul.left_nav .edit {
border-right: 1px solid $border-grey;
}
.stream .new_message .right input[type=reset] {
float: left;
margin-right: 10px;
}
div.content span.rtl {
display: block;
}
......@@ -2,7 +2,7 @@
-# licensed under the Affero General Public License version 3 or later. See
-# 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-left
= person_image_link(message.author, size: :thumb_small, class: "media-object")
......
.stream
= render partial: "message", collection: conversation.messages
.stream_element.new_message
.stream_element.new-message
.media
.media-left
= owner_image_tag(:thumb_small)
......
......@@ -2,7 +2,7 @@
-# licensed under the Affero General Public License version 3 or later. See
-# the COPYRIGHT file.
.conversation_participants
.conversation-participants
.control-icons.pull-right
- if conversation.participants.count > 1
= link_to content_tag(:i, nil, class: "entypo-cross"),
......
......@@ -3,14 +3,14 @@
-# the COPYRIGHT file.
.conversation
.conversation_participants.header-full-width
.conversation-participants.header-full-width
.delete_conversation.pull-right
= link_to(raw("<i class='entypo-trash'></i>"), conversation_visibility_path(conversation),
method: 'delete', data: { confirm: "#{t('.delete')}?" }, class: "remove")
%h3
= conversation.subject
.last_message_timeago
.last-message-timeago
!= t('.last_message', timeago: timeago(conversation.updated_at))
.avatars
......
......@@ -7,8 +7,8 @@
.container-fluid#conversations_container
.row
.col-md-4
#left_pane
#left_pane_header
.left-pane#left_pane
.left-pane-header#left_pane_header
%h3
.pull-right{ class: ("hidden" unless @visibilities)}
= link_to t('.new_conversation'), conversations_path, class: 'btn btn-default'
......@@ -19,10 +19,11 @@
- if @visibilities.count > 0
= render partial: "conversations/conversation", collection: @visibilities, as: :visibility
- else
#no_conversations
.no-conversations
= t('.no_messages')
= will_paginate @visibilities, previous_label: "&laquo;", next_label: "&raquo;",inner_window: 1,
renderer: WillPaginate::ActionView::BootstrapLinkRenderer
.pagination-container
= will_paginate @visibilities, previous_label: "&laquo;", next_label: "&raquo;", inner_window: 1,
renderer: WillPaginate::ActionView::BootstrapLinkRenderer
.col-md-8
......@@ -33,8 +34,9 @@
- else
.stream_container.hidden
#conversation_show
#conversation_new
%h3.text-center
= t('conversations.index.new_conversation')
.row#conversation_new
.col-md-10.col-md-offset-1
= render 'conversations/new'
.new-conversation
%h3.text-center
= t("conversations.index.new_conversation")
= render "conversations/new"
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
end
end
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment