Replace presence images with CSS.

(imported from commit c1b5633fc9c29dfd54fe12bd874d996745aab6dd)
This commit is contained in:
Waseem Daher 2013-08-02 16:21:05 -04:00
parent 1e47be9b25
commit 82d6b8445b
2 changed files with 34 additions and 6 deletions

View File

@ -350,16 +350,43 @@ a:hover code {
display: none; display: none;
} }
#user_presences li.user_active { #user_presences li {
list-style-image: url(/static/images/presence/user-active.png); list-style-type: none;
} }
#user_presences li.user_away { .user-status-indicator {
list-style-image: url(/static/images/presence/user-away.png); display: block;
width: 8px;
height: 8px;
border-radius: 50%;
border: 1px solid;
float: left;
position: relative;
top: 5px;
margin-right: 0.5em;
} }
#user_presences li.user_idle { .user_active .user-status-indicator {
list-style-image: url(/static/images/presence/user-idle.png); background-color: #44C21D;
border-color: #44C21D;
}
.user_away .user-status-indicator {
border-color: #EC7E18;
background-color: #EC7E18;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 50%, rgba(236,126,24,1) 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,rgba(255,255,255,0)), color-stop(50%,rgba(236,126,24,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 50%,rgba(236,126,24,1) 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0) 50%,rgba(236,126,24,1) 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0) 50%,rgba(236,126,24,1) 50%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,0) 50%,rgba(236,126,24,1) 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ec7e18',GradientType=0 ); /* IE6-9 */
}
.user_idle .user-status-indicator {
background-color: none;
border-color: gray;
} }
#user_presences .arrow { #user_presences .arrow {

View File

@ -1,6 +1,7 @@
{{! User Presence rows }} {{! User Presence rows }}
{{#each users}} {{#each users}}
<li class="user_sidebar_entry user_{{type}}"> <li class="user_sidebar_entry user_{{type}}">
<span class="user-status-indicator"></span>
<a href="#" data-email="{{email}}" data-name="{{name}}" title="{{name}} {{type_desc}}" <a href="#" data-email="{{email}}" data-name="{{name}}" title="{{name}} {{type_desc}}"
class="{{#if my_fullname}} my_fullname{{/if}}"><span class="count">(<span class="value"></span>) </span>{{name}}</a> class="{{#if my_fullname}} my_fullname{{/if}}"><span class="count">(<span class="value"></span>) </span>{{name}}</a>
</li> </li>