Download as
Browse Code »

Commit 3bfdeee34c45d2772f0d57146b50b1991019b027

Authored by Rodrigo Souto
1 parent ca5297ac
Exists in master and in 22 other branches angular_poc, api-article-archived, article-readonly, backup-7-jan-2016, captcha_serpro_plugin, content-manager-hostspot, export-comment-paragraph, fix_event_date_issue, login-captcha, master_rails3, new_video_plugin, pg_search_rank, production, refactor_with_role, refactor_with_role_scope, remove_profile_cat_icons, resend_confirmation_email, staging, staging_rails3, tasks_keep_filter_params, theme-brasil-digital-from-staging, travis

refactoring chat interface

Showing 3 changed files with 52 additions and 34 deletions   Show diff stats
app/views/shared/logged_in/xmpp_chat.html.erb
  Diff comments   View file @3bfdeee
@@ -13,33 +13,23 @@ @@ -13,33 +13,23 @@
13 </script> 13 </script>
14 14
15 <div id='chat'> 15 <div id='chat'>
  16 + <div class='header'>
  17 + <%= _("Chat %s") % environment.name %>
  18 + </div>
16 <div id='buddy-list'> 19 <div id='buddy-list'>
17 <div class='toolbar'> 20 <div class='toolbar'>
18 <div id='user-status'> 21 <div id='user-status'>
19 <%= profile_image(user, :portrait, :class => 'avatar') %> 22 <%= profile_image(user, :portrait, :class => 'avatar') %>
20 <%= user_status_menu('icon-menu-offline', _('Offline')) %> 23 <%= user_status_menu('icon-menu-offline', _('Offline')) %>
21 </div> 24 </div>
22 - <a href="#" class="back"><%= _('Close') %></a>  
23 <div class='dialog-error' style='display: none'></div> 25 <div class='dialog-error' style='display: none'></div>
24 </div> 26 </div>
25 27
26 - <div id="friends">  
27 - <div class="status-group">  
28 - <div class='title-bar'><a href="#"><h1 class='title'><%= _("Online") %>&nbsp;(<span id='friends-online'>0</span>)</h1></a></div>  
29 - <ul class='buddy-list online'></ul>  
30 - </div>  
31 -  
32 - <div class="status-group">  
33 - <div class='title-bar'><a href="#"><h1 class='title'><%= _("Offline") %>&nbsp;(<span id='friends-offline'>0</span>)</h1></a></div>  
34 - <ul class='buddy-list offline'></ul>  
35 - </div>  
36 - </div> 28 + <div class='body'>
  29 + <%= text_field_tag(:query, '', :placeholder => _('Search...'), :class => 'search') %>
37 30
38 - <div id="rooms">  
39 - <div class="status-group">  
40 - <div class='title-bar'><a href="#"><h1 class='title'><%= _("Groups") %>&nbsp;(<span id='groups-online'>0</span>)</h1></a></div>  
41 - <ul class="buddy-list room-list"></ul>  
42 - </div> 31 + <ul class='buddies .online'></ul>
  32 + <ul class='buddies .offline'></ul>
43 </div> 33 </div>
44 </div> 34 </div>
45 35
public/javascripts/chat.js
  Diff comments   View file @3bfdeee
