Small fixes for chat

Victor Costa · Rodrigo Souto
1 parent ebede9d0
Showing 4 changed files with 178 additions and 120 deletions Show diff stats
app/helpers/chat_helper.rb
app/views/shared/logged_in/xmpp_chat.html.erb
public/javascripts/chat.js
public/stylesheets/chat.css
@@ -7,7 +7,7 @@ module ChatHelper
       ['icon-menu-offline', _('Sign out of chat'), 'chat-disconnect'],
     ]
     content_tag('span',
-      link_to(content_tag('span', status) + ui_icon('ui-icon-triangle-1-s'),
+      link_to(content_tag('span', user.name) + ui_icon('ui-icon-triangle-1-s'),
         '#',
         :onclick => 'toggleMenu(this); return false',
         :class => icon_class + ' simplemenu-trigger'
@@ -29,27 +29,33 @@
   </script>
   <div id='chat'>
-    <div id='title-bar'>
-      <h1 class='title'><%= _("Online") % h(page_title) %>&nbsp;(<span id='friends-online'>0</span>)</h1>
-    </div>
     <div id='buddy-list'>
       <div class='toolbar'>
-        <div id='user-status'><%= user_status_menu('icon-menu-offline', _('Offline')) %></div>
+        <div id='user-status'>
+          <span class="avatar"></span>
+          <%= user_status_menu('icon-menu-offline', _('Offline')) %>
+        </div>
         <div class='dialog-error' style='display: none'></div>
       </div>
+      <div id='title-bar'>
+        <h1 class='title'><%= _("Online") % h(page_title) %>&nbsp;(<span id='friends-online'>0</span>)</h1>
+      </div>
       <ul class='buddy-list'>
       </ul>
     </div>
-    <div id='chat-window' class='tabs-bottom'>
-      <div id='tabs'>
-        <ul>
-        </ul>
-      </div>
+    <div id='chat-window'>
+      <div id='conversations'></div>
     </div>
     <div id="chat-templates">
-      <div class='conversation'>
-        <a href="#" class="back"><%= _('Back') %></a>
+      <div class='conversation' style="display: none;">
+        <div class="header">
+          <span class="chat-target">
+            <img class="avatar">
+            <span class="other-name"></span>
+          </span>
+          <a href="#" class="back"><%= _('Back') %></a>
+        </div>
         <div class='history'></div>
         <div class='input-div'>
             <div class='icon-chat'></div>
@@ -60,8 +66,9 @@
       <div class="buddy-item">
         <li class='%{presence_status}'>
           <a id='%{jid_id}' class='icon-menu-%{presence_status}-11' href='#'>
-            <img class="avatar" src="%{avatar_url}"/>
+            %{avatar}
             <span class="name">%{name}<span>
+            <span class="unread-messages icon-chat"></span>
           </a>
         </li>
       </div>
@@ -69,7 +76,7 @@
       <div class="message">
         <div data-who="%{who}" class="message %{who}">
           <div class="author">
-            <img class="avatar" src="%{avatar_url}"/>
+            %{avatar}
             <h5 class="%{who}-name">%{name}</h5>
           </div>
           <div class="content">
@@ -25,7 +25,7 @@ jQuery(function($) {
      muc_supported: false,
      presence_status: '',
      update_presence_status_every: $update_presence_status_every, // time in seconds of how often update presence status to Noosfero DB
-     tab_prefix: 'conversation-', // used to compose jQuery UI tabs and anchors to select then
+     conversation_prefix: 'conversation-',
      jids: {},
      rooms: {},
@@ -60,7 +60,7 @@ jQuery(function($) {
         var html = template
            .replace('%{jid_id}', jid_id)
            .replace(/%{presence_status}/g, presence)
-           .replace('%{avatar_url}', '/chat/avatar/' + identifier)
+           .replace('%{avatar}', getAvatar(identifier))
            .replace('%{name}', name);
         if ($(item).length > 0) {
            $(item).parent('li').replaceWith(html);
@@ -76,14 +76,14 @@ jQuery(function($) {
         presence = presence || ($(item).length > 0 ? $(item).parent('li').attr('class') : 'offline');
         log('adding or updating contact ' + jid + ' as ' + presence);
         Jabber.insert_or_update_user(list, item, jid, name, presence, $('#chat #chat-templates .buddy-item').clone().html());
-        $("#chat-window .tab a[href='#"+ Jabber.tab_prefix + jid_id +"']")
+        $("#chat-window .tab a[href='#"+ Jabber.conversation_prefix + jid_id +"']")
            .removeClass()
            .addClass('icon-menu-' + presence + '-11');
      },
      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.tab_prefix + Jabber.jid_to_id(room_jid) + ' .occupant-list ul');
+        var list = $('#' + Jabber.conversation_prefix + Jabber.jid_to_id(room_jid) + ' .occupant-list ul');
         var item = $(list).find('a[data-id='+ jid_id +']');
         Jabber.insert_or_update_user(list, item, jid, name, presence, Jabber.templates.occupant_item);
         if (Jabber.rooms[Jabber.jid_to_id(room_jid)] === undefined) {
@@ -113,7 +113,7 @@ jQuery(function($) {
          if (body) {
             body = Jabber.render_body_message(body);
             var jid_id = Jabber.jid_to_id(jid);
-            var tab_id = '#' + Jabber.tab_prefix + jid_id;
+            var tab_id = '#' + Jabber.conversation_prefix + jid_id;
             if ($(tab_id).find('.message').length > 0 && $(tab_id).find('.message:last').attr('data-who') == who) {
                $(tab_id).find('.history').find('.message:last .content').append('<p>' + body + '</p>');
             }
@@ -125,8 +125,8 @@ jQuery(function($) {
                  .replace(/%{who}/g, who)
                  .replace('%{time}', time)
                  .replace('%{name}', name)
-                 .replace('%{avatar_url}', '/chat/avatar/' + identifier);
-               $('#' + Jabber.tab_prefix + jid_id).find('.history').append(message_html);
+                 .replace('%{avatar}', getAvatar(identifier));
+               $('#' + Jabber.conversation_prefix + jid_id).find('.history').append(message_html);
             }
             $(tab_id).find('.history').scrollTo({top:'100%', left:'0%'});
             if (who != "self") {
@@ -144,8 +144,8 @@ jQuery(function($) {
            .removeClass('icon-menu-chat')
            .removeClass('icon-menu-offline')
            .removeClass('icon-menu-dnd')
-           .addClass('icon-menu-' + (presence || 'offline'))
-           .find('span').html($presence_status_label[presence]);
+           .addClass('icon-menu-' + (presence || 'offline'));
+        $('#buddy-list #user-status span.avatar').replaceWith(getMyAvatar());
         $.get('/chat/update_presence_status', { status: {chat_status: presence, last_chat_status: presence} });
      },
@@ -165,7 +165,7 @@ jQuery(function($) {
      },
      update_chat_title: function () {
-        var friends_online = $('#buddy-list .buddy-list li.chat').length;
+        var friends_online = $('#buddy-list .buddy-list li:not(.offline)').length;
         $('#friends-online').text(friends_online);
      },
@@ -439,7 +439,7 @@ jQuery(function($) {
      },
      show_notice: function(jid_id, msg) {
-        var tab_id = '#' + Jabber.tab_prefix + jid_id;
+        var tab_id = '#' + Jabber.conversation_prefix + jid_id;
         $(tab_id).find('.history').append("<span class='notice'>" + msg + "</span>");
      }
    };
@@ -470,6 +470,7 @@ jQuery(function($) {
       Jabber.connect();
    });
+   // FIXME
    // detect when click in chat with a community or person in main window of Noosfero environment
    $(window).bind('hashchange', function() {
       if (window.location.hash) {
@@ -511,6 +512,10 @@ jQuery(function($) {
       var jid_id = $(this).attr('id');
       var name = Jabber.name_of(jid_id);
       create_conversation_tab(name, jid_id);
+
+      var conversation_id = Jabber.conversation_prefix + jid_id;
+      $('#' + conversation_id).find('.conversation').show();
+      count_unread_messages(jid_id, true);
    });
    // put name into text area when click in one occupant
@@ -526,22 +531,22 @@ jQuery(function($) {
    });
    $('.conversation .back').live('click', function() {
-      $(this).parents('.conversation').hide();
+      $('#chat #chat-window .conversation').hide();
    });
    function create_conversation_tab(title, jid_id) {
-      var conversation_id = Jabber.tab_prefix + jid_id;
+      var conversation_id = Jabber.conversation_prefix + jid_id;
       if (! $('#' + conversation_id).length > 0) {
+         var jid = Jabber.jid_of(jid_id);
+         var identifier = getIdentifier(jid);
+
          // opening chat with selected online friend
-         var panel = $('<div id="'+conversation_id +'"></div>').appendTo($tabs);
+         var panel = $('<div id="'+conversation_id +'"></div>').appendTo($conversations);
          panel.append($('#chat #chat-templates .conversation').clone());
+         panel.find('.chat-target .avatar').replaceWith(getAvatar(identifier));
+         panel.find('.chat-target .other-name').html(title);
          $('#chat .history').perfectScrollbar();
-         //FIXME
-         //var notice = $starting_chat_notice.replace('%{name}', $(ui.tab).html());
-         //Jabber.show_notice(jid_id, notice);
-
-         // define textarea name as '<TAB_ID>'
          panel.find('textarea').attr('name', panel.id);
          if (Jabber.is_a_room(jid_id)) {
@@ -549,32 +554,26 @@ jQuery(function($) {
              panel.find('.history').addClass('room');
          }
-         $tabs.find('.ui-tabs-nav').append( "<li><a href='"+('#' + Jabber.tab_prefix + jid_id)+"'><span class=\"unread-messages\" style=\"display:none\"></span>"+title+"</a></li>" );
-
-         var jid = Jabber.jid_of(jid_id);
-         $("a[href='#" + Jabber.tab_prefix + jid_id + "']").addClass($('#' + jid_id).attr('class') || 'icon-chat');
-         $('#' + Jabber.tab_prefix + jid_id).find('textarea').attr('data-to', jid);
-      } else {
-         $('#' + conversation_id).find('.conversation').show();
+         $('#' + Jabber.conversation_prefix + jid_id).find('textarea').attr('data-to', jid);
       }
    }
    function count_unread_messages(jid_id, hide) {
+      var unread = $('.buddy-list #'+jid_id+ ' .unread-messages');
       if (hide) {
-         $('a[href=#' + Jabber.tab_prefix + jid_id + ']').find('.unread-messages').hide();
+         unread.hide();
          Jabber.unread_messages_of(jid_id, 0);
-         $('a[href=#' + Jabber.tab_prefix + jid_id + ']').find('.unread-messages').text('');
+         unread.text('');
       }
       else {
-         $('a[href=#' + Jabber.tab_prefix + jid_id + ']').find('.unread-messages').show();
+         unread.show();
          var unread_messages = Jabber.unread_messages_of(jid_id) || 0;
          Jabber.unread_messages_of(jid_id, ++unread_messages);
-         $('a[href=#' + Jabber.tab_prefix + jid_id + ']').find('.unread-messages').text(unread_messages);
+         unread.text(unread_messages);
       }
    }
-   // creating tabs
-   var $tabs = $('#chat-window #tabs');
+   var $conversations = $('#chat-window #conversations');
    function log(msg) {
       if(Jabber.debug && window.console && window.console.log) {
@@ -590,6 +589,22 @@ jQuery(function($) {
         .replace(/>/g, '&gt;');
    }
+   function getCurrentIdentifier() {
+     return getIdentifier(Jabber.connection.jid);
+   }
+
+   function getIdentifier(jid) {
+     return Strophe.getNodeFromJid(jid);
+   }
+
+   function getMyAvatar() {
+     return getAvatar(getCurrentIdentifier());
+   }
+
+   function getAvatar(identifier) {
+     return '<img class="avatar" src="/chat/avatar/' + identifier + '">';
+   }
+
 });
 function checkTime(i) {
 #chat {
   width: 250px;
+  height: 100%;
   display: none;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 900;
 }
 #buddy-list {
   background-color: #303030;
-  position: absolute;
-  bottom: 0;
-  top: 25px;
-  -webkit-top: 5px;
   width: 250px;
+  height: 100%;
   overflow-y: auto;
-  right: 0;
 }
 #buddy-list .buddy-list {
   list-style-type: none;
@@ -22,6 +23,9 @@
   line-height: 30px;
   border-bottom: 1px solid #383838;
 }
+#buddy-list .buddy-list li a:hover, .occupant-list li a:hover {
+  background: rgb(58, 58, 58);
+}
 #buddy-list .buddy-list li a, .occupant-list li a {
   background: none;
   display: block;
@@ -32,20 +36,21 @@
 }
 #buddy-list .buddy-list li a .name, .occupant-list li a .name {
   vertical-align: top;
+  margin-left: 5px;
 }
-#buddy-list .buddy-list li a img, .occupant-list li a img {
-  max-height: 32px;
+#buddy-list .buddy-list li a img, .occupant-list li a img, #chat .avatar {
+  height: 32px;
   max-width: 32px;
+  border-radius: 15%;
 }
 #buddy-list .buddy-list li.offline, .occupant-list li.offline {
   display: none;
 }
-#buddy-list .toolbar {
-  border-left: 0;
-  border-right: 0;
-  background-position: 90%;
-  position: relative;
-  height: 20px;
+#chat #buddy-list .toolbar {
+  border: 0;
+  height: 40px;
+  background-color: rgb(39, 39, 39);
+  border-bottom: 1px solid #383838;
 }
 #buddy-list .toolbar .dialog-error {
   position: absolute;
@@ -70,8 +75,8 @@
 .conversation .input-div {
   position: absolute;
   right: 0;
-  bottom: 40px;
-  padding: 0 20px 10px 15px;
+  bottom: 0;
+  padding: 0 20px 15px 15px;
 }
 .msie7 .conversation .input-div {
   padding-left: 5px;
@@ -95,64 +100,26 @@
 .conversation .history {
   position: absolute;
   right: 0;
-  top: 25px;
-  bottom: 125px;
+  top: 41px;
+  bottom: 100px;
   overflow: hidden;
-  padding-top: 5px;
-  width: 250px;
+  width: 100%;
   background-color: #303030;
 }
 .msie7 #chat-window .conversation .history {
   overflow-x: hidden;
 }
 #chat .unread-messages {
-  background: red;
-  position: absolute;
-  right: 22px;
-  margin: 2px 0;
-  padding: 0 2px;
-  color: white;
-  display: block;
-  line-height: 1em;
-}
-#chat .tabs-bottom .ui-tabs-nav {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  right:0;
-  padding: 0 5px 10px 5px;
-  border: 0;
-  background: #eee;
-}
-#chat .tabs-bottom .ui-tabs-nav li {
-  top: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  border: 1px solid transparent;
-  border-top: none;
-}
-#chat .tabs-bottom .ui-tabs-nav li a {
-  padding: 0.3em 0.5em 0.3em 2.0em;
-  background-position: 0.5em 50%;
-}
-#chat .tabs-bottom .ui-tabs-nav li:hover, #chat .tabs-bottom .ui-tabs-nav .ui-state-active {
-  border: 1px solid #AAAAAA !important;
-  border-top: 0 !important;
-}
-#chat .tabs-bottom li .ui-icon-close {
-  margin: 0.4em 0.5em 0 0 !important;
-}
-#chat .ui-tabs .ui-tabs-panel {
-  border: none;
+  float: right;
+  margin-right: 25px;
+  padding-left: 22px;
+  background-position: 0;
 }
 #chat-window .history .message {
-  padding: 0 10px;
-  /*position: relative;*/
+  padding: 8px 8px 8px 6px;
 }
 #chat-window .history .message .time {
-  position: absolute;
-  right: 10px;
-  top: 5px;
+  float: right;
   color: gray;
   font-style: italic;
   font-size: 11px;
@@ -166,14 +133,22 @@
 }
 #chat-window .history .message .content {
-  background-color: #383838;
+  background-color: #494949;
   color: rgb(223, 223, 223);
   padding: 5px;
+  border-radius: 3%;
+  display: inline-block;
+  width: 74%;
+}
+#chat-window .history .message.self .content {
+  background-color: #383838;
 }
 #chat-window .history .message .avatar {
   max-height: 32px;
   max-width: 32px;
+  margin: auto;
+  display: block;
 }
 #chat-window .history .notice {
   font-size: 10px;
@@ -206,32 +181,93 @@
   margin-left: 0;
 }
-#title-bar {
-  top: 0;
-  height: 25px;
-  position: absolute;
-  background: #ccc url(/images/icons-app/chat-22x22.png) 2px 2px no-repeat;
+#chat #title-bar {
+  height: 34px;
+  background: #ccc url(/images/icons-app/chat-22x22.png) 3px 5px no-repeat;
   width: 250px;
-  right: 0;
+  background-color: #303030;
+  border-bottom: 1px solid #383838;
 }
 #title-bar .title {
   margin: 0;
   font-size: 12px;
