From deafc793faf072ec365dd382ee12ae74de631930 Mon Sep 17 00:00:00 2001 From: Victor Costa Date: Fri, 15 Aug 2014 09:40:26 -0300 Subject: [PATCH] Small fixes in chat ui --- app/views/shared/logged_in/xmpp_chat.html.erb | 21 ++------------------- app/views/shared/usermenu/xmpp_chat.html.erb | 2 +- public/javascripts/chat.js | 49 +++++++++++++++++++++++++++++++++++++++---------- public/stylesheets/chat.css | 27 ++++++++++++++++++--------- 4 files changed, 60 insertions(+), 39 deletions(-) diff --git a/app/views/shared/logged_in/xmpp_chat.html.erb b/app/views/shared/logged_in/xmpp_chat.html.erb index 176fc9c..1c70a3b 100644 --- a/app/views/shared/logged_in/xmpp_chat.html.erb +++ b/app/views/shared/logged_in/xmpp_chat.html.erb @@ -4,36 +4,19 @@ <% extend ChatHelper %> - - <% presence = current_user.last_chat_status %> - -
- + <%= profile_image(user, :portrait, :class => 'avatar') %> <%= user_status_menu('icon-menu-offline', _('Offline')) %>
diff --git a/app/views/shared/usermenu/xmpp_chat.html.erb b/app/views/shared/usermenu/xmpp_chat.html.erb index 05f7776..b838bda 100644 --- a/app/views/shared/usermenu/xmpp_chat.html.erb +++ b/app/views/shared/usermenu/xmpp_chat.html.erb @@ -1 +1 @@ -<%= link_to('' + _('Open chat') +'', '#', :id => 'openchat', :onclick => 'open_chat_window(this)') %> +<%= link_to(' ' + _('Open chat') +'', '#', :id => 'openchat', :onclick => 'open_chat_window(this)') %> diff --git a/public/javascripts/chat.js b/public/javascripts/chat.js index 358710d..3e925e7 100644 --- a/public/javascripts/chat.js +++ b/public/javascripts/chat.js @@ -145,11 +145,12 @@ jQuery(function($) { .removeClass('icon-menu-offline') .removeClass('icon-menu-dnd') .addClass('icon-menu-' + (presence || 'offline')); - $('#buddy-list #user-status span.avatar').replaceWith(getMyAvatar()); + $('#buddy-list #user-status img.avatar').replaceWith(getMyAvatar()); $.get('/chat/update_presence_status', { status: {chat_status: presence, last_chat_status: presence} }); }, send_availability_status: function(presence) { + log('send availability status ' + presence); Jabber.connection.send($pres().c('show').t(presence).up()); Jabber.show_status(presence); }, @@ -183,10 +184,9 @@ jQuery(function($) { break; case Strophe.Status.DISCONNECTED: log('disconnected'); - Jabber.show_status(''); + //Jabber.show_status(''); $('#buddy-list ul.buddy-list, .occupant-list ul.occupant-list').html(''); Jabber.update_chat_title(); - $('#chat-window .tab a').removeClass().addClass('icon-menu-offline-11'); $('#buddy-list .toolbar').removeClass('small-loading-dark'); $('textarea').prop('disabled', 'disabled'); break; @@ -450,14 +450,12 @@ jQuery(function($) { }); $('#chat-disconnect').click(function() { - if (Jabber.connection && Jabber.connection.connected) { - Jabber.connection.disconnect(); - } + disconnect(); }); // save presence_status as offline in Noosfero database when close or reload chat window $(window).unload(function() { - $.get('/chat/update_presence_status', { status: {chat_status: ''} }); + disconnect(); }); $('#chat-busy').click(function() { @@ -516,6 +514,7 @@ jQuery(function($) { var conversation_id = Jabber.conversation_prefix + jid_id; $('#' + conversation_id).find('.conversation').show(); count_unread_messages(jid_id, true); + $('#' + conversation_id).find('.conversation .input-div textarea.input').focus(); }); // put name into text area when click in one occupant @@ -547,14 +546,14 @@ jQuery(function($) { panel.find('.chat-target .other-name').html(title); $('#chat .history').perfectScrollbar(); - panel.find('textarea').attr('name', panel.id); + var textarea = panel.find('textarea'); + textarea.attr('name', panel.id); if (Jabber.is_a_room(jid_id)) { panel.append(Jabber.templates.occupant_list); panel.find('.history').addClass('room'); } - - $('#' + Jabber.conversation_prefix + jid_id).find('textarea').attr('data-to', jid); + textarea.attr('data-to', jid); } } @@ -571,6 +570,20 @@ jQuery(function($) { Jabber.unread_messages_of(jid_id, ++unread_messages); unread.text(unread_messages); } + update_total_unread_messages(); + } + + function update_total_unread_messages() { + var total_unread = $('#openchat .unread-messages'); + var sum = 0; + $('.buddy-list .unread-messages').each(function() { + sum += Number($(this).text()); + }); + if(sum>0) { + total_unread.text(sum); + } else { + total_unread.text(''); + } } var $conversations = $('#chat-window #conversations'); @@ -605,6 +618,22 @@ jQuery(function($) { return ''; } + function disconnect() { + log('disconnect'); + if (Jabber.connection && Jabber.connection.connected) { + Jabber.connection.disconnect(); + } + Jabber.presence_status = 'offline'; + Jabber.show_status('offline'); + } + + //restore connection if user was connected + if($presence=='' || $presence == 'chat') { + $('#chat-connect').trigger('click'); + } else if($presence == 'dnd') { + $('#chat-busy').trigger('click'); + } + }); function checkTime(i) { diff --git a/public/stylesheets/chat.css b/public/stylesheets/chat.css index a980380..a1b27ba 100644 --- a/public/stylesheets/chat.css +++ b/public/stylesheets/chat.css @@ -8,7 +8,7 @@ z-index: 900; } -#buddy-list { +#chat #buddy-list { background-color: #303030; width: 250px; height: 100%; @@ -29,7 +29,7 @@ #buddy-list .buddy-list li a, .occupant-list li a { background: none; display: block; - padding-left: 30px; + padding-left: 20px; padding-top: 10px; text-decoration: none; color: rgb(238, 238, 238); @@ -41,7 +41,7 @@ #buddy-list .buddy-list li a img, .occupant-list li a img, #chat .avatar { height: 32px; max-width: 32px; - border-radius: 15%; + border-radius: 5px; } #buddy-list .buddy-list li.offline, .occupant-list li.offline { display: none; @@ -116,7 +116,7 @@ background-position: 0; } #chat-window .history .message { - padding: 8px 8px 8px 6px; + padding: 10px 8px 10px 6px; } #chat-window .history .message .time { float: right; @@ -136,7 +136,7 @@ background-color: #257CAD; color: rgb(223, 223, 223); padding: 5px; - border-radius: 5%; + border-radius: 5px; display: inline-block; width: 74%; } @@ -207,24 +207,28 @@ top: 0; right: 0; width: 100%; + height: 40px; background-color: rgb(39, 39, 39); } .conversation .header .chat-target { - padding: 6px; + padding: 6px 6px 0 6px; display: inline-block; + max-width: 70%; } .conversation .header .back { float: right; margin: 6px; padding: 7px; background-color: rgb(98, 98, 98); - border-radius: 12%; + border-radius: 6px; text-decoration: none; font-weight: bold; color: white; } #chat #chat-window .other-name, #chat #chat-window .history .self-name { color: #257CAD; + height: 23px; + overflow: hidden; } #chat #chat-window .history h5 { text-align: center; @@ -237,7 +241,7 @@ background: #585858; border: 1px solid #6B6B6B; } -.user-status a { +#chat .user-status a { color: rgb(224, 224, 224); } #user-status .avatar { @@ -253,7 +257,7 @@ } .buddy-list span.name { - padding: 20px; + padding: 20px 0 20px 20px; position: relative; left: -20px; } @@ -272,3 +276,8 @@ .conversation .self .author { float: right; } +#openchat .unread-messages { + color: red; + font-weight: bold; + font-size: 14px; +} -- libgit2 0.21.2