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