Major refactoring on chat interface

Rodrigo Souto
1 parent 46ac0b54
Showing 5 changed files with 160 additions and 104 deletions Show diff stats
app/helpers/chat_helper.rb
app/views/shared/logged_in/xmpp_chat.html.erb
public/designs/themes/noosfero/style.css
public/javascripts/chat.js
public/stylesheets/chat.css
@@ -6,8 +6,9 @@ module ChatHelper
       ['icon-menu-busy', _('Busy'), 'chat-busy'],
       ['icon-menu-offline', _('Sign out of chat'), 'chat-disconnect'],
     ]
+    avatar = profile_image(user, :portrait, :class => 'avatar')
     content_tag('span',
-      link_to(content_tag('span', user.name) + ui_icon('ui-icon-triangle-1-s'),
+      link_to(avatar + content_tag('span', user.name) + ui_icon('ui-icon-triangle-1-s'),
         '#',
         :onclick => 'toggleMenu(this); return false',
         :class => icon_class + ' simplemenu-trigger'
@@ -13,13 +13,9 @@
     </script>
   <div id='chat'>
-    <div class='header'>
-      <%= _("Chat %s") % environment.name %>
-    </div>
     <div id='buddy-list'>
       <div class='toolbar'>
         <div id='user-status'>
-          <%= profile_image(user, :portrait, :class => 'avatar') %>
           <%= user_status_menu('icon-menu-offline', _('Offline')) %>
         </div>
         <div class='dialog-error' style='display: none'></div>
@@ -39,22 +35,19 @@
       <div id='conversations'></div>
     </div>
-    <div id="chat-templates">
+    <div id="chat-templates" style="display: none;">
-      <div class="conversation-template">
-        <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>
-              <textarea class='input'></textarea>
-          </div>
+      <div class="conversation">
+        <div class="conversation-header">
+          <span class="chat-target">
+	    <img class="avatar">
+            <span class="other-name"></span>
+          </span>
+        </div>
+        <div class='history'></div>
+        <div class='input-div'>
+            <div class='icon-chat'></div>
+            <textarea class='input'></textarea>
         </div>
       </div>
@@ -86,12 +79,11 @@
       <div class="message">
         <div data-who="%{who}" class="message %{who}">
-          <div class="author">
-            %{avatar}
-            <h5 class="%{who}-name">%{name}</h5>
-          </div>
           <div class="content">
             <span class="time" title="%{time}"></span>
+            <div class="author">
+              %{avatar}
+            </div>
             <p>%{message}</p>
           </div>
         </div>
@@ -9,11 +9,6 @@
 #title-bar {
   background-color: gray;
 }
-#buddy-list .toolbar {
-  background-color: gray;
-  border-top: 1px solid;
-  border-bottom: 1px solid;
-}
 #title-bar h1 {
   color: white;
 }
