Download as
Browse Code »

Commit 7212de73bb870b95913a6c727b5cd51ef3f8d343

Authored by Victor Costa
Committed by Rodrigo Souto
1 parent ebede9d0
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

Small fixes for chat

Showing 4 changed files with 178 additions and 120 deletions   Show diff stats
app/helpers/chat_helper.rb
  Diff comments   View file @7212de7
... ... @@ -7,7 +7,7 @@ module ChatHelper
7 7 ['icon-menu-offline', _('Sign out of chat'), 'chat-disconnect'],
8 8 ]
9 9 content_tag('span',
10   - link_to(content_tag('span', status) + ui_icon('ui-icon-triangle-1-s'),
  10 + link_to(content_tag('span', user.name) + ui_icon('ui-icon-triangle-1-s'),
11 11 '#',
12 12 :onclick => 'toggleMenu(this); return false',
13 13 :class => icon_class + ' simplemenu-trigger'
... ...
app/views/shared/logged_in/xmpp_chat.html.erb
  Diff comments   View file @7212de7
... ... @@ -29,27 +29,33 @@
29 29 </script>
30 30  
31 31 <div id='chat'>
32   - <div id='title-bar'>
33   - <h1 class='title'><%= _("Online") % h(page_title) %>&nbsp;(<span id='friends-online'>0</span>)</h1>
34   - </div>
35 32 <div id='buddy-list'>
36 33 <div class='toolbar'>
37   - <div id='user-status'><%= user_status_menu('icon-menu-offline', _('Offline')) %></div>
  34 + <div id='user-status'>
  35 + <span class="avatar"></span>
  36 + <%= user_status_menu('icon-menu-offline', _('Offline')) %>
  37 + </div>
38 38 <div class='dialog-error' style='display: none'></div>
39 39 </div>
  40 + <div id='title-bar'>
  41 + <h1 class='title'><%= _("Online") % h(page_title) %>&nbsp;(<span id='friends-online'>0</span>)</h1>
  42 + </div>
40 43 <ul class='buddy-list'>
41 44 </ul>
42 45 </div>
43   - <div id='chat-window' class='tabs-bottom'>
44   - <div id='tabs'>
45   - <ul>
46   - </ul>
47   - </div>
  46 + <div id='chat-window'>
  47 + <div id='conversations'></div>
48 48 </div>
49 49  
50 50 <div id="chat-templates">
51   - <div class='conversation'>
52   - <a href="#" class="back"><%= _('Back') %></a>
  51 + <div class='conversation' style="display: none;">
  52 + <div class="header">
  53 + <span class="chat-target">
  54 + <img class="avatar">
  55 + <span class="other-name"></span>
  56 + </span>
  57 + <a href="#" class="back"><%= _('Back') %></a>
  58 + </div>
53 59 <div class='history'></div>
54 60 <div class='input-div'>
55 61 <div class='icon-chat'></div>
... ... @@ -60,8 +66,9 @@
60 66 <div class="buddy-item">
61 67 <li class='%{presence_status}'>
62 68 <a id='%{jid_id}' class='icon-menu-%{presence_status}-11' href='#'>
63   - <img class="avatar" src="%{avatar_url}"/>
  69 + %{avatar}
64 70 <span class="name">%{name}<span>
  71 + <span class="unread-messages icon-chat"></span>
65 72 </a>
66 73 </li>
67 74 </div>
... ... @@ -69,7 +76,7 @@
69 76 <div class="message">
70 77 <div data-who="%{who}" class="message %{who}">
71 78 <div class="author">
72   - <img class="avatar" src="%{avatar_url}"/>
  79 + %{avatar}
73 80 <h5 class="%{who}-name">%{name}</h5>
74 81 </div>
75 82 <div class="content">
... ...
public/javascripts/chat.js
  Diff comments   View file @7212de7
... ... @@ -25,7 +25,7 @@ jQuery(function($) {
25 25 muc_supported: false,
26 26 presence_status: '',
27 27 update_presence_status_every: $update_presence_status_every, // time in seconds of how often update presence status to Noosfero DB
28   - tab_prefix: 'conversation-', // used to compose jQuery UI tabs and anchors to select then
  28 + conversation_prefix: 'conversation-',
29 29 jids: {},
30 30 rooms: {},
31 31  
... ... @@ -60,7 +60,7 @@ jQuery(function($) {
60 60 var html = template
61 61 .replace('%{jid_id}', jid_id)
62 62 .replace(/%{presence_status}/g, presence)
63   - .replace('%{avatar_url}', '/chat/avatar/' + identifier)
  63 + .replace('%{avatar}', getAvatar(identifier))
64 64 .replace('%{name}', name);
65 65 if ($(item).length > 0) {
66 66 $(item).parent('li').replaceWith(html);
... ... @@ -76,14 +76,14 @@ jQuery(function($) {
76 76 presence = presence || ($(item).length > 0 ? $(item).parent('li').attr('class') : 'offline');
77 77 log('adding or updating contact ' + jid + ' as ' + presence);
78 78 Jabber.insert_or_update_user(list, item, jid, name, presence, $('#chat #chat-templates .buddy-item').clone().html());
79   - $("#chat-window .tab a[href='#"+ Jabber.tab_prefix + jid_id +"']")
  79 + $("#chat-window .tab a[href='#"+ Jabber.conversation_prefix + jid_id +"']")
80 80 .removeClass()
81 81 .addClass('icon-menu-' + presence + '-11');
82 82 },
83 83 insert_or_update_occupant: function (jid, name, presence, room_jid) {
84 84 log('adding or updating occupant ' + jid + ' as ' + presence);
85 85 var jid_id = Jabber.jid_to_id(jid);
86   - var list = $('#' + Jabber.tab_prefix + Jabber.jid_to_id(room_jid) + ' .occupant-list ul');
  86 + var list = $('#' + Jabber.conversation_prefix + Jabber.jid_to_id(room_jid) + ' .occupant-list ul');
87 87 var item = $(list).find('a[data-id='+ jid_id +']');
88 88 Jabber.insert_or_update_user(list, item, jid, name, presence, Jabber.templates.occupant_item);
89 89 if (Jabber.rooms[Jabber.jid_to_id(room_jid)] === undefined) {
... ... @@ -113,7 +113,7 @@ jQuery(function($) {
113 113 if (body) {
114 114 body = Jabber.render_body_message(body);
115 115 var jid_id = Jabber.jid_to_id(jid);
116   - var tab_id = '#' + Jabber.tab_prefix + jid_id;
  116 + var tab_id = '#' + Jabber.conversation_prefix + jid_id;
117 117 if ($(tab_id).find('.message').length > 0 && $(tab_id).find('.message:last').attr('data-who') == who) {
118 118 $(tab_id).find('.history').find('.message:last .content').append('<p>' + body + '</p>');
119 119 }
... ... @@ -125,8 +125,8 @@ jQuery(function($) {
125 125 .replace(/%{who}/g, who)
126 126 .replace('%{time}', time)
127 127 .replace('%{name}', name)
128   - .replace('%{avatar_url}', '/chat/avatar/' + identifier);
129   - $('#' + Jabber.tab_prefix + jid_id).find('.history').append(message_html);
  128 + .replace('%{avatar}', getAvatar(identifier));
  129 + $('#' + Jabber.conversation_prefix + jid_id).find('.history').append(message_html);
130 130 }
131 131 $(tab_id).find('.history').scrollTo({top:'100%', left:'0%'});
132 132 if (who != "self") {
... ... @@ -144,8 +144,8 @@ jQuery(function($) {
144 144 .removeClass('icon-menu-chat')
145 145 .removeClass('icon-menu-offline')
146 146 .removeClass('icon-menu-dnd')
147   - .addClass('icon-menu-' + (presence || 'offline'))
148   - .find('span').html($presence_status_label[presence]);
  147 + .addClass('icon-menu-' + (presence || 'offline'));
  148 + $('#buddy-list #user-status span.avatar').replaceWith(getMyAvatar());
149 149 $.get('/chat/update_presence_status', { status: {chat_status: presence, last_chat_status: presence} });
150 150 },
151 151  
... ... @@ -165,7 +165,7 @@ jQuery(function($) {
165 165 },
166 166  
167 167 update_chat_title: function () {
168   - var friends_online = $('#buddy-list .buddy-list li.chat').length;
  168 + var friends_online = $('#buddy-list .buddy-list li:not(.offline)').length;
169 169 $('#friends-online').text(friends_online);
170 170 },
171 171  
... ... @@ -439,7 +439,7 @@ jQuery(function($) {
439 439 },
440 440  
441 441 show_notice: function(jid_id, msg) {
442   - var tab_id = '#' + Jabber.tab_prefix + jid_id;
  442 + var tab_id = '#' + Jabber.conversation_prefix + jid_id;
443 443 $(tab_id).find('.history').append("<span class='notice'>" + msg + "</span>");
444 444 }
445 445 };
... ... @@ -470,6 +470,7 @@ jQuery(function($) {
470 470 Jabber.connect();
471 471 });
472 472  
  473 + // FIXME
473 474 // detect when click in chat with a community or person in main window of Noosfero environment
474 475 $(window).bind('hashchange', function() {
475 476 if (window.location.hash) {
... ... @@ -511,6 +512,10 @@ jQuery(function($) {
511 512 var jid_id = $(this).attr('id');
512 513 var name = Jabber.name_of(jid_id);
513 514 create_conversation_tab(name, jid_id);
  515 +
  516 + var conversation_id = Jabber.conversation_prefix + jid_id;
  517 + $('#' + conversation_id).find('.conversation').show();
  518 + count_unread_messages(jid_id, true);
514 519 });
515 520  
516 521 // put name into text area when click in one occupant
... ... @@ -526,22 +531,22 @@ jQuery(function($) {
526 531 });
527 532  
528 533 $('.conversation .back').live('click', function() {
529   - $(this).parents('.conversation').hide();
  534 + $('#chat #chat-window .conversation').hide();
530 535 });
531 536  
532 537 function create_conversation_tab(title, jid_id) {
533   - var conversation_id = Jabber.tab_prefix + jid_id;
  538 + var conversation_id = Jabber.conversation_prefix + jid_id;
534 539 if (! $('#' + conversation_id).length > 0) {
  540 + var jid = Jabber.jid_of(jid_id);
  541 + var identifier = getIdentifier(jid);
  542 +
535 543 // opening chat with selected online friend
536   - var panel = $('<div id="'+conversation_id +'"></div>').appendTo($tabs);
  544 + var panel = $('<div id="'+conversation_id +'"></div>').appendTo($conversations);
537 545 panel.append($('#chat #chat-templates .conversation').clone());
  546 + panel.find('.chat-target .avatar').replaceWith(getAvatar(identifier));
  547 + panel.find('.chat-target .other-name').html(title);
538 548 $('#chat .history').perfectScrollbar();
539 549  
540   - //FIXME
541   - //var notice = $starting_chat_notice.replace('%{name}', $(ui.tab).html());
542   - //Jabber.show_notice(jid_id, notice);
543   -
544   - // define textarea name as '<TAB_ID>'
545 550 panel.find('textarea').attr('name', panel.id);
546 551  
547 552 if (Jabber.is_a_room(jid_id)) {
... ... @@ -549,32 +554,26 @@ jQuery(function($) {
549 554 panel.find('.history').addClass('room');
550 555 }
551 556  
552   - $tabs.find('.ui-tabs-nav').append( "<li><a href='"+('#' + Jabber.tab_prefix + jid_id)+"'><span class=\"unread-messages\" style=\"display:none\"></span>"+title+"</a></li>" );
553   -
554   - var jid = Jabber.jid_of(jid_id);
555   - $("a[href='#" + Jabber.tab_prefix + jid_id + "']").addClass($('#' + jid_id).attr('class') || 'icon-chat');
556   - $('#' + Jabber.tab_prefix + jid_id).find('textarea').attr('data-to', jid);
557   - } else {
558   - $('#' + conversation_id).find('.conversation').show();
  557 + $('#' + Jabber.conversation_prefix + jid_id).find('textarea').attr('data-to', jid);
559 558 }
560 559 }
561 560  
562 561 function count_unread_messages(jid_id, hide) {
  562 + var unread = $('.buddy-list #'+jid_id+ ' .unread-messages');
563 563 if (hide) {
564   - $('a[href=#' + Jabber.tab_prefix + jid_id + ']').find('.unread-messages').hide();
  564 + unread.hide();
565 565 Jabber.unread_messages_of(jid_id, 0);
566   - $('a[href=#' + Jabber.tab_prefix + jid_id + ']').find('.unread-messages').text('');
  566 + unread.text('');
567 567 }
568 568 else {
569   - $('a[href=#' + Jabber.tab_prefix + jid_id + ']').find('.unread-messages').show();
  569 + unread.show();
570 570 var unread_messages = Jabber.unread_messages_of(jid_id) || 0;
571 571 Jabber.unread_messages_of(jid_id, ++unread_messages);
572   - $('a[href=#' + Jabber.tab_prefix + jid_id + ']').find('.unread-messages').text(unread_messages);
  572 + unread.text(unread_messages);
573 573 }
574 574 }
575 575  
576   - // creating tabs
577   - var $tabs = $('#chat-window #tabs');
  576 + var $conversations = $('#chat-window #conversations');
578 577  
579 578 function log(msg) {
580 579 if(Jabber.debug && window.console && window.console.log) {
... ... @@ -590,6 +589,22 @@ jQuery(function($) {
590 589 .replace(/>/g, '&gt;');
591 590 }
592 591  
  592 + function getCurrentIdentifier() {
  593 + return getIdentifier(Jabber.connection.jid);
  594 + }
  595 +
  596 + function getIdentifier(jid) {
  597 + return Strophe.getNodeFromJid(jid);
  598 + }
  599 +
  600 + function getMyAvatar() {
  601 + return getAvatar(getCurrentIdentifier());
  602 + }
  603 +
  604 + function getAvatar(identifier) {
  605 + return '<img class="avatar" src="/chat/avatar/' + identifier + '">';
  606 + }
  607 +
593 608 });
594 609  
595 610 function checkTime(i) {
... ...
public/stylesheets/chat.css
  Diff comments   View file @7212de7
1 1 #chat {
2 2 width: 250px;
  3 + height: 100%;
3 4 display: none;
  5 + position: fixed;
  6 + right: 0;
  7 + top: 0;
  8 + z-index: 900;
4 9 }
5 10  
6 11 #buddy-list {
7 12 background-color: #303030;
8   - position: absolute;
9   - bottom: 0;
10   - top: 25px;
11   - -webkit-top: 5px;
12 13 width: 250px;
  14 + height: 100%;
13 15 overflow-y: auto;
14   - right: 0;
15 16 }
16 17 #buddy-list .buddy-list {
17 18 list-style-type: none;
... ... @@ -22,6 +23,9 @@
22 23 line-height: 30px;
23 24 border-bottom: 1px solid #383838;
24 25 }
  26 +#buddy-list .buddy-list li a:hover, .occupant-list li a:hover {
  27 + background: rgb(58, 58, 58);
  28 +}
25 29 #buddy-list .buddy-list li a, .occupant-list li a {
26 30 background: none;
27 31 display: block;
... ... @@ -32,20 +36,21 @@
32 36 }
33 37 #buddy-list .buddy-list li a .name, .occupant-list li a .name {
34 38 vertical-align: top;
  39 + margin-left: 5px;
35 40 }
36   -#buddy-list .buddy-list li a img, .occupant-list li a img {
37   - max-height: 32px;
  41 +#buddy-list .buddy-list li a img, .occupant-list li a img, #chat .avatar {
  42 + height: 32px;
38 43 max-width: 32px;
  44 + border-radius: 15%;
39 45 }
40 46 #buddy-list .buddy-list li.offline, .occupant-list li.offline {
41 47 display: none;
42 48 }
43   -#buddy-list .toolbar {
44   - border-left: 0;
45   - border-right: 0;
46   - background-position: 90%;
47   - position: relative;
48   - height: 20px;
  49 +#chat #buddy-list .toolbar {
  50 + border: 0;
  51 + height: 40px;
  52 + background-color: rgb(39, 39, 39);
  53 + border-bottom: 1px solid #383838;
49 54 }
50 55 #buddy-list .toolbar .dialog-error {
51 56 position: absolute;
... ... @@ -70,8 +75,8 @@
70 75 .conversation .input-div {
71 76 position: absolute;
72 77 right: 0;
73   - bottom: 40px;
74   - padding: 0 20px 10px 15px;
  78 + bottom: 0;
  79 + padding: 0 20px 15px 15px;
75 80 }
76 81 .msie7 .conversation .input-div {
77 82 padding-left: 5px;
... ... @@ -95,64 +100,26 @@
95 100 .conversation .history {
96 101 position: absolute;
97 102 right: 0;
98   - top: 25px;
99   - bottom: 125px;
  103 + top: 41px;
  104 + bottom: 100px;
100 105 overflow: hidden;
101   - padding-top: 5px;
102   - width: 250px;
  106 + width: 100%;
103 107 background-color: #303030;
104 108 }
105 109 .msie7 #chat-window .conversation .history {
106 110 overflow-x: hidden;
107 111 }
108 112 #chat .unread-messages {
109   - background: red;
110   - position: absolute;
111   - right: 22px;
112   - margin: 2px 0;
113   - padding: 0 2px;
114   - color: white;
115   - display: block;
116   - line-height: 1em;
117   -}
118   -#chat .tabs-bottom .ui-tabs-nav {
119   - position: absolute;
120   - left: 0;
121   - bottom: 0;
122   - right:0;
123   - padding: 0 5px 10px 5px;
124   - border: 0;
125   - background: #eee;
126   -}
127   -#chat .tabs-bottom .ui-tabs-nav li {
128   - top: 0;
129   - margin-top: 0;
130   - margin-bottom: 0;
131   - border: 1px solid transparent;
132   - border-top: none;
133   -}
134   -#chat .tabs-bottom .ui-tabs-nav li a {
135   - padding: 0.3em 0.5em 0.3em 2.0em;
136   - background-position: 0.5em 50%;
137   -}
138   -#chat .tabs-bottom .ui-tabs-nav li:hover, #chat .tabs-bottom .ui-tabs-nav .ui-state-active {
139   - border: 1px solid #AAAAAA !important;
140   - border-top: 0 !important;
141   -}
142   -#chat .tabs-bottom li .ui-icon-close {
143   - margin: 0.4em 0.5em 0 0 !important;
144   -}
145   -#chat .ui-tabs .ui-tabs-panel {
146   - border: none;
  113 + float: right;
  114 + margin-right: 25px;
  115 + padding-left: 22px;
  116 + background-position: 0;
147 117 }
148 118 #chat-window .history .message {
149   - padding: 0 10px;
150   - /*position: relative;*/
  119 + padding: 8px 8px 8px 6px;
151 120 }
152 121 #chat-window .history .message .time {
153   - position: absolute;
154   - right: 10px;
155   - top: 5px;
  122 + float: right;
156 123 color: gray;
157 124 font-style: italic;
158 125 font-size: 11px;
... ... @@ -166,14 +133,22 @@
166 133 }
167 134  
168 135 #chat-window .history .message .content {
169   - background-color: #383838;
  136 + background-color: #494949;
170 137 color: rgb(223, 223, 223);
171 138 padding: 5px;
  139 + border-radius: 3%;
  140 + display: inline-block;
  141 + width: 74%;
  142 +}
  143 +#chat-window .history .message.self .content {
  144 + background-color: #383838;
172 145 }
173 146  
174 147 #chat-window .history .message .avatar {
175 148 max-height: 32px;
176 149 max-width: 32px;
  150 + margin: auto;
  151 + display: block;
177 152 }
178 153 #chat-window .history .notice {
179 154 font-size: 10px;
... ... @@ -206,32 +181,93 @@
206 181 margin-left: 0;
207 182 }
208 183  
209   -#title-bar {
210   - top: 0;
211   - height: 25px;
212   - position: absolute;
213   - background: #ccc url(/images/icons-app/chat-22x22.png) 2px 2px no-repeat;
  184 +#chat #title-bar {
  185 + height: 34px;
  186 + background: #ccc url(/images/icons-app/chat-22x22.png) 3px 5px no-repeat;
214 187 width: 250px;
215   - right: 0;
  188 + background-color: #303030;
  189 + border-bottom: 1px solid #383838;
216 190 }
217 191 #title-bar .title {
218 192 margin: 0;
219 193 font-size: 12px;
220   - margin: 4px 0;
221 194 padding-left: 30px;
  195 + line-height: 32px;
  196 + color: rgb(82, 212, 253);
222 197 }
223 198 #chat #chat-templates {
224 199 display: none;
225 200 }
226   -.conversation .back {
  201 +.conversation .header {
227 202 position: absolute;
228   - top: 5px;
229   - right: 8px;
  203 + top: 0;
  204 + right: 0;
  205 + width: 100%;
  206 + background-color: rgb(39, 39, 39);
  207 +}
  208 +.conversation .header .chat-target {
  209 + padding: 6px;
  210 + display: inline-block;
  211 +}
  212 +.conversation .header .back {
  213 + float: right;
  214 + margin: 6px;
  215 + padding: 7px;
  216 + background-color: rgb(98, 98, 98);
  217 + border-radius: 12%;
  218 + text-decoration: none;
  219 + font-weight: bold;
230 220 color: white;
231 221 }
232   -#chat #chat-window .history .other-name {
  222 +#chat #chat-window .other-name {
233 223 color: #6C9EDD;
234 224 }
235 225 #chat #chat-window .history .self-name {
236 226 color: #6C87DD;
237 227 }
  228 +#chat #chat-window .history h5 {
  229 + text-align: center;
  230 + word-wrap: break-word;
  231 +}
  232 +.webkit .simplemenu-submenu.opened {
  233 + top: 18px;
  234 +}
  235 +#chat .simplemenu-submenu {
  236 + background: #585858;
  237 + border: 1px solid #6B6B6B;
  238 +}
  239 +.user-status a {
  240 + color: rgb(224, 224, 224);
  241 +}
  242 +#user-status .avatar {
  243 + position: relative;
  244 + left: 16px;
  245 + top: 2px;
  246 +}
  247 +.user-status span {
  248 + position: relative;
  249 +}
  250 +.user-status span, .user-status .ui-icon {
  251 + top: -3px;
  252 +}
  253 +
  254 +.buddy-list span.name {
  255 + padding: 20px;
  256 + position: relative;
  257 + left: -20px;
  258 +}
  259 +.buddy-list .dnd span.name {
  260 + background: url(/designs/icons/pidgin/pidgin/status/16/busy.png) 0px 30px no-repeat;
  261 +}
  262 +.buddy-list .chat span.name {
  263 + background: url(/designs/icons/pidgin/pidgin/status/16/available.png) 0px 30px no-repeat;
  264 +}
  265 +
  266 +.conversation .author {
  267 + width: 20%;
  268 + display: inline-block;
  269 + vertical-align: top;
  270 +}
  271 +.conversation .self .author {
  272 + float: right;
  273 +}
... ...