Download as
Browse Code »

Commit 9c5b8242f48b11d77e79423648d68bc55b4853f1

Authored by Rodrigo Souto
1 parent 09f458cb
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: join/leave and room occupants

Showing 3 changed files with 94 additions and 22 deletions   Show diff stats
app/views/shared/logged_in/xmpp_chat.html.erb
  Diff comments   View file @9c5b824
@@ -57,6 +57,9 @@ @@ -57,6 +57,9 @@
57 </div> 57 </div>
58 </div> 58 </div>
59 59
  60 + <a class='join room-action'><%= _('Join room') %></a>
  61 + <a class='leave room-action' style="display: none"><%= _('Leave room') %></a>
  62 +
60 <div class="buddy-item"> 63 <div class="buddy-item">
61 <li class='%{presence_status}'> 64 <li class='%{presence_status}'>
62 <a id='%{jid_id}' class='icon-menu-%{presence_status}-11' href='#'> 65 <a id='%{jid_id}' class='icon-menu-%{presence_status}-11' href='#'>
@@ -68,7 +71,7 @@ @@ -68,7 +71,7 @@
68 </div> 71 </div>
69 72
70 <div class="occupant-list-template"> 73 <div class="occupant-list-template">
71 - <div class="occupants"> 74 + <div class="occupants room-action">
72 <a href="#" class="up"><%= _('Online') %>&nbsp;(<span class="occupants-online">0</span>)</a> 75 <a href="#" class="up"><%= _('Online') %>&nbsp;(<span class="occupants-online">0</span>)</a>
73 <ul class='occupant-list'></ul> 76 <ul class='occupant-list'></ul>
74 </div> 77 </div>
public/javascripts/chat.js
  Diff comments   View file @9c5b824
