Commit 90a040bf4c6f864772768fc90124e6bdfb603b74
1 parent
d5dfb87b
Exists in
master
and in
21 other branches
chat: show unread_messages on avatars place
Showing
3 changed files
with
18 additions
and
14 deletions
Show diff stats
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 > 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 > 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; | ... | ... |