Download as
Browse Code »

Commit fc14aa9db100213a7713d72cc4106d8796c7b3c4

Authored by Rodrigo Souto
1 parent 46ac0b54
Exists in master and in 21 other branches activate_plugin, api_fixies, api_tasks, article_blog_visualization_format, article_layout_refactoring, article_layout_temp, blog_page_bug, clone_article, communities_ratings, design_template, event_layout, fix_forum, fix_optional_fields, fix_suggest_article, folder_improvments, manage_organization, news_page, script_to_update, template_mirror_block, tests, tests_fixies

Major refactoring on chat interface

Showing 5 changed files with 160 additions and 104 deletions   Show diff stats
app/helpers/chat_helper.rb
  Diff comments   View file @fc14aa9
... ... @@ -6,8 +6,9 @@ module ChatHelper
6 6 ['icon-menu-busy', _('Busy'), 'chat-busy'],
7 7 ['icon-menu-offline', _('Sign out of chat'), 'chat-disconnect'],
8 8 ]
  9 + avatar = profile_image(user, :portrait, :class => 'avatar')
9 10 content_tag('span',
10   - link_to(content_tag('span', user.name) + ui_icon('ui-icon-triangle-1-s'),
  11 + link_to(avatar + content_tag('span', user.name) + ui_icon('ui-icon-triangle-1-s'),
11 12 '#',
12 13 :onclick => 'toggleMenu(this); return false',
13 14 :class => icon_class + ' simplemenu-trigger'
... ...
app/views/shared/logged_in/xmpp_chat.html.erb
  Diff comments   View file @fc14aa9
... ... @@ -13,13 +13,9 @@
13 13 </script>
14 14  
15 15 <div id='chat'>
16   - <div class='header'>
17   - <%= _("Chat %s") % environment.name %>
18   - </div>
19 16 <div id='buddy-list'>
20 17 <div class='toolbar'>
21 18 <div id='user-status'>
22   - <%= profile_image(user, :portrait, :class => 'avatar') %>
23 19 <%= user_status_menu('icon-menu-offline', _('Offline')) %>
24 20 </div>
25 21 <div class='dialog-error' style='display: none'></div>
... ... @@ -39,22 +35,19 @@
39 35 <div id='conversations'></div>
40 36 </div>
41 37  
42   - <div id="chat-templates">
  38 + <div id="chat-templates" style="display: none;">
43 39  
44   - <div class="conversation-template">
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>
57   - </div>
  40 + <div class="conversation">
  41 + <div class="conversation-header">
  42 + <span class="chat-target">
  43 + <img class="avatar">
  44 + <span class="other-name"></span>
  45 + </span>
  46 + </div>
  47 + <div class='history'></div>
  48 + <div class='input-div'>
  49 + <div class='icon-chat'></div>
  50 + <textarea class='input'></textarea>
58 51 </div>
59 52 </div>
60 53  
... ... @@ -86,12 +79,11 @@
86 79  
87 80 <div class="message">
88 81 <div data-who="%{who}" class="message %{who}">
89   - <div class="author">
90   - %{avatar}
91   - <h5 class="%{who}-name">%{name}</h5>
92   - </div>
93 82 <div class="content">
94 83 <span class="time" title="%{time}"></span>
  84 + <div class="author">
  85 + %{avatar}
  86 + </div>
95 87 <p>%{message}</p>
96 88 </div>
97 89 </div>
... ...
public/designs/themes/noosfero/style.css
  Diff comments   View file @fc14aa9
... ... @@ -9,11 +9,6 @@
9 9 #title-bar {
10 10 background-color: gray;
11 11 }
12   -#buddy-list .toolbar {
13   - background-color: gray;
14   - border-top: 1px solid;
15   - border-bottom: 1px solid;
16   -}
17 12 #title-bar h1 {
18 13 color: white;
19 14 }
... ...
public/javascripts/chat.js
  Diff comments   View file @fc14aa9
