Merge branch 'rails3_chat' into rails3_stable

Victor Costa
2 parents 392e1979 1e222c89
Showing 3 changed files with 106 additions and 49 deletions Show diff stats
app/views/shared/logged_in/xmpp_chat.html.erb
public/javascripts/chat.js
public/stylesheets/chat.css
@@ -24,16 +24,22 @@
       </div>
  
       <div id="friends">
-        <div id='title-bar'><h1 class='title'><%= _("Online") %>&nbsp;(<span id='friends-online'>0</span>)</h1></div>
-        <ul class='buddy-list online'></ul>
+        <div class="status-group">
+          <div class='title-bar'><a href="#"><h1 class='title'><%= _("Online") %>&nbsp;(<span id='friends-online'>0</span>)</h1></a></div>
+          <ul class='buddy-list online'></ul>
+        </div>
  
-        <div id='title-bar'><h1 class='title'><%= _("Offline") %></h1></div>
-        <ul class='buddy-list offline'></ul>
+        <div class="status-group">
+          <div class='title-bar'><a href="#"><h1 class='title'><%= _("Offline") %>&nbsp;(<span id='friends-offline'>0</span>)</h1></a></div>
+          <ul class='buddy-list offline'></ul>
+        </div>
       </div>
  
       <div id="rooms">
-        <div id='title-bar'><h1 class='title'><%= _("Groups") %></h1></div>
-        <ul class="buddy-list room-list"></ul>
+        <div class="status-group">
+          <div class='title-bar'><a href="#"><h1 class='title'><%= _("Groups") %>&nbsp;(<span id='groups-online'>0</span>)</h1></a></div>
+          <ul class="buddy-list room-list"></ul>
+        </div>
       </div>
     </div>
  
@@ -42,18 +48,21 @@
     </div>
  
     <div id="chat-templates">
-      <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 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>
       </div>
  
@@ -67,6 +76,22 @@
         </li>
       </div>
  
+      <div class="occupant-list-template">
+        <div class="occupants">
+          <a href="#" class="up">&nbsp;</a>
+          <ul class='occupant-list'></ul>
+        </div>
+      </div>
+
+      <div class="occupant-item">
+        <li class='%{presence_status}'>
+          <a data-id='%{jid_id}' class='icon-menu-%{presence_status}-11' href='#'>
+            %{avatar}
+            <span class="name">%{name}<span>
+          </a>
+        </li>
+      </div>
+
       <div class="message">
         <div data-who="%{who}" class="message %{who}">
           <div class="author">
@@ -79,5 +104,10 @@
           </div>
         </div>
       </div>
+
+      <div class="error-message">
+        <span class='error'>%{text}</span>
+      </div>
+
     </div>
   </div>