-  margin: 4px 0;
   padding-left: 30px;
+  line-height: 32px;
+  color: rgb(82, 212, 253);
 }
 #chat #chat-templates {
   display: none;
 }
-.conversation .back {
+.conversation .header {
   position: absolute;
-  top: 5px;
-  right: 8px;
+  top: 0;
+  right: 0;
+  width: 100%;
+  background-color: rgb(39, 39, 39);
+}
+.conversation .header .chat-target {
+  padding: 6px;
+  display: inline-block;
+}
+.conversation .header .back {
+  float: right;
+  margin: 6px;
+  padding: 7px;
+  background-color: rgb(98, 98, 98);
+  border-radius: 12%;
+  text-decoration: none;
+  font-weight: bold;
   color: white;
 }
-#chat #chat-window .history .other-name {
+#chat #chat-window .other-name {
   color: #6C9EDD;
 }
 #chat #chat-window .history .self-name {
   color: #6C87DD;
 }
+#chat #chat-window .history h5 {
+  text-align: center;
+  word-wrap: break-word;
+}
+.webkit .simplemenu-submenu.opened {
+  top: 18px;
+}
+#chat .simplemenu-submenu {
+  background: #585858;
+  border: 1px solid #6B6B6B;
+}
+.user-status a {
+  color: rgb(224, 224, 224);
+}
+#user-status .avatar {
+  position: relative;
+  left: 16px;
+  top: 2px;
+}
+.user-status span {
+  position: relative;
+}
+.user-status span, .user-status .ui-icon {
+  top: -3px;
+}
+
+.buddy-list span.name {
+  padding: 20px;
+  position: relative;
+  left: -20px;
+}
+.buddy-list .dnd span.name {
+  background: url(/designs/icons/pidgin/pidgin/status/16/busy.png) 0px 30px no-repeat;
+}
+.buddy-list .chat span.name {
+  background: url(/designs/icons/pidgin/pidgin/status/16/available.png) 0px 30px no-repeat;
+}
+
+.conversation .author {
+  width: 20%;
+  display: inline-block;
+  vertical-align: top;
+}
+.conversation .self .author {
+  float: right;
+}
	@@ -7,7 +7,7 @@ module ChatHelper		@@ -7,7 +7,7 @@ module ChatHelper
7	['icon-menu-offline', _('Sign out of chat'), 'chat-disconnect'],	7	['icon-menu-offline', _('Sign out of chat'), 'chat-disconnect'],
8	]	8	]
9	content_tag('span',	9	content_tag('span',
10	- link_to(content_tag('span', status) + ui_icon('ui-icon-triangle-1-s'),	10	+ link_to(content_tag('span', user.name) + ui_icon('ui-icon-triangle-1-s'),
11	'#',	11	'#',
12	:onclick => 'toggleMenu(this); return false',	12	:onclick => 'toggleMenu(this); return false',
13	:class => icon_class + ' simplemenu-trigger'	13	:class => icon_class + ' simplemenu-trigger'