... ... @@ -65,7 +65,7 @@ jQuery(function($) {
65 65 },
66 66 insert_or_update_group: function (jid, presence) {
67 67 var jid_id = Jabber.jid_to_id(jid);
68   - var list = $('#buddy-list .buddies .online');
  68 + var list = $('#buddy-list .buddies ul.online');
69 69 var item = $('#' + jid_id);
70 70 presence = presence || ($(item).length > 0 ? $(item).parent('li').attr('class') : 'offline');
71 71 log('adding or updating contact ' + jid + ' as ' + presence);
... ... @@ -78,7 +78,7 @@ jQuery(function($) {
78 78 var jid_id = Jabber.jid_to_id(jid);
79 79 var item = $('#' + jid_id);
80 80 presence = presence || ($(item).length > 0 ? $(item).parent('li').attr('class') : 'offline');
81   - var list = $('#buddy-list .buddies ' + (presence=='offline' ? '.offline' : '.online'));
  81 + var list = $('#buddy-list .buddies ul' + (presence=='offline' ? '.offline' : '.online'));
82 82  
83 83 log('adding or updating contact ' + jid + ' as ' + presence);
84 84 Jabber.insert_or_update_user(list, item, jid, name, presence, Jabber.template('.buddy-item'), 'chat');
... ... @@ -535,7 +535,8 @@ jQuery(function($) {
535 535  
536 536 conversation.find('.conversation').show();
537 537 count_unread_messages(jid_id, true);
538   - recent_messages(Jabber.jid_of(jid_id));
  538 + if(conversation.find('#chat-offset-container-0').length == 0)
  539 + recent_messages(Jabber.jid_of(jid_id));
539 540 conversation.find('.conversation .input-div textarea.input').focus();
540 541 });
541 542  
... ... @@ -551,14 +552,6 @@ jQuery(function($) {
551 552 $('.conversation textarea:visible').focus();
552 553 });
553 554  
554   - $('#chat .conversation .back').live('click', function() {
555   - $('#chat #chat-window .conversation').hide();
556   - });
557   -
558   - $('#chat .toolbar .back').live('click', function() {
559   - $('#chat').hide('fast');
560   - });
561   -
562 555 function create_conversation_tab(title, jid_id) {
563 556 var conversation_id = Jabber.conversation_prefix + jid_id;
564 557 var conversation = $('#' + conversation_id);
... ... @@ -569,9 +562,7 @@ jQuery(function($) {
569 562 var jid = Jabber.jid_of(jid_id);
570 563 var identifier = getIdentifier(jid);
571 564  
572   - // opening chat with selected online friend
573   - var panel = $('<div id="'+conversation_id +'"></div>').appendTo($conversations);
574   - panel.append(Jabber.template('.conversation-template'));
  565 + var panel = $('#chat-templates .conversation').clone().appendTo($conversations).attr('id', conversation_id);
575 566 panel.find('.chat-target .avatar').replaceWith(getAvatar(identifier));
576 567 panel.find('.chat-target .other-name').html(title);
577 568 $('#chat .history').perfectScrollbar();
... ...
public/stylesheets/chat.css
  Diff comments   View file @fc14aa9
... ... @@ -10,17 +10,49 @@
10 10 box-shadow: -3px 0px 5px #888;
11 11 }
12 12  
  13 +#chat-window {
  14 + height: 100%;
  15 + position: relative;
  16 +}
  17 +
13 18 #chat #buddy-list {
14 19 background-color: #f9f9f9;
15   - width: 175px;
16   - height: 75%;
17   - overflow: hidden;
18   - position: absolute;
  20 + top: 0;
19 21 right: 0;
  22 + width: 65px;
  23 + bottom: 100px;
  24 + position: absolute;
20 25 border-left: 1px solid #DCE4E7;
21 26 border-bottom: 1px solid #DCE4E7;
  27 + z-index: 2;
  28 + transition: width 0.3s ease-in;
22 29 }
  30 +
  31 +#chat #buddy-list:hover {
  32 + width: 190px;
  33 + transition: width 0.3s ease-in;
  34 +}
  35 +
23 36 #buddy-list .buddies {
  37 + position: absolute;
  38 + bottom: 0;
  39 + top: 25px;
  40 + right: 6px;
  41 + left: 7px;
  42 + bottom: 7px;
  43 + overflow: hidden;
  44 + white-space: nowrap;
  45 + transition: all 0.3s ease-in;
  46 +}
  47 +
  48 +#buddy-list:hover .buddies {
  49 + top: 57px;
  50 + left: 15px;
  51 + right: 15px;
  52 + transition: all 0.3s ease-in;
  53 +}
  54 +
  55 +#buddy-list .buddies ul {
24 56 list-style-type: none;
25 57 padding: 0;
26 58 margin: 0;
... ... @@ -53,10 +85,10 @@
53 85 vertical-align: middle;
54 86 }
55 87 #chat #buddy-list .toolbar {
56   - border: 0;
57 88 height: 45px;
58   - background-color: rgb(39, 39, 39);
59   - border-bottom: 1px solid #383838;
  89 + width: 100%;
  90 + background-color: #bbbeb7;
  91 + display: table;
