Download as
Browse Code »

Commit d5dfb87bd18edb3de480a9f2456e1fcbb2c43de4

Authored by Rodrigo Souto
1 parent acb91951
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

chat: improve label and fix minor bugs

Showing 5 changed files with 70 additions and 40 deletions   Show diff stats
app/controllers/public/chat_controller.rb
  Diff comments   View file @d5dfb87
... ... @@ -68,6 +68,11 @@ class ChatController < PublicController
68 68 render :json => {:order => conversations_order.reverse, :domain => environment.default_hostname.gsub('.','-')}.to_json
69 69 end
70 70  
  71 + #TODO Ideally this is done through roster table on ejabberd.
  72 + def roster_groups
  73 + render :text => user.memberships.map {|m| {:jid => m.jid, :name => m.name}}.to_json
  74 + end
  75 +
71 76 protected
72 77  
73 78 def check_environment_feature
... ...
app/views/shared/logged_in/xmpp_chat.html.erb
  Diff comments   View file @d5dfb87
... ... @@ -13,11 +13,9 @@
13 13 </script>
14 14  
15 15  
16   - <div id="chat-label" class="opened">
17   - <span class="right-arrow">&gt;</span>
  16 + <div id="chat-label">
  17 + <span class="right-arrow">&#9654;</span>
18 18 <span class="title"><%= _('Chat') %></span>
19   - <br clear="both" />
20   - <div class="icon-big-chat"></div>
21 19 </div>
22 20  
23 21 <div id='chat'>
... ...
public/javascripts/application.js
  Diff comments   View file @d5dfb87
... ... @@ -567,14 +567,14 @@ function display_notice(message) {
567 567 setTimeout(function() { $noticeBox.fadeOut('fast'); }, 5000);
568 568 }
569 569  
570   -function open_chat_window(self_link, anchor) {
  570 +function open_chat_window(anchor) {
571 571 jQuery('#chat').addClass('opened');
572   - jQuery('#chat-label').removeClass('opened');
  572 + jQuery('#chat-label').addClass('opened');
573 573 jQuery("#chat" ).trigger('opengroup', anchor);
574 574 return false;
575 575 }
576 576  
577   -function toggle_chat_window(self_link) {
  577 +function toggle_chat_window() {
578 578 if(jQuery('#conversations .conversation').length == 0) jQuery('.buddies a').first().click();
579 579 jQuery('#chat').toggleClass('opened');
580 580 jQuery('#chat-label').toggleClass('opened');
... ...
public/javascripts/chat.js
  Diff comments   View file @d5dfb87
... ... @@ -177,7 +177,7 @@ jQuery(function($) {
177 177 Jabber.connection.send(
178 178 $pres({to: room_jid + '/' + $own_name}).c('x', {xmlns: Strophe.NS.MUC}).c('history', {maxchars: 0})
179 179 );
180   - Jabber.insert_or_update_group(room_jid, 'group');
  180 + Jabber.insert_or_update_group(room_jid, 'online');
181 181 Jabber.update_chat_title();
182 182 },
183 183  
... ... @@ -232,6 +232,22 @@ jQuery(function($) {
232 232 var jid_id = Jabber.jid_to_id(jid);
233 233 Jabber.insert_or_update_contact(jid, name);
234 234 });
  235 + //TODO Add groups through roster too...
  236 + $.ajax({
  237 + url: '/chat/roster_groups',
  238 + dataType: 'json',
  239 + success: function(data){
  240 + data.each(function(room){
  241 + console.log('==> '+room.jid);
  242 + var jid_id = Jabber.jid_to_id(room.jid);
  243 + Jabber.jids[jid_id] = {jid: room.jid, name: room.name, type: 'groupchat'};
  244 + Jabber.insert_or_update_group(room.jid, 'online');
  245 + });
  246 + },
  247 + error: function(data, textStatus, jqXHR){
  248 + console.log(data);
  249 + },
  250 + });
235 251 sort_conversations();
236 252 // set up presence handler and send initial presence
237 253 Jabber.connection.addHandler(Jabber.on_presence, null, "presence");
... ... @@ -719,12 +735,12 @@ jQuery(function($) {
719 735 var name = Jabber.name_of(jid_id);
720 736 var identifier = Strophe.getNodeFromJid(jid);
721 737 var avatar = "/chat/avatar/"+identifier
722   - if(!$('#chat').is(':visible') || window.isHidden()) {
  738 + if(!$('#chat').hasClass('opened') || window.isHidden()) {
723 739 var options = {body: message.body, icon: avatar, tag: jid_id};
724   - notifyMe(name, options).onclick = function(){
725   - jQuery('#chat').show('fast');
726   - jQuery('a#'+jid_id).click();
727   - };
  740 + console.log('Notify '+name);
  741 + $(notifyMe(name, options)).on('click', function(){
  742 + open_chat_window('#'+jid+'/'+name);
  743 + });
728 744 $.sound.play('/sounds/receive.wav');
729 745 }
730 746 }
... ... @@ -773,6 +789,6 @@ jQuery(function($) {
773 789 });
774 790  
775 791 $('#chat-label').click(function(){
776   - toggle_chat_window(this);
  792 + toggle_chat_window();
777 793 });
778 794 });
... ...
public/stylesheets/chat.css
  Diff comments   View file @d5dfb87
... ... @@ -23,7 +23,7 @@
23 23 #chat #buddy-list {
24 24 background-color: #f9f9f9;
25 25 top: 0;
26   - right: 0;
  26 + right: -5px;
27 27 width: 0;
28 28 bottom: 100px;
29 29 position: absolute;
... ... @@ -39,6 +39,7 @@
39 39 }
40 40  
41 41 #chat #buddy-list:hover {
  42 + right: 0;
42 43 width: 190px;
43 44 transition: width 0.3s ease-in;
44 45 }
... ... @@ -479,35 +480,31 @@ div.occupants &gt; a.up {
479 480 }
480 481  
481 482 #chat-label {
482   - width: 20px;
483   - height: 80px;
484   - background-color: #2E3436;
  483 + right: 0;
  484 + width: 0;
  485 + height: 0;
  486 + background-color: #888A85;
485 487 position: fixed;
486 488 top: 20%;
487   - right: 350px;
488 489 cursor: pointer;
489 490 text-align: center;
490 491 z-index: 11;
491   - transition: background-color 0.2s linear, right 0.3s ease-in, width 0.3s ease-in;
492   - border-top-left-radius: 10px;
493   - border-bottom-left-radius: 10px;
  492 + transition: background-color 0.2s linear, right 0.3s ease-in;
494 493 }
495 494  
496 495 #chat-label.opened {
497   - right: 0;
498   - width: 100px;
499   - transition: background-color 0.2s linear, right 0.3s ease-in, width 0.3s ease-in;
500   -}
501   -
502   -#chat-label.opened:hover {
  496 + width: 20px;
  497 + height: 90px;
  498 + right: 350px;
