Download as
Browse Code »

Commit 2d72b68eccd500ddacfe9c8c0b7a65fc38f2396c

Authored by Victor Costa
2 parents 392e1979 1e222c89
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

Merge branch 'rails3_chat' into rails3_stable

Showing 3 changed files with 106 additions and 49 deletions   Show diff stats
app/views/shared/logged_in/xmpp_chat.html.erb
  Diff comments   View file @2d72b68
@@ -24,16 +24,22 @@ @@ -24,16 +24,22 @@
24 </div> 24 </div>
25 25
26 <div id="friends"> 26 <div id="friends">
27 - <div id='title-bar'><h1 class='title'><%= _("Online") %>&nbsp;(<span id='friends-online'>0</span>)</h1></div>  
28 - <ul class='buddy-list online'></ul> 27 + <div class="status-group">
  28 + <div class='title-bar'><a href="#"><h1 class='title'><%= _("Online") %>&nbsp;(<span id='friends-online'>0</span>)</h1></a></div>
  29 + <ul class='buddy-list online'></ul>
  30 + </div>
29 31
30 - <div id='title-bar'><h1 class='title'><%= _("Offline") %></h1></div>  
31 - <ul class='buddy-list offline'></ul> 32 + <div class="status-group">
  33 + <div class='title-bar'><a href="#"><h1 class='title'><%= _("Offline") %>&nbsp;(<span id='friends-offline'>0</span>)</h1></a></div>
  34 + <ul class='buddy-list offline'></ul>
  35 + </div>
32 </div> 36 </div>
33 37
34 <div id="rooms"> 38 <div id="rooms">
35 - <div id='title-bar'><h1 class='title'><%= _("Groups") %></h1></div>  
36 - <ul class="buddy-list room-list"></ul> 39 + <div class="status-group">
  40 + <div class='title-bar'><a href="#"><h1 class='title'><%= _("Groups") %>&nbsp;(<span id='groups-online'>0</span>)</h1></a></div>
  41 + <ul class="buddy-list room-list"></ul>
  42 + </div>
37 </div> 43 </div>
38 </div> 44 </div>
39 45
@@ -42,18 +48,21 @@ @@ -42,18 +48,21 @@
42 </div> 48 </div>
43 49
44 <div id="chat-templates"> 50 <div id="chat-templates">
45 - <div class='conversation' style="display: none;">  
46 - <div class="header">  
47 - <span class="chat-target">  
48 - <img class="avatar">  
49 - <span class="other-name"></span>  
50 - </span>  
51 - <a href="#" class="back"><%= _('Back') %></a>  
52 - </div>  
53 - <div class='history'></div>  
54 - <div class='input-div'>  
55 - <div class='icon-chat'></div>  
56 - <textarea class='input'></textarea> 51 +
  52 + <div class="conversation-template">
  53 + <div class='conversation' style="display: none;">
  54 + <div class="header">
  55 + <span class="chat-target">
  56 + <img class="avatar">
  57 + <span class="other-name"></span>
  58 + </span>
  59 + <a href="#" class="back"><%= _('Back') %></a>
  60 + </div>
  61 + <div class='history'></div>
  62 + <div class='input-div'>
  63 + <div class='icon-chat'></div>
  64 + <textarea class='input'></textarea>
  65 + </div>
57 </div> 66 </div>
58 </div> 67 </div>
59 68
@@ -67,6 +76,22 @@ @@ -67,6 +76,22 @@
67 </li> 76 </li>
68 </div> 77 </div>
69 78
  79 + <div class="occupant-list-template">
  80 + <div class="occupants">
  81 + <a href="#" class="up">&nbsp;</a>
  82 + <ul class='occupant-list'></ul>
  83 + </div>
  84 + </div>
  85 +
  86 + <div class="occupant-item">
  87 + <li class='%{presence_status}'>
  88 + <a data-id='%{jid_id}' class='icon-menu-%{presence_status}-11' href='#'>
  89 + %{avatar}
  90 + <span class="name">%{name}<span>
  91 + </a>
  92 + </li>
  93 + </div>
  94 +
