Adds the number of participants to the contact list icon.

Adds glowing to the bottom toolbar chat button and the contact list button when a contact enters or leaves.

bottom_toolbar.js

@@ -9,9 +9,9 @@ var BottomToolbar = (function (my) {
             }, 500);
         }
 
-        buttonClick("#chatBottomButton", "active");
-
         Chat.toggleChat();
+
+        buttonClick("#chatBottomButton", "active");
     };
 
     my.toggleContactList = function() {

chat.js

@@ -354,26 +354,42 @@ var Chat = (function (my) {
      */
     function setVisualNotification(show) {
         var unreadMsgElement = document.getElementById('unreadMessages');
+        var unreadMsgBottomElement = document.getElementById('bottomUnreadMessages');
 
         var glower = $('#chatButton');
+        var bottomGlower = $('#chatBottomButton');
 
         if (unreadMessages) {
             unreadMsgElement.innerHTML = unreadMessages.toString();
+            unreadMsgBottomElement.innerHTML = unreadMessages.toString();
 
             ToolbarToggler.dockToolbar(true);
 
             var chatButtonElement
                 = document.getElementById('chatButton').parentNode;
             var leftIndent = (Util.getTextWidth(chatButtonElement) -
-                              Util.getTextWidth(unreadMsgElement)) / 2;
+                Util.getTextWidth(unreadMsgElement)) / 2;
             var topIndent = (Util.getTextHeight(chatButtonElement) -
-                             Util.getTextHeight(unreadMsgElement)) / 2 - 3;
+                Util.getTextHeight(unreadMsgElement)) / 2 - 2;
 
             unreadMsgElement.setAttribute(
-                    'style',
+                'style',
                     'top:' + topIndent +
                     '; left:' + leftIndent + ';');
 
+            var chatBottomButtonElement
+                = document.getElementById('chatBottomButton').parentNode;
+            var bottomLeftIndent = (Util.getTextWidth(chatBottomButtonElement) -
+                Util.getTextWidth(unreadMsgBottomElement)) / 2;
+            var bottomTopIndent = (Util.getTextHeight(chatBottomButtonElement) -
+                Util.getTextHeight(unreadMsgBottomElement)) / 2 - 3;
+
+            unreadMsgBottomElement.setAttribute(
+                'style',
+                    'top:' + bottomTopIndent +
+                    '; left:' + bottomLeftIndent + ';');
+
+
             if (!glower.hasClass('icon-chat-simple')) {
                 glower.removeClass('icon-chat');
                 glower.addClass('icon-chat-simple');
@@ -381,6 +397,7 @@ var Chat = (function (my) {
         }
         else {
             unreadMsgElement.innerHTML = '';
+            unreadMsgBottomElement.innerHTML = '';
             glower.removeClass('icon-chat-simple');
             glower.addClass('icon-chat');
         }
@@ -388,12 +405,15 @@ var Chat = (function (my) {
         if (show && !notificationInterval) {
             notificationInterval = window.setInterval(function () {
                 glower.toggleClass('active');
+                bottomGlower.toggleClass('active glowing');
             }, 800);
         }
         else if (!show && notificationInterval) {
             window.clearInterval(notificationInterval);
             notificationInterval = false;
             glower.removeClass('active');
+            bottomGlower.removeClass('glowing');
+            bottomGlower.addClass('active');
         }
     }
 

contact_list.js

@@ -2,6 +2,10 @@
  * Contact list.
  */
 var ContactList = (function (my) {
+
+    var numberOfContacts = 0;
+    var notificationInterval;
+
     /**
      * Indicates if the chat is currently visible.
      *
@@ -65,6 +69,7 @@ var ContactList = (function (my) {
         else {
             clElement.appendChild(newContact);
         }
+        updateNumberOfParticipants(1);
     };
 
     /**
@@ -81,6 +86,8 @@ var ContactList = (function (my) {
             var contactlist = $('#contactlist>ul');
 
             contactlist.get(0).removeChild(contact.get(0));
+
+            updateNumberOfParticipants(-1);
         }
     };
 
@@ -163,6 +170,27 @@ var ContactList = (function (my) {
             $('#contactlist').show("slide", { direction: "right",
                                             queue: false,
                                             duration: 500});
+
+            //stop the glowing of the contact list icon
+            setVisualNotification(false);
+        }
+    };
+
+    /**
+     * Updates the number of participants in the contact list button and sets
+     * the glow
+     * @param delta indicates whether a new user has joined (1) or someone has
+     * left(-1)
+     */
+    function updateNumberOfParticipants(delta) {
+        //when the user is alone we don't show the number of participants
+        if(numberOfContacts === 0) {
+            $("#numberOfParticipants").text('');
+            numberOfContacts += delta;
+        } else if(numberOfContacts !== 0 && !ContactList.isVisible()) {
+            setVisualNotification(true);
+            numberOfContacts += delta;
+            $("#numberOfParticipants").text(numberOfContacts);
         }
     };
 
@@ -176,7 +204,7 @@ var ContactList = (function (my) {
         avatar.className = "icon-avatar avatar";
 
         return avatar;
-    };
+    }
 
     /**
      * Creates the display name paragraph.
@@ -188,7 +216,35 @@ var ContactList = (function (my) {
         p.innerHTML = displayName;
 
         return p;
-    };
+    }
+
+    /**
+     * Shows/hides a visual notification, indicating that a new user has joined
+     * the conference.
+     */
+    function setVisualNotification(show, stopGlowingIn) {
+        var glower = $('#contactListButton');
+        function stopGlowing() {
+            window.clearInterval(notificationInterval);
+            notificationInterval = false;
+            glower.removeClass('glowing');
+            if(!ContactList.isVisible()) {
+                glower.removeClass('active');
+            }
+        }
+
+        if (show && !notificationInterval) {
+            notificationInterval = window.setInterval(function () {
+                glower.toggleClass('active glowing');
+            }, 800);
+        }
+        else if (!show && notificationInterval) {
+            stopGlowing();
+        }
+        if(stopGlowingIn) {
+            setTimeout(stopGlowing, stopGlowingIn);
+        }
+    }
 
     /**
      * Indicates that the display name has changed.

css/chat.css

@@ -46,7 +46,7 @@
     max-height:150px;
     min-height:35px;
     border: 0px none;
-    background: #231F20;
+    background: #3a3a3a;
     color: #a7a7a7;
     box-shadow: none;
     border-radius:0;
@@ -75,12 +75,26 @@
 #nickinput {
     margin-top: 20px;
     font-size: 14px;
-    background: #231F20;
+    background: #3a3a3a;
     box-shadow: inset 0 0 3px 2px #a7a7a7;
     border: 1px solid #a7a7a7;
     color: #a7a7a7;
 }
 
+#unreadMessages {
+    font-size: 8px;
+    position: absolute;
+    left: 46%;
+    top: 27%
+}
+
+#bottomUnreadMessages {
+    top: 5px;
+    left: 10px;
+    position: absolute;
+    font-size: 8px;
+}
+
 #chatspace .username {
     float: left;
     padding-left: 5px;
@@ -105,7 +119,7 @@
 }
 
 .chatmessage {
-    background: #231F20;
+    background: #3a3a3a;
     width: 93%;
     margin-left: 5%;
     margin-right: auto;
@@ -149,7 +163,7 @@
     max-height:150px;
     min-height:35px;
     border: 0px none;
-    background: #231F20;
+    background: #3a3a3a;
     overflow: hidden;
     visibility: hidden;
 }
@@ -157,7 +171,7 @@
 #smileysContainer {
     display: none;
     position: absolute;
-    background: #231F20;
+    background: #3a3a3a;
     border-bottom: 1px solid;
     border-top: 1px solid;
     width: 100%;
@@ -205,5 +219,5 @@
 }
 
 #usermsg::-webkit-scrollbar-track-piece {
-    background: #231F20;
+    background: #3a3a3a;
 }

css/main.css

@@ -70,13 +70,13 @@ html, body{
     cursor: pointer;
 }
 
-#chatButton {
+#chatButton, #chatBottomButton, #contactListButton {
     -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
             transition: all .5s ease-in-out;
 }
 /*#ffde00*/
-#chatButton.active {
+#chatButton.active, #contactListButton.glowing, #chatBottomButton.glowing {
     -webkit-text-shadow:    -1px 0 10px #00ccff,
                             0 1px 10px #00ccff,
                             1px 0 10px #00ccff,
@@ -91,6 +91,19 @@ html, body{
                     0 -1px 10px #00ccff;
 }
 
+#numberOfParticipants {
+    position: absolute;
+    top: 0px;
+    right: -1;
+    color: white;
+    width: 13px;
+    height: 13px;
+    line-height: 13px;
+    font-weight: bold;
+    border-radius: 2px;
+    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
+}
+
 #recordButton {
     -webkit-transition: all .5s ease-in-out;
     -moz-transition: all .5s ease-in-out;

images/chatArrow.svg

@@ -2,12 +2,11 @@
 <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="258.559px" height="396.871px" viewBox="83.27 0 258.559 396.871" enable-background="new 83.27 0 258.559 396.871"
+	 width="258.559px" height="396.871px" viewBox="0 0 258.559 396.871" enable-background="new 0 0 258.559 396.871"
 	 xml:space="preserve">
 <g id="u6PRpE_1_">
 	<g>
-		<path fill-rule="evenodd" clip-rule="evenodd" fill="#231F20" d="M341.829,396.871c0,0-16.524-193.936-258.445-396.871
+		<path fill="#3A3A3A" d="M341.829,396.871c0,0-16.524-193.936-258.445-396.871c86.17,0,258.445,0,258.445,0V396.871z"/>
-			c86.17,0,258.445,0,258.445,0V396.871z"/>
 	</g>
 </g>
 </svg>

index.html

@@ -36,8 +36,8 @@
     <script src="data_channels.js?v=3"></script><!-- data channels -->
     <script src="app.js?v=18"></script><!-- application logic -->
     <script src="commands.js?v=1"></script><!-- application logic -->
-    <script src="chat.js?v=12"></script><!-- chat logic -->
+    <script src="chat.js?v=13"></script><!-- chat logic -->
-    <script src="contact_list.js?v=4"></script><!-- contact list logic -->
+    <script src="contact_list.js?v=5"></script><!-- contact list logic -->
     <script src="util.js?v=6"></script><!-- utility functions -->
     <script src="etherpad.js?v=9"></script><!-- etherpad plugin -->
     <script src="prezi.js?v=6"></script><!-- prezi plugin -->
@@ -54,7 +54,7 @@
     <script src="canvas_util.js?v=1"></script><!-- canvas drawing utils -->
     <script src="audio_levels.js?v=2"></script><!-- audio levels plugin -->
     <script src="media_stream.js?v=1"></script><!-- media stream -->
-    <script src="bottom_toolbar.js?v=4"></script><!-- media stream -->
+    <script src="bottom_toolbar.js?v=5"></script><!-- media stream -->
     <script src="roomname_generator.js?v=1"></script><!-- generator for random room names -->
     <script src="keyboard_shortcut.js?v=3"></script>
     <script src="tracking.js?v=1"></script><!-- tracking -->
@@ -63,7 +63,7 @@
     <script src="api_connector.js?v=1"></script>
     <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
     <link rel="stylesheet" href="css/font.css?v=5"/>
-    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=27"/>
+    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=28"/>
     <link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=13" id="videolayout_default"/>
     <link rel="stylesheet" href="css/jquery-impromptu.css?v=4">
     <link rel="stylesheet" href="css/modaldialog.css?v=3">
@@ -71,7 +71,7 @@
     <link rel="stylesheet" href="css/popover.css?v=2">
       <link rel="stylesheet" href="css/jitsi_popover.css?v=2">
     <link rel="stylesheet" href="css/contact_list.css?v=3">
-    <link rel="stylesheet" href="css/chat.css?v=4">
+    <link rel="stylesheet" href="css/chat.css?v=5">
     <link rel="stylesheet" href="css/welcome_page.css?v=2">
     <!--
         Link used for inline installation of chrome desktop streaming extension,
@@ -193,9 +193,10 @@
                     <div class="header_button_separator"></div>
                     <span class="toolbar_span">
                         <a class="button" data-container="body" data-toggle="popover" shortcut="toggleChatPopover" data-placement="bottom" content="Open / close chat" onclick='BottomToolbar.toggleChat();'>
-                            <i id="chatButton" class="icon-chat"></i>
+                            <i id="chatButton" class="icon-chat">
+                                <span id="unreadMessages"></span>
+                            </i>
                         </a>
-                        <span id="unreadMessages"></span>
                     </span>
                     <span id="prezi_button">
                         <div class="header_button_separator"></div>
@@ -273,13 +274,16 @@
             <span id="bottomToolbar">
                 <span class="bottomToolbar_span">
                     <a class="bottomToolbarButton" data-container="body" data-toggle="popover" shortcut="toggleChatPopover" data-placement="top" content="Open / close chat" onclick='BottomToolbar.toggleChat();'>
-                        <i id="chatBottomButton" class="icon-chat-simple"></i>
+                        <i id="chatBottomButton" class="icon-chat-simple">
+                            <span id="bottomUnreadMessages"></span>
+                        </i>
                     </a>
                 </span>
                 <div class="bottom_button_separator"></div>
                 <span class="bottomToolbar_span">
                     <a class="bottomToolbarButton" data-container="body" data-toggle="popover" data-placement="top" id="contactlistpopover" content="Open / close contact list" onclick='BottomToolbar.toggleContactList();'>
                         <i id="contactListButton" class="icon-contactList"></i>
+                        <span id="numberOfParticipants"></span>
                     </a>
                 </span>
                 <div class="bottom_button_separator"></div>