chat: improve label and fix minor bugs

Rodrigo Souto
1 parent acb91951
Showing 5 changed files with 70 additions and 40 deletions Show diff stats
app/controllers/public/chat_controller.rb
app/views/shared/logged_in/xmpp_chat.html.erb
public/javascripts/application.js
public/javascripts/chat.js
public/stylesheets/chat.css
@@ -68,6 +68,11 @@ class ChatController &lt; PublicController
     render :json => {:order => conversations_order.reverse, :domain => environment.default_hostname.gsub('.','-')}.to_json
   end
+  #TODO Ideally this is done through roster table on ejabberd.
+  def roster_groups
+    render :text => user.memberships.map {|m| {:jid => m.jid, :name => m.name}}.to_json
+  end
+
   protected
   def check_environment_feature
@@ -13,11 +13,9 @@
     </script>
-  <div id="chat-label" class="opened">
-    <span class="right-arrow">&gt;</span>
+  <div id="chat-label">
+    <span class="right-arrow">&#9654;</span>
     <span class="title"><%= _('Chat') %></span>
-    <br clear="both" />
-    <div class="icon-big-chat"></div>
   </div>
   <div id='chat'>
@@ -567,14 +567,14 @@ function display_notice(message) {
    setTimeout(function() { $noticeBox.fadeOut('fast'); }, 5000);
 }
-function open_chat_window(self_link, anchor) {
+function open_chat_window(anchor) {
    jQuery('#chat').addClass('opened');
-   jQuery('#chat-label').removeClass('opened');
+   jQuery('#chat-label').addClass('opened');
    jQuery("#chat" ).trigger('opengroup', anchor);
    return false;
 }
-function toggle_chat_window(self_link) {
+function toggle_chat_window() {
    if(jQuery('#conversations .conversation').length == 0) jQuery('.buddies a').first().click();
    jQuery('#chat').toggleClass('opened');
    jQuery('#chat-label').toggleClass('opened');
@@ -177,7 +177,7 @@ jQuery(function($) {
         Jabber.connection.send(
            $pres({to: room_jid + '/' + $own_name}).c('x', {xmlns: Strophe.NS.MUC}).c('history', {maxchars: 0})
         );
-        Jabber.insert_or_update_group(room_jid, 'group');
+        Jabber.insert_or_update_group(room_jid, 'online');
         Jabber.update_chat_title();
      },
@@ -232,6 +232,22 @@ jQuery(function($) {
            var jid_id = Jabber.jid_to_id(jid);
            Jabber.insert_or_update_contact(jid, name);
         });
+        //TODO Add groups through roster too...
+        $.ajax({
+          url: '/chat/roster_groups',
+          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');
+            });
+          },
+          error: function(data, textStatus, jqXHR){
+            console.log(data);
+          },
+        });
         sort_conversations();
         // set up presence handler and send initial presence
         Jabber.connection.addHandler(Jabber.on_presence, null, "presence");
@@ -719,12 +735,12 @@ jQuery(function($) {
      var name = Jabber.name_of(jid_id);
      var identifier = Strophe.getNodeFromJid(jid);
      var avatar = "/chat/avatar/"+identifier
-     if(!$('#chat').is(':visible') || window.isHidden()) {
+     if(!$('#chat').hasClass('opened') || window.isHidden()) {
        var options = {body: message.body, icon: avatar, tag: jid_id};
-       notifyMe(name, options).onclick = function(){
-         jQuery('#chat').show('fast');
-         jQuery('a#'+jid_id).click();
-       };
+       console.log('Notify '+name);
+       $(notifyMe(name, options)).on('click', function(){
+         open_chat_window('#'+jid+'/'+name);
+       });
        $.sound.play('/sounds/receive.wav');
      }
    }
@@ -773,6 +789,6 @@ jQuery(function($) {
   });
   $('#chat-label').click(function(){
-    toggle_chat_window(this);
+    toggle_chat_window();
   });
 });
@@ -23,7 +23,7 @@
 #chat #buddy-list {
   background-color: #f9f9f9;
   top: 0;
-  right: 0;
+  right: -5px;
   width: 0;
   bottom: 100px;
   position: absolute;
@@ -39,6 +39,7 @@
 }
 #chat #buddy-list:hover {
