diff --git a/bottom_toolbar.js b/bottom_toolbar.js
index 0a7478d92..c504c944d 100644
--- a/bottom_toolbar.js
+++ b/bottom_toolbar.js
@@ -9,9 +9,9 @@ var BottomToolbar = (function (my) {
}, 500);
}
- buttonClick("#chatBottomButton", "active");
-
Chat.toggleChat();
+
+ buttonClick("#chatBottomButton", "active");
};
my.toggleContactList = function() {
diff --git a/chat.js b/chat.js
index 520fd5447..b789eba4d 100644
--- a/chat.js
+++ b/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');
}
}
diff --git a/contact_list.js b/contact_list.js
index fe69e10d0..1ceff0606 100644
--- a/contact_list.js
+++ b/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.
diff --git a/css/chat.css b/css/chat.css
index 024a16060..6465653eb 100644
--- a/css/chat.css
+++ b/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;
}
diff --git a/css/main.css b/css/main.css
index 5ce2de6a5..f26bcf467 100644
--- a/css/main.css
+++ b/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;
diff --git a/images/chatArrow.svg b/images/chatArrow.svg
index e9ad72cfc..f698c28ee 100644
--- a/images/chatArrow.svg
+++ b/images/chatArrow.svg
@@ -2,12 +2,11 @@
diff --git a/index.html b/index.html
index 101b9625e..a2b7fa5eb 100644
--- a/index.html
+++ b/index.html
@@ -36,8 +36,8 @@
-
-
+
+
@@ -54,7 +54,7 @@
-
+
@@ -63,7 +63,7 @@
-
+
@@ -71,7 +71,7 @@
-
+