Commit 91d3f88b1f06d39838b1810b910b176623a6c683
Committed by
Rodrigo Souto
1 parent
a8cf1e1a
Exists in
master
and in
29 other branches
Small fixes on chat layout
Showing
3 changed files
with
29 additions
and
20 deletions
Show diff stats
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"> </a> | |
81 | + <a href="#" class="up"><%= _('Online') %> (<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 > 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 > 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 > 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 > 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 > 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 { | ... | ... |