+  right: 0;
   width: 190px;
   transition: width 0.3s ease-in;
 }
@@ -479,35 +480,31 @@ div.occupants &gt; a.up {
 }
 #chat-label {
-  width: 20px;
-  height: 80px;
-  background-color: #2E3436;
+  right: 0;
+  width: 0;
+  height: 0;
+  background-color: #888A85;
   position: fixed;
   top: 20%;
-  right: 350px;
   cursor: pointer;
   text-align: center;
   z-index: 11;
-  transition: background-color 0.2s linear, right 0.3s ease-in, width 0.3s ease-in;
-  border-top-left-radius: 10px;
-  border-bottom-left-radius: 10px;
+  transition: background-color 0.2s linear, right 0.3s ease-in;
 }
 #chat-label.opened {
-  right: 0;
-  width: 100px;
-  transition: background-color 0.2s linear, right 0.3s ease-in, width 0.3s ease-in;
-}
-
-#chat-label.opened:hover {
+  width: 20px;
+  height: 90px;
+  right: 350px;
   background-color: #888A85;
-  transition: background-color 0.2s linear, right 0.3s ease-in, width 0.3s ease-in;
+  border-radius: 10px 0px 0 10px;
+  font-size: 14px;
+  transition: background-color 0.2s linear, right 0.3s ease-in;
 }
-#chat-label:hover {
-  background-color: #888A85;
+#chat-label.opened:hover {
+  background-color: #2E3436;
   transition: background-color 0.2s linear, right 0.3s ease-in;
-  transition: background-color 0.2s linear, right 0.3s ease-in, width 0.3s ease-in;
 }
 #chat-label span {
@@ -515,29 +512,43 @@ div.occupants &gt; a.up {
 }
 #chat-label span.title {
-  font-size: 18px;
-  line-height: 24px;
+  font-size: 16px;
+  position: absolute;
+  background-color: #888A85;
+  border-radius: 10px 10px 0 0;
+  transform: rotate(-90deg);
+  top: 35px;
+  right: -34px;
+  width: 80px;
+  padding: 2px 5px;
+  text-shadow: 1px -1px 0 #666;
+  transition: background-color 0.2s linear, right 0.3s ease-in;
+}
+
+#chat-label:hover span.title {
+  background-color: #2E3436;
+  transition: background-color 0.2s linear, right 0.3s ease-in;
 }
 #chat-label span.right-arrow {
-  font-size: 24px;
-  line-height: 77px;
+  font-size: 18pxpx;
+  line-height: 87px;
 }
 #chat-label .title {
-  display: none;
+  display: inline;
 }
 #chat-label.opened .title {
-  display: inline;
+  display: none;
 }
 #chat-label .right-arrow {
-  display: inline;
+  display: none;
 }
 #chat-label.opened .right-arrow {
-  display: none;
+  display: inline;
 }
 #chat-label div {
	@@ -567,14 +567,14 @@ function display_notice(message) {		@@ -567,14 +567,14 @@ function display_notice(message) {
567	setTimeout(function() { $noticeBox.fadeOut('fast'); }, 5000);	567	setTimeout(function() { $noticeBox.fadeOut('fast'); }, 5000);
568	}	568	}
569		569
570	-function open_chat_window(self_link, anchor) {	570	+function open_chat_window(anchor) {
571	jQuery('#chat').addClass('opened');	571	jQuery('#chat').addClass('opened');
572	- jQuery('#chat-label').removeClass('opened');	572	+ jQuery('#chat-label').addClass('opened');
573	jQuery("#chat" ).trigger('opengroup', anchor);	573	jQuery("#chat" ).trigger('opengroup', anchor);
574	return false;	574	return false;
575	}	575	}
576		576
577	-function toggle_chat_window(self_link) {	577	+function toggle_chat_window() {
578	if(jQuery('#conversations .conversation').length == 0) jQuery('.buddies a').first().click();	578	if(jQuery('#conversations .conversation').length == 0) jQuery('.buddies a').first().click();
579	jQuery('#chat').toggleClass('opened');	579	jQuery('#chat').toggleClass('opened');
580	jQuery('#chat-label').toggleClass('opened');	580	jQuery('#chat-label').toggleClass('opened');