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,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"> </a> | 81 | + <a href="#" class="up"><%= _('Online') %> (<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 > a { | @@ -195,10 +201,14 @@ div.occupants > 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 > a.up { | @@ -226,6 +236,7 @@ div.occupants > 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 > a.up { | @@ -261,15 +272,17 @@ div.occupants > 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 > a.up { | @@ -285,11 +298,11 @@ div.occupants > 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 > a.up { | @@ -297,16 +310,11 @@ div.occupants > 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 { |