@@ -51,7 +51,7 @@ jQuery(function($) { @@ -51,7 +51,7 @@ jQuery(function($) {
51 return Jabber.jids[jid_id].unread_messages; 51 return Jabber.jids[jid_id].unread_messages;
52 }, 52 },
53 53
54 - insert_or_update_user: function (list, item, jid, name, presence, template, type) { 54 + insert_or_update_user: function (list, item, jid, name, presence, template, type, remove_on_offline) {
55 var jid_id = Jabber.jid_to_id(jid); 55 var jid_id = Jabber.jid_to_id(jid);
56 var identifier = Strophe.getNodeFromJid(jid); 56 var identifier = Strophe.getNodeFromJid(jid);
57 var html = template 57 var html = template
@@ -61,12 +61,13 @@ jQuery(function($) { @@ -61,12 +61,13 @@ jQuery(function($) {
61 .replace('%{name}', name); 61 .replace('%{name}', name);
62 62
63 $(item).parent().remove(); 63 $(item).parent().remove();
64 - $(list).append(html); 64 + if(presence != 'offline' || !remove_on_offline)
  65 + $(list).append(html);
65 Jabber.jids[jid_id] = {jid: jid, name: name, type: type, presence: presence}; 66 Jabber.jids[jid_id] = {jid: jid, name: name, type: type, presence: presence};
66 }, 67 },
67 insert_or_update_group: function (jid, presence) { 68 insert_or_update_group: function (jid, presence) {
68 var jid_id = Jabber.jid_to_id(jid); 69 var jid_id = Jabber.jid_to_id(jid);
69 - var list = $('#buddy-list .buddies ul.online'); 70 + var list = $('#buddy-list .buddies ul.'+presence);
70 var item = $('#' + jid_id); 71 var item = $('#' + jid_id);
71 presence = presence || ($(item).length > 0 ? $(item).parent('li').attr('class') : 'offline'); 72 presence = presence || ($(item).length > 0 ? $(item).parent('li').attr('class') : 'offline');
72 log('adding or updating contact ' + jid + ' as ' + presence); 73 log('adding or updating contact ' + jid + ' as ' + presence);
@@ -90,14 +91,22 @@ jQuery(function($) { @@ -90,14 +91,22 @@ jQuery(function($) {
90 insert_or_update_occupant: function (jid, name, presence, room_jid) { 91 insert_or_update_occupant: function (jid, name, presence, room_jid) {
91 log('adding or updating occupant ' + jid + ' as ' + presence); 92 log('adding or updating occupant ' + jid + ' as ' + presence);
92 var jid_id = Jabber.jid_to_id(jid); 93 var jid_id = Jabber.jid_to_id(jid);
93 - var list = $('#' + Jabber.conversation_prefix + Jabber.jid_to_id(room_jid) + ' .occupants ul'); 94 + var room_jid_id = Jabber.jid_to_id(room_jid);
  95 + var list = $('#' + Jabber.conversation_prefix + room_jid_id + ' .occupants ul');
94 var item = $(list).find('a[data-id='+ jid_id +']'); 96 var item = $(list).find('a[data-id='+ jid_id +']');
95 - Jabber.insert_or_update_user(list, item, jid, name, presence, Jabber.template('.occupant-item'), 'chat');  
96 - if (Jabber.rooms[Jabber.jid_to_id(room_jid)] === undefined) {  
97 - Jabber.rooms[Jabber.jid_to_id(room_jid)] = {}; 97 + Jabber.insert_or_update_user(list, item, jid, name, presence, Jabber.template('.occupant-item'), 'chat', true);
  98 + if (Jabber.rooms[room_jid_id] === undefined)
  99 + Jabber.rooms[room_jid_id] = {};
  100 +
  101 + var room = Jabber.rooms[room_jid_id];
  102 + if(presence == 'offline') {
  103 + delete Jabber.rooms[room_jid_id][name];
  104 + }
  105 + else {
  106 + Jabber.rooms[room_jid_id][name] = jid;
98 } 107 }
99 - Jabber.rooms[Jabber.jid_to_id(room_jid)][name] = jid;  
100 - list.parents('.occupants').find('.occupants-online').text(list.find('li').length); 108 +
  109 + list.parents('.occupants').find('.occupants-online').text(Object.keys(Jabber.rooms[room_jid_id]).length);
101 }, 110 },
102 111
103 remove_contact: function(jid) { 112 remove_contact: function(jid) {
@@ -183,6 +192,7 @@ jQuery(function($) { @@ -183,6 +192,7 @@ jQuery(function($) {
183 192
184 leave_room: function(room_jid) { 193 leave_room: function(room_jid) {
185 Jabber.connection.send($pres({from: Jabber.connection.jid, to: room_jid + '/' + $own_name, type: 'unavailable'})) 194 Jabber.connection.send($pres({from: Jabber.connection.jid, to: room_jid + '/' + $own_name, type: 'unavailable'}))
  195 + Jabber.insert_or_update_group(room_jid, 'offline');
186 //FIXME remove group 196 //FIXME remove group
187 }, 197 },
188 198
@@ -238,10 +248,10 @@ jQuery(function($) { @@ -238,10 +248,10 @@ jQuery(function($) {
238 dataType: 'json', 248 dataType: 'json',
239 success: function(data){ 249 success: function(data){
240 data.each(function(room){ 250 data.each(function(room){
241 - console.log('==> '+room.jid);  
242 var jid_id = Jabber.jid_to_id(room.jid); 251 var jid_id = Jabber.jid_to_id(room.jid);
243 Jabber.jids[jid_id] = {jid: room.jid, name: room.name, type: 'groupchat'}; 252 Jabber.jids[jid_id] = {jid: room.jid, name: room.name, type: 'groupchat'};
244 - Jabber.insert_or_update_group(room.jid, 'online'); 253 + //FIXME This must check on session if the user is inside the room...
  254 + Jabber.insert_or_update_group(room.jid, 'offline');
245 }); 255 });
246 }, 256 },
247 error: function(data, textStatus, jqXHR){ 257 error: function(data, textStatus, jqXHR){
@@ -599,8 +609,11 @@ jQuery(function($) { @@ -599,8 +609,11 @@ jQuery(function($) {
599 textarea.attr('name', panel.id); 609 textarea.attr('name', panel.id);
600 610
601 if (Jabber.is_a_room(jid_id)) { 611 if (Jabber.is_a_room(jid_id)) {
602 - panel.find('.conversation').append(Jabber.template('.occupant-list-template')); 612 + panel.append(Jabber.template('.occupant-list-template'));
603 panel.find('.history').addClass('room'); 613 panel.find('.history').addClass('room');
  614 + var room_actions = $('#chat-templates .room-action').clone();
  615 + room_actions.data('jid', jid);
  616 + panel.find('.history').after(room_actions);
604 $('#chat .occupants .occupant-list').perfectScrollbar(); 617 $('#chat .occupants .occupant-list').perfectScrollbar();
605 } 618 }
606 textarea.attr('data-to', jid); 619 textarea.attr('data-to', jid);
@@ -793,4 +806,19 @@ jQuery(function($) { @@ -793,4 +806,19 @@ jQuery(function($) {
793 $('#chat-label').click(function(){ 806 $('#chat-label').click(function(){
794 toggle_chat_window(); 807 toggle_chat_window();
795 }); 808 });
  809 +
  810 + $('.room-action.join').live('click', function(){
  811 + Jabber.enter_room($(this).data('jid'));
  812 + $(this).hide();
  813 + $(this).siblings('.leave').show();
  814 + sort_conversations();
  815 + });
  816 +
  817 + $('.room-action.leave').live('click', function(){
  818 + Jabber.leave_room($(this).data('jid'));
  819 + $(this).hide();
  820 + $(this).siblings('.join').show();
  821 + sort_conversations();
  822 + });
  823 +
796 }); 824 });
public/stylesheets/chat.css
  Diff comments   View file @9c5b824
@@ -68,9 +68,18 @@ @@ -68,9 +68,18 @@
68 padding: 0; 68 padding: 0;
69 margin: 0; 69 margin: 0;
70 } 70 }
71 -#buddy-list .buddies a:hover, .occupant-list li a:hover {  
72 - background-color: #EEEEEC; 71 +#buddy-list .buddies a:hover {
  72 + background-color: #eeeeec;
73 } 73 }
  74 +
  75 +.occupant-list li a:hover {
  76 + background-color: black;
  77 +}
  78 +
  79 +.occupant-list .icon-menu-chat-11 {
  80 + background-image: none;
  81 +}
  82 +
74 #buddy-list .buddies li a, .occupant-list li a { 83 #buddy-list .buddies li a, .occupant-list li a {
75 background-position: 0% 50%; 84 background-position: 0% 50%;
76 display: block; 85 display: block;
@@ -88,6 +97,10 @@ @@ -88,6 +97,10 @@
88 max-width: 128px; 97 max-width: 128px;
89 overflow: hidden; 98 overflow: hidden;
90 } 99 }
  100 +.occupant-list li a .name {
  101 + color: white;
  102 +}
  103 +
91 #buddy-list .buddies li a img, .occupant-list li a img, #chat .avatar { 104 #buddy-list .buddies li a img, .occupant-list li a img, #chat .avatar {
92 border-radius: 5px; 105 border-radius: 5px;
93 width: 32px; 106 width: 32px;
@@ -150,9 +163,9 @@ @@ -150,9 +163,9 @@
150 position: absolute; 163 position: absolute;
151 right: 0; 164 right: 0;
152 left: 0; 165 left: 0;
153 - bottom: 0; 166 + bottom: 33px;
154 height: 80px; 167 height: 80px;
155 - padding: 20px 15px 31px 7px; 168 + padding-left: 7px;
156 } 169 }
157 .msie7 .conversation .input-div { 170 .msie7 .conversation .input-div {
158 padding-left: 5px; 171 padding-left: 5px;
@@ -184,6 +197,10 @@ @@ -184,6 +197,10 @@
184 bottom: 100px; 197 bottom: 100px;
185 } 198 }
186 199
  200 +#conversations .history.room {
  201 + bottom: 132px;
  202 +}
  203 +
187 #chat .unread-messages { 204 #chat .unread-messages {
188 height: 32px; 205 height: 32px;
189 line-height: 32px; 206 line-height: 32px;
@@ -266,12 +283,11 @@ @@ -266,12 +283,11 @@
266 transition: 0.2s; 283 transition: 0.2s;
267 } 284 }
268 285
269 -div.occupants {  
270 - position: absolute;  
271 - width: 100%;  
272 - bottom: 98px;  
273 - background-color: rgba(0, 0, 0, 0.7); 286 +.conversation div.occupants {
  287 + bottom: 118px;
  288 + background-color: #2e3436;
274 } 289 }
  290 +
275 div.occupants ul.occupant-list { 291 div.occupants ul.occupant-list {
276 padding: 0; 292 padding: 0;
277 margin: 0; 293 margin: 0;
@@ -281,6 +297,10 @@ div.occupants ul.occupant-list { @@ -281,6 +297,10 @@ div.occupants ul.occupant-list {
281 display: none; 297 display: none;
282 border-top: 1px solid rgb(37, 37, 37); 298 border-top: 1px solid rgb(37, 37, 37);
283 } 299 }
  300 +div.occupants ul.occupant-list {
  301 + text-align: left;
  302 +}
  303 +
284 div.occupants > a { 304 div.occupants > a {
285 color: rgb(168, 168, 168); 305 color: rgb(168, 168, 168);
286 text-align: center; 306 text-align: center;
@@ -561,3 +581,24 @@ div.occupants &gt; a.up { @@ -561,3 +581,24 @@ div.occupants &gt; a.up {
561 #chat-label.opened div { 581 #chat-label.opened div {
562 display: inline-block; 582 display: inline-block;
563 } 583 }
  584 +
  585 +.conversation .room-action {
  586 + position: absolute;
  587 + bottom: 100px;
  588 + left: 7px;
  589 + right: 79px;
  590 + text-align: center;
  591 + cursor: pointer;
  592 + z-index: 1;
  593 + color: white;
  594 + border-radius: 3px;
  595 + font-size: 14px;
  596 +}
  597 +
  598 +.conversation .join {
  599 + background-color: #4E9A06;
  600 +}
  601 +
  602 +.conversation .leave {
  603 + background-color: #A40000;
  604 +}