Style the green 'online now' dot entirely in CSS.

This lets us clean up the HTML a little bit in preparation
for a later change which will cause the stream and people
lists to scroll independently of one another.

Also it feels a bit more fun.

(imported from commit b3b49149d7ec2960fd752fe50b41e55d363c1a98)
This commit is contained in:
Waseem Daher
2013-02-11 23:15:19 -05:00
parent 096e1b7727
commit 30bed51a65
3 changed files with 13 additions and 21 deletions

View File

@@ -125,9 +125,7 @@ var people_list = [
<li id="filtpers"><a href="#narrow/is/private-message">All private messages</a></li> <li id="filtpers"><a href="#narrow/is/private-message">All private messages</a></li>
</div> </div>
<hr> <hr>
<div id="user_presences_scroll"> <div id="user_presences">
<div id="user_presences">
</div>
</div> </div>
</ul> </ul>
</div> </div>

View File

@@ -924,7 +924,7 @@ exports.set_presence_list = function(users, presence_info) {
e.preventDefault(); e.preventDefault();
}); });
if (presence_info[email]) { if (presence_info[email]) {
user.prepend($('<img>').addClass('active-icon').attr('src', '/static/images/green-dot.png')); user.addClass('active-icon');
} }
$('#user_presences').append(user); $('#user_presences').append(user);

View File

@@ -80,11 +80,21 @@ a:hover code {
margin-top: 1em; margin-top: 1em;
overflow-y: hidden; overflow-y: hidden;
} }
.bottom_sidebar:hover { .bottom_sidebar:hover {
overflow-y: auto; overflow-y: auto;
} }
#user_presences li {
margin-left: 15px;
}
#user_presences li.active-icon {
margin-left: 0px;
}
#user_presences li.active-icon:before {
content: url(/static/images/green-dot.png);
margin-right: 6px; /* +9px image = 15px */
}
ul.filters { ul.filters {
list-style-type: none; list-style-type: none;
padding-right: 1em; padding-right: 1em;
@@ -876,19 +886,3 @@ table.floating_recipient {
max-height: 400px; max-height: 400px;
overflow-y: scroll; overflow-y: scroll;
} }
li img.active-icon {
margin-left: -14px;
margin-right: 4px;
margin-bottom: 2px;
}
#user_presences_scroll {
max-height: 20em;
overflow: auto;
}
#user_presences {
margin-left: 16px;
}