diff --git a/app/views/shared/logged_in/xmpp_chat.html.erb b/app/views/shared/logged_in/xmpp_chat.html.erb index 7bfee38..2f27e69 100644 --- a/app/views/shared/logged_in/xmpp_chat.html.erb +++ b/app/views/shared/logged_in/xmpp_chat.html.erb @@ -57,6 +57,9 @@ + <%= _('Join room') %> + +
  • @@ -68,7 +71,7 @@
  • -
    + diff --git a/public/javascripts/chat.js b/public/javascripts/chat.js index af6671a..f41cac3 100644 --- a/public/javascripts/chat.js +++ b/public/javascripts/chat.js @@ -51,7 +51,7 @@ jQuery(function($) { return Jabber.jids[jid_id].unread_messages; }, - insert_or_update_user: function (list, item, jid, name, presence, template, type) { + insert_or_update_user: function (list, item, jid, name, presence, template, type, remove_on_offline) { var jid_id = Jabber.jid_to_id(jid); var identifier = Strophe.getNodeFromJid(jid); var html = template @@ -61,12 +61,13 @@ jQuery(function($) { .replace('%{name}', name); $(item).parent().remove(); - $(list).append(html); + if(presence != 'offline' || !remove_on_offline) + $(list).append(html); Jabber.jids[jid_id] = {jid: jid, name: name, type: type, presence: presence}; }, insert_or_update_group: function (jid, presence) { var jid_id = Jabber.jid_to_id(jid); - var list = $('#buddy-list .buddies ul.online'); + var list = $('#buddy-list .buddies ul.'+presence); var item = $('#' + jid_id); presence = presence || ($(item).length > 0 ? $(item).parent('li').attr('class') : 'offline'); log('adding or updating contact ' + jid + ' as ' + presence); @@ -90,14 +91,22 @@ jQuery(function($) { insert_or_update_occupant: function (jid, name, presence, room_jid) { log('adding or updating occupant ' + jid + ' as ' + presence); var jid_id = Jabber.jid_to_id(jid); - var list = $('#' + Jabber.conversation_prefix + Jabber.jid_to_id(room_jid) + ' .occupants ul'); + var room_jid_id = Jabber.jid_to_id(room_jid); + var list = $('#' + Jabber.conversation_prefix + room_jid_id + ' .occupants ul'); var item = $(list).find('a[data-id='+ jid_id +']'); - Jabber.insert_or_update_user(list, item, jid, name, presence, Jabber.template('.occupant-item'), 'chat'); - if (Jabber.rooms[Jabber.jid_to_id(room_jid)] === undefined) { - Jabber.rooms[Jabber.jid_to_id(room_jid)] = {}; + Jabber.insert_or_update_user(list, item, jid, name, presence, Jabber.template('.occupant-item'), 'chat', true); + if (Jabber.rooms[room_jid_id] === undefined) + Jabber.rooms[room_jid_id] = {}; + + var room = Jabber.rooms[room_jid_id]; + if(presence == 'offline') { + delete Jabber.rooms[room_jid_id][name]; + } + else { + Jabber.rooms[room_jid_id][name] = jid; } - Jabber.rooms[Jabber.jid_to_id(room_jid)][name] = jid; - list.parents('.occupants').find('.occupants-online').text(list.find('li').length); + + list.parents('.occupants').find('.occupants-online').text(Object.keys(Jabber.rooms[room_jid_id]).length); }, remove_contact: function(jid) { @@ -183,6 +192,7 @@ jQuery(function($) { leave_room: function(room_jid) { Jabber.connection.send($pres({from: Jabber.connection.jid, to: room_jid + '/' + $own_name, type: 'unavailable'})) + Jabber.insert_or_update_group(room_jid, 'offline'); //FIXME remove group }, @@ -238,10 +248,10 @@ jQuery(function($) { dataType: 'json', success: function(data){ data.each(function(room){ - console.log('==> '+room.jid); var jid_id = Jabber.jid_to_id(room.jid); Jabber.jids[jid_id] = {jid: room.jid, name: room.name, type: 'groupchat'}; - Jabber.insert_or_update_group(room.jid, 'online'); + //FIXME This must check on session if the user is inside the room... + Jabber.insert_or_update_group(room.jid, 'offline'); }); }, error: function(data, textStatus, jqXHR){ @@ -599,8 +609,11 @@ jQuery(function($) { textarea.attr('name', panel.id); if (Jabber.is_a_room(jid_id)) { - panel.find('.conversation').append(Jabber.template('.occupant-list-template')); + panel.append(Jabber.template('.occupant-list-template')); panel.find('.history').addClass('room'); + var room_actions = $('#chat-templates .room-action').clone(); + room_actions.data('jid', jid); + panel.find('.history').after(room_actions); $('#chat .occupants .occupant-list').perfectScrollbar(); } textarea.attr('data-to', jid); @@ -793,4 +806,19 @@ jQuery(function($) { $('#chat-label').click(function(){ toggle_chat_window(); }); + + $('.room-action.join').live('click', function(){ + Jabber.enter_room($(this).data('jid')); + $(this).hide(); + $(this).siblings('.leave').show(); + sort_conversations(); + }); + + $('.room-action.leave').live('click', function(){ + Jabber.leave_room($(this).data('jid')); + $(this).hide(); + $(this).siblings('.join').show(); + sort_conversations(); + }); + }); diff --git a/public/stylesheets/chat.css b/public/stylesheets/chat.css index 8395f03..e3d638d 100644 --- a/public/stylesheets/chat.css +++ b/public/stylesheets/chat.css @@ -68,9 +68,18 @@ padding: 0; margin: 0; } -#buddy-list .buddies a:hover, .occupant-list li a:hover { - background-color: #EEEEEC; +#buddy-list .buddies a:hover { + background-color: #eeeeec; } + +.occupant-list li a:hover { + background-color: black; +} + +.occupant-list .icon-menu-chat-11 { + background-image: none; +} + #buddy-list .buddies li a, .occupant-list li a { background-position: 0% 50%; display: block; @@ -88,6 +97,10 @@ max-width: 128px; overflow: hidden; } +.occupant-list li a .name { + color: white; +} + #buddy-list .buddies li a img, .occupant-list li a img, #chat .avatar { border-radius: 5px; width: 32px; @@ -150,9 +163,9 @@ position: absolute; right: 0; left: 0; - bottom: 0; + bottom: 33px; height: 80px; - padding: 20px 15px 31px 7px; + padding-left: 7px; } .msie7 .conversation .input-div { padding-left: 5px; @@ -184,6 +197,10 @@ bottom: 100px; } +#conversations .history.room { + bottom: 132px; +} + #chat .unread-messages { height: 32px; line-height: 32px; @@ -266,12 +283,11 @@ transition: 0.2s; } -div.occupants { - position: absolute; - width: 100%; - bottom: 98px; - background-color: rgba(0, 0, 0, 0.7); +.conversation div.occupants { + bottom: 118px; + background-color: #2e3436; } + div.occupants ul.occupant-list { padding: 0; margin: 0; @@ -281,6 +297,10 @@ div.occupants ul.occupant-list { display: none; border-top: 1px solid rgb(37, 37, 37); } +div.occupants ul.occupant-list { + text-align: left; +} + div.occupants > a { color: rgb(168, 168, 168); text-align: center; @@ -561,3 +581,24 @@ div.occupants > a.up { #chat-label.opened div { display: inline-block; } + +.conversation .room-action { + position: absolute; + bottom: 100px; + left: 7px; + right: 79px; + text-align: center; + cursor: pointer; + z-index: 1; + color: white; + border-radius: 3px; + font-size: 14px; +} + +.conversation .join { + background-color: #4E9A06; +} + +.conversation .leave { + background-color: #A40000; +} -- libgit2 0.21.2