Download as
Browse Code »

Commit a8cf1e1abb57d6c76f17008687af77246a1a921d

Authored by Victor Costa
Committed by Rodrigo Souto
1 parent 00b73c49
Exists in master and in 29 other branches add_member_task_reject_details, admin_visible_profile, article-list-template, community_notifications, contact_admin_translation, event_fixes, fix_comments_pagination, fix_rails4_organization_ratings, fix_sign_up_form, follow_step_fix, forum_topic_creation, mirror_block_improvements, multi_env_on_remote_user, new_security, noosfero_spb_ci, organization_ratings_improvements, organization_ratings_link_to_profile_stable-spb-1.3, organization_ratings_translations_fix, profile_api_improvements, ratings_minor_fixes, remote_user_fix, send_email_to_admins, stable-spb-1.3, stable-spb-1.3-fixes, stable-spb-1.4, stable-spb-1.5, suggest_rejected_value, web_steps_improvements, xss_terminate_custom_options

Fix layout for occupants for group chat

Showing 3 changed files with 37 additions and 16 deletions   Show diff stats
app/views/shared/logged_in/xmpp_chat.html.erb
  Diff comments   View file @a8cf1e1
... ... @@ -77,7 +77,8 @@
77 77 </div>
78 78  
79 79 <div class="occupant-list-template">
80   - <div class="occupant-list">
  80 + <div class="occupants">
  81 + <a href="#" class="up">&nbsp;</a>
81 82 <ul class='occupant-list'></ul>
82 83 </div>
83 84 </div>
... ... @@ -85,7 +86,8 @@
85 86 <div class="occupant-item">
86 87 <li class='%{presence_status}'>
87 88 <a data-id='%{jid_id}' class='icon-menu-%{presence_status}-11' href='#'>
88   - %{name}
  89 + %{avatar}
  90 + <span class="name">%{name}<span>
89 91 </a>
90 92 </li>
91 93 </div>
... ...
public/javascripts/chat.js
  Diff comments   View file @a8cf1e1
... ... @@ -89,7 +89,7 @@ jQuery(function($) {
89 89 insert_or_update_occupant: function (jid, name, presence, room_jid) {
90 90 log('adding or updating occupant ' + jid + ' as ' + presence);
91 91 var jid_id = Jabber.jid_to_id(jid);
92   - 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');
93 93 var item = $(list).find('a[data-id='+ jid_id +']');
94 94 Jabber.insert_or_update_user(list, item, jid, name, presence, Jabber.template('.occupant-item'), 'chat');
95 95 if (Jabber.rooms[Jabber.jid_to_id(room_jid)] === undefined) {
... ... @@ -199,7 +199,7 @@ jQuery(function($) {
199 199 break;
200 200 case Strophe.Status.DISCONNECTED:
201 201 log('disconnected');
202   - $('#buddy-list ul.buddy-list, .occupant-list ul.occupant-list').html('');
  202 + $('#buddy-list ul.buddy-list, .occupants ul.occupant-list').html('');
203 203 Jabber.update_chat_title();
204 204 $('#buddy-list .toolbar').removeClass('small-loading-dark');
205 205 $('textarea').prop('disabled', 'disabled');
... ... @@ -528,12 +528,11 @@ jQuery(function($) {
528 528 });
529 529  
530 530 // put name into text area when click in one occupant
531   - // FIXME
532   - $('.occupant-list .occupant-list li a').live('click', function() {
  531 + $('.occupants .occupant-list li a').live('click', function() {
533 532 var jid_id = $(this).attr('data-id');
534 533 var name = Jabber.name_of(jid_id);
535 534 var val = $('.conversation textarea:visible').val();
536   - $('.conversation textarea:visible').val(val + name + ', ').focus();
  535 + $('.conversation textarea:visible').focus().val(val + name + ', ');
537 536 });
538 537  
539 538 $('#chat .conversation .history').live('click', function() {
... ... @@ -569,8 +568,9 @@ jQuery(function($) {
569 568 textarea.attr('name', panel.id);
570 569  
571 570 if (Jabber.is_a_room(jid_id)) {
572   - panel.append(Jabber.template('.occupant-list-template'));
  571 + panel.find('.conversation').append(Jabber.template('.occupant-list-template'));
573 572 panel.find('.history').addClass('room');
  573 + $('#chat .occupants .occupant-list').perfectScrollbar();
574 574 }
575 575 textarea.attr('data-to', jid);
576 576  
... ... @@ -672,6 +672,10 @@ jQuery(function($) {
672 672 $('.title-bar a').click(function() {
673 673 $(this).parents('.status-group').find('.buddy-list').toggle('fast');
674 674 });
  675 + $('#chat').on('click', '.occupants a', function() {
  676 + $(this).siblings('.occupant-list').toggle('fast');
  677 + $(this).toggleClass('up');
  678 + });
675 679  
676 680 //restore connection if user was connected
677 681 if($presence=='' || $presence == 'chat') {
... ...
public/stylesheets/chat.css
  Diff comments   View file @a8cf1e1
... ... @@ -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;
... ...