Commit 90a040bf4c6f864772768fc90124e6bdfb603b74

Authored by Rodrigo Souto
1 parent d5dfb87b

chat: show unread_messages on avatars place

app/views/shared/logged_in/xmpp_chat.html.erb
... ... @@ -60,9 +60,9 @@
60 60 <div class="buddy-item">
61 61 <li class='%{presence_status}'>
62 62 <a id='%{jid_id}' class='icon-menu-%{presence_status}-11' href='#'>
  63 + <span class="unread-messages"></span>
63 64 %{avatar}
64 65 <span class="name">%{name}</span>
65   - <span class="unread-messages icon-chat"></span>
66 66 </a>
67 67 </li>
68 68 </div>
... ... @@ -77,6 +77,7 @@
77 77 <div class="occupant-item">
78 78 <li class='%{presence_status}'>
79 79 <a data-id='%{jid_id}' class='icon-menu-%{presence_status}-11' href='#'>
  80 + <span class="unread-messages"></span>
80 81 %{avatar}
81 82 <span class="name">%{name}<span>
82 83 </a>
... ...
public/javascripts/chat.js
... ... @@ -663,11 +663,13 @@ jQuery(function($) {
663 663 var unread = $('.buddies #'+jid_id+ ' .unread-messages');
664 664 if (hide) {
665 665 unread.hide();
  666 + unread.siblings('img').show();
666 667 Jabber.unread_messages_of(jid_id, 0);
667 668 unread.text('');
668 669 }
669 670 else {
670   - unread.show();
  671 + unread.siblings('img').hide();
  672 + unread.css('display', 'inline-block');
671 673 var unread_messages = Jabber.unread_messages_of(jid_id) || 0;
672 674 Jabber.unread_messages_of(jid_id, ++unread_messages);
673 675 unread.text(unread_messages);
... ...
public/stylesheets/chat.css
... ... @@ -34,7 +34,7 @@
34 34 }
35 35  
36 36 #chat.opened #buddy-list {
37   - width: 65px;
  37 + width: 70px;
38 38 transition: width 0.3s ease-in;
39 39 }
40 40  
... ... @@ -87,7 +87,6 @@
87 87 display: inline-block;
88 88 max-width: 128px;
89 89 overflow: hidden;
90   - line-height: 35px;
91 90 }
92 91 #buddy-list .buddies li a img, .occupant-list li a img, #chat .avatar {
93 92 border-radius: 5px;
... ... @@ -184,12 +183,19 @@
184 183 top: 45px;
185 184 bottom: 100px;
186 185 }
  186 +
187 187 #chat .unread-messages {
188   - float: right;
189   - margin-right: 12px;
190   - padding-left: 19px;
191   - background-position: 0;
  188 + height: 32px;
  189 + line-height: 32px;
  190 + width: 32px;
  191 + background-color: black;
  192 + border-radius: 5px;
  193 + color: white;
  194 + font-size: 22px;
  195 + text-align: center;
  196 + vertical-align: middle;
192 197 }
  198 +
193 199 #chat-window .history .message {
194 200 padding: 10px 8px 10px 6px;
195 201 clear: both;
... ... @@ -427,7 +433,7 @@ div.occupants &gt; a.up {
427 433 position: relative;
428 434 }
429 435 .user-status span, .user-status .ui-icon {
430   - margin-left: 7px;
  436 + margin-left: 10px;
431 437 }
432 438  
433 439 .user-status .simplemenu-trigger {
... ... @@ -462,11 +468,6 @@ div.occupants &gt; a.up {
462 468 .conversation .self .author {
463 469 float: right;
464 470 }
465   -#openchat .unread-messages {
466   - color: red;
467   - font-weight: bold;
468   - font-size: 14px;
469   -}
470 471  
471 472 #chat .header {
472 473 border: 0;
... ...