Change conversation page style
This commit is contained in:
Steffen van Bergerem
parent
c60e32c513
commit
ff99db1fd3
9 changed files with 98 additions and 158 deletions
|
|
@ -1,45 +1,82 @@
|
|||
#conversations_container {
|
||||
.stream_container { border-left: none; }
|
||||
.page-conversations {
|
||||
background-color: $sidebars-background;
|
||||
|
||||
.stream_element:not(.conversation) .avatar {
|
||||
min-width: 50px;
|
||||
.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; }
|
||||
}
|
||||
|
||||
.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%;
|
||||
.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; }
|
||||
.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;
|
||||
.no-conversations {
|
||||
color: $gray-light;
|
||||
font-size: $font-size-h4;
|
||||
font-weight: bold;
|
||||
padding: 50px 0;
|
||||
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 {
|
||||
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")
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.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,9 +19,10 @@
|
|||
- 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: "«", next_label: "»",inner_window: 1,
|
||||
.pagination-container
|
||||
= will_paginate @visibilities, previous_label: "«", next_label: "»", inner_window: 1,
|
||||
renderer: WillPaginate::ActionView::BootstrapLinkRenderer
|
||||
|
||||
|
||||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
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
|
||||
|
|
|
|||
Loading…
Reference in a new issue