Download as
Browse Code »

Commit a2d483bac697600b5c12d4a491a926d405871f03

Authored by Victor Costa
1 parent 35bf1408
Exists in theme-brasil-digital-from-staging and in 9 other branches angular_poc, api-article-archived, backup-7-jan-2016, captcha_serpro_plugin, login-captcha, production, resend_confirmation_email, staging, staging_rails3

Small fixes in chat ui

Showing 4 changed files with 50 additions and 33 deletions   Show diff stats
app/views/shared/logged_in/xmpp_chat.html.erb
  Diff comments   View file @a2d483b
... ... @@ -4,36 +4,19 @@
4 4 <% extend ChatHelper %>
5 5  
6 6 <script type='text/javascript'>
7   - var $presence_status_label = {
8   - chat: '<%= _('Online') %>',
9   - dnd: '<%= _('Busy') %>',
10   - '': '<%= _('Offline') %>'
11   - };
12 7 var $own_name = '<%= user.name %>';
13   - var $starting_chat_notice = '<%= _("starting chat with %{name}") %>';
14 8 var $muc_domain = '<%= "conference.#{environment.default_hostname}" %>';
15 9 var $bosh_service = '//<%= environment.default_hostname %>/http-bind';
16 10 var $user_unavailable_error = '<%= _("<strong>ooops!</strong> The message could not be sent because the user is not online") %>';
17 11 var $update_presence_status_every = <%= User.expires_chat_status_every.minutes %>;
  12 + var $presence = '<%= current_user.last_chat_status %>';
18 13 </script>
19 14  
20   -
21   - <% presence = current_user.last_chat_status %>
22   - <script>
23   - jQuery(function($) {
24   - <% if presence.blank? or presence == 'chat' %>
25   - $('#chat-connect').trigger('click');
26   - <% else %>
27   - $('#chat-busy').trigger('click');
28   - <% end %>
29   - });
30   - </script>
31   -
32 15 <div id='chat'>
33 16 <div id='buddy-list'>
34 17 <div class='toolbar'>
35 18 <div id='user-status'>
36   - <span class="avatar"></span>
  19 + <%= profile_image(user, :portrait, :class => 'avatar') %>
37 20 <%= user_status_menu('icon-menu-offline', _('Offline')) %>
38 21 </div>
39 22 <div class='dialog-error' style='display: none'></div>
... ...
app/views/shared/usermenu/xmpp_chat.html.erb
  Diff comments   View file @a2d483b
1   -<%= link_to('<i class="icon-chat"></i><strong>' + _('Open chat') +'</strong>', '#', :id => 'openchat', :onclick => 'open_chat_window(this)') %>
  1 +<%= link_to('<i class="icon-chat"></i><span class="unread-messages"></span>&nbsp;<strong>' + _('Open chat') +'</strong>', '#', :id => 'openchat', :onclick => 'open_chat_window(this)') %>
... ...
public/javascripts/chat.js
  Diff comments   View file @a2d483b
