1
0
mirror of https://github.com/moparisthebest/kaiwa synced 2024-12-25 08:58:53 -05:00

Make idle display more consistent

This commit is contained in:
Lance Stout 2014-01-05 02:30:26 -08:00
parent e6e4608247
commit 78bc772c11
5 changed files with 86 additions and 37 deletions

View File

@ -22,6 +22,7 @@ var Message = module.exports = HumanModel.define({
body: ['string', true, ''],
type: ['string', true, 'normal'],
acked: ['bool', true, false],
requestReceipt: ['boo', true, false],
receipt: ['bool', true, false],
archivedId: ['string', true, ''],
oobURIs: ['array', false, []]
@ -142,6 +143,7 @@ var Message = module.exports = HumanModel.define({
if (this.pending) res.push('pending');
if (this.delayed) res.push('delayed');
if (this.edited) res.push('edited');
if (this.requestReceipt) res.push('pendingReceipt');
if (this.receiptReceived) res.push('delivered');
if (this.meAction) res.push('meAction');

View File

@ -629,8 +629,8 @@ button.secondary:hover:not(:disabled) {
#bookmarks li:hover {
background: #192a47;
}
#roster li.online:not(.idle):after,
#bookmarks li.online:not(.idle):after,
#roster li.online:after,
#bookmarks li.online:after,
#roster li.chat:after,
#bookmarks li.chat:after,
#roster li.dnd:after,
@ -643,9 +643,10 @@ button.secondary:hover:not(:disabled) {
position: absolute;
top: 50%;
right: 15px;
height: 8px;
width: 8px;
height: 6px;
width: 6px;
margin-top: -4px;
border: 1px solid transparent;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
@ -658,16 +659,19 @@ button.secondary:hover:not(:disabled) {
#roster li.chat:after,
#bookmarks li.chat:after {
background: #43bb6e;
border-color: #43bb6e;
}
#roster li.dnd:after,
#bookmarks li.dnd:after {
background: #de0a32;
border-color: #de0a32;
}
#roster li.away:after,
#bookmarks li.away:after,
#roster li.xa:after,
#bookmarks li.xa:after {
background: #f18902;
border-color: #f18902;
}
#roster li.offline:not(:hover) .name,
#bookmarks li.offline:not(:hover) .name {
@ -703,11 +707,16 @@ button.secondary:hover:not(:disabled) {
#roster li.paused:after,
#bookmarks li.paused:after {
background: #ababab;
border-color: #ababab;
}
#roster li.idle,
#bookmarks li.idle {
padding-right: 15px;
}
#roster li.idle:after,
#bookmarks li.idle:after {
background: transparent;
}
#roster li.idle .name,
#bookmarks li.idle .name {
color: #878787;
@ -896,9 +905,10 @@ button.secondary:hover:not(:disabled) {
position: absolute;
left: 5px;
top: 18px;
height: 6px;
width: 6px;
height: 4px;
width: 4px;
margin-top: -3px;
border: 1px solid transparent;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
@ -909,13 +919,16 @@ button.secondary:hover:not(:disabled) {
.conversation header.online:before,
.conversation header.chat:before {
background: #43bb6e;
border-color: #43bb6e;
}
.conversation header.dnd:before {
background: #de0a32;
border-color: #de0a32;
}
.conversation header.away:before,
.conversation header.xa:before {
background: #f18902;
border-color: #f18902;
}
.conversation header.offline:before {
background: #2d2d2d;
@ -925,9 +938,12 @@ button.secondary:hover:not(:disabled) {
-webkit-animation: pulsate 1.5s infinite ease-in;
-moz-animation: pulsate 1.5s infinite ease-in;
}
.conversation header.paused:before,
.conversation header.idle:before {
.conversation header.paused:before {
background: #ababab;
border-color: #ababab;
}
.conversation header.idle:before {
background: transparent;
}
.conversation header .controls {
float: right;
@ -1161,7 +1177,7 @@ button.secondary:hover:not(:disabled) {
.messages .message.mine .timestamp {
color: #bebebe;
}
.messages .message.mine:not(.delayed):not(.delivered) .timestamp:after {
.messages .message.mine.pendingReceipt:not(.delayed) .timestamp:after {
content: '\26A0';
color: #f18902;
}
@ -1171,9 +1187,9 @@ button.secondary:hover:not(:disabled) {
.messages .message.edited .timestamp:before {
content: 'edited ';
}
.messages .message.delivered .timestamp:after {
content: '\2713';
color: #43bb6e;
.messages .message.mine.delivered .timestamp:after {
content: '\2713' !important;
color: #43bb6e !important;
}
.messages .message.pending {
color: #ababab;
@ -1214,10 +1230,10 @@ button.secondary:hover:not(:disabled) {
display: block;
}
.messages .message .timestamp:after {
width: 15px;
width: 12px;
content: '';
display: inline-block;
text-align: right;
text-align: center;
}
.messages .message .sender {
display: block;
@ -1296,9 +1312,10 @@ button.secondary:hover:not(:disabled) {
position: absolute;
left: 4px;
top: 11px;
height: 6px;
width: 6px;
height: 4px;
width: 4px;
margin-top: -3px;
border: 1px solid transparent;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
@ -1309,25 +1326,32 @@ button.secondary:hover:not(:disabled) {
.group.conversation .groupRoster li.online:before,
.group.conversation .groupRoster li.chat:before {
background: #43bb6e;
border-color: #43bb6e;
}
.group.conversation .groupRoster li.dnd:before {
background: #de0a32;
border-color: #de0a32;
}
.group.conversation .groupRoster li.away:before,
.group.conversation .groupRoster li.xa:before {
background: #f18902;
border-color: #f18902;
}
.group.conversation .groupRoster li.offline:before {
background: #2d2d2d;
border-color: #2d2d2d;
}
.group.conversation .groupRoster li.composing:before {
animation: pulsate 1.5s infinite ease-in;
-webkit-animation: pulsate 1.5s infinite ease-in;
-moz-animation: pulsate 1.5s infinite ease-in;
}
.group.conversation .groupRoster li.paused:before,
.group.conversation .groupRoster li.idle:before {
.group.conversation .groupRoster li.paused:before {
background: #ababab;
border-color: #ababab;
}
.group.conversation .groupRoster li.idle:before {
background: transparent;
}
.embeds {
margin: 0px;

View File

@ -29,22 +29,26 @@
position: absolute
left: 5px
top: 18px
height: 6px
width: 6px
height: 4px
width: 4px
margin-top: -3px
border: 1px solid transparent
roundall(10px)
&.online,
&.chat
&:before
background: $green
border-color: $green
&.dnd:before
background: $red
border-color: $red
&.away:before,
&.xa:before
background: $orange
border-color: $orange
&.offline:before
background: $gray-dark
@ -54,9 +58,12 @@
-webkit-animation: pulsate 1.5s infinite ease-in
-moz-animation: pulsate 1.5s infinite ease-in
&.paused:before,
&.idle:before
&.paused:before
background: lighten($gray-light, 30%)
border-color: lighten($gray-light, 30%)
&.idle:before
background: transparent
.controls
float: right
@ -267,7 +274,7 @@
.timestamp
color: darken($gray-lighter, 20%)
&.mine:not(.delayed):not(.delivered)
&.mine.pendingReceipt:not(.delayed)
.timestamp:after
content: '\26A0'
color: $orange
@ -280,10 +287,10 @@
.timestamp:before
content: 'edited '
&.delivered
&.mine.delivered
.timestamp:after
content: '\2713'
color: $green
content: '\2713' !important
color: $green !important
&.pending
color: lighten($gray, 50%)
@ -324,10 +331,10 @@
display: block
&:after
width: 15px
width: 12px
content: ''
display: inline-block
text-align: right
text-align: center
.sender
display: block
@ -403,34 +410,42 @@
position: absolute
left: 4px
top: 11px
height: 6px
width: 6px
height: 4px
width: 4px
margin-top: -3px
border: 1px solid transparent
roundall(10px)
&.online,
&.chat
&:before
background: $green
border-color: $green
&.dnd:before
background: $red
border-color: $red
&.away:before,
&.xa:before
background: $orange
border-color: $orange
&.offline:before
background: $gray-dark
border-color: $gray-dark
&.composing:before
animation: pulsate 1.5s infinite ease-in
-webkit-animation: pulsate 1.5s infinite ease-in
-moz-animation: pulsate 1.5s infinite ease-in
&.paused:before,
&.idle:before
&.paused:before
background: lighten($gray-light, 30%)
border-color: lighten($gray-light, 30%)
&.idle:before
background: transparent
.embeds
margin: 0px

View File

@ -71,31 +71,34 @@
&:hover
background: $blue-saturated
&.online:not(.idle), &.chat, &.dnd, &.away, &.xa
&.online, &.chat, &.dnd, &.away, &.xa
&:after
content: ''
position: absolute
top: 50%
right: 15px
height: 8px
width: 8px
height: 6px
width: 6px
margin-top: -4px
border: 1px solid transparent
roundall(10px)
&.online,
&.chat
&:after
background: $green
border-color: $green
&.dnd
&:after
background: $red
border-color: $red
&.away,
&.xa
&:after
background: $orange
border-color: $orange
&.offline:not(:hover)
.name
@ -123,9 +126,14 @@
&.paused
&:after
background: lighten($gray-light, 30%)
border-color: lighten($gray-light, 30%)
&.idle
padding-right: 15px
&:after
background: transparent
.name
color: $gray-light
max-width: 60%

View File

@ -1,5 +1,5 @@
CACHE MANIFEST
# 0.0.1 1388912142235
# 0.0.1 1388917203552
CACHE:
/app.js