Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Show pulse around unread messages indicator

Browse Source
This commit is contained in:
JC Brand 2017-06-15 18:27:48 +02:00
parent cf68ea70ac
commit f07cb97db8
5 changed files with 57 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
css/inverse.css
View File

@ -1126,7 +1126,7 @@
#conversejs input[type=submit], #conversejs input[type=button], #conversejs input[type=submit], #conversejs input[type=button],
#conversejs input[type=text], #conversejs input[type=password], #conversejs input[type=text], #conversejs input[type=password],
#conversejs button { #conversejs button {
font-size: 15px; font-size: 16px;
padding: 0.25em; padding: 0.25em;
min-height: 0; } min-height: 0; }
#conversejs strong { #conversejs strong {
@ -1150,7 +1150,7 @@
direction: ltr; direction: ltr;
display: block; display: block;
font-family: "Helvetica", "Arial", sans-serif; font-family: "Helvetica", "Arial", sans-serif;
font-size: 15px; font-size: 16px;
height: 35px; height: 35px;
position: fixed; position: fixed;
right: 0; right: 0;
@ -1203,7 +1203,7 @@
user-select: none; } user-select: none; }
#converse-embedded-chat .emoticon, #converse-embedded-chat .emoticon,
#conversejs .emoticon { #conversejs .emoticon {
font-size: 15px; } font-size: 16px; }
@keyframes fadein { @keyframes fadein {
0% { 0% {
opacity: 0; } opacity: 0; }
@ -1264,14 +1264,11 @@
0% { 0% {
-webkit-transform: scale(0); -webkit-transform: scale(0);
opacity: 0.0; } opacity: 0.0; }
25% {
-webkit-transform: scale(0);
opacity: 0.1; }
50% { 50% {
-webkit-transform: scale(0.1);
opacity: 0.3; }
75% {
-webkit-transform: scale(0.5); -webkit-transform: scale(0.5);
opacity: 0.0; }
75% {
-webkit-transform: scale(0.8);
opacity: 0.5; } opacity: 0.5; }
100% { 100% {
-webkit-transform: scale(1); -webkit-transform: scale(1);
@ -1280,14 +1277,11 @@
0% { 0% {
-moz-transform: scale(0); -moz-transform: scale(0);
opacity: 0.0; } opacity: 0.0; }
25% {
-moz-transform: scale(0);
opacity: 0.1; }
50% { 50% {
-moz-transform: scale(0.1);
opacity: 0.3; }
75% {
-moz-transform: scale(0.5); -moz-transform: scale(0.5);
opacity: 0.0; }
75% {
-moz-transform: scale(0.8);
opacity: 0.5; } opacity: 0.5; }
100% { 100% {
-moz-transform: scale(1); -moz-transform: scale(1);
@ -1300,26 +1294,19 @@
-o-transform: scale(0); -o-transform: scale(0);
transform: scale(0); transform: scale(0);
opacity: 0.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% { 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); -webkit-transform: scale(0.5);
-moz-transform: scale(0.5); -moz-transform: scale(0.5);
-ms-transform: scale(0.5); -ms-transform: scale(0.5);
-o-transform: scale(0.5); -o-transform: scale(0.5);
transform: scale(0.5); transform: scale(0.5);
opacity: 0.0; }
75% {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.5; } opacity: 0.5; }
100% { 100% {
-webkit-transform: scale(1); -webkit-transform: scale(1);
@ -1662,7 +1649,7 @@ body {
#converse-embedded-chat .chatbox .chat-body p, #converse-embedded-chat .chatbox .chat-body p,
#conversejs .chatbox .chat-body p { #conversejs .chatbox .chat-body p {
color: #818479; color: #818479;
font-size: 15px; font-size: 16px;
margin: 0; margin: 0;
padding: 5px; } padding: 5px; }
#converse-embedded-chat .chatbox .chat-body .chat-info, #converse-embedded-chat .chatbox .chat-body .chat-info,
@ -1799,7 +1786,7 @@ body {
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar {
box-sizing: border-box; box-sizing: border-box;
font-size: 15px; font-size: 16px;
margin: 0; margin: 0;
padding: 5px; padding: 5px;
height: 25px; height: 25px;
@ -1807,7 +1794,7 @@ body {
background-color: #FFF5EE; } background-color: #FFF5EE; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar a, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar a { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar a {
font-size: 15px; font-size: 16px;
color: #578EA9; color: #578EA9;
text-decoration: none; text-decoration: none;
text-shadow: none; } text-shadow: none; }
@ -1878,7 +1865,7 @@ body {
left: 0; } left: 0; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li {
font-size: 15px; font-size: 16px;
padding: 5px; padding: 5px;
z-index: 98; } z-index: 98; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover,
@ -2266,14 +2253,14 @@ body {
padding: 1.2em; padding: 1.2em;
background-color: white; background-color: white;
border: 0; border: 0;
font-size: 15px; font-size: 16px;
position: absolute; position: absolute;
text-align: center; text-align: center;
width: 100%; width: 100%;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; } overflow-x: hidden; }
#conversejs #controlbox .controlbox-pane label { #conversejs #controlbox .controlbox-pane label {
font-size: 15px; font-size: 16px;
font-weight: bold; font-weight: bold;
height: auto; height: auto;
margin: 4px; } margin: 4px; }
@ -2396,7 +2383,7 @@ body {
float: left; float: left;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg==) no-repeat right -20px center; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg==) no-repeat right -20px center;
border: 1px solid #999; border: 1px solid #999;
font-size: 15px; font-size: 16px;
height: 30px; height: 30px;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -2411,7 +2398,7 @@ body {
#conversejs #converse-roster .roster-filter-form .state-type { #conversejs #converse-roster .roster-filter-form .state-type {
float: left; float: left;
border: 1px solid #999; border: 1px solid #999;
font-size: calc(15px - 2px); font-size: calc(16px - 2px);
height: 30px; height: 30px;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -2423,7 +2410,7 @@ body {
#conversejs #converse-roster .roster-filter-form .filter-type { #conversejs #converse-roster .roster-filter-form .filter-type {
display: table-cell; display: table-cell;
float: right; float: right;
font-size: calc(15px - 2px); font-size: calc(16px - 2px);
height: 30px; height: 30px;
padding: 0; padding: 0;
width: 47%; width: 47%;
@ -2469,18 +2456,10 @@ body {
padding: 0; padding: 0;
width: 85%; } width: 85%; }
#conversejs #converse-roster .roster-contacts dd .open-chat .pulse { #conversejs #converse-roster .roster-contacts dd .open-chat .pulse {
padding: 0; border: 0.5em solid #E77051;
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 #578EA9;
background: transparent; background: transparent;
border-radius: 60px; height: 16px;
height: 30px; width: 24px;
width: 30px;
-webkit-animation: pulse 3s ease-out; -webkit-animation: pulse 3s ease-out;
-moz-animation: pulse 3s ease-out; -moz-animation: pulse 3s ease-out;
animation: pulse 3s ease-out; animation: pulse 3s ease-out;
@ -2489,10 +2468,13 @@ body {
animation-iteration-count: infinite; animation-iteration-count: infinite;
margin: 0; margin: 0;
padding: 0; padding: 0;
margin-top: -7px; margin-left: -26px;
margin-left: -31px;
z-index: 1; z-index: 1;
opacity: 0; } opacity: 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.avatar-online .pulse { #conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .avatar.avatar-online .pulse {
border: 0.7em solid #578EA9; } border: 0.7em solid #578EA9; }
#conversejs #converse-roster .roster-contacts dd .open-chat .msgs-indicator { #conversejs #converse-roster .roster-contacts dd .open-chat .msgs-indicator {
@ -2733,7 +2715,7 @@ body {
border-bottom-right-radius: 7px; border-bottom-right-radius: 7px;
border: 0; border: 0;
color: #818479; color: #818479;
font-size: 15px; font-size: 16px;
height: 289px; height: 289px;
width: 100%; width: 100%;
height: -webkit-calc(100% - 55px); height: -webkit-calc(100% - 55px);

10
sass/_core.scss
View File

@ -96,16 +96,12 @@
@include transform(scale(0)); @include transform(scale(0));
opacity: 0.0; opacity: 0.0;
} }
25% {
@include transform(scale(0));
opacity: 0.1;
}
50% { 50% {
@include transform(scale(0.1)); @include transform(scale(0.5));
opacity: 0.3; opacity: 0.0;
} }
75% { 75% {
@include transform(scale(0.5)); @include transform(scale(0.8));
opacity: 0.5; opacity: 0.5;
} }
100% { 100% {

30
sass/_roster.scss
View File

@ -108,7 +108,7 @@
height: 24px; height: 24px;
overflow-y: hidden; overflow-y: hidden;
text-shadow: 0 1px 0 $text-shadow-color; text-shadow: 0 1px 0 $text-shadow-color;
line-height: $line-height; line-height: $font-size;
width: 100%; width: 100%;
height: 30px; height: 30px;
margin: 0; margin: 0;
@ -123,8 +123,17 @@
padding: 0; padding: 0;
width: 85%; width: 85%;
.pulse { .pulse {
padding: 0; border: 0.5em solid $red;
background: transparent;
height: $font-size;
width: 1.5*$font-size;
@include animation(pulse 3s ease-out);
@include animation-iteration-count(infinite);
margin: 0; margin: 0;
padding: 0;
margin-left: -26px;
z-index: 1;
opacity: 0;
} }
&.unread-msgs { &.unread-msgs {
font-weight: bold; font-weight: bold;
@ -132,21 +141,6 @@
width: 70%; width: 70%;
} }
.avatar { .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 { &.avatar-online {
.pulse { .pulse {
border: 0.7em solid $link-color; border: 0.7em solid $link-color;
@ -194,7 +188,7 @@
} }
} }
&.current-xmpp-contact span { &.current-xmpp-contact span {
font-size: 16px; font-size: $font-size;
float: left; float: left;
margin-right: 0.5em; margin-right: 0.5em;
} }

2
sass/inverse/_variables.scss
View File

@ -90,7 +90,7 @@ $mobile_portrait_length: 480px !default;
$font-size-tiny: 10px !default; $font-size-tiny: 10px !default;
$font-size-small: 14px !default; $font-size-small: 14px !default;
$font-size: 15px !default; $font-size: 16px !default;
$font-size-large: 18px !default; $font-size-large: 18px !default;
$font-size-huge: 26px !default; $font-size-huge: 26px !default;
$legend-font-size: 18px !default; $legend-font-size: 18px !default;

4
src/templates/roster_item.html
View File

@ -3,13 +3,11 @@
href="#"> href="#">
<div class="avatar avatar-{{{chat_status}}}"> <div class="avatar avatar-{{{chat_status}}}">
<span class="status-icon icon-{{{chat_status}}}" title="{{{desc_status}}}"></span> <span class="status-icon icon-{{{chat_status}}}" title="{{{desc_status}}}"></span>
{[ if (num_unread) { ]}
<span class="pulse"></span>
{[ } ]}
</div> </div>
<span class="contact-name unread-msgs">{{{fullname}}}</span> <span class="contact-name unread-msgs">{{{fullname}}}</span>
{[ if (num_unread) { ]} {[ if (num_unread) { ]}
<span class="msgs-indicator">{{{ num_unread }}}</span> <span class="msgs-indicator">{{{ num_unread }}}</span>
<span class="pulse"></span>
{[ } ]} {[ } ]}
</a> </a>
{[ if (allow_contact_removal) { ]} {[ if (allow_contact_removal) { ]}