moparisthebest/kaiwa
1
0
Fork 0
mirror of https://github.com/moparisthebest/kaiwa synced 2024-11-25 18:52:20 -05:00
Code Issues Releases Wiki Activity

[ux] add proper styling for idle timestamp

Browse Source
This commit is contained in:
karolinaszczur 2013-09-27 09:53:00 +02:00
parent a268274ff7
commit fe1220d76f
4 changed files with 40 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
clientapp/templates.js
View File

@ -51,7 +51,7 @@ exports.includes.contactListItem = function anonymous(locals) {
"class": "avatar"
}, {
src: true
}) + '/><div class="name">' + jade.escape(null == (jade.interp = contact.displayName) ? "" : jade.interp) + '</div><div class="unread">' + jade.escape(null == (jade.interp = contact.unreadCount) ? "" : jade.interp) + '</div><div class="status">' + jade.escape(null == (jade.interp = contact.status) ? "" : jade.interp) + '</div><div class="idleTime">' + jade.escape(null == (jade.interp = contact.idleSince) ? "" : jade.interp) + "</div></li>");
}) + '/><div class="user"><span class="name">' + jade.escape(null == (jade.interp = contact.displayName) ? "" : jade.interp) + '</span><span class="idleTime">' + jade.escape(null == (jade.interp = contact.idleSince) ? "" : jade.interp) + '</span></div><div class="unread">' + jade.escape(null == (jade.interp = contact.unreadCount) ? "" : jade.interp) + '</div><div class="status">' + jade.escape(null == (jade.interp = contact.status) ? "" : jade.interp) + "</div></li>");
}
return buf.join("");
};

6
clientapp/templates/includes/contactListItem.jade
View File

@ -1,6 +1,8 @@
li.contact
img.avatar(src=contact.avatar)
.name=contact.displayName
.user
span.name=contact.displayName
span.idleTime=contact.idleSince
.unread=contact.unreadCount
.status=contact.status
.idleTime=contact.idleSince

18
public/css/app/roster.styl
View File

@ -69,7 +69,7 @@
&:hover
background: $sidebarActive
&.online, &.chat, &.dnd, &.away, &.xa
&.online:not(.idle), &.chat, &.dnd, &.away, &.xa
&:after
content: ''
@ -118,13 +118,18 @@
-webkit-animation: pulsate 1.5s infinite ease-in
-moz-animation: pulsate 1.5s infinite ease-in
&.paused, &.idle
&.paused
&:after
background: $textSecondary
&.idle
padding-right: 15px
.name
color: $textSecondary
width: 60%
.user
width: 95%
img
opacity: 1
@ -139,13 +144,16 @@
avatar()
noselect()
.name
.user
margin-left: 40px
line-height: 30px
color: white
width: 70%
.name
display: inline-block
text-overflow: ellipsis
overflow: hidden
width: 70%
.status
color: $textSecondary
@ -174,6 +182,8 @@
background: rgba(0, 174, 239, .8)
.idleTime
display: inline-block
margin-left: 5px
font-size: 10px
color: darken($textSecondary, 50%)

29
public/css/otalk.css
View File

@ -394,8 +394,8 @@ h3 {
#bookmarks li:hover {
background: #1f2d49;
}
#roster li.online:after,
#bookmarks li.online:after,
#roster li.online:not(.idle):after,
#bookmarks li.online:not(.idle):after,
#roster li.chat:after,
#bookmarks li.chat:after,
#roster li.dnd:after,
@ -466,14 +466,21 @@ h3 {
-moz-animation: pulsate 1.5s infinite ease-in;
}
#roster li.paused:after,
#bookmarks li.paused:after,
#roster li.idle:after,
#bookmarks li.idle:after {
#bookmarks li.paused:after {
background: #b7b7b7;
}
#roster li.idle,
#bookmarks li.idle {
padding-right: 15px;
}
#roster li.idle .name,
#bookmarks li.idle .name {
color: #b7b7b7;
width: 60%;
}
#roster li.idle .user,
#bookmarks li.idle .user {
width: 95%;
}
#roster li img,
#bookmarks li img {
@ -502,14 +509,18 @@ h3 {
-ms-user-select: none;
user-select: none;
}
#roster li .name,
#bookmarks li .name {
#roster li .user,
#bookmarks li .user {
margin-left: 40px;
line-height: 30px;
color: #fff;
width: 70%;
}
#roster li .name,
#bookmarks li .name {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
width: 70%;
}
#roster li .status,
#bookmarks li .status {
@ -547,6 +558,8 @@ h3 {
}
#roster li .idleTime,
#bookmarks li .idleTime {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #5c5c5c;
}