@@ -28,11 +28,8 @@ jQuery(function($) {
      jids: {},
      rooms: {},
  
-     templates: {
-        occupant_item: "<li class='%{presence_status}'><a data-id='%{jid_id}' class='icon-menu-%{presence_status}-11' href='#'>%{name}</a></li>",
-        room_item: "<li class='room'><a id='%{jid_id}' class='icon-chat' href='#'>%{name}</a></li>",
-        error: "<span class='error'>%{text}</span>",
-        occupant_list: "<div class='occupant-list'><ul class='occupant-list'></ul></div>"
+     template: function(selector) {
+       return $('#chat #chat-templates '+selector).clone().html();
      },
  
      jid_to_id: function (jid) {
@@ -72,7 +69,7 @@ jQuery(function($) {
         var item = $('#' + jid_id);
         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, Jabber.name_of(jid_id), presence, $('#chat #chat-templates .buddy-item').clone().html(), 'groupchat');
+        Jabber.insert_or_update_user(list, item, jid, Jabber.name_of(jid_id), presence, Jabber.template('.buddy-item'), 'groupchat');
         $("#chat-window .tab a[href='#"+ Jabber.conversation_prefix + jid_id +"']")
            .removeClass()
            .addClass('icon-menu-' + presence + '-11');
@@ -84,7 +81,7 @@ jQuery(function($) {
         var list = $('#buddy-list #friends .buddy-list' + (presence=='offline' ? '.offline' : '.online'));
  
         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');
+        Jabber.insert_or_update_user(list, item, jid, name, presence, Jabber.template('.buddy-item'), 'chat');
         $("#chat-window .tab a[href='#"+ Jabber.conversation_prefix + jid_id +"']")
            .removeClass()
            .addClass('icon-menu-' + presence + '-11');
@@ -92,9 +89,9 @@ jQuery(function($) {
      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.conversation_prefix + Jabber.jid_to_id(room_jid) + ' .occupant-list ul');
+        var list = $('#' + Jabber.conversation_prefix + Jabber.jid_to_id(room_jid) + ' .occupants ul');
         var item = $(list).find('a[data-id='+ jid_id +']');
-        Jabber.insert_or_update_user(list, item, jid, name, presence, Jabber.templates.occupant_item, 'chat');
+        Jabber.insert_or_update_user(list, item, jid, name, presence, Jabber.template('.occupant-item'), 'chat');
         if (Jabber.rooms[Jabber.jid_to_id(room_jid)] === undefined) {
            Jabber.rooms[Jabber.jid_to_id(room_jid)] = {};
         }
@@ -130,7 +127,7 @@ jQuery(function($) {
                if (time==undefined) {
                   time = new Date().toISOString();
                }
-               var message_html = $('#chat #chat-templates .message').clone().html()
+               var message_html = Jabber.template('.message')
                  .replace('%{message}', body)
                  .replace(/%{who}/g, who)
                  .replace('%{time}', time)
@@ -170,8 +167,8 @@ jQuery(function($) {
         Jabber.connection.send(
            $pres({to: room_jid + '/' + $own_name}).c('x', {xmlns: Strophe.NS.MUC}).c('history', {maxchars: 0})
         );
-        //FIXME list group
         Jabber.insert_or_update_group(room_jid, 'group');
+        Jabber.update_chat_title();
      },
  
      leave_room: function(room_jid) {
@@ -180,8 +177,12 @@ jQuery(function($) {
      },
  
      update_chat_title: function () {
-        var friends_online = $('#buddy-list .buddy-list.online li').length;
+        var friends_online = $('#buddy-list #friends .buddy-list.online li').length;
         $('#friends-online').text(friends_online);
+        var friends_offline = $('#buddy-list #friends .buddy-list.offline li').length;
+        $('#friends-offline').text(friends_offline);
+        var groups_online = $('#buddy-list #rooms .buddy-list li').length;
+        $('#groups-online').text(groups_online);
      },
  
      on_connect: function (status) {
@@ -198,7 +199,7 @@ jQuery(function($) {
               break;
            case Strophe.Status.DISCONNECTED:
               log('disconnected');
-              $('#buddy-list ul.buddy-list, .occupant-list ul.occupant-list').html('');
+              $('#buddy-list ul.buddy-list, .occupants ul.occupant-list').html('');
               Jabber.update_chat_title();
               $('#buddy-list .toolbar').removeClass('small-loading-dark');
               $('textarea').prop('disabled', 'disabled');
@@ -360,7 +361,7 @@ jQuery(function($) {
         message = Jabber.parse(message)
         var jid = Strophe.getBareJidFromJid(message.from);
         log('Receiving error message from ' + jid);
-        var body = Jabber.templates.error.replace('%{text}', message.error);
+        var body = Jabber.template('.error-message').replace('%{text}', message.error);
         Jabber.show_message(jid, Jabber.name_of(Jabber.jid_to_id(jid)), body, 'other', Strophe.getNodeFromJid(jid));
         return true;
      },
@@ -527,12 +528,11 @@ jQuery(function($) {
    });
  
    // put name into text area when click in one occupant
-   // FIXME
-   $('.occupant-list .occupant-list li a').live('click', function() {
+   $('.occupants .occupant-list li a').live('click', function() {
       var jid_id = $(this).attr('data-id');
       var name = Jabber.name_of(jid_id);
       var val = $('.conversation textarea:visible').val();
-      $('.conversation textarea:visible').val(val + name + ', ').focus();
+      $('.conversation textarea:visible').focus().val(val + name + ', ');
    });
  
    $('#chat .conversation .history').live('click', function() {
@@ -559,7 +559,7 @@ jQuery(function($) {
  
       // opening chat with selected online friend
       var panel = $('<div id="'+conversation_id +'"></div>').appendTo($conversations);
-      panel.append($('#chat #chat-templates .conversation').clone());
+      panel.append(Jabber.template('.conversation-template'));
       panel.find('.chat-target .avatar').replaceWith(getAvatar(identifier));
       panel.find('.chat-target .other-name').html(title);
       $('#chat .history').perfectScrollbar();
@@ -568,8 +568,9 @@ jQuery(function($) {
       textarea.attr('name', panel.id);
  
       if (Jabber.is_a_room(jid_id)) {
-          panel.append(Jabber.templates.occupant_list);
+          panel.find('.conversation').append(Jabber.template('.occupant-list-template'));
           panel.find('.history').addClass('room');
+          $('#chat .occupants .occupant-list').perfectScrollbar();
       }
       textarea.attr('data-to', jid);
  
@@ -668,6 +669,14 @@ jQuery(function($) {
       Jabber.show_status('offline');
    }
  
+   $('.title-bar a').click(function() {
+     $(this).parents('.status-group').find('.buddy-list').toggle('fast');
+   });
+   $('#chat').on('click', '.occupants a', function() {
+     $(this).siblings('.occupant-list').toggle('fast');
+     $(this).toggleClass('up');
+   });
+
    //restore connection if user was connected
    if($presence=='' || $presence == 'chat') {
       $('#chat-connect').trigger('click');
@@ -46,8 +46,8 @@
   width: 32px;
   max-height: 40px;
 }
-#buddy-list .buddy-list li.offline, .occupant-list li.offline {
-/*  display: none;*/
+#buddy-list .buddy-list.offline, .occupant-list.offline {
+  display: none;
 }
 #chat #buddy-list .toolbar {
   border: 0;
@@ -174,18 +174,33 @@
   text-align: center;
   display: block;
 }
-.conversation .occupant-list {
+div.occupants {
   position: absolute;
-  top: 0;
-  right: 0;
-  width: 200px;
-  bottom: 125px;
+  width: 100%;
+  bottom: 98px;
+  background-color: rgba(0, 0, 0, 0.7);
 }
-.conversation .occupant-list ul {
+div.occupants ul.occupant-list {
   padding: 0;
-  list-style: none;
-  font-size: 12px;
+  margin: 0;
+  max-height: 162px;
+  overflow: hidden;
+  position: relative;
+  display: none;
+  border-top: 1px solid rgb(37, 37, 37);
 }
+div.occupants > a {
+  color: rgb(168, 168, 168);
+  text-align: center;
+  width: 100%;
+  display: inline-block;
+  text-decoration: none;
+  background: url(/images/down-arrow.png) center center no-repeat;
+}
+div.occupants > a.up {
+  background: url(/images/top-arrow.png) center center no-repeat;
+}
+
 #chat-window .comment-balloon-content {
   min-height: 50px;
   padding: 5px 0 5px 25px;
@@ -195,14 +210,17 @@
   margin-left: 0;
 }
  
-#chat #title-bar {
+#chat .title-bar {
   height: 34px;
   background: #ccc url(/images/icons-app/chat-22x22.png) 3px 5px no-repeat;
   width: 250px;
   background-color: #303030;
   border-bottom: 1px solid #383838;
 }
-#title-bar .title {
+#chat .title-bar a {
+  text-decoration: none;
+}
+.title-bar .title {
   margin: 0;
   font-size: 12px;
   padding-left: 30px;
...	...	@@ -24,16 +24,22 @@
24	24	</div>
25	25
26	26	<div id="friends">
27		- <div id='title-bar'><h1 class='title'><%= _("Online") %> (<span id='friends-online'>0</span>)</h1></div>
28		- <ul class='buddy-list online'></ul>
	27	+ <div class="status-group">
	28	+ <div class='title-bar'><a href="#"><h1 class='title'><%= _("Online") %> (<span id='friends-online'>0</span>)</h1></a></div>
	29	+ <ul class='buddy-list online'></ul>
	30	+ </div>
29	31
30		- <div id='title-bar'><h1 class='title'><%= _("Offline") %></h1></div>
31		- <ul class='buddy-list offline'></ul>
	32	+ <div class="status-group">
	33	+ <div class='title-bar'><a href="#"><h1 class='title'><%= _("Offline") %> (<span id='friends-offline'>0</span>)</h1></a></div>
	34	+ <ul class='buddy-list offline'></ul>
	35	+ </div>
32	36	</div>
33	37
34	38	<div id="rooms">
35		- <div id='title-bar'><h1 class='title'><%= _("Groups") %></h1></div>
36		- <ul class="buddy-list room-list"></ul>
	39	+ <div class="status-group">
	40	+ <div class='title-bar'><a href="#"><h1 class='title'><%= _("Groups") %> (<span id='groups-online'>0</span>)</h1></a></div>
	41	+ <ul class="buddy-list room-list"></ul>
	42	+ </div>
37	43	</div>
38	44	</div>
39	45
...	...	@@ -42,18 +48,21 @@
42	48	</div>
43	49
44	50	<div id="chat-templates">
45		- <div class='conversation' style="display: none;">
46		- <div class="header">
47		- <span class="chat-target">
48		- <img class="avatar">
49		- <span class="other-name"></span>
50		- </span>
51		- <a href="#" class="back"><%= _('Back') %></a>
52		- </div>
53		- <div class='history'></div>
54		- <div class='input-div'>
55		- <div class='icon-chat'></div>
56		- <textarea class='input'></textarea>
	51	+
	52	+ <div class="conversation-template">
	53	+ <div class='conversation' style="display: none;">
	54	+ <div class="header">
	55	+ <span class="chat-target">
	56	+ <img class="avatar">
	57	+ <span class="other-name"></span>
	58	+ </span>
	59	+ <a href="#" class="back"><%= _('Back') %></a>
	60	+ </div>
	61	+ <div class='history'></div>
	62	+ <div class='input-div'>
	63	+ <div class='icon-chat'></div>
	64	+ <textarea class='input'></textarea>
	65	+ </div>
57	66	</div>
58	67	</div>
59	68
...	...	@@ -67,6 +76,22 @@
67	76	</li>
68	77	</div>
69	78
	79	+ <div class="occupant-list-template">
	80	+ <div class="occupants">
	81	+ <a href="#" class="up"> </a>
	82	+ <ul class='occupant-list'></ul>
	83	+ </div>
	84	+ </div>
	85	+
	86	+ <div class="occupant-item">
	87	+ <li class='%{presence_status}'>
	88	+ <a data-id='%{jid_id}' class='icon-menu-%{presence_status}-11' href='#'>
	89	+ %{avatar}
	90	+ <span class="name">%{name}<span>
	91	+ </a>
	92	+ </li>
	93	+ </div>
	94	+
70	95	<div class="message">
71	96	<div data-who="%{who}" class="message %{who}">
72	97	<div class="author">
...	...	@@ -79,5 +104,10 @@
79	104	</div>
80	105	</div>
81	106	</div>
	107	+
	108	+ <div class="error-message">
	109	+ <span class='error'>%{text}</span>
	110	+ </div>
	111	+
82	112	</div>
83	113	</div>
...	...
...	...	@@ -28,11 +28,8 @@ jQuery(function($) {
28	28	jids: {},
29	29	rooms: {},
30	30
31		- templates: {
32		- occupant_item: "<li class='%{presence_status}'><a data-id='%{jid_id}' class='icon-menu-%{presence_status}-11' href='#'>%{name}</a></li>",
33		- room_item: "<li class='room'><a id='%{jid_id}' class='icon-chat' href='#'>%{name}</a></li>",
34		- error: "<span class='error'>%{text}</span>",
35		- occupant_list: "<div class='occupant-list'><ul class='occupant-list'></ul></div>"
	31	+ template: function(selector) {
	32	+ return $('#chat #chat-templates '+selector).clone().html();
36	33	},
37	34
38	35	jid_to_id: function (jid) {
...	...	@@ -72,7 +69,7 @@ jQuery(function($) {
72	69	var item = $('#' + jid_id);
73	70	presence = presence \|\| ($(item).length > 0 ? $(item).parent('li').attr('class') : 'offline');
74	71	log('adding or updating contact ' + jid + ' as ' + presence);
75		- Jabber.insert_or_update_user(list, item, jid, Jabber.name_of(jid_id), presence, $('#chat #chat-templates .buddy-item').clone().html(), 'groupchat');
	72	+ Jabber.insert_or_update_user(list, item, jid, Jabber.name_of(jid_id), presence, Jabber.template('.buddy-item'), 'groupchat');
76	73	$("#chat-window .tab a[href='#"+ Jabber.conversation_prefix + jid_id +"']")
77	74	.removeClass()
78	75	.addClass('icon-menu-' + presence + '-11');
...	...	@@ -84,7 +81,7 @@ jQuery(function($) {
84	81	var list = $('#buddy-list #friends .buddy-list' + (presence=='offline' ? '.offline' : '.online'));
85	82
86	83	log('adding or updating contact ' + jid + ' as ' + presence);
87		- Jabber.insert_or_update_user(list, item, jid, name, presence, $('#chat #chat-templates .buddy-item').clone().html(), 'chat');
	84	+ Jabber.insert_or_update_user(list, item, jid, name, presence, Jabber.template('.buddy-item'), 'chat');
88	85	$("#chat-window .tab a[href='#"+ Jabber.conversation_prefix + jid_id +"']")
89	86	.removeClass()
90	87	.addClass('icon-menu-' + presence + '-11');
...	...	@@ -92,9 +89,9 @@ jQuery(function($) {
92	89	insert_or_update_occupant: function (jid, name, presence, room_jid) {
93	90	log('adding or updating occupant ' + jid + ' as ' + presence);
94	91	var jid_id = Jabber.jid_to_id(jid);
95		- var list = $('#' + Jabber.conversation_prefix + Jabber.jid_to_id(room_jid) + ' .occupant-list ul');
	92	+ var list = $('#' + Jabber.conversation_prefix + Jabber.jid_to_id(room_jid) + ' .occupants ul');
96	93	var item = $(list).find('a[data-id='+ jid_id +']');
97		- Jabber.insert_or_update_user(list, item, jid, name, presence, Jabber.templates.occupant_item, 'chat');
	94	+ Jabber.insert_or_update_user(list, item, jid, name, presence, Jabber.template('.occupant-item'), 'chat');
98	95	if (Jabber.rooms[Jabber.jid_to_id(room_jid)] === undefined) {
99	96	Jabber.rooms[Jabber.jid_to_id(room_jid)] = {};
100	97	}
...	...	@@ -130,7 +127,7 @@ jQuery(function($) {
130	127	if (time==undefined) {
131	128	time = new Date().toISOString();
132	129	}
133		- var message_html = $('#chat #chat-templates .message').clone().html()
	130	+ var message_html = Jabber.template('.message')
134	131	.replace('%{message}', body)
135	132	.replace(/%{who}/g, who)
136	133	.replace('%{time}', time)
...	...	@@ -170,8 +167,8 @@ jQuery(function($) {
170	167	Jabber.connection.send(
171	168	$pres({to: room_jid + '/' + $own_name}).c('x', {xmlns: Strophe.NS.MUC}).c('history', {maxchars: 0})
172	169	);
173		- //FIXME list group
174	170	Jabber.insert_or_update_group(room_jid, 'group');
	171	+ Jabber.update_chat_title();
175	172	},
176	173
177	174	leave_room: function(room_jid) {
...	...	@@ -180,8 +177,12 @@ jQuery(function($) {
180	177	},
181	178
182	179	update_chat_title: function () {
183		- var friends_online = $('#buddy-list .buddy-list.online li').length;
	180	+ var friends_online = $('#buddy-list #friends .buddy-list.online li').length;
184	181	$('#friends-online').text(friends_online);
	182	+ var friends_offline = $('#buddy-list #friends .buddy-list.offline li').length;
	183	+ $('#friends-offline').text(friends_offline);
	184	+ var groups_online = $('#buddy-list #rooms .buddy-list li').length;
	185	+ $('#groups-online').text(groups_online);
185	186	},
186	187
187	188	on_connect: function (status) {
...	...	@@ -198,7 +199,7 @@ jQuery(function($) {
198	199	break;
199	200	case Strophe.Status.DISCONNECTED:
200	201	log('disconnected');
201		- $('#buddy-list ul.buddy-list, .occupant-list ul.occupant-list').html('');
	202	+ $('#buddy-list ul.buddy-list, .occupants ul.occupant-list').html('');
202	203	Jabber.update_chat_title();
203	204	$('#buddy-list .toolbar').removeClass('small-loading-dark');
204	205	$('textarea').prop('disabled', 'disabled');
...	...	@@ -360,7 +361,7 @@ jQuery(function($) {
360	361	message = Jabber.parse(message)
361	362	var jid = Strophe.getBareJidFromJid(message.from);
362	363	log('Receiving error message from ' + jid);
363		- var body = Jabber.templates.error.replace('%{text}', message.error);
	364	+ var body = Jabber.template('.error-message').replace('%{text}', message.error);
364	365	Jabber.show_message(jid, Jabber.name_of(Jabber.jid_to_id(jid)), body, 'other', Strophe.getNodeFromJid(jid));
365	366	return true;
366	367	},
...	...	@@ -527,12 +528,11 @@ jQuery(function($) {
527	528	});
528	529
529	530	// put name into text area when click in one occupant
530		- // FIXME
531		- $('.occupant-list .occupant-list li a').live('click', function() {
	531	+ $('.occupants .occupant-list li a').live('click', function() {
532	532	var jid_id = $(this).attr('data-id');
533	533	var name = Jabber.name_of(jid_id);
534	534	var val = $('.conversation textarea:visible').val();
535		- $('.conversation textarea:visible').val(val + name + ', ').focus();
	535	+ $('.conversation textarea:visible').focus().val(val + name + ', ');
536	536	});
537	537
538	538	$('#chat .conversation .history').live('click', function() {
...	...	@@ -559,7 +559,7 @@ jQuery(function($) {
559	559
560	560	// opening chat with selected online friend
561	561	var panel = $('<div id="'+conversation_id +'"></div>').appendTo($conversations);
562		- panel.append($('#chat #chat-templates .conversation').clone());
	562	+ panel.append(Jabber.template('.conversation-template'));
563	563	panel.find('.chat-target .avatar').replaceWith(getAvatar(identifier));
564	564	panel.find('.chat-target .other-name').html(title);
565	565	$('#chat .history').perfectScrollbar();
...	...	@@ -568,8 +568,9 @@ jQuery(function($) {
568	568	textarea.attr('name', panel.id);
569	569
570	570	if (Jabber.is_a_room(jid_id)) {
571		- panel.append(Jabber.templates.occupant_list);
	571	+ panel.find('.conversation').append(Jabber.template('.occupant-list-template'));
572	572	panel.find('.history').addClass('room');
	573	+ $('#chat .occupants .occupant-list').perfectScrollbar();
573	574	}
574	575	textarea.attr('data-to', jid);
575	576
...	...	@@ -668,6 +669,14 @@ jQuery(function($) {
668	669	Jabber.show_status('offline');
669	670	}
670	671
	672	+ $('.title-bar a').click(function() {
	673	+ $(this).parents('.status-group').find('.buddy-list').toggle('fast');
	674	+ });
	675	+ $('#chat').on('click', '.occupants a', function() {
	676	+ $(this).siblings('.occupant-list').toggle('fast');
	677	+ $(this).toggleClass('up');
	678	+ });
	679	+
671	680	//restore connection if user was connected
672	681	if($presence=='' \|\| $presence == 'chat') {
673	682	$('#chat-connect').trigger('click');
...	...
...	...	@@ -46,8 +46,8 @@
46	46	width: 32px;
47	47	max-height: 40px;
48	48	}
49		-#buddy-list .buddy-list li.offline, .occupant-list li.offline {
50		-/* display: none;*/
	49	+#buddy-list .buddy-list.offline, .occupant-list.offline {
	50	+ display: none;
51	51	}
52	52	#chat #buddy-list .toolbar {
53	53	border: 0;
...	...	@@ -174,18 +174,33 @@
174	174	text-align: center;
175	175	display: block;
176	176	}
177		-.conversation .occupant-list {
	177	+div.occupants {
178	178	position: absolute;
179		- top: 0;
180		- right: 0;
181		- width: 200px;
182		- bottom: 125px;
	179	+ width: 100%;
	180	+ bottom: 98px;
	181	+ background-color: rgba(0, 0, 0, 0.7);
183	182	}
184		-.conversation .occupant-list ul {
	183	+div.occupants ul.occupant-list {
185	184	padding: 0;
186		- list-style: none;
187		- font-size: 12px;
	185	+ margin: 0;
	186	+ max-height: 162px;
	187	+ overflow: hidden;
	188	+ position: relative;
	189	+ display: none;
	190	+ border-top: 1px solid rgb(37, 37, 37);
188	191	}
	192	+div.occupants > a {
	193	+ color: rgb(168, 168, 168);
	194	+ text-align: center;
	195	+ width: 100%;
	196	+ display: inline-block;
	197	+ text-decoration: none;
	198	+ background: url(/images/down-arrow.png) center center no-repeat;
	199	+}
	200	+div.occupants > a.up {
	201	+ background: url(/images/top-arrow.png) center center no-repeat;
	202	+}
	203	+
189	204	#chat-window .comment-balloon-content {
190	205	min-height: 50px;
191	206	padding: 5px 0 5px 25px;
...	...	@@ -195,14 +210,17 @@
195	210	margin-left: 0;
196	211	}
197	212
198		-#chat #title-bar {
	213	+#chat .title-bar {
199	214	height: 34px;
200	215	background: #ccc url(/images/icons-app/chat-22x22.png) 3px 5px no-repeat;
201	216	width: 250px;
202	217	background-color: #303030;
203	218	border-bottom: 1px solid #383838;
204	219	}
205		-#title-bar .title {
	220	+#chat .title-bar a {
	221	+ text-decoration: none;
	222	+}
	223	+.title-bar .title {
206	224	margin: 0;
207	225	font-size: 12px;
208	226	padding-left: 30px;
...	...