diff --git a/Changelog.md b/Changelog.md index e2b95982d..0f49a3b6b 100644 --- a/Changelog.md +++ b/Changelog.md @@ -19,6 +19,7 @@ A new feature [has been added](https://github.com/diaspora/diaspora/pull/4602) t * Reorder the left bar side menu to put the stream first [#4569](https://github.com/diaspora/diaspora/pull/4569) * Improve notifications and conversations views design on mobile [#4593](https://github.com/diaspora/diaspora/pull/4593) * Slight redesign of mobile publisher [#4604](https://github.com/diaspora/diaspora/pull/4604) +* Port conversations to Bootstrap [#4622](https://github.com/diaspora/diaspora/pull/4622) ## Bug fixes * Highlight down arrow at the user menu on hover [#4441](https://github.com/diaspora/diaspora/pull/4441) diff --git a/app/assets/javascripts/inbox.js b/app/assets/javascripts/inbox.js index c1f367bdb..965e21a1f 100644 --- a/app/assets/javascripts/inbox.js +++ b/app/assets/javascripts/inbox.js @@ -60,11 +60,6 @@ $(document).ready(function(){ } }); - resize(); - $(window).resize(function(){ - resize(); - }); - $('#conversation_inbox .stream').infinitescroll({ navSelector : ".pagination", // selector for the paged navigation (it will be hidden) @@ -134,11 +129,3 @@ $(document).ready(function(){ }) }); }); - -var resize = function(){ - var inboxSidebar = $('#conversation_inbox'), - inboxSidebarOffset = inboxSidebar.offset().top, - windowHeight = $(window).height(); - - inboxSidebar.css('height', windowHeight - inboxSidebarOffset); -}; diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass index ac25683a3..b97a1e1dc 100644 --- a/app/assets/stylesheets/application.css.sass +++ b/app/assets/stylesheets/application.css.sass @@ -15,6 +15,7 @@ @import 'publisher' @import 'facebox' @import 'aspects' +@import 'popover' /* ====== media ====== */ .media @@ -1086,210 +1087,8 @@ ul#press_logos iframe, .thumb img :width 100% -.conversation_participants - :background - :color $background-white - :margin - :bottom 10px - - :-webkit-box-shadow 0 2px 3px -3px #666 - :-moz-box-shadow 0 2px 3px -3px #666 - :box-shadow 0 2px 3px -3px #666 - - a.close_conversation - :display block - :margin-top 20px - :float right - - .icons-deletelabel - :height 14px - :width 14px - - h3 - :margin 0 - :top 6px - :bottom 0px - :padding - :bottom 10px - - .avatar - :height 30px - :width 30px - - :line - :height 0 - - a img - :margin - :bottom 4px - - .conversation_controls - a - :margin - :right 10px - - :margin - :bottom 10px - - :border - :bottom 1px solid $border-grey - :padding 10px - :top 101px - :bottom 10px - :width 560px - :margin - :top -100px - - .avatars - :text - :align right - :margin - :top 9px - -.conversation_participants - a:hover - :text-decoration none - - -.stream_element.conversation - :padding 8px - - .message_count - @include border-radius(5px) - - :float right - :right 0px - :padding 0 5px - :position relative - :background - :color #999 - :color #eee - :font - :size 12px - :weight normal - - .unread_message_count - @include border-radius(5px) - - :float right - :right 5px - :padding 0 5px - :position relative - :background - :color #b11 - :color #eee - :font - :size 12px - :weight normal - - .participant_count - :font - :weight normal - - .timestamp - :position relative - :float right - :font - :weight normal - :color $blue - - .participants_link - :margin-top 5px - :clear right - :float right - :color #aaa - - .icons-users - :display block - :width 25px - :height 16px - - .conversation_participants_popover_content - :display none - - .conversation_participants_popover - :margin 0 auto - :padding-left 12px - - .avatar - :display inline - :width 35px - :height 35px - :margin - :right 10px - :bottom 10px - - .participants_left - :display block - - &:hover:not(.selected) - :background - :color $highlight-white - - &.selected:hover - :background - :color lighten($blue,5%) - - &:hover - :cursor pointer - -.conversation.unread - :background - :color darken($background-white,5%) - -.conversation.selected - :background - :color $blue - .subject - :color #fff - .last_author - :color #fff - .timestamp - :color #eee - :border - :bottom 1px solid darken($blue, 10%) - :top 1px solid darken($blue, 10%) - -#conversation_inbox - :height 100% - :overflow-y auto - :overflow-x none - - a:hover - :text - :decoration none - -#left_pane - :position fixed - :width 337px - - h3 - :padding - :bottom 0 - :margin - :bottom 15px - - #left_pane_header - :padding 10px - :height 55px - :border - :bottom 1px solid $border-grey - -#no_conversation_text - :font - :size 20px - :weight bold - :color #ccc - :text - :align center - :margin - :top 100px - -#no_conversation_controls - :text - :align center - :font - :size 12px +#contact_visibility_padlock:hover + @include opacity(0.7) .side_stream .stream_element @@ -2055,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 diff --git a/app/assets/stylesheets/conversations.css.scss b/app/assets/stylesheets/conversations.css.scss new file mode 100644 index 000000000..05bbad354 --- /dev/null +++ b/app/assets/stylesheets/conversations.css.scss @@ -0,0 +1,250 @@ +.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: 5px; + border-bottom: 1px solid $border-grey; + padding: 5px; + line-height: 0px; + + a.close_conversation { + display: block; + margin-top: 10px; + float: right; + + .icons-deletelabel { + height: 14px; + width: 14px; + } + } + + .avatar { + 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; } + } +} + +.conversation_participants a:hover { text-decoration: none; } + +.stream_element.conversation { + padding: 8px; + + .subject { + font-size: 14px; + } + + .message_count, .unread_message_count { + margin-right: 3px; + float: right; + font-size: 12px; + font-weight: normal; + } + + .participants_link { + clear: right; + float: right; + color: #aaa; + } + + .icons-users { + display: block; + width: 25px; + height: 16px; + } + .participant_count { font-weight: normal; } + + .timestamp { + position: relative; + float: right; + font-weight: normal; + color: $blue; + } + + .last_message { + font-size: 12px; + } + .conversation_participants_popover_content { + display: none; + } + + .conversation_participants_popover { + .avatar { + margin-bottom: 10px; + margin-right: 10px; + } + margin: 0px auto; + padding-left: 12px; + } + + .avatar { + display: inline; + width: 35px; + height: 35px; + margin-top: 5px; + } + + .participants_left { display: block; } + &: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; } +} + +.conversation.unread { + background-color: darken($background-white, 5%); +} + +.conversation.selected { + background-color: $blue; + + .subject, + .last_author, + .last_message { + color: $white; + } + .timestamp { color: $background-grey; } +} + +#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; + } + } +} + +#no_conversations, +#no_conversation_text { + font-weight: bold; + color: #ccc; + text-align: center; + margin-top: 100px; +} + +#no_conversation_text { + font-size: 20px; +} + +#no_conversation_controls { + text-align: center; + font-size: 12px; +} + +#new_message_pane { + ul.as-selections { width: 100% !important; } + input#contact_ids { box-shadow: none; } + textarea { width: 98%; } + + .bottom_submit_section { + text-align: right; + } + + .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; + } + } +} diff --git a/app/assets/stylesheets/new-templates.css.scss b/app/assets/stylesheets/new-templates.css.scss index 4c3c4ecbf..bd0026331 100644 --- a/app/assets/stylesheets/new-templates.css.scss +++ b/app/assets/stylesheets/new-templates.css.scss @@ -26,3 +26,8 @@ @import 'bootstrap-headerfix'; @import 'opengraph'; @import 'single-post-view'; + +/* conversations */ +@import 'conversations'; +@import 'popover'; +@import 'facebox'; diff --git a/app/assets/stylesheets/popover.css.scss b/app/assets/stylesheets/popover.css.scss new file mode 100644 index 000000000..1e29e5d5f --- /dev/null +++ b/app/assets/stylesheets/popover.css.scss @@ -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; } +} + diff --git a/app/controllers/conversations_controller.rb b/app/controllers/conversations_controller.rb index 8b85e43f1..a4be3ea0c 100644 --- a/app/controllers/conversations_controller.rb +++ b/app/controllers/conversations_controller.rb @@ -1,6 +1,9 @@ class ConversationsController < ApplicationController before_filter :authenticate_user! + layout ->(c) { request.format == :mobile ? "application" : "with_header" } + before_filter -> { @css_framework = :bootstrap } + respond_to :html, :mobile, :json, :js def index diff --git a/app/views/conversations/_conversation.haml b/app/views/conversations/_conversation.haml index 264c3767f..5459acf38 100644 --- a/app/views/conversations/_conversation.haml +++ b/app/views/conversations/_conversation.haml @@ -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 } diff --git a/app/views/conversations/_conversation_subject.haml b/app/views/conversations/_conversation_subject.haml index dc0b32b15..82c7f4d77 100644 --- a/app/views/conversations/_conversation_subject.haml +++ b/app/views/conversations/_conversation_subject.haml @@ -1,8 +1,8 @@ .subject - .message_count + .label.label-dafault.message_count = conversation.messages.size - if unread_count > 0 - .unread_message_count + .label.label-important.unread_message_count = unread_count %div{ :class => direction_for(conversation.subject) } diff --git a/app/views/conversations/_show.haml b/app/views/conversations/_show.haml index 61b1af12c..3f5e16f65 100644 --- a/app/views/conversations/_show.haml +++ b/app/views/conversations/_show.haml @@ -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 diff --git a/app/views/conversations/index.haml b/app/views/conversations/index.haml index c9fd40a43..dd2127274 100644 --- a/app/views/conversations/index.haml +++ b/app/views/conversations/index.haml @@ -9,38 +9,33 @@ - content_for :page_title do = t('.message_inbox') -:css - footer{ display:none;} +.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') -#left_pane - #left_pane_header - %h3 - .right - = link_to t('.new_message'), new_conversation_path, :class => 'button', :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 - %br - %br - %br - %br - %div{:style => 'text-align:center;'} - %i - = 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' diff --git a/app/views/conversations/new.haml b/app/views/conversations/new.haml index 36c10b4fd..f15cf2818 100644 --- a/app/views/conversations/new.haml +++ b/app/views/conversations/new.haml @@ -26,29 +26,28 @@ autocompleteInput.focus(); }); -#new_message_pane - .span-12.last - #facebox_header - %h3 - = t('conversations.index.new_message') +.span6#new_message_pane + .span5#facebox_header + %h3 + = t('conversations.index.new_message') - = form_for Conversation.new, html: {class: "new_conversation form_do_not_clear"}, remote: true do |conversation| + = form_for Conversation.new, html: {class: "new_conversation form_do_not_clear"}, remote: true do |conversation| - .span-2 - %h4 - = t('.to') - .span-10.last - = text_field_tag "contact_autocomplete" - .clearfix - %br - .span-2 - %h4 - = t('.subject') - .span-10.last - = conversation.text_field :subject - %br - .span-10.prepend-2.last - = text_area_tag "conversation[text]", '', :rows => 5 - .clearfix - .bottom_submit_section - = conversation.submit t('.send'), 'data-disable-with' => t('.sending'), :class => 'button creation' + .span1 + %h4 + = t('.to') + .span4 + = text_field_tag "contact_autocomplete" + .clearfix + %br + .span1 + %h4 + = t('.subject') + .span4 + = conversation.text_field :subject + %br + .span4.offset1 + = text_area_tag "conversation[text]", '', :rows => 5 + .clearfix + .bottom_submit_section + = conversation.submit t('.send'), 'data-disable-with' => t('.sending'), :class => 'button creation'