Commit 91d3f88b1f06d39838b1810b910b176623a6c683

Authored by Victor Costa
Committed by Rodrigo Souto
1 parent a8cf1e1a

Small fixes on chat layout

app/views/shared/logged_in/xmpp_chat.html.erb
@@ -70,7 +70,7 @@ @@ -70,7 +70,7 @@
70 <li class='%{presence_status}'> 70 <li class='%{presence_status}'>
71 <a id='%{jid_id}' class='icon-menu-%{presence_status}-11' href='#'> 71 <a id='%{jid_id}' class='icon-menu-%{presence_status}-11' href='#'>
72 %{avatar} 72 %{avatar}
73 - <span class="name">%{name}<span> 73 + <span class="name">%{name}</span>
74 <span class="unread-messages icon-chat"></span> 74 <span class="unread-messages icon-chat"></span>
75 </a> 75 </a>
76 </li> 76 </li>
@@ -78,7 +78,7 @@ @@ -78,7 +78,7 @@
78 78
79 <div class="occupant-list-template"> 79 <div class="occupant-list-template">
80 <div class="occupants"> 80 <div class="occupants">
81 - <a href="#" class="up">&nbsp;</a> 81 + <a href="#" class="up"><%= _('Online') %>&nbsp;(<span class="occupants-online">0</span>)</a>
82 <ul class='occupant-list'></ul> 82 <ul class='occupant-list'></ul>
83 </div> 83 </div>
84 </div> 84 </div>
public/javascripts/chat.js
@@ -96,6 +96,7 @@ jQuery(function($) { @@ -96,6 +96,7 @@ jQuery(function($) {
96 Jabber.rooms[Jabber.jid_to_id(room_jid)] = {}; 96 Jabber.rooms[Jabber.jid_to_id(room_jid)] = {};
97 } 97 }
98 Jabber.rooms[Jabber.jid_to_id(room_jid)][name] = jid; 98 Jabber.rooms[Jabber.jid_to_id(room_jid)][name] = jid;
  99 + list.parents('.occupants').find('.occupants-online').text(list.find('li').length);
99 }, 100 },
100 101
101 remove_contact: function(jid) { 102 remove_contact: function(jid) {
public/stylesheets/chat.css
@@ -21,7 +21,6 @@ @@ -21,7 +21,6 @@
21 margin: 0; 21 margin: 0;
22 } 22 }
23 #buddy-list .buddy-list li { 23 #buddy-list .buddy-list li {
24 - line-height: 30px;  
25 border-bottom: 1px solid #383838; 24 border-bottom: 1px solid #383838;
26 } 25 }
27 #buddy-list .buddy-list li a:hover, .occupant-list li a:hover { 26 #buddy-list .buddy-list li a:hover, .occupant-list li a:hover {
@@ -40,6 +39,13 @@ @@ -40,6 +39,13 @@
40 #buddy-list .buddy-list li a .name, .occupant-list li a .name { 39 #buddy-list .buddy-list li a .name, .occupant-list li a .name {
41 vertical-align: top; 40 vertical-align: top;
42 margin-left: 5px; 41 margin-left: 5px;
  42 + padding: 0 0 5px 20px;
  43 + position: relative;
  44 + left: -20px;
  45 + display: inline-block;
  46 + max-width: 128px;
  47 + overflow: hidden;
  48 + height: 30px;
43 } 49 }
44 #buddy-list .buddy-list li a img, .occupant-list li a img, #chat .avatar { 50 #buddy-list .buddy-list li a img, .occupant-list li a img, #chat .avatar {
45 border-radius: 5px; 51 border-radius: 5px;
@@ -119,8 +125,8 @@ @@ -119,8 +125,8 @@
119 } 125 }
120 #chat .unread-messages { 126 #chat .unread-messages {
121 float: right; 127 float: right;
122 - margin-right: 25px;  
123 - padding-left: 22px; 128 + margin-right: 12px;
  129 + padding-left: 19px;
