Small fixes in chat ui

Victor Costa · Rodrigo Souto
1 parent b9a98fce
Showing 4 changed files with 60 additions and 39 deletions Show diff stats
app/views/shared/logged_in/xmpp_chat.html.erb
app/views/shared/usermenu/xmpp_chat.html.erb
public/javascripts/chat.js
public/stylesheets/chat.css
@@ -4,36 +4,19 @@
     <% extend ChatHelper %>
     <script type='text/javascript'>
-      var $presence_status_label = {
-        chat: '<%= _('Online') %>',
-        dnd: '<%= _('Busy') %>',
-        '': '<%= _('Offline') %>'
-      };
       var $own_name = '<%= user.name %>';
-      var $starting_chat_notice = '<%= _("starting chat with %{name}") %>';
       var $muc_domain = '<%= "conference.#{environment.default_hostname}" %>';
       var $bosh_service = '//<%= environment.default_hostname %>/http-bind';
       var $user_unavailable_error = '<%= _("<strong>ooops!</strong> The message could not be sent because the user is not online") %>';
       var $update_presence_status_every = <%= User.expires_chat_status_every.minutes %>;
+      var $presence = '<%= current_user.last_chat_status %>';
     </script>
-
-  <% presence = current_user.last_chat_status %>
-  <script>
-    jQuery(function($) {
-    <% if presence.blank? or presence == 'chat' %>
-      $('#chat-connect').trigger('click');
-    <% else %>
-      $('#chat-busy').trigger('click');
-    <% end %>
-    });
-  </script>
-
   <div id='chat'>
     <div id='buddy-list'>
       <div class='toolbar'>
         <div id='user-status'>
-          <span class="avatar"></span>
+          <%= profile_image(user, :portrait, :class => 'avatar') %>
           <%= user_status_menu('icon-menu-offline', _('Offline')) %>
         </div>
         <div class='dialog-error' style='display: none'></div>
-<%= link_to('<i class="icon-chat"></i><strong>' + _('Open chat') +'</strong>', '#', :id => 'openchat', :onclick => 'open_chat_window(this)') %>
+<%= link_to('<i class="icon-chat"></i><span class="unread-messages"></span>&nbsp;<strong>' + _('Open chat') +'</strong>', '#', :id => 'openchat', :onclick => 'open_chat_window(this)') %>
@@ -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 '<img class="avatar" src="/chat/avatar/' + identifier + '">';
    }
+   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) {
@@ -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;
+}