chat: show unread_messages on avatars place

Rodrigo Souto
1 parent d5dfb87b
Showing 3 changed files with 18 additions and 14 deletions Show diff stats
app/views/shared/logged_in/xmpp_chat.html.erb
public/javascripts/chat.js
public/stylesheets/chat.css
@@ -60,9 +60,9 @@
       <div class="buddy-item">
         <li class='%{presence_status}'>
           <a id='%{jid_id}' class='icon-menu-%{presence_status}-11' href='#'>
+            <span class="unread-messages"></span>
             %{avatar}
             <span class="name">%{name}</span>
-            <span class="unread-messages icon-chat"></span>
           </a>
         </li>
       </div>
@@ -77,6 +77,7 @@
       <div class="occupant-item">
         <li class='%{presence_status}'>
           <a data-id='%{jid_id}' class='icon-menu-%{presence_status}-11' href='#'>
+            <span class="unread-messages"></span>
             %{avatar}
             <span class="name">%{name}<span>
           </a>
@@ -663,11 +663,13 @@ jQuery(function($) {
       var unread = $('.buddies #'+jid_id+ ' .unread-messages');
       if (hide) {
          unread.hide();
+         unread.siblings('img').show();
          Jabber.unread_messages_of(jid_id, 0);
          unread.text('');
       }
       else {
-         unread.show();
+         unread.siblings('img').hide();
+         unread.css('display', 'inline-block');
          var unread_messages = Jabber.unread_messages_of(jid_id) || 0;
          Jabber.unread_messages_of(jid_id, ++unread_messages);
          unread.text(unread_messages);
@@ -34,7 +34,7 @@
 }
 #chat.opened #buddy-list {
-  width: 65px;
+  width: 70px;
   transition: width 0.3s ease-in;
 }
@@ -87,7 +87,6 @@
   display: inline-block;
   max-width: 128px;
   overflow: hidden;
-  line-height: 35px;
 }
 #buddy-list .buddies li a img, .occupant-list li a img, #chat .avatar {
   border-radius: 5px;
@@ -184,12 +183,19 @@
   top: 45px;
   bottom: 100px;
 }
+
 #chat .unread-messages {
-  float: right;
-  margin-right: 12px;
-  padding-left: 19px;
-  background-position: 0;
+  height: 32px;
+  line-height: 32px;
+  width: 32px;
+  background-color: black;
+  border-radius: 5px;
+  color: white;
+  font-size: 22px;
+  text-align: center;
+  vertical-align: middle;
 }
+
 #chat-window .history .message {
   padding: 10px 8px 10px 6px;
   clear: both;
@@ -427,7 +433,7 @@ div.occupants &gt; a.up {
   position: relative;
 }
 .user-status span, .user-status .ui-icon {
-  margin-left: 7px;
+  margin-left: 10px;
 }
 .user-status .simplemenu-trigger {
@@ -462,11 +468,6 @@ div.occupants &gt; a.up {
 .conversation .self .author {
   float: right;
 }
-#openchat .unread-messages {
-  color: red;
-  font-weight: bold;
-  font-size: 14px;
-}
 #chat .header {
   border: 0;