Merge pull request #4622 from svbergerem/improve-conversations-view

Improve conversations view, port to bootstrap

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)

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);
-};

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
+#contact_visibility_padlock:hover
-  :background
+  @include opacity(0.7)
-    :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
 
 .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

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;
+    }
+  }
+}

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';

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; }
+}
+

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

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 })
-
-        .last_author
         %time.timeago.timestamp{:datetime => conversation.updated_at.iso8601}
           = t('ago', :time =>  time_ago_in_words(conversation.updated_at))
+        .last_author
 
           - 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 }

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) }

app/views/conversations/_show.haml

@@ -16,8 +16,7 @@
   - for participant in conversation.participants
     = person_image_link(participant, :size => :thumb_small)
 
-.span-15.last
+.stream
-  .stream
   = render :partial => 'messages/message', :collection => conversation.messages
 
   .stream_element.new_message

app/views/conversations/index.haml

@@ -9,14 +9,14 @@
 - content_for :page_title do
   = t('.message_inbox')
 
-:css
+.container-fluid.conversations_container
-  footer{ display:none;}
+  .row-fluid
-
+    .span4
-#left_pane
+      #left_pane
         #left_pane_header
           %h3
-      .right
+            .pull-right
-        = link_to t('.new_message'), new_conversation_path, :class => 'button', :rel => 'facebox'
+              = link_to t('.new_message'), new_conversation_path, :class => 'btn btn-default', :rel => 'facebox'
             = t('.inbox')
 
         #conversation_inbox
@@ -24,17 +24,12 @@
             - if @conversations.count > 0
               = render :partial => 'conversations/conversation', :collection => @conversations, :locals => {:authors => @authors, :unread_counts => @unread_counts}
             - else
-        %br
+              #no_conversations
-        %br
-        %br
-        %br
-        %div{:style => 'text-align:center;'}
-          %i
                 = t('.no_messages')
             = will_paginate @conversations
 
 
-.span-15.prepend-9.last
+    .span8
       .stream_container
         #conversation_show
           - if @conversation

app/views/conversations/new.haml

@@ -26,28 +26,27 @@
     autocompleteInput.focus();
   });
 
-#new_message_pane
+.span6#new_message_pane
-  .span-12.last
+  .span5#facebox_header
-    #facebox_header
     %h3
       = t('conversations.index.new_message')
 
   = form_for Conversation.new, html: {class: "new_conversation form_do_not_clear"}, remote: true do |conversation|
 
-      .span-2
+    .span1
       %h4
         = t('.to')
-      .span-10.last
+    .span4
       = text_field_tag "contact_autocomplete"
     .clearfix
     %br
-      .span-2
+    .span1
       %h4
         = t('.subject')
-      .span-10.last
+    .span4
       = conversation.text_field :subject
     %br
-      .span-10.prepend-2.last
+    .span4.offset1
       = text_area_tag "conversation[text]", '', :rows => 5
     .clearfix
     .bottom_submit_section