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