@@ -65,7 +65,7 @@ jQuery(function($) { @@ -65,7 +65,7 @@ jQuery(function($) {
65 }, 65 },
66 insert_or_update_group: function (jid, presence) { 66 insert_or_update_group: function (jid, presence) {
67 var jid_id = Jabber.jid_to_id(jid); 67 var jid_id = Jabber.jid_to_id(jid);
68 - var list = $('#buddy-list #rooms .room-list'); 68 + var list = $('#buddy-list .buddies.online');
69 var item = $('#' + jid_id); 69 var item = $('#' + jid_id);
70 presence = presence || ($(item).length > 0 ? $(item).parent('li').attr('class') : 'offline'); 70 presence = presence || ($(item).length > 0 ? $(item).parent('li').attr('class') : 'offline');
71 log('adding or updating contact ' + jid + ' as ' + presence); 71 log('adding or updating contact ' + jid + ' as ' + presence);
@@ -78,7 +78,7 @@ jQuery(function($) { @@ -78,7 +78,7 @@ jQuery(function($) {
78 var jid_id = Jabber.jid_to_id(jid); 78 var jid_id = Jabber.jid_to_id(jid);
79 var item = $('#' + jid_id); 79 var item = $('#' + jid_id);
80 presence = presence || ($(item).length > 0 ? $(item).parent('li').attr('class') : 'offline'); 80 presence = presence || ($(item).length > 0 ? $(item).parent('li').attr('class') : 'offline');
81 - var list = $('#buddy-list #friends .buddy-list' + (presence=='offline' ? '.offline' : '.online')); 81 + var list = $('#buddy-list .buddies' + (presence=='offline' ? '.offline' : '.online'));
82 82
83 log('adding or updating contact ' + jid + ' as ' + presence); 83 log('adding or updating contact ' + jid + ' as ' + presence);
84 Jabber.insert_or_update_user(list, item, jid, name, presence, Jabber.template('.buddy-item'), 'chat'); 84 Jabber.insert_or_update_user(list, item, jid, name, presence, Jabber.template('.buddy-item'), 'chat');
public/stylesheets/chat.css
  Diff comments   View file @3bfdeee
1 #chat { 1 #chat {
2 - width: 250px; 2 + width: 350px;
3 height: 100%; 3 height: 100%;
4 display: none; 4 display: none;
5 position: fixed; 5 position: fixed;
6 right: 0; 6 right: 0;
7 top: 0; 7 top: 0;
8 z-index: 900; 8 z-index: 900;
  9 + background-color: #FFF;
  10 + box-shadow: -3px 0px 5px #888;
9 } 11 }
10 12
11 #chat #buddy-list { 13 #chat #buddy-list {
12 - background-color: #303030;  
13 - width: 250px;  
14 - height: 100%; 14 + background-color: #f9f9f9;
  15 + width: 175px;
  16 + height: 75%;
15 overflow: hidden; 17 overflow: hidden;
16 position: absolute; 18 position: absolute;
  19 + right: 0;
  20 + border-left: 1px solid #DCE4E7;
  21 + border-bottom: 1px solid #DCE4E7;
17 } 22 }
18 -#buddy-list .buddy-list { 23 +#buddy-list .buddies {
19 list-style-type: none; 24 list-style-type: none;
20 padding: 0; 25 padding: 0;
21 margin: 0; 26 margin: 0;
22 } 27 }
23 -#buddy-list .buddy-list li { 28 +#buddy-list .buddies li {
24 border-bottom: 1px solid #383838; 29 border-bottom: 1px solid #383838;
25 } 30 }
26 -#buddy-list .buddy-list li a:hover, .occupant-list li a:hover { 31 +#buddy-list .buddies a:hover, .occupant-list li a:hover {
27 background: #257CAD; 32 background: #257CAD;
28 } 33 }
29 -#buddy-list .buddy-list li a, .occupant-list li a { 34 +#buddy-list .buddies li a, .occupant-list li a {
30 background: none; 35 background: none;
31 display: block; 36 display: block;
32 padding-left: 20px; 37 padding-left: 20px;
@@ -36,7 +41,7 @@ @@ -36,7 +41,7 @@
36 height: 44px; 41 height: 44px;
37 overflow: hidden; 42 overflow: hidden;
38 } 43 }
39 -#buddy-list .buddy-list li a .name, .occupant-list li a .name { 44 +#buddy-list .buddies li a .name, .occupant-list li a .name {
40 vertical-align: top; 45 vertical-align: top;
41 margin-left: 5px; 46 margin-left: 5px;
42 padding: 0 0 5px 20px; 47 padding: 0 0 5px 20px;
@@ -47,12 +52,12 @@ @@ -47,12 +52,12 @@
47 overflow: hidden; 52 overflow: hidden;
48 height: 30px; 53 height: 30px;
49 } 54 }
50 -#buddy-list .buddy-list li a img, .occupant-list li a img, #chat .avatar { 55 +#buddy-list .buddies li a img, .occupant-list li a img, #chat .avatar {
51 border-radius: 5px; 56 border-radius: 5px;
52 width: 32px; 57 width: 32px;
53 max-height: 40px; 58 max-height: 40px;
54 } 59 }
55 -#buddy-list .buddy-list.offline, .occupant-list.offline { 60 +#buddy-list .buddies.offline, .occupant-list.offline {
56 display: none; 61 display: none;
57 } 62 }
58 #chat #buddy-list .toolbar { 63 #chat #buddy-list .toolbar {
@@ -75,9 +80,21 @@ @@ -75,9 +80,21 @@
75 #buddy-list .toolbar .dialog-error p { 80 #buddy-list .toolbar .dialog-error p {
76 margin: 0 0 5px 0; 81 margin: 0 0 5px 0;
77 } 82 }
78 -#chat-window {  
79 - background: white; 83 +
  84 +
  85 +#buddy-list .body{
  86 + position: relative;
  87 + padding: 5px;
80 } 88 }
  89 +
  90 +#buddy-list .search{
  91 + width: 150px;
  92 + padding: 7px;
  93 + color: #FFF;
  94 + background-color: #BABDB6;
  95 + border: 0;
  96 +}
  97 +
81 .conversation { 98 .conversation {
82 background-color: #303030; 99 background-color: #303030;
83 height: 100%; 100 height: 100%;
@@ -310,10 +327,10 @@ div.occupants &gt; a.up { @@ -310,10 +327,10 @@ div.occupants &gt; a.up {
310 top: -3px; 327 top: -3px;
311 } 328 }
312 329
313 -.buddy-list .dnd span.name { 330 +.buddies .dnd span.name {
314 background: url(/designs/icons/pidgin/pidgin/status/16/busy.png) 0px 20px no-repeat; 331 background: url(/designs/icons/pidgin/pidgin/status/16/busy.png) 0px 20px no-repeat;
315 } 332 }
316 -.buddy-list .chat span.name { 333 +.buddies .chat span.name {
317 background: url(/designs/icons/pidgin/pidgin/status/16/available.png) 0px 20px no-repeat; 334 background: url(/designs/icons/pidgin/pidgin/status/16/available.png) 0px 20px no-repeat;
318 } 335 }
319 336
@@ -330,3 +347,14 @@ div.occupants &gt; a.up { @@ -330,3 +347,14 @@ div.occupants &gt; a.up {
330 font-weight: bold; 347 font-weight: bold;
331 font-size: 14px; 348 font-size: 14px;
332 } 349 }
  350 +
  351 +#chat .header {
  352 + border: 0;
  353 + height: 50px;
  354 + line-height: 50px;
  355 + text-align: center;
  356 + color: #FFF;
  357 + font-size: 19px;
  358 + background-image: linear-gradient(to left, #E3E3E3 25%, #BABDB6 100%, #FFFFFF 100%);
  359 + xbackground-color: #BABDB6;
  360 +}