Commit 91d3f88b1f06d39838b1810b910b176623a6c683
Committed by
Rodrigo Souto
1 parent
a8cf1e1a
Exists in
staging
and in
42 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 { | ... | ... |