Markup and CSS for showing unread messages for a room
This commit is contained in:
JC Brand
parent
3e5beaaf64
commit
8fa06e7d52
152
css/converse.css
152
css/converse.css
|
|
@ -1241,6 +1241,74 @@
|
|||
-ms-transform: rotate(359deg);
|
||||
-o-transform: rotate(359deg);
|
||||
transform: rotate(359deg); } }
|
||||
@-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; } }
|
||||
#converse-embedded-chat .spinner,
|
||||
#conversejs .spinner {
|
||||
-webkit-animation: spin 2s infinite, linear;
|
||||
|
|
@ -1921,6 +1989,10 @@
|
|||
word-wrap: break-word; }
|
||||
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom:hover {
|
||||
background-color: #DCF9F6; }
|
||||
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom.unread-msgs .open-room {
|
||||
max-width: 50%;
|
||||
width: auto;
|
||||
font-weight: bold; }
|
||||
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom a.room-info:before {
|
||||
font-size: 15px; }
|
||||
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom a.open-room {
|
||||
|
|
@ -2118,6 +2190,18 @@
|
|||
#conversejs .toggle-controlbox span {
|
||||
color: white; }
|
||||
|
||||
#conversejs #controlbox .available-chatroom .pulse {
|
||||
padding: 0;
|
||||
margin: 0; }
|
||||
#conversejs #controlbox .available-chatroom.unread-msgs .msgs-indicactor {
|
||||
background-color: #D24E2B;
|
||||
color: white;
|
||||
border-radius: 10%;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
padding: 0 4px;
|
||||
text-shadow: none; }
|
||||
|
||||
#conversejs #converse-roster {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
|
|
@ -2244,74 +2328,6 @@
|
|||
opacity: 0; }
|
||||
#conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .avatar.avatar-online .pulse {
|
||||
border: 0.7em solid #2A9D8F; }
|
||||
@-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;
|
||||
|
|
|
|||
|
|
@ -146,6 +146,13 @@
|
|||
&:hover {
|
||||
background-color: $highlight-color;
|
||||
}
|
||||
&.unread-msgs {
|
||||
.open-room {
|
||||
max-width: 50%;
|
||||
width: auto;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
a {
|
||||
&.room-info {
|
||||
&:before {
|
||||
|
|
|
|||
|
|
@ -78,6 +78,29 @@
|
|||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner {
|
||||
@include animation(spin 2s infinite, linear);
|
||||
display: block;
|
||||
|
|
|
|||
21
sass/_roomslist.scss
Normal file
21
sass/_roomslist.scss
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
#conversejs {
|
||||
#controlbox {
|
||||
.available-chatroom {
|
||||
.pulse {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
&.unread-msgs {
|
||||
.msgs-indicactor {
|
||||
background-color: $warning-color;
|
||||
color: white;
|
||||
border-radius: 10%;
|
||||
font-size: $font-size-small;
|
||||
font-weight: normal;
|
||||
padding: 0 4px;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -151,28 +151,6 @@
|
|||
border: 0.7em solid $link-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
@import "core";
|
||||
@import "chatbox";
|
||||
@import "controlbox";
|
||||
@import "roomslist";
|
||||
@import "roster";
|
||||
@import "chatrooms";
|
||||
@import "headline";
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<dd class="available-chatroom {[ if (num_unread) { ]} unread-msgs {[ } ]}" data-room-jid="{{{jid}}}">
|
||||
{[ if (num_unread) { ]}
|
||||
<span class="pulse"></span>
|
||||
<span class="msgs-indicactor">{{{ num_unread }}}</span>
|
||||
{[ } ]}
|
||||
<a class="open-room" data-room-jid="{{{jid}}}" title="{{{open_title}}}" href="#">{{{name}}}</a>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user