@@ -65,7 +65,7 @@ jQuery(function($) {
      },
      insert_or_update_group: function (jid, presence) {
         var jid_id = Jabber.jid_to_id(jid);
-        var list = $('#buddy-list .buddies .online');
+        var list = $('#buddy-list .buddies ul.online');
         var item = $('#' + jid_id);
         presence = presence || ($(item).length > 0 ? $(item).parent('li').attr('class') : 'offline');
         log('adding or updating contact ' + jid + ' as ' + presence);
@@ -78,7 +78,7 @@ jQuery(function($) {
         var jid_id = Jabber.jid_to_id(jid);
         var item = $('#' + jid_id);
         presence = presence || ($(item).length > 0 ? $(item).parent('li').attr('class') : 'offline');
-        var list = $('#buddy-list .buddies ' + (presence=='offline' ? '.offline' : '.online'));
+        var list = $('#buddy-list .buddies ul' + (presence=='offline' ? '.offline' : '.online'));
         log('adding or updating contact ' + jid + ' as ' + presence);
         Jabber.insert_or_update_user(list, item, jid, name, presence, Jabber.template('.buddy-item'), 'chat');
@@ -535,7 +535,8 @@ jQuery(function($) {
       conversation.find('.conversation').show();
       count_unread_messages(jid_id, true);
-      recent_messages(Jabber.jid_of(jid_id));
+      if(conversation.find('#chat-offset-container-0').length == 0)
+        recent_messages(Jabber.jid_of(jid_id));
       conversation.find('.conversation .input-div textarea.input').focus();
    });
@@ -551,14 +552,6 @@ jQuery(function($) {
       $('.conversation textarea:visible').focus();
    });
-   $('#chat .conversation .back').live('click', function() {
-      $('#chat #chat-window .conversation').hide();
-   });
-
-   $('#chat .toolbar .back').live('click', function() {
-      $('#chat').hide('fast');
-   });
-
    function create_conversation_tab(title, jid_id) {
       var conversation_id = Jabber.conversation_prefix + jid_id;
       var conversation = $('#' + conversation_id);
@@ -569,9 +562,7 @@ jQuery(function($) {
       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($conversations);
-      panel.append(Jabber.template('.conversation-template'));
+      var panel = $('#chat-templates .conversation').clone().appendTo($conversations).attr('id', conversation_id);
       panel.find('.chat-target .avatar').replaceWith(getAvatar(identifier));
       panel.find('.chat-target .other-name').html(title);
       $('#chat .history').perfectScrollbar();
@@ -10,17 +10,49 @@
   box-shadow: -3px 0px 5px #888;
 }
+#chat-window {
+  height: 100%;
+  position: relative;
+}
+
 #chat #buddy-list {
   background-color: #f9f9f9;
-  width: 175px;
-  height: 75%;
-  overflow: hidden;
-  position: absolute;
+  top: 0;
   right: 0;
+  width: 65px;
+  bottom: 100px;
+  position: absolute;
   border-left: 1px solid #DCE4E7;
   border-bottom: 1px solid #DCE4E7;
+  z-index: 2;
+  transition: width 0.3s ease-in;
 }
+
+#chat #buddy-list:hover {
+  width: 190px;
+  transition: width 0.3s ease-in;
+}
+
 #buddy-list .buddies {
+  position: absolute;
+  bottom: 0;
+  top: 25px;
+  right: 6px;
+  left: 7px;
+  bottom: 7px;
+  overflow: hidden;
+  white-space: nowrap;
+  transition: all 0.3s ease-in;
+}
+
+#buddy-list:hover .buddies {
+  top: 57px;
+  left: 15px;
+  right: 15px;
+  transition: all 0.3s ease-in;
+}
+
+#buddy-list .buddies ul {
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -53,10 +85,10 @@
   vertical-align: middle;
 }
 #chat #buddy-list .toolbar {
-  border: 0;
   height: 45px;
-  background-color: rgb(39, 39, 39);
-  border-bottom: 1px solid #383838;
+  width: 100%;
+  background-color: #bbbeb7;
+  display: table;
 }
 #buddy-list .toolbar .dialog-error {
   position: absolute;
@@ -73,35 +105,44 @@
   margin: 0 0 5px 0;
 }
-
 #buddy-list .body{
-  position: relative;
-  padding: 5px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  top: 20px;
+  padding: 15px;
+  transition: top 0.3s ease-in;
+}
+
+#buddy-list:hover .body{
+  top: 45px;
+  transition: top 0.3s ease-in;
 }
 #buddy-list .search{
-  width: 150px;
-  padding: 7px;
-  color: #FFF;
-  background-color: #BABDB6;
+  width: 142px;
+  padding: 0;
+  height: 0;
+  color: #000;
+  background-color: #dee1da;
   border: 0;
-  margin-bottom: 5px;
+  transition: all 0.2s ease-in;
 }
-.conversation {
-  background-color: #303030;
-  height: 100%;
-  position: absolute;
-  width: 100%;
-  top: 0;
-  right: 0;
+#buddy-list:hover .search{
+  transition: all 0.3s ease-in 0.3;
+  height: 16px;
+  padding: 9px;
 }
+
 .conversation .input-div {
   position: absolute;
   right: 0;
+  left: 0;
   bottom: 0;
-  padding: 0 20px 15px 15px;
-  border-top: 1px solid rgb(65, 65, 65);
+  height: 80px;
+  padding: 20px 15px 31px 7px;
 }
 .msie7 .conversation .input-div {
   padding-left: 5px;
@@ -118,20 +159,17 @@
   left: 20px;
 }
 .conversation textarea {
-  height: 60px;
-  padding-left: 25px;
+  height: 100%;
+  width: 100%;
   overflow: auto;
 }
-.conversation .history {
+#conversations .history {
+  overflow: hidden;
   position: absolute;
-  right: 0;
-  top: 40px;
+  right: 66px;
+  left: 0;
+  top: 45px;
   bottom: 100px;
-  overflow: hidden;
-  width: 100%;
-}
-.msie7 #chat-window .conversation .history {
-  overflow-x: hidden;
 }
 #chat .unread-messages {
   float: right;
