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

Make idle display more consistent

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
clientapp/models/message.js
View File

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

60
public/css/otalk.css
View File

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

43
public/css/pages/chat.styl
View File

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

16
public/css/pages/roster.styl
View File

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

2
public/x-manifest.cache
View File

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