haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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.
This commit is contained in:
fo 2014-10-02 12:30:46 +03:00
parent e41c8eff14
commit 02d8f1a3ca
7 changed files with 132 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
bottom_toolbar.js
View File

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

22
chat.js
View File

@ -354,11 +354,14 @@ 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);
@ -367,13 +370,26 @@ var Chat = (function (my) {
var leftIndent = (Util.getTextWidth(chatButtonElement) -
Util.getTextWidth(unreadMsgElement)) / 2;
var topIndent = (Util.getTextHeight(chatButtonElement) -
Util.getTextHeight(unreadMsgElement)) / 2 - 3;
Util.getTextHeight(unreadMsgElement)) / 2 - 2;
unreadMsgElement.setAttribute(
'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');
}
}

60
contact_list.js
View File

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

26
css/chat.css
View File

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

17
css/main.css
View File

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

5
images/chatArrow.svg
View File

@ -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
c86.17,0,258.445,0,258.445,0V396.871z"/>
<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"/>
</g>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 721 B

After

Width:  |  Height:  |  Size: 668 B

20
index.html
View File

@ -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="contact_list.js?v=4"></script><!-- contact list logic -->
<script src="chat.js?v=13"></script><!-- chat 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>
</a>
<i id="chatButton" class="icon-chat">
<span id="unreadMessages"></span>
</i>
</a>
</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>