124 background-position: 0; 130 background-position: 0;
125 } 131 }
126 #chat-window .history .message { 132 #chat-window .history .message {
@@ -154,7 +160,7 @@ @@ -154,7 +160,7 @@
154 width: 74%; 160 width: 74%;
155 } 161 }
156 #chat-window .history .message .content a { 162 #chat-window .history .message .content a {
157 - color: rgb(98, 129, 253); 163 + color: rgb(108, 226, 255);
158 text-decoration: none; 164 text-decoration: none;
159 } 165 }
160 #chat-window .history .message.self .content { 166 #chat-window .history .message.self .content {
@@ -195,10 +201,14 @@ div.occupants &gt; a { @@ -195,10 +201,14 @@ div.occupants &gt; a {
195 width: 100%; 201 width: 100%;
196 display: inline-block; 202 display: inline-block;
197 text-decoration: none; 203 text-decoration: none;
198 - background: url(/images/down-arrow.png) center center no-repeat; 204 + background-image: url(/images/down-arrow.png);
  205 + background-position: 158px center;
  206 + background-repeat: no-repeat;
  207 + font-size: 10px;
  208 + font-weight: bold;
199 } 209 }
200 div.occupants > a.up { 210 div.occupants > a.up {
201 - background: url(/images/top-arrow.png) center center no-repeat; 211 + background-image: url(/images/top-arrow.png);
202 } 212 }
203 213
204 #chat-window .comment-balloon-content { 214 #chat-window .comment-balloon-content {
@@ -226,6 +236,7 @@ div.occupants &gt; a.up { @@ -226,6 +236,7 @@ div.occupants &gt; a.up {
226 padding-left: 30px; 236 padding-left: 30px;
227 line-height: 32px; 237 line-height: 32px;
228 color: rgb(82, 212, 253); 238 color: rgb(82, 212, 253);
  239 + float: left;
229 } 240 }
230 #chat #chat-templates { 241 #chat #chat-templates {
231 display: none; 242 display: none;
@@ -261,15 +272,17 @@ div.occupants &gt; a.up { @@ -261,15 +272,17 @@ div.occupants &gt; a.up {
261 overflow: hidden; 272 overflow: hidden;
262 display: inline-block; 273 display: inline-block;
263 max-width: 140px; 274 max-width: 140px;
264 - width: 100%;  
265 } 275 }
266 #chat .toolbar #user-status span, #chat #conversations .header .chat-target span { 276 #chat .toolbar #user-status span, #chat #conversations .header .chat-target span {
267 - width: auto; 277 + max-width: 140px;
268 color: rgb(238, 238, 238); 278 color: rgb(238, 238, 238);
  279 + display: inline-block
269 } 280 }
270 #chat #chat-window .history h5 { 281 #chat #chat-window .history h5 {
271 text-align: center; 282 text-align: center;
272 word-wrap: break-word; 283 word-wrap: break-word;
  284 + font-size: 9px;
  285 + max-height: 20px;
273 } 286 }
274 .webkit .simplemenu-submenu.opened { 287 .webkit .simplemenu-submenu.opened {
275 top: 18px; 288 top: 18px;
@@ -285,11 +298,11 @@ div.occupants &gt; a.up { @@ -285,11 +298,11 @@ div.occupants &gt; a.up {
285 #chat .user-status a { 298 #chat .user-status a {
286 color: rgb(224, 224, 224); 299 color: rgb(224, 224, 224);
287 } 300 }
288 -#user-status .avatar { 301 +#chat .user-status > a {
289 position: relative; 302 position: relative;
290 - left: 16px;  
291 - top: 2px; 303 + left: -15px;
292 } 304 }
  305 +
293 .user-status span { 306 .user-status span {
294 position: relative; 307 position: relative;
295 } 308 }
@@ -297,16 +310,11 @@ div.occupants &gt; a.up { @@ -297,16 +310,11 @@ div.occupants &gt; a.up {
297 top: -3px; 310 top: -3px;
298 } 311 }
299 312
300 -.buddy-list span.name {  
301 - padding: 20px 0 20px 20px;  
302 - position: relative;  
303 - left: -20px;  
304 -}  
305 .buddy-list .dnd span.name { 313 .buddy-list .dnd span.name {
306 - background: url(/designs/icons/pidgin/pidgin/status/16/busy.png) 0px 30px no-repeat; 314 + background: url(/designs/icons/pidgin/pidgin/status/16/busy.png) 0px 20px no-repeat;
307 } 315 }
308 .buddy-list .chat span.name { 316 .buddy-list .chat span.name {
309 - background: url(/designs/icons/pidgin/pidgin/status/16/available.png) 0px 30px no-repeat; 317 + background: url(/designs/icons/pidgin/pidgin/status/16/available.png) 0px 20px no-repeat;
310 } 318 }
311 319
312 .conversation .author { 320 .conversation .author {