@@ -143,38 +181,49 @@
   padding: 10px 8px 10px 6px;
   clear: both;
 }
+
+#chat-window .history .message.self .time {
+  color: #888a85;
+}
+
 #chat-window .history .message .time {
   float: right;
-  color: rgb(184, 184, 184);
+  color: white;
   font-style: italic;
   font-size: 10px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  border-bottom: 1px solid #d3d7cf;
   width: 100%;
   text-align: right;
+  margin-bottom: 5px;
 }
 #chat-window .history .message h5, #chat-window .history .message p {
   margin: 0;
 }
 #chat-window .history .message p {
-  max-width: 100%;
   overflow: auto;
-  clear: both;
+  margin-left: 40px;
+}
+
+#chat-window .history .message.self p {
+  margin-left: 1px;
 }
 #chat-window .history .message .content {
-  background-color: #257CAD;
-  color: rgb(223, 223, 223);
-  padding: 5px;
+  background-color: #bbbeb7;
+  color: white;;
+  padding: 8px;
   border-radius: 5px;
   display: inline-block;
-  width: 74%;
+  width: 248px;
+  font-size: 15px;
 }
 #chat-window .history .message .content a {
   color: rgb(108, 226, 255);
   text-decoration: none;
 }
 #chat-window .history .message.self .content {
-  background-color: #383838;
+  background-color: #f9f9f9;
+  color: #888a85;
 }
 #chat-window .history .message .avatar {
@@ -240,6 +289,32 @@ div.occupants &gt; a.up {
 #chat .title-bar a {
   text-decoration: none;
 }
+
+#conversations {
+  height: 100%;
+}
+
+#conversations .conversation {
+  height: 100%;
+  position: relative;
+}
+
+#chat-window #conversations .conversation-header {
+  position: absolute;
+  right: 0;
+  left: 0;
+  background-color: #2e3436;
+  color: white;
+  width: 284px;
+  height: 45px;
+  font-size: 18px;
+  text-align: center;
+}
+
+#user-status .avatar {
+  margin-left: 4px;
+}
+
 .title-bar .title {
   margin: 0;
   font-size: 12px;
@@ -259,10 +334,8 @@ div.occupants &gt; a.up {
   height: 40px;
   background-color: rgb(39, 39, 39);
 }
-.conversation .header .chat-target {
-  padding: 0px 6px 0 6px;
-  display: inline-block;
-  max-width: 70%;
+.conversation-header .chat-target {
+  line-height: 45px;
 }
 .conversation .header .other-name {
  color: rgb(238, 238, 238);
@@ -278,14 +351,15 @@ div.occupants &gt; a.up {
   color: white;
 }
 #chat #chat-window .other-name, #chat #chat-window .history .self-name, #chat #chat-window .history h5, #chat .toolbar #user-status span.other-name {
-  color: #257CAD;
+  color: white;
   overflow: hidden;
-  display: inline-block;
   max-width: 140px;
+  line-height: 33px;
 }
 #chat .toolbar #user-status span, #chat #conversations .header .chat-target span {
   max-width: 140px;
-  color: rgb(238, 238, 238);
+  font-weight: 900;
+  color: white;
   display: inline-block
 }
 #chat #chat-window .history h5 {
@@ -301,34 +375,37 @@ div.occupants &gt; a.up {
   background: #585858;
   border: 1px solid #6B6B6B;
 }
-#chat #user-status {
-  padding: 2px 4px;
-  float: left;
+#buddy-list #user-status {
+  display: table-cell;
+  vertical-align: middle;
+  padding: 0 5px;
+  white-space: nowrap; 
+  transition: padding 0.3s ease-in;
+}
+#buddy-list:hover #user-status {
+  padding: 0 15px;
+  transition: padding 0.3s ease-in;
 }
 #chat .user-status a {
   color: rgb(224, 224, 224);
 }
-#chat .user-status > a {
-  position: relative;
-  left: -15px;
-}
 .user-status {
-  vertical-align: bottom;
-  bottom: -5px;
+  vertical-align: middle;
 }
 .user-status span {
   position: relative;
 }
 .user-status span, .user-status .ui-icon {
-  top: -3px;
+  margin-left: 7px;
 }
 .conversation .author {
-  width: 20%;
+  width: 32px;
   display: inline-block;
   vertical-align: top;
+  float: left;
 }
 .conversation .self .author {
   float: right;