60 92 }
61 93 #buddy-list .toolbar .dialog-error {
62 94 position: absolute;
... ... @@ -73,35 +105,44 @@
73 105 margin: 0 0 5px 0;
74 106 }
75 107  
76   -
77 108 #buddy-list .body{
78   - position: relative;
79   - padding: 5px;
  109 + position: absolute;
  110 + bottom: 0;
  111 + right: 0;
  112 + left: 0;
  113 + top: 20px;
  114 + padding: 15px;
  115 + transition: top 0.3s ease-in;
  116 +}
  117 +
  118 +#buddy-list:hover .body{
  119 + top: 45px;
  120 + transition: top 0.3s ease-in;
80 121 }
81 122  
82 123 #buddy-list .search{
83   - width: 150px;
84   - padding: 7px;
85   - color: #FFF;
86   - background-color: #BABDB6;
  124 + width: 142px;
  125 + padding: 0;
  126 + height: 0;
  127 + color: #000;
  128 + background-color: #dee1da;
87 129 border: 0;
88   - margin-bottom: 5px;
  130 + transition: all 0.2s ease-in;
89 131 }
90 132  
91   -.conversation {
92   - background-color: #303030;
93   - height: 100%;
94   - position: absolute;
95   - width: 100%;
96   - top: 0;
97   - right: 0;
  133 +#buddy-list:hover .search{
  134 + transition: all 0.3s ease-in 0.3;
  135 + height: 16px;
  136 + padding: 9px;
98 137 }
  138 +
99 139 .conversation .input-div {
100 140 position: absolute;
101 141 right: 0;
  142 + left: 0;
102 143 bottom: 0;
103   - padding: 0 20px 15px 15px;
104   - border-top: 1px solid rgb(65, 65, 65);
  144 + height: 80px;
  145 + padding: 20px 15px 31px 7px;
105 146 }
106 147 .msie7 .conversation .input-div {
107 148 padding-left: 5px;
... ... @@ -118,20 +159,17 @@
118 159 left: 20px;
119 160 }
120 161 .conversation textarea {
121   - height: 60px;
122   - padding-left: 25px;
  162 + height: 100%;
  163 + width: 100%;
123 164 overflow: auto;
124 165 }
125   -.conversation .history {
  166 +#conversations .history {
  167 + overflow: hidden;
126 168 position: absolute;
127   - right: 0;
128   - top: 40px;
  169 + right: 66px;
  170 + left: 0;
  171 + top: 45px;
129 172 bottom: 100px;
130   - overflow: hidden;
131   - width: 100%;
132   -}
133   -.msie7 #chat-window .conversation .history {
134   - overflow-x: hidden;
135 173 }
136 174 #chat .unread-messages {
137 175 float: right;
... ... @@ -143,38 +181,49 @@
143 181 padding: 10px 8px 10px 6px;
144 182 clear: both;
145 183 }
  184 +
  185 +#chat-window .history .message.self .time {
  186 + color: #888a85;
  187 +}
  188 +
146 189 #chat-window .history .message .time {
147 190 float: right;
148   - color: rgb(184, 184, 184);
  191 + color: white;
149 192 font-style: italic;
150 193 font-size: 10px;
151   - border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  194 + border-bottom: 1px solid #d3d7cf;
152 195 width: 100%;
153 196 text-align: right;
  197 + margin-bottom: 5px;
154 198 }
155 199 #chat-window .history .message h5, #chat-window .history .message p {
156 200 margin: 0;
157 201 }
158 202 #chat-window .history .message p {
159   - max-width: 100%;
160 203 overflow: auto;
161   - clear: both;
  204 + margin-left: 40px;
  205 +}
  206 +
  207 +#chat-window .history .message.self p {
  208 + margin-left: 1px;
162 209 }
163 210  
164 211 #chat-window .history .message .content {
165   - background-color: #257CAD;
166   - color: rgb(223, 223, 223);
167   - padding: 5px;
  212 + background-color: #bbbeb7;
  213 + color: white;;
  214 + padding: 8px;
