Markup and CSS for showing unread messages for a room

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;

sass/_controlbox.scss

@@ -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 {

sass/_core.scss

@@ -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;

sass/_roomslist.scss

@@ -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;
+                }
+            }
+        }
+    }
+}

sass/_roster.scss

@@ -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;
-                            }
-                        }
                     }
                 }
 

sass/converse.scss

@@ -13,6 +13,7 @@
 @import "core";
 @import "chatbox";
 @import "controlbox";
+@import "roomslist";
 @import "roster";
 @import "chatrooms";
 @import "headline";

src/templates/rooms_list_item.html

@@ -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>