From ff99db1fd3db6df645bdac43a9eb815cc5c4988c Mon Sep 17 00:00:00 2001 From: Steffen van Bergerem Date: Sun, 27 Sep 2015 12:44:06 +0200 Subject: [PATCH] Change conversation page style --- app/assets/stylesheets/conversations.scss | 210 +++++++----------- .../stylesheets/mobile/conversations.scss | 4 +- app/assets/stylesheets/rtl.scss | 10 - app/views/conversations/_message.haml | 2 +- app/views/conversations/_messages.haml | 2 +- app/views/conversations/_show.haml | 2 +- app/views/conversations/_show.mobile.haml | 4 +- app/views/conversations/index.haml | 20 +- .../step_definitions/conversations_steps.rb | 2 +- 9 files changed, 98 insertions(+), 158 deletions(-) diff --git a/app/assets/stylesheets/conversations.scss b/app/assets/stylesheets/conversations.scss index 5a3dd7a54..62e0a3fef 100644 --- a/app/assets/stylesheets/conversations.scss +++ b/app/assets/stylesheets/conversations.scss @@ -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%; - 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; } + .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; - - .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; } diff --git a/app/assets/stylesheets/mobile/conversations.scss b/app/assets/stylesheets/mobile/conversations.scss index aa80478b1..ac6495f65 100644 --- a/app/assets/stylesheets/mobile/conversations.scss +++ b/app/assets/stylesheets/mobile/conversations.scss @@ -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; diff --git a/app/assets/stylesheets/rtl.scss b/app/assets/stylesheets/rtl.scss index b3c969882..30f7f2afe 100644 --- a/app/assets/stylesheets/rtl.scss +++ b/app/assets/stylesheets/rtl.scss @@ -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; } diff --git a/app/views/conversations/_message.haml b/app/views/conversations/_message.haml index c225aa1f4..b20df1d98 100644 --- a/app/views/conversations/_message.haml +++ b/app/views/conversations/_message.haml @@ -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") diff --git a/app/views/conversations/_messages.haml b/app/views/conversations/_messages.haml index 8aba41429..3b6781600 100644 --- a/app/views/conversations/_messages.haml +++ b/app/views/conversations/_messages.haml @@ -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) diff --git a/app/views/conversations/_show.haml b/app/views/conversations/_show.haml index bb9e2aa68..149afc0db 100644 --- a/app/views/conversations/_show.haml +++ b/app/views/conversations/_show.haml @@ -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"), diff --git a/app/views/conversations/_show.mobile.haml b/app/views/conversations/_show.mobile.haml index 4ca114144..d95f78932 100644 --- a/app/views/conversations/_show.mobile.haml +++ b/app/views/conversations/_show.mobile.haml @@ -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(""), 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 diff --git a/app/views/conversations/index.haml b/app/views/conversations/index.haml index 660ced939..afd9585f0 100644 --- a/app/views/conversations/index.haml +++ b/app/views/conversations/index.haml @@ -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: "«", next_label: "»",inner_window: 1, - renderer: WillPaginate::ActionView::BootstrapLinkRenderer + .pagination-container + = will_paginate @visibilities, previous_label: "«", next_label: "»", 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" diff --git a/features/step_definitions/conversations_steps.rb b/features/step_definitions/conversations_steps.rb index 51224deee..831affea0 100644 --- a/features/step_definitions/conversations_steps.rb +++ b/features/step_definitions/conversations_steps.rb @@ -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