Fix layout for occupants for group chat

Victor Costa · Rodrigo Souto
1 parent 00b73c49
Showing 3 changed files with 37 additions and 16 deletions Show diff stats
app/views/shared/logged_in/xmpp_chat.html.erb
public/javascripts/chat.js
public/stylesheets/chat.css
@@ -77,7 +77,8 @@
       </div>
       <div class="occupant-list-template">
-        <div class="occupant-list">
+        <div class="occupants">
+          <a href="#" class="up">&nbsp;</a>
           <ul class='occupant-list'></ul>
         </div>
       </div>
@@ -85,7 +86,8 @@
       <div class="occupant-item">
         <li class='%{presence_status}'>
           <a data-id='%{jid_id}' class='icon-menu-%{presence_status}-11' href='#'>
-            %{name}
+            %{avatar}
+            <span class="name">%{name}<span>
           </a>
         </li>
       </div>
@@ -89,7 +89,7 @@ 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.template('.occupant-item'), 'chat');
         if (Jabber.rooms[Jabber.jid_to_id(room_jid)] === undefined) {
@@ -199,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');
@@ -528,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() {
@@ -569,8 +568,9 @@ jQuery(function($) {
       textarea.attr('name', panel.id);
       if (Jabber.is_a_room(jid_id)) {
-          panel.append(Jabber.template('.occupant-list-template'));
+          panel.find('.conversation').append(Jabber.template('.occupant-list-template'));
           panel.find('.history').addClass('room');
+          $('#chat .occupants .occupant-list').perfectScrollbar();
       }
       textarea.attr('data-to', jid);
@@ -672,6 +672,10 @@ jQuery(function($) {
    $('.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') {
@@ -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;
	@@ -174,18 +174,33 @@		@@ -174,18 +174,33 @@
174	text-align: center;	174	text-align: center;
175	display: block;	175	display: block;
176	}	176	}
177	-.conversation .occupant-list {	177	+div.occupants {
178	position: absolute;	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	padding: 0;	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	#chat-window .comment-balloon-content {	204	#chat-window .comment-balloon-content {
190	min-height: 50px;	205	min-height: 50px;
191	padding: 5px 0 5px 25px;	206	padding: 5px 0 5px 25px;