Initial CSS work on showing an unread messages indicator
This commit is contained in:
parent
8a5b4a65e7
commit
a5ea86e29a
136
css/converse.css
136
css/converse.css
|
@ -2193,14 +2193,142 @@
|
||||||
padding: 0.3em 1em;
|
padding: 0.3em 1em;
|
||||||
text-shadow: 0 1px 0 #FAFAFA;
|
text-shadow: 0 1px 0 #FAFAFA;
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
width: 100%; }
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0; }
|
||||||
#conversejs #converse-roster .roster-contacts dd .open-chat {
|
#conversejs #converse-roster .roster-contacts dd .open-chat {
|
||||||
max-width: 90%; }
|
margin: auto;
|
||||||
|
padding: 0.5em 0em 0 1em;
|
||||||
|
width: 88%; }
|
||||||
|
#conversejs #converse-roster .roster-contacts dd .open-chat .pulse {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0; }
|
||||||
|
#conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs {
|
||||||
|
font-weight: bold; }
|
||||||
|
#conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .contact-name {
|
||||||
|
width: 70%; }
|
||||||
|
#conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .avatar .pulse {
|
||||||
|
border: 0.7em solid #2A9D8F;
|
||||||
|
background: transparent;
|
||||||
|
border-radius: 60px;
|
||||||
|
height: 30px;
|
||||||
|
width: 30px;
|
||||||
|
-webkit-animation: pulse 3s ease-out;
|
||||||
|
-moz-animation: pulse 3s ease-out;
|
||||||
|
animation: pulse 3s ease-out;
|
||||||
|
-webkit-animation-iteration-count: infinite;
|
||||||
|
-moz-animation-iteration-count: infinite;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin-top: -7px;
|
||||||
|
margin-left: -31px;
|
||||||
|
z-index: 1;
|
||||||
|
opacity: 0; }
|
||||||
|
#conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .avatar.avatar-online .pulse {
|
||||||
|
border: 0.7em solid #1A9707; }
|
||||||
|
@-webkit-keyframes pulse {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: scale(0);
|
||||||
|
opacity: 0.0; }
|
||||||
|
25% {
|
||||||
|
-webkit-transform: scale(0);
|
||||||
|
opacity: 0.1; }
|
||||||
|
50% {
|
||||||
|
-webkit-transform: scale(0.1);
|
||||||
|
opacity: 0.3; }
|
||||||
|
75% {
|
||||||
|
-webkit-transform: scale(0.5);
|
||||||
|
opacity: 0.5; }
|
||||||
|
100% {
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
opacity: 0.0; } }
|
||||||
|
@-moz-keyframes pulse {
|
||||||
|
0% {
|
||||||
|
-moz-transform: scale(0);
|
||||||
|
opacity: 0.0; }
|
||||||
|
25% {
|
||||||
|
-moz-transform: scale(0);
|
||||||
|
opacity: 0.1; }
|
||||||
|
50% {
|
||||||
|
-moz-transform: scale(0.1);
|
||||||
|
opacity: 0.3; }
|
||||||
|
75% {
|
||||||
|
-moz-transform: scale(0.5);
|
||||||
|
opacity: 0.5; }
|
||||||
|
100% {
|
||||||
|
-moz-transform: scale(1);
|
||||||
|
opacity: 0.0; } }
|
||||||
|
@keyframes pulse {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: scale(0);
|
||||||
|
-moz-transform: scale(0);
|
||||||
|
-ms-transform: scale(0);
|
||||||
|
-o-transform: scale(0);
|
||||||
|
transform: scale(0);
|
||||||
|
opacity: 0.0; }
|
||||||
|
25% {
|
||||||
|
-webkit-transform: scale(0);
|
||||||
|
-moz-transform: scale(0);
|
||||||
|
-ms-transform: scale(0);
|
||||||
|
-o-transform: scale(0);
|
||||||
|
transform: scale(0);
|
||||||
|
opacity: 0.1; }
|
||||||
|
50% {
|
||||||
|
-webkit-transform: scale(0.1);
|
||||||
|
-moz-transform: scale(0.1);
|
||||||
|
-ms-transform: scale(0.1);
|
||||||
|
-o-transform: scale(0.1);
|
||||||
|
transform: scale(0.1);
|
||||||
|
opacity: 0.3; }
|
||||||
|
75% {
|
||||||
|
-webkit-transform: scale(0.5);
|
||||||
|
-moz-transform: scale(0.5);
|
||||||
|
-ms-transform: scale(0.5);
|
||||||
|
-o-transform: scale(0.5);
|
||||||
|
transform: scale(0.5);
|
||||||
|
opacity: 0.5; }
|
||||||
|
100% {
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
-moz-transform: scale(1);
|
||||||
|
-ms-transform: scale(1);
|
||||||
|
-o-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 0.0; } }
|
||||||
|
#conversejs #converse-roster .roster-contacts dd .open-chat .msgs-indicactor {
|
||||||
|
background-color: #D24E2B;
|
||||||
|
color: white;
|
||||||
|
border-radius: 10%;
|
||||||
|
float: right;
|
||||||
|
font-size: 11px;
|
||||||
|
margin-left: -3em;
|
||||||
|
font-weight: normal;
|
||||||
|
padding: 2px 4px;
|
||||||
|
text-shadow: none; }
|
||||||
|
#conversejs #converse-roster .roster-contacts dd .open-chat .contact-name {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
max-width: 80%;
|
||||||
|
float: none;
|
||||||
|
height: 60px; }
|
||||||
|
#conversejs #converse-roster .roster-contacts dd .open-chat .contact-name.unread-msgs {
|
||||||
|
max-width: 70%; }
|
||||||
|
#conversejs #converse-roster .roster-contacts dd .open-chat .avatar {
|
||||||
|
float: left;
|
||||||
|
display: inline-block;
|
||||||
|
height: 60px; }
|
||||||
|
#conversejs #converse-roster .roster-contacts dd .open-chat .avatar .status-icon {
|
||||||
|
color: #2A9D8F; }
|
||||||
|
#conversejs #converse-roster .roster-contacts dd .open-chat .avatar .status-icon.icon-online {
|
||||||
|
color: #1A9707; }
|
||||||
#conversejs #converse-roster .roster-contacts dd:hover {
|
#conversejs #converse-roster .roster-contacts dd:hover {
|
||||||
background-color: #DCF9F6; }
|
background-color: #DCF9F6; }
|
||||||
#conversejs #converse-roster .roster-contacts dd:hover .remove-xmpp-contact {
|
#conversejs #converse-roster .roster-contacts dd:hover .remove-xmpp-contact {
|
||||||
display: inline-block; }
|
display: inline-block; }
|
||||||
#conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .request-actions {
|
#conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .request-actions {
|
||||||
|
padding-top: 0.5em;
|
||||||
|
margin-right: 1em;
|
||||||
margin-left: 0.3em;
|
margin-left: 0.3em;
|
||||||
margin-bottom: 0.3em;
|
margin-bottom: 0.3em;
|
||||||
float: right; }
|
float: right; }
|
||||||
|
@ -2216,7 +2344,7 @@
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
float: left;
|
float: left;
|
||||||
color: #2A9D8F;
|
color: #2A9D8F;
|
||||||
padding-right: 0.5em; }
|
margin-right: 0.5em; }
|
||||||
#conversejs #converse-roster .roster-contacts dd.odd {
|
#conversejs #converse-roster .roster-contacts dd.odd {
|
||||||
background-color: #DCEAC5;
|
background-color: #DCEAC5;
|
||||||
/* Make this difference */ }
|
/* Make this difference */ }
|
||||||
|
@ -2233,7 +2361,9 @@
|
||||||
margin-left: 5px; }
|
margin-left: 5px; }
|
||||||
#conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact {
|
#conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact {
|
||||||
float: right;
|
float: right;
|
||||||
|
margin-right: 1em;
|
||||||
display: none;
|
display: none;
|
||||||
|
padding-top: 0.5em;
|
||||||
color: #818479; }
|
color: #818479; }
|
||||||
#conversejs #converse-roster span.pending-contact-name {
|
#conversejs #converse-roster span.pending-contact-name {
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
|
|
|
@ -105,9 +105,106 @@
|
||||||
text-shadow: 0 1px 0 $text-shadow-color;
|
text-shadow: 0 1px 0 $text-shadow-color;
|
||||||
line-height: $line-height;
|
line-height: $line-height;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
.open-chat {
|
.open-chat {
|
||||||
max-width: 90%;
|
margin: auto;
|
||||||
|
padding: 0.5em 0em 0 1em;
|
||||||
|
width: 88%;
|
||||||
|
.pulse {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
&.unread-msgs {
|
||||||
|
font-weight: bold;
|
||||||
|
.contact-name {
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
.avatar {
|
||||||
|
.pulse {
|
||||||
|
border: 0.7em solid $link-color;
|
||||||
|
background: transparent;
|
||||||
|
border-radius: 60px;
|
||||||
|
height: 30px;
|
||||||
|
width: 30px;
|
||||||
|
@include animation(pulse 3s ease-out);
|
||||||
|
@include animation-iteration-count(infinite);
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin-top: -7px;
|
||||||
|
margin-left: -31px;
|
||||||
|
z-index: 1;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
&.avatar-online {
|
||||||
|
.pulse {
|
||||||
|
border: 0.7em solid $online-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include keyframes(pulse) {
|
||||||
|
0% {
|
||||||
|
@include transform(scale(0));
|
||||||
|
opacity: 0.0;
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
@include transform(scale(0));
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
@include transform(scale(0.1));
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
@include transform(scale(0.5));
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
@include transform(scale(1));
|
||||||
|
opacity: 0.0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.msgs-indicactor {
|
||||||
|
background-color: $warning-color;
|
||||||
|
color: white;
|
||||||
|
border-radius: 10%;
|
||||||
|
float: right;
|
||||||
|
font-size: 11px;
|
||||||
|
margin-left: -3em;
|
||||||
|
font-weight: normal;
|
||||||
|
padding: 2px 4px;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-name {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
max-width: 80%;
|
||||||
|
float: none;
|
||||||
|
height: $roster-item-height;
|
||||||
|
&.unread-msgs {
|
||||||
|
max-width: 70%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
float: left;
|
||||||
|
display: inline-block;
|
||||||
|
height: $roster-item-height;
|
||||||
|
|
||||||
|
.status-icon {
|
||||||
|
color: $link-color;
|
||||||
|
&.icon-online {
|
||||||
|
color: $online-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $highlight-color;
|
background-color: $highlight-color;
|
||||||
.remove-xmpp-contact {
|
.remove-xmpp-contact {
|
||||||
|
@ -116,6 +213,8 @@
|
||||||
}
|
}
|
||||||
&.requesting-xmpp-contact {
|
&.requesting-xmpp-contact {
|
||||||
.request-actions {
|
.request-actions {
|
||||||
|
padding-top: 0.5em;
|
||||||
|
margin-right: 1em;
|
||||||
margin-left: 0.3em;
|
margin-left: 0.3em;
|
||||||
margin-bottom: 0.3em;
|
margin-bottom: 0.3em;
|
||||||
float: right;
|
float: right;
|
||||||
|
@ -136,7 +235,7 @@
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
float: left;
|
float: left;
|
||||||
color: $link-color;
|
color: $link-color;
|
||||||
padding-right: 0.5em;
|
margin-right: 0.5em;
|
||||||
}
|
}
|
||||||
&.odd {
|
&.odd {
|
||||||
background-color: #DCEAC5;
|
background-color: #DCEAC5;
|
||||||
|
@ -159,7 +258,9 @@
|
||||||
}
|
}
|
||||||
&.remove-xmpp-contact {
|
&.remove-xmpp-contact {
|
||||||
float: right;
|
float: right;
|
||||||
|
margin-right: 1em;
|
||||||
display: none;
|
display: none;
|
||||||
|
padding-top: 0.5em;
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -17,6 +17,7 @@ $send-button-height: 27px !default;
|
||||||
$send-button-margin: 3px !default;
|
$send-button-margin: 3px !default;
|
||||||
$message-them-color: #1A9707 !default;
|
$message-them-color: #1A9707 !default;
|
||||||
$roster-height: 194px !default;
|
$roster-height: 194px !default;
|
||||||
|
$roster-item-height: 60px !default;
|
||||||
|
|
||||||
$chat-head-color: #F4A261 !default;
|
$chat-head-color: #F4A261 !default;
|
||||||
$chat-head-text-color: white !default;
|
$chat-head-text-color: white !default;
|
||||||
|
|
|
@ -1,6 +1,19 @@
|
||||||
<a class="open-chat" title="{{{title_fullname}}}: {{{fullname}}}
|
<a class="open-chat {[ if (num_unread) { ]} unread-msgs {[ } ]}"
|
||||||
JID: {{{jid}}}
|
title="{{{title_fullname}}}: {{{fullname}}} JID: {{{jid}}} {{{desc_chat}}}"
|
||||||
{{{desc_chat}}}" href="#"><span class="icon-{{{chat_status}}}" title="{{{desc_status}}}"></span>{{{fullname}}}</a>
|
href="#">
|
||||||
|
<div class="avatar avatar-{{{chat_status}}}">
|
||||||
|
<span class="status-icon icon-{{{chat_status}}}" title="{{{desc_status}}}"></span>
|
||||||
|
{[ if (num_unread) { ]}
|
||||||
|
<span class="pulse"></span>
|
||||||
|
{[ } ]}
|
||||||
|
</div>
|
||||||
|
<span class="contact-name unread-msgs">{{{fullname}}}</span>
|
||||||
|
{[ if (num_unread) { ]}
|
||||||
|
<span class="msgs-indicactor">{{{ num_unread }}}</span>
|
||||||
|
{[ } ]}
|
||||||
|
</a>
|
||||||
{[ if (allow_contact_removal) { ]}
|
{[ if (allow_contact_removal) { ]}
|
||||||
<a class="remove-xmpp-contact icon-remove" title="{{{desc_remove}}}" href="#"></a>
|
<a class="remove-xmpp-contact icon-remove" title="{{{desc_remove}}}" href="#"></a>
|
||||||
{[ } ]}
|
{[ } ]}
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user