... ... @@ -145,11 +145,12 @@ jQuery(function($) {
145 145 .removeClass('icon-menu-offline')
146 146 .removeClass('icon-menu-dnd')
147 147 .addClass('icon-menu-' + (presence || 'offline'));
148   - $('#buddy-list #user-status span.avatar').replaceWith(getMyAvatar());
  148 + $('#buddy-list #user-status img.avatar').replaceWith(getMyAvatar());
149 149 $.get('/chat/update_presence_status', { status: {chat_status: presence, last_chat_status: presence} });
150 150 },
151 151  
152 152 send_availability_status: function(presence) {
  153 + log('send availability status ' + presence);
153 154 Jabber.connection.send($pres().c('show').t(presence).up());
154 155 Jabber.show_status(presence);
155 156 },
... ... @@ -183,10 +184,9 @@ jQuery(function($) {
183 184 break;
184 185 case Strophe.Status.DISCONNECTED:
185 186 log('disconnected');
186   - Jabber.show_status('');
  187 + //Jabber.show_status('');
187 188 $('#buddy-list ul.buddy-list, .occupant-list ul.occupant-list').html('');
188 189 Jabber.update_chat_title();
189   - $('#chat-window .tab a').removeClass().addClass('icon-menu-offline-11');
190 190 $('#buddy-list .toolbar').removeClass('small-loading-dark');
191 191 $('textarea').prop('disabled', 'disabled');
192 192 break;
... ... @@ -450,14 +450,12 @@ jQuery(function($) {
450 450 });
451 451  
452 452 $('#chat-disconnect').click(function() {
453   - if (Jabber.connection && Jabber.connection.connected) {
454   - Jabber.connection.disconnect();
455   - }
  453 + disconnect();
456 454 });
457 455  
458 456 // save presence_status as offline in Noosfero database when close or reload chat window
459 457 $(window).unload(function() {
460   - $.get('/chat/update_presence_status', { status: {chat_status: ''} });
  458 + disconnect();
461 459 });
462 460  
463 461 $('#chat-busy').click(function() {
... ... @@ -516,6 +514,7 @@ jQuery(function($) {
516 514 var conversation_id = Jabber.conversation_prefix + jid_id;
517 515 $('#' + conversation_id).find('.conversation').show();
518 516 count_unread_messages(jid_id, true);
  517 + $('#' + conversation_id).find('.conversation .input-div textarea.input').focus();
519 518 });
520 519  
521 520 // put name into text area when click in one occupant
... ... @@ -547,14 +546,14 @@ jQuery(function($) {
547 546 panel.find('.chat-target .other-name').html(title);
548 547 $('#chat .history').perfectScrollbar();
549 548  
550   - panel.find('textarea').attr('name', panel.id);
  549 + var textarea = panel.find('textarea');
  550 + textarea.attr('name', panel.id);
551 551  
552 552 if (Jabber.is_a_room(jid_id)) {
553 553 panel.append(Jabber.templates.occupant_list);
554 554 panel.find('.history').addClass('room');
555 555 }
556   -
557   - $('#' + Jabber.conversation_prefix + jid_id).find('textarea').attr('data-to', jid);
  556 + textarea.attr('data-to', jid);
558 557 }
559 558 }
560 559  
... ... @@ -571,6 +570,20 @@ jQuery(function($) {
571 570 Jabber.unread_messages_of(jid_id, ++unread_messages);
572 571 unread.text(unread_messages);
573 572 }
  573 + update_total_unread_messages();
  574 + }
  575 +
  576 + function update_total_unread_messages() {
  577 + var total_unread = $('#openchat .unread-messages');
  578 + var sum = 0;
  579 + $('.buddy-list .unread-messages').each(function() {
  580 + sum += Number($(this).text());
  581 + });
  582 + if(sum>0) {
  583 + total_unread.text(sum);
  584 + } else {
  585 + total_unread.text('');
  586 + }
574 587 }
575 588  
576 589 var $conversations = $('#chat-window #conversations');
... ... @@ -605,6 +618,22 @@ jQuery(function($) {
605 618 return '<img class="avatar" src="/chat/avatar/' + identifier + '">';
606 619 }
607 620  
  621 + function disconnect() {
  622 + log('disconnect');
  623 + if (Jabber.connection && Jabber.connection.connected) {
  624 + Jabber.connection.disconnect();
  625 + }
  626 + Jabber.presence_status = 'offline';
  627 + Jabber.show_status('offline');
  628 + }
  629 +
  630 + //restore connection if user was connected
  631 + if($presence=='' || $presence == 'chat') {
  632 + $('#chat-connect').trigger('click');
  633 + } else if($presence == 'dnd') {
  634 + $('#chat-busy').trigger('click');
  635 + }
  636 +
608 637 });
609 638  
610 639 function checkTime(i) {
... ...
public/stylesheets/chat.css
  Diff comments   View file @a2d483b
... ... @@ -41,7 +41,7 @@
41 41 #buddy-list .buddy-list li a img, .occupant-list li a img, #chat .avatar {
42 42 height: 32px;
43 43 max-width: 32px;
44   - border-radius: 15%;
  44 + border-radius: 5px;
45 45 }
46 46 #buddy-list .buddy-list li.offline, .occupant-list li.offline {
47 47 display: none;
... ... @@ -136,7 +136,7 @@
136 136 background-color: #257CAD;
137 137 color: rgb(223, 223, 223);
138 138 padding: 5px;
139   - border-radius: 5%;
  139 + border-radius: 5px;
140 140 display: inline-block;
141 141 width: 74%;
142 142 }
... ... @@ -218,7 +218,7 @@
218 218 margin: 6px;
219 219 padding: 7px;
220 220 background-color: rgb(98, 98, 98);
221   - border-radius: 12%;
  221 + border-radius: 6px;
222 222 text-decoration: none;
223 223 font-weight: bold;
224 224 color: white;
... ... @@ -272,3 +272,8 @@
272 272 .conversation .self .author {
273 273 float: right;
274 274 }
  275 +#openchat .unread-messages {
  276 + color: red;
  277 + font-weight: bold;
  278 + font-size: 14px;
  279 +}
... ...