168 215 border-radius: 5px;
169 216 display: inline-block;
170   - width: 74%;
  217 + width: 248px;
  218 + font-size: 15px;
171 219 }
172 220 #chat-window .history .message .content a {
173 221 color: rgb(108, 226, 255);
174 222 text-decoration: none;
175 223 }
176 224 #chat-window .history .message.self .content {
177   - background-color: #383838;
  225 + background-color: #f9f9f9;
  226 + color: #888a85;
178 227 }
179 228  
180 229 #chat-window .history .message .avatar {
... ... @@ -240,6 +289,32 @@ div.occupants &gt; a.up {
240 289 #chat .title-bar a {
241 290 text-decoration: none;
242 291 }
  292 +
  293 +#conversations {
  294 + height: 100%;
  295 +}
  296 +
  297 +#conversations .conversation {
  298 + height: 100%;
  299 + position: relative;
  300 +}
  301 +
  302 +#chat-window #conversations .conversation-header {
  303 + position: absolute;
  304 + right: 0;
  305 + left: 0;
  306 + background-color: #2e3436;
  307 + color: white;
  308 + width: 284px;
  309 + height: 45px;
  310 + font-size: 18px;
  311 + text-align: center;
  312 +}
  313 +
  314 +#user-status .avatar {
  315 + margin-left: 4px;
  316 +}
  317 +
243 318 .title-bar .title {
244 319 margin: 0;
245 320 font-size: 12px;
... ... @@ -259,10 +334,8 @@ div.occupants &gt; a.up {
259 334 height: 40px;
260 335 background-color: rgb(39, 39, 39);
261 336 }
262   -.conversation .header .chat-target {
263   - padding: 0px 6px 0 6px;
264   - display: inline-block;
265   - max-width: 70%;
  337 +.conversation-header .chat-target {
  338 + line-height: 45px;
266 339 }
267 340 .conversation .header .other-name {
268 341 color: rgb(238, 238, 238);
... ... @@ -278,14 +351,15 @@ div.occupants &gt; a.up {
278 351 color: white;
279 352 }
280 353 #chat #chat-window .other-name, #chat #chat-window .history .self-name, #chat #chat-window .history h5, #chat .toolbar #user-status span.other-name {
281   - color: #257CAD;
  354 + color: white;
282 355 overflow: hidden;
283   - display: inline-block;
284 356 max-width: 140px;
  357 + line-height: 33px;
285 358 }
286 359 #chat .toolbar #user-status span, #chat #conversations .header .chat-target span {
287 360 max-width: 140px;
288   - color: rgb(238, 238, 238);
  361 + font-weight: 900;
  362 + color: white;
289 363 display: inline-block
290 364 }
291 365 #chat #chat-window .history h5 {
... ... @@ -301,34 +375,37 @@ div.occupants &gt; a.up {
301 375 background: #585858;
302 376 border: 1px solid #6B6B6B;
303 377 }
304   -#chat #user-status {
305   - padding: 2px 4px;
306   - float: left;
  378 +#buddy-list #user-status {
  379 + display: table-cell;
  380 + vertical-align: middle;
  381 + padding: 0 5px;
  382 + white-space: nowrap;
  383 + transition: padding 0.3s ease-in;
  384 +}
  385 +#buddy-list:hover #user-status {
  386 + padding: 0 15px;
  387 + transition: padding 0.3s ease-in;
307 388 }
308 389 #chat .user-status a {
309 390 color: rgb(224, 224, 224);
310 391 }
311   -#chat .user-status > a {
312   - position: relative;
313   - left: -15px;
314   -}
315 392  
316 393 .user-status {
317   - vertical-align: bottom;
318   - bottom: -5px;
  394 + vertical-align: middle;
319 395 }
320 396  
321 397 .user-status span {
322 398 position: relative;
323 399 }
324 400 .user-status span, .user-status .ui-icon {
325   - top: -3px;
  401 + margin-left: 7px;
326 402 }
327 403  
328 404 .conversation .author {
329   - width: 20%;
  405 + width: 32px;
330 406 display: inline-block;
331 407 vertical-align: top;
  408 + float: left;
332 409 }
333 410 .conversation .self .author {
334 411 float: right;
... ...