Download as
Browse Code »

Commit deafc793faf072ec365dd382ee12ae74de631930

Authored by Victor Costa
Committed by Rodrigo Souto
1 parent b9a98fce
Exists in master and in 29 other branches add_member_task_reject_details, admin_visible_profile, article-list-template, community_notifications, contact_admin_translation, event_fixes, fix_comments_pagination, fix_rails4_organization_ratings, fix_sign_up_form, follow_step_fix, forum_topic_creation, mirror_block_improvements, multi_env_on_remote_user, new_security, noosfero_spb_ci, organization_ratings_improvements, organization_ratings_link_to_profile_stable-spb-1.3, organization_ratings_translations_fix, profile_api_improvements, ratings_minor_fixes, remote_user_fix, send_email_to_admins, stable-spb-1.3, stable-spb-1.3-fixes, stable-spb-1.4, stable-spb-1.5, suggest_rejected_value, web_steps_improvements, xss_terminate_custom_options

Small fixes in chat ui

Showing 4 changed files with 60 additions and 39 deletions   Show diff stats
app/views/shared/logged_in/xmpp_chat.html.erb
  Diff comments   View file @deafc79
... ... @@ -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 @deafc79
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 @deafc79
... ... @@ -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 @deafc79
... ... @@ -8,7 +8,7 @@
8 8 z-index: 900;
9 9 }
10 10  
11   -#buddy-list {
  11 +#chat #buddy-list {
12 12 background-color: #303030;
13 13 width: 250px;
14 14 height: 100%;
... ... @@ -29,7 +29,7 @@
29 29 #buddy-list .buddy-list li a, .occupant-list li a {
30 30 background: none;
31 31 display: block;
32   - padding-left: 30px;
  32 + padding-left: 20px;
33 33 padding-top: 10px;
34 34 text-decoration: none;
35 35 color: rgb(238, 238, 238);
... ... @@ -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;
... ... @@ -116,7 +116,7 @@
116 116 background-position: 0;
117 117 }
118 118 #chat-window .history .message {
119   - padding: 8px 8px 8px 6px;
  119 + padding: 10px 8px 10px 6px;
120 120 }
121 121 #chat-window .history .message .time {
122 122 float: right;
... ... @@ -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 }
... ... @@ -207,24 +207,28 @@
207 207 top: 0;
208 208 right: 0;
209 209 width: 100%;
  210 + height: 40px;
210 211 background-color: rgb(39, 39, 39);
211 212 }
212 213 .conversation .header .chat-target {
213   - padding: 6px;
  214 + padding: 6px 6px 0 6px;
214 215 display: inline-block;
  216 + max-width: 70%;
215 217 }
216 218 .conversation .header .back {
217 219 float: right;
218 220 margin: 6px;
219 221 padding: 7px;
220 222 background-color: rgb(98, 98, 98);
221   - border-radius: 12%;
  223 + border-radius: 6px;
222 224 text-decoration: none;
223 225 font-weight: bold;
224 226 color: white;
225 227 }
226 228 #chat #chat-window .other-name, #chat #chat-window .history .self-name {
227 229 color: #257CAD;
  230 + height: 23px;
  231 + overflow: hidden;
228 232 }
229 233 #chat #chat-window .history h5 {
230 234 text-align: center;
... ... @@ -237,7 +241,7 @@
237 241 background: #585858;
238 242 border: 1px solid #6B6B6B;
239 243 }
240   -.user-status a {
  244 +#chat .user-status a {
241 245 color: rgb(224, 224, 224);
242 246 }
243 247 #user-status .avatar {
... ... @@ -253,7 +257,7 @@
253 257 }
254 258  
255 259 .buddy-list span.name {
256   - padding: 20px;
  260 + padding: 20px 0 20px 20px;
257 261 position: relative;
258 262 left: -20px;
259 263 }
... ... @@ -272,3 +276,8 @@
272 276 .conversation .self .author {
273 277 float: right;
274 278 }
  279 +#openchat .unread-messages {
  280 + color: red;
  281 + font-weight: bold;
  282 + font-size: 14px;
  283 +}
... ...