Improve mobile conversations design

app/assets/javascripts/app/views/conversations_view.js

@@ -27,7 +27,7 @@ app.views.Conversations = Backbone.View.extend({
         cBadge = $("#conversations-link .badge");
 
     if(conv.hasClass("unread") ){
-      var unreadCount = parseInt(conv.find(".unread_message_count").text(), 10);
+      var unreadCount = parseInt(conv.find(".unread-message-count").text(), 10);
 
       if(cBadge.text() !== "") {
         cBadge.text().replace(/\d+/, function(num){
@@ -40,7 +40,7 @@ app.views.Conversations = Backbone.View.extend({
         });
       }
       conv.removeClass("unread");
-      conv.find(".unread_message_count").remove();
+      conv.find(".unread-message-count").remove();
 
       var pos = $("#first_unread").offset().top - 50;
       $("html").animate({scrollTop:pos});

app/assets/stylesheets/conversations.scss

@@ -74,9 +74,8 @@
     }
     .last_author { color: $text-dark-grey; }
 
-    .message_count, .unread_message_count {
+    .message-count, .unread-message-count {
       margin-left: 3px;
-      float: right;
       font-size: 12px;
       font-weight: normal;
     }
@@ -251,7 +250,3 @@
   input#contact_ids { box-shadow: none; }
   label { font-weight: bold; }
 }
-
-.badge-important {
-  background-color: $brand-danger;
-}

app/assets/stylesheets/header.scss

@@ -124,7 +124,6 @@ header > .dark-header > nav {
   .nav-badge {
     margin-bottom: -2px;
     .badge {
-      background-color: $brand-danger;
       position: absolute;
       right: 10px;
       top: 10px;

app/assets/stylesheets/mobile/conversations.scss

@@ -1,11 +1,9 @@
+.conversations-title { margin: 0 0 20px 0; }
 .conversation {
-
   .conversation_participants {
     padding: 1rem 1.2rem;
 
-    h3 {
+    h3 { margin: 0; }
-      margin: 0px;
-    }
 
     .delete_conversation {
       font-size: 2rem;
@@ -56,3 +54,7 @@
     margin-top: 40px;
   }
 }
+
+.subject { padding: 0 10px; }
+
+.message-count, .unread-message-count { margin: 10px 2px; }

app/assets/stylesheets/mobile/mobile.scss

@@ -46,6 +46,8 @@ h3 {  margin-top: 0; }
   border-radius: 4px;
 }
 
+.badge-important { background-color: $red; }
+
 .stream_element,
 .comments {
   overflow: auto;
@@ -529,31 +531,6 @@ select {
   margin-bottom: 5px;
 }
 
-.message_count {
-  border-radius: 2px 2px 2px 2px;
-  float: right;
-  margin: 10px 10px 1px 5px;
-  padding: 0 2px 1px;
-  position: relative;
-  background-color: #999;
-  color: #eee;
-  font-size: 10px;
-  line-height: 12px;
-
-}
-
-.unread_message_count {
-  border-radius: 2px 2px 2px 2px;
-  float: right;
-  margin: 10px 2px 1px 5px;
-  padding: 0 2px 1px;
-  position: relative;
-  background-color: #B11;
-  color: #EEE;
-  font-size: 10px;
-  line-height: 12px;
-}
-
 .last_author {
   position: relative;
   margin: 10px 10px 2px;

app/assets/stylesheets/new_styles/_base.scss

@@ -84,3 +84,8 @@ a.tag { word-break: break-all; }
     padding : 0;
   }
 }
+
+/* badge color */
+.badge-important {
+  background-color: $red;
+}

app/assets/stylesheets/rtl.scss

@@ -258,7 +258,7 @@ ul.comments li form p, ul.show_comments li form p, div.likes li form p, div.disl
   padding-left: 0;
 }
 
-.stream_element.conversation .message_count {
+.stream_element.conversation .message-count {
   right: auto;
   left: 10px;
 }

app/assets/templates/header_tpl.jst.hbs

@@ -16,7 +16,7 @@
             <li>
               <a href="/notifications" title="{{t "header.notifications"}}" class="notifications-link nav-badge">
                 <i class="entypo-bell"></i>
-                <span class="badge {{#unless current_user.notifications_count}} hidden {{/unless}}">
+                <span class="badge badge-important {{#unless current_user.notifications_count}} hidden {{/unless}}">
                   {{current_user.notifications_count}}
                 </span>
               </a>
@@ -24,7 +24,7 @@
             <li>
               <a href="/conversations" title="{{t "header.conversations"}}" class="conversations-link nav-badge">
                 <i class="entypo-mail"></i>
-                <span class="badge {{#unless current_user.unread_messages_count}} hidden {{/unless}}">
+                <span class="badge badge-important {{#unless current_user.unread_messages_count}} hidden {{/unless}}">
                   {{current_user.unread_messages_count}}
                 </span>
               </a>
@@ -43,7 +43,7 @@
             <li class="dropdown" id="notification-dropdown">
               <a id="notifications-link" href="/notifications" title="{{t "header.notifications"}}" class="notifications-link nav-badge hidden-sm hidden-xs" role="button" data-toggle="dropdown" aria-expanded="false" data-target="#">
                 <i class="entypo-bell"></i>
-                <span class="badge {{#unless current_user.notifications_count}} hidden {{/unless}}">
+                <span class="badge badge-important {{#unless current_user.notifications_count}} hidden {{/unless}}">
                   {{current_user.notifications_count}}
                 </span>
               </a>
@@ -76,7 +76,7 @@
             <li>
               <a id="conversations-link" href="/conversations" title="{{t "header.conversations"}}" class="conversations-link nav-badge hidden-sm hidden-xs">
                 <i class="entypo-mail"></i>
-                <span class="badge {{#unless current_user.unread_messages_count}} hidden {{/unless}}">
+                <span class="badge badge-important {{#unless current_user.unread_messages_count}} hidden {{/unless}}">
                   {{current_user.unread_messages_count}}
                 </span>
               </a>

app/views/conversations/_conversation.haml

@@ -16,10 +16,10 @@
               = other_participants.count - 1
 
       .bg
-        .badge.badge-default.message_count
+        .badge.badge-default.message-count.pull-right
           = conversation.messages.size
         - if visibility.unread > 0
-          .badge.badge-important.unread_message_count
+          .badge.badge-important.unread-message-count.pull-right
             = visibility.unread
         .subject
           %div{ :class => direction_for(conversation.subject) }

app/views/conversations/_conversation_subject.haml

@@ -1,8 +1,8 @@
 .subject
-  .badge.badge-default.message_count
+  .badge.badge-default.message-count.pull-right
     = conversation.messages.size
   - if unread_count > 0
-    .badge.badge-important.unread_message_count
+    .badge.badge-important.unread-message-count.pull-right
       = unread_count
 
   %div{ :class => direction_for(conversation.subject) }

app/views/conversations/index.mobile.haml

@@ -2,8 +2,9 @@
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
-.right
+.clearfix.conversations-title
-  = link_to t('.new_conversation'), new_conversation_path, class: 'btn btn-default'
+  %h3= t(".inbox")
+  = link_to t(".new_conversation"), new_conversation_path, class: "btn btn-default pull-right"
 
 - flash.each do |name, msg|
   %div{ id: "flash_#{name}",  class: "expose" }
@@ -11,9 +12,6 @@
   .stream
     %p{ class: "conversation_#{name}" }= msg
 
-%h3
-  = t('.inbox')
-
 #conversation_inbox
   .stream.conversations
     - if @visibilities.count > 0
@@ -21,7 +19,7 @@
     - else
       .no-messages
         %i
-          = t('.no_messages')
+          = t(".no_messages")
 
   = will_paginate @visibilities, previous_label: "«", next_label: "»", inner_window: 1, outer_window: 0,
       renderer: WillPaginate::ActionView::BootstrapLinkRenderer

app/views/layouts/_header.mobile.haml

@@ -10,7 +10,7 @@
           = link_to notifications_path, class: "badge-link", id: "notification-badge" do
             %i.entypo-bell
             - if current_user.unread_notifications.size > 0
-              %span.badge{id: "notification"}
+              %span.badge.badge-important#notification
                 = current_user.unread_notifications.size
 
         -# Conversations
@@ -18,7 +18,7 @@
           = link_to conversations_path, class: "badge-link", id: "conversations-badge" do
             %i.diaspora-custom-mail
             - if current_user.unread_message_count > 0
-              %span.badge{id: "conversation"}
+              %span.badge.badge-important#conversation
                 = current_user.unread_message_count
 
         -# Publisher

spec/javascripts/app/views/conversations_view_spec.js

@@ -15,16 +15,16 @@ describe("app.views.Conversations", function(){
       });
 
       it("removes the unread message counter from the conversation", function() {
-        expect($(".conversation-wrapper > .conversation.selected .unread_message_count").length).toEqual(1);
+        expect($(".conversation-wrapper > .conversation.selected .unread-message-count").length).toEqual(1);
         new app.views.Conversations();
-        expect($(".conversation-wrapper > .conversation.selected .unread_message_count").length).toEqual(0);
+        expect($(".conversation-wrapper > .conversation.selected .unread-message-count").length).toEqual(0);
       });
 
       it("decreases the unread message count in the header", function() {
         var badge = "<div id=\"conversations-link\"><div class=\"badge\">3</div></div>";
         $("header").append(badge);
         expect($("#conversations-link .badge").text().trim()).toEqual("3");
-        expect($(".conversation-wrapper > .conversation .unread_message_count").text().trim()).toEqual("1");
+        expect($(".conversation-wrapper > .conversation .unread-message-count").text().trim()).toEqual("1");
         new app.views.Conversations();
         expect($("#conversations-link .badge").text().trim()).toEqual("2");
       });
@@ -33,7 +33,7 @@ describe("app.views.Conversations", function(){
         var badge = "<div id=\"conversations-link\"><div class=\"badge\">1</div></div>";
         $("header").append(badge);
         expect($("#conversations-link .badge").text().trim()).toEqual("1");
-        expect($(".conversation-wrapper > .conversation.selected .unread_message_count").text().trim()).toEqual("1");
+        expect($(".conversation-wrapper > .conversation.selected .unread-message-count").text().trim()).toEqual("1");
         new app.views.Conversations();
         expect($("#conversations-link .badge").text().trim()).toEqual("0");
         expect($("#conversations-link .badge")).toHaveClass("hidden");