503 499 background-color: #888A85;
504   - transition: background-color 0.2s linear, right 0.3s ease-in, width 0.3s ease-in;
  500 + border-radius: 10px 0px 0 10px;
  501 + font-size: 14px;
  502 + transition: background-color 0.2s linear, right 0.3s ease-in;
505 503 }
506 504  
507   -#chat-label:hover {
508   - background-color: #888A85;
  505 +#chat-label.opened:hover {
  506 + background-color: #2E3436;
509 507 transition: background-color 0.2s linear, right 0.3s ease-in;
510   - transition: background-color 0.2s linear, right 0.3s ease-in, width 0.3s ease-in;
511 508 }
512 509  
513 510 #chat-label span {
... ... @@ -515,29 +512,43 @@ div.occupants &gt; a.up {
515 512 }
516 513  
517 514 #chat-label span.title {
518   - font-size: 18px;
519   - line-height: 24px;
  515 + font-size: 16px;
  516 + position: absolute;
  517 + background-color: #888A85;
  518 + border-radius: 10px 10px 0 0;
  519 + transform: rotate(-90deg);
  520 + top: 35px;
  521 + right: -34px;
  522 + width: 80px;
  523 + padding: 2px 5px;
  524 + text-shadow: 1px -1px 0 #666;
  525 + transition: background-color 0.2s linear, right 0.3s ease-in;
  526 +}
  527 +
  528 +#chat-label:hover span.title {
  529 + background-color: #2E3436;
  530 + transition: background-color 0.2s linear, right 0.3s ease-in;
520 531 }
521 532  
522 533 #chat-label span.right-arrow {
523   - font-size: 24px;
524   - line-height: 77px;
  534 + font-size: 18pxpx;
  535 + line-height: 87px;
525 536 }
526 537  
527 538 #chat-label .title {
528   - display: none;
  539 + display: inline;
529 540 }
530 541  
531 542 #chat-label.opened .title {
532   - display: inline;
  543 + display: none;
533 544 }
534 545  
535 546 #chat-label .right-arrow {
536   - display: inline;
  547 + display: none;
537 548 }
538 549  
539 550 #chat-label.opened .right-arrow {
540   - display: none;
  551 + display: inline;
541 552 }
542 553  
543 554 #chat-label div {
... ...