Download as
Browse Code »

Commit 3bfdeee34c45d2772f0d57146b50b1991019b027

Authored by Rodrigo Souto
1 parent ca5297ac
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

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 13 </script>
14 14  
15 15 <div id='chat'>
  16 + <div class='header'>
  17 + <%= _("Chat %s") % environment.name %>
  18 + </div>
16 19 <div id='buddy-list'>
17 20 <div class='toolbar'>
18 21 <div id='user-status'>
19 22 <%= profile_image(user, :portrait, :class => 'avatar') %>
20 23 <%= user_status_menu('icon-menu-offline', _('Offline')) %>
21 24 </div>
22   - <a href="#" class="back"><%= _('Close') %></a>
23 25 <div class='dialog-error' style='display: none'></div>
24 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 33 </div>
44 34 </div>
45 35  
... ...
public/javascripts/chat.js
  Diff comments   View file @3bfdeee
... ... @@ -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 #rooms .room-list');
  68 + var list = $('#buddy-list .buddies.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 #friends .buddy-list' + (presence=='offline' ? '.offline' : '.online'));
  81 + var list = $('#buddy-list .buddies' + (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');
... ...
public/stylesheets/chat.css
  Diff comments   View file @3bfdeee
1 1 #chat {
2   - width: 250px;
  2 + width: 350px;
3 3 height: 100%;
4 4 display: none;
5 5 position: fixed;
6 6 right: 0;
7 7 top: 0;
8 8 z-index: 900;
  9 + background-color: #FFF;
  10 + box-shadow: -3px 0px 5px #888;
9 11 }
10 12  
11 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 17 overflow: hidden;
16 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 24 list-style-type: none;
20 25 padding: 0;
21 26 margin: 0;
22 27 }
23   -#buddy-list .buddy-list li {
  28 +#buddy-list .buddies li {
24 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 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 35 background: none;
31 36 display: block;
32 37 padding-left: 20px;
... ... @@ -36,7 +41,7 @@
36 41 height: 44px;
37 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 45 vertical-align: top;
41 46 margin-left: 5px;
42 47 padding: 0 0 5px 20px;
... ... @@ -47,12 +52,12 @@
47 52 overflow: hidden;
48 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 56 border-radius: 5px;
52 57 width: 32px;
53 58 max-height: 40px;
54 59 }
55   -#buddy-list .buddy-list.offline, .occupant-list.offline {
  60 +#buddy-list .buddies.offline, .occupant-list.offline {
56 61 display: none;
57 62 }
58 63 #chat #buddy-list .toolbar {
... ... @@ -75,9 +80,21 @@
75 80 #buddy-list .toolbar .dialog-error p {
76 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 98 .conversation {
82 99 background-color: #303030;
83 100 height: 100%;
... ... @@ -310,10 +327,10 @@ div.occupants &gt; a.up {
310 327 top: -3px;
311 328 }
312 329  
313   -.buddy-list .dnd span.name {
  330 +.buddies .dnd span.name {
314 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 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 347 font-weight: bold;
331 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 +}
... ...