70 <div class="message"> 95 <div class="message">
71 <div data-who="%{who}" class="message %{who}"> 96 <div data-who="%{who}" class="message %{who}">
72 <div class="author"> 97 <div class="author">
@@ -79,5 +104,10 @@ @@ -79,5 +104,10 @@
79 </div> 104 </div>
80 </div> 105 </div>
81 </div> 106 </div>
  107 +
  108 + <div class="error-message">
  109 + <span class='error'>%{text}</span>
  110 + </div>
  111 +
82 </div> 112 </div>
83 </div> 113 </div>
public/javascripts/chat.js
  Diff comments   View file @2d72b68
@@ -28,11 +28,8 @@ jQuery(function($) { @@ -28,11 +28,8 @@ jQuery(function($) {
28 jids: {}, 28 jids: {},
29 rooms: {}, 29 rooms: {},
30 30
31 - templates: {  
32 - occupant_item: "<li class='%{presence_status}'><a data-id='%{jid_id}' class='icon-menu-%{presence_status}-11' href='#'>%{name}</a></li>",  
33 - room_item: "<li class='room'><a id='%{jid_id}' class='icon-chat' href='#'>%{name}</a></li>",  
34 - error: "<span class='error'>%{text}</span>",  
35 - occupant_list: "<div class='occupant-list'><ul class='occupant-list'></ul></div>" 31 + template: function(selector) {
  32 + return $('#chat #chat-templates '+selector).clone().html();
36 }, 33 },
37 34
38 jid_to_id: function (jid) { 35 jid_to_id: function (jid) {
@@ -72,7 +69,7 @@ jQuery(function($) { @@ -72,7 +69,7 @@ jQuery(function($) {
72 var item = $('#' + jid_id); 69 var item = $('#' + jid_id);
73 presence = presence || ($(item).length > 0 ? $(item).parent('li').attr('class') : 'offline'); 70 presence = presence || ($(item).length > 0 ? $(item).parent('li').attr('class') : 'offline');
74 log('adding or updating contact ' + jid + ' as ' + presence); 71 log('adding or updating contact ' + jid + ' as ' + presence);
75 - Jabber.insert_or_update_user(list, item, jid, Jabber.name_of(jid_id), presence, $('#chat #chat-templates .buddy-item').clone().html(), 'groupchat'); 72 + Jabber.insert_or_update_user(list, item, jid, Jabber.name_of(jid_id), presence, Jabber.template('.buddy-item'), 'groupchat');
76 $("#chat-window .tab a[href='#"+ Jabber.conversation_prefix + jid_id +"']") 73 $("#chat-window .tab a[href='#"+ Jabber.conversation_prefix + jid_id +"']")
77 .removeClass() 74 .removeClass()
78 .addClass('icon-menu-' + presence + '-11'); 75 .addClass('icon-menu-' + presence + '-11');
@@ -84,7 +81,7 @@ jQuery(function($) { @@ -84,7 +81,7 @@ jQuery(function($) {
84 var list = $('#buddy-list #friends .buddy-list' + (presence=='offline' ? '.offline' : '.online')); 81 var list = $('#buddy-list #friends .buddy-list' + (presence=='offline' ? '.offline' : '.online'));
85 82
86 log('adding or updating contact ' + jid + ' as ' + presence); 83 log('adding or updating contact ' + jid + ' as ' + presence);
87 - Jabber.insert_or_update_user(list, item, jid, name, presence, $('#chat #chat-templates .buddy-item').clone().html(), 'chat'); 84 + Jabber.insert_or_update_user(list, item, jid, name, presence, Jabber.template('.buddy-item'), 'chat');
88 $("#chat-window .tab a[href='#"+ Jabber.conversation_prefix + jid_id +"']") 85 $("#chat-window .tab a[href='#"+ Jabber.conversation_prefix + jid_id +"']")
89 .removeClass() 86 .removeClass()
90 .addClass('icon-menu-' + presence + '-11'); 87 .addClass('icon-menu-' + presence + '-11');
@@ -92,9 +89,9 @@ jQuery(function($) { @@ -92,9 +89,9 @@ jQuery(function($) {
92 insert_or_update_occupant: function (jid, name, presence, room_jid) { 89 insert_or_update_occupant: function (jid, name, presence, room_jid) {
93 log('adding or updating occupant ' + jid + ' as ' + presence); 90 log('adding or updating occupant ' + jid + ' as ' + presence);
94 var jid_id = Jabber.jid_to_id(jid); 91 var jid_id = Jabber.jid_to_id(jid);
95 - var list = $('#' + Jabber.conversation_prefix + Jabber.jid_to_id(room_jid) + ' .occupant-list ul'); 92 + var list = $('#' + Jabber.conversation_prefix + Jabber.jid_to_id(room_jid) + ' .occupants ul');
96 var item = $(list).find('a[data-id='+ jid_id +']'); 93 var item = $(list).find('a[data-id='+ jid_id +']');
97 - Jabber.insert_or_update_user(list, item, jid, name, presence, Jabber.templates.occupant_item, 'chat'); 94 + Jabber.insert_or_update_user(list, item, jid, name, presence, Jabber.template('.occupant-item'), 'chat');
98 if (Jabber.rooms[Jabber.jid_to_id(room_jid)] === undefined) { 95 if (Jabber.rooms[Jabber.jid_to_id(room_jid)] === undefined) {
99 Jabber.rooms[Jabber.jid_to_id(room_jid)] = {}; 96 Jabber.rooms[Jabber.jid_to_id(room_jid)] = {};
100 } 97 }
@@ -130,7 +127,7 @@ jQuery(function($) { @@ -130,7 +127,7 @@ jQuery(function($) {
130 if (time==undefined) { 127 if (time==undefined) {
131 time = new Date().toISOString(); 128 time = new Date().toISOString();
132 } 129 }
133 - var message_html = $('#chat #chat-templates .message').clone().html() 130 + var message_html = Jabber.template('.message')
134 .replace('%{message}', body) 131 .replace('%{message}', body)
135 .replace(/%{who}/g, who) 132 .replace(/%{who}/g, who)
136 .replace('%{time}', time) 133 .replace('%{time}', time)
@@ -170,8 +167,8 @@ jQuery(function($) { @@ -170,8 +167,8 @@ jQuery(function($) {
170 Jabber.connection.send( 167 Jabber.connection.send(
171 $pres({to: room_jid + '/' + $own_name}).c('x', {xmlns: Strophe.NS.MUC}).c('history', {maxchars: 0}) 168 $pres({to: room_jid + '/' + $own_name}).c('x', {xmlns: Strophe.NS.MUC}).c('history', {maxchars: 0})
172 ); 169 );
173 - //FIXME list group  
174 Jabber.insert_or_update_group(room_jid, 'group'); 170 Jabber.insert_or_update_group(room_jid, 'group');
  171 + Jabber.update_chat_title();
175 }, 172 },
176 173
177 leave_room: function(room_jid) { 174 leave_room: function(room_jid) {
@@ -180,8 +177,12 @@ jQuery(function($) { @@ -180,8 +177,12 @@ jQuery(function($) {
180 }, 177 },
181 178
182 update_chat_title: function () { 179 update_chat_title: function () {
183 - var friends_online = $('#buddy-list .buddy-list.online li').length; 180 + var friends_online = $('#buddy-list #friends .buddy-list.online li').length;
184 $('#friends-online').text(friends_online); 181 $('#friends-online').text(friends_online);
  182 + var friends_offline = $('#buddy-list #friends .buddy-list.offline li').length;
  183 + $('#friends-offline').text(friends_offline);
  184 + var groups_online = $('#buddy-list #rooms .buddy-list li').length;
  185 + $('#groups-online').text(groups_online);
185 }, 186 },
186 187
187 on_connect: function (status) { 188 on_connect: function (status) {
@@ -198,7 +199,7 @@ jQuery(function($) { @@ -198,7 +199,7 @@ jQuery(function($) {
198 break; 199 break;
199 case Strophe.Status.DISCONNECTED: 200 case Strophe.Status.DISCONNECTED:
200 log('disconnected'); 201 log('disconnected');
201 - $('#buddy-list ul.buddy-list, .occupant-list ul.occupant-list').html(''); 202 + $('#buddy-list ul.buddy-list, .occupants ul.occupant-list').html('');
202 Jabber.update_chat_title(); 203 Jabber.update_chat_title();
203 $('#buddy-list .toolbar').removeClass('small-loading-dark'); 204 $('#buddy-list .toolbar').removeClass('small-loading-dark');
204 $('textarea').prop('disabled', 'disabled'); 205 $('textarea').prop('disabled', 'disabled');
@@ -360,7 +361,7 @@ jQuery(function($) { @@ -360,7 +361,7 @@ jQuery(function($) {
360 message = Jabber.parse(message) 361 message = Jabber.parse(message)
361 var jid = Strophe.getBareJidFromJid(message.from); 362 var jid = Strophe.getBareJidFromJid(message.from);
362 log('Receiving error message from ' + jid); 363 log('Receiving error message from ' + jid);
363 - var body = Jabber.templates.error.replace('%{text}', message.error); 364 + var body = Jabber.template('.error-message').replace('%{text}', message.error);
364 Jabber.show_message(jid, Jabber.name_of(Jabber.jid_to_id(jid)), body, 'other', Strophe.getNodeFromJid(jid)); 365 Jabber.show_message(jid, Jabber.name_of(Jabber.jid_to_id(jid)), body, 'other', Strophe.getNodeFromJid(jid));
365 return true; 366 return true;
366 }, 367 },
@@ -527,12 +528,11 @@ jQuery(function($) { @@ -527,12 +528,11 @@ jQuery(function($) {
527 }); 528 });
528 529
529 // put name into text area when click in one occupant 530 // put name into text area when click in one occupant
530 - // FIXME  
531 - $('.occupant-list .occupant-list li a').live('click', function() { 531 + $('.occupants .occupant-list li a').live('click', function() {
532 var jid_id = $(this).attr('data-id'); 532 var jid_id = $(this).attr('data-id');
533 var name = Jabber.name_of(jid_id); 533 var name = Jabber.name_of(jid_id);
534 var val = $('.conversation textarea:visible').val(); 534 var val = $('.conversation textarea:visible').val();
535 - $('.conversation textarea:visible').val(val + name + ', ').focus(); 535 + $('.conversation textarea:visible').focus().val(val + name + ', ');
536 }); 536 });
537 537
538 $('#chat .conversation .history').live('click', function() { 538 $('#chat .conversation .history').live('click', function() {
@@ -559,7 +559,7 @@ jQuery(function($) { @@ -559,7 +559,7 @@ jQuery(function($) {
559 559
560 // opening chat with selected online friend 560 // opening chat with selected online friend
561 var panel = $('<div id="'+conversation_id +'"></div>').appendTo($conversations); 561 var panel = $('<div id="'+conversation_id +'"></div>').appendTo($conversations);
562 - panel.append($('#chat #chat-templates .conversation').clone()); 562 + panel.append(Jabber.template('.conversation-template'));
563 panel.find('.chat-target .avatar').replaceWith(getAvatar(identifier)); 563 panel.find('.chat-target .avatar').replaceWith(getAvatar(identifier));
564 panel.find('.chat-target .other-name').html(title); 564 panel.find('.chat-target .other-name').html(title);
565 $('#chat .history').perfectScrollbar(); 565 $('#chat .history').perfectScrollbar();
@@ -568,8 +568,9 @@ jQuery(function($) { @@ -568,8 +568,9 @@ jQuery(function($) {
568 textarea.attr('name', panel.id); 568 textarea.attr('name', panel.id);
569 569
570 if (Jabber.is_a_room(jid_id)) { 570 if (Jabber.is_a_room(jid_id)) {
571 - panel.append(Jabber.templates.occupant_list); 571 + panel.find('.conversation').append(Jabber.template('.occupant-list-template'));
572 panel.find('.history').addClass('room'); 572 panel.find('.history').addClass('room');
  573 + $('#chat .occupants .occupant-list').perfectScrollbar();
573 } 574 }
574 textarea.attr('data-to', jid); 575 textarea.attr('data-to', jid);
575 576
@@ -668,6 +669,14 @@ jQuery(function($) { @@ -668,6 +669,14 @@ jQuery(function($) {
668 Jabber.show_status('offline'); 669 Jabber.show_status('offline');
669 } 670 }
670 671
  672 + $('.title-bar a').click(function() {
  673 + $(this).parents('.status-group').find('.buddy-list').toggle('fast');
  674 + });
  675 + $('#chat').on('click', '.occupants a', function() {
  676 + $(this).siblings('.occupant-list').toggle('fast');
  677 + $(this).toggleClass('up');
  678 + });
  679 +
671 //restore connection if user was connected 680 //restore connection if user was connected
672 if($presence=='' || $presence == 'chat') { 681 if($presence=='' || $presence == 'chat') {
673 $('#chat-connect').trigger('click'); 682 $('#chat-connect').trigger('click');
public/stylesheets/chat.css
  Diff comments   View file @2d72b68
@@ -46,8 +46,8 @@ @@ -46,8 +46,8 @@
46 width: 32px; 46 width: 32px;
47 max-height: 40px; 47 max-height: 40px;
48 } 48 }
49 -#buddy-list .buddy-list li.offline, .occupant-list li.offline {  
50 -/* display: none;*/ 49 +#buddy-list .buddy-list.offline, .occupant-list.offline {
  50 + display: none;
51 } 51 }
52 #chat #buddy-list .toolbar { 52 #chat #buddy-list .toolbar {
53 border: 0; 53 border: 0;
@@ -174,18 +174,33 @@ @@ -174,18 +174,33 @@
174 text-align: center; 174 text-align: center;
175 display: block; 175 display: block;
176 } 176 }
177 -.conversation .occupant-list { 177 +div.occupants {
178 position: absolute; 178 position: absolute;
179 - top: 0;  
180 - right: 0;  
181 - width: 200px;  
182 - bottom: 125px; 179 + width: 100%;
  180 + bottom: 98px;
  181 + background-color: rgba(0, 0, 0, 0.7);
183 } 182 }
184 -.conversation .occupant-list ul { 183 +div.occupants ul.occupant-list {
185 padding: 0; 184 padding: 0;
186 - list-style: none;  
187 - font-size: 12px; 185 + margin: 0;
  186 + max-height: 162px;
  187 + overflow: hidden;
  188 + position: relative;
  189 + display: none;
  190 + border-top: 1px solid rgb(37, 37, 37);
188 } 191 }
  192 +div.occupants > a {
  193 + color: rgb(168, 168, 168);
  194 + text-align: center;
  195 + width: 100%;
  196 + display: inline-block;
  197 + text-decoration: none;
  198 + background: url(/images/down-arrow.png) center center no-repeat;
  199 +}
  200 +div.occupants > a.up {
  201 + background: url(/images/top-arrow.png) center center no-repeat;
  202 +}
  203 +
189 #chat-window .comment-balloon-content { 204 #chat-window .comment-balloon-content {
190 min-height: 50px; 205 min-height: 50px;
191 padding: 5px 0 5px 25px; 206 padding: 5px 0 5px 25px;
@@ -195,14 +210,17 @@ @@ -195,14 +210,17 @@
195 margin-left: 0; 210 margin-left: 0;
196 } 211 }
197 212
198 -#chat #title-bar { 213 +#chat .title-bar {
199 height: 34px; 214 height: 34px;
200 background: #ccc url(/images/icons-app/chat-22x22.png) 3px 5px no-repeat; 215 background: #ccc url(/images/icons-app/chat-22x22.png) 3px 5px no-repeat;
201 width: 250px; 216 width: 250px;
202 background-color: #303030; 217 background-color: #303030;
203 border-bottom: 1px solid #383838; 218 border-bottom: 1px solid #383838;
204 } 219 }
205 -#title-bar .title { 220 +#chat .title-bar a {
  221 + text-decoration: none;
  222 +}
  223 +.title-bar .title {
206 margin: 0; 224 margin: 0;
207 font-size: 12px; 225 font-size: 12px;
208 padding-left: 30px; 226 padding-left: 30px;