port conversations view to bootstrap

app/assets/stylesheets/application.css.sass

@@ -15,7 +15,7 @@
 @import 'publisher'
 @import 'facebox'
 @import 'aspects'
-@import 'conversations'
+@import 'popover'
 
 /* ====== media ====== */
 .media
@@ -1854,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

@@ -1,19 +1,77 @@
+.span-24 {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+
+.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: 10px;
+  margin-bottom: 5px;
   border-bottom: 1px solid $border-grey;
-  padding: 10px;
+  padding: 5px;
-  padding-top: 0px;
-  width: 560px;
   line-height: 0px;
 
   a.close_conversation {
     display: block;
-    margin-top: 5px;
+    margin-top: 10px;
     float: right;
 
     .icons-deletelabel {
@@ -22,12 +80,6 @@
     }
   }
 
-  h3 {
-    margin: 0px;
-    margin-top: 6px;
-    padding-bottom: 10px;
-  }
-
   .avatar {
     height: 30px;
     width: 30px;
@@ -52,19 +104,41 @@
 .stream_element.conversation {
   padding: 8px;
   
+  .subject {
+    font-size: 14px;
+  }
+
   .message_count, .unread_message_count {
     @include border-radius(5px);
     float: right;
-    right: 5px;
+    padding: 0px 6px;
-    padding: 0px 5px;
     position: relative;
     color: $background-grey;
     font-size: 12px;
     font-weight: normal;
   }
   
-  .message_count { background-color: #999; }
+  .message_count { 
-  .unread_message_count { background-color: #b11; }
+    background-color: #999;
+    right: 0px;
+  }
+  .unread_message_count { 
+    background-color: #b11;
+    right: 4px;
+  }
+  
+  .participants_link {
+    clear: right;
+    float: right;
+    color: #aaa;
+  }
+
+  .icons-users {
+    margin-left: 4px;
+    display: block;
+    width: 25px;
+    height: 16px;
+  }
   .participant_count { font-weight: normal; }
 
   .timestamp {
@@ -74,24 +148,18 @@
     color: $blue;
   }
 
-  .participants_link {
+  .last_message {
-    margin-top: 5px;
+    font-size: 12px;
-    clear: right;
-    float: right;
-    color: #aaa;
   }
-
-  .icons-users {
-    display: block;
-    width: 25px;
-    height: 16px;
-  }
-
   .conversation_participants_popover_content {
     display: none;
   }
 
   .conversation_participants_popover {
+    .avatar {
+      margin-bottom: 10px;
+      margin-right: 10px;
+    }
     margin: 0px auto;
     padding-left: 12px;
   }
@@ -100,12 +168,19 @@
     display: inline;
     width: 35px;
     height: 35px;
-    margin-right: 10px;
+    margin-top: 5px;
-    margin-bottom: 10px;
   }
 
   .participants_left { display: block; }
-  &:hover:not(.selected) { background-color: $highlight-white; }
+  &: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; }
 }
@@ -118,32 +193,27 @@
   background-color: $blue;
     
   .subject,
-  .last_author {
+  .last_author,
+  .last_message {
     color: $white;
   }
   .timestamp { color: $background-grey; }
 }
 
 #left_pane {
+  border-right: solid 1px $border-grey;
   h3 {
     padding-bottom: 0;
-    margin-bottom: 15px;
   }
 
   #left_pane_header {
-    position: fixed;
-    top: 50px;
-    width: 320px;
-    height: 40px;
     padding: 10px;
+    padding-right: 20px;
     border-bottom: 1px solid $border-grey;
   }
 
   #conversation_inbox {
-    position: fixed;
     bottom: 0px;
-    top: 125px;
-    width: 350px;
     overflow-y: auto;
     overflow-x: none;
 

app/assets/stylesheets/new-templates.css.scss

@@ -26,3 +26,7 @@
 @import 'bootstrap-headerfix';
 @import 'opengraph';
 @import 'single-post-view';
+
+/* conversations */
+@import 'conversations';
+@import 'popover';

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,5 +1,6 @@
 class ConversationsController < ApplicationController
   before_filter :authenticate_user!
+  before_filter -> { @css_framework = :bootstrap }
 
   respond_to :html, :mobile, :json, :js
 

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/_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

@@ -12,11 +12,14 @@
 :css
   footer{ display:none;}
 
-#left_pane
+.container-fluid.conversations_container
+  .row-fluid
+    .span4
+      #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
@@ -29,7 +32,7 @@
             = will_paginate @conversations
 
 
-.span-15.prepend-9.last
+    .span8
       .stream_container
         #conversation_show
           - if @conversation