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

Refactor toolbar to add separators via css and remove unneeded containers

This commit is contained in:
Issac Gerges 2015-08-05 16:56:08 -05:00
parent 2ea6be9b2c
commit fc6f5717cb
11 changed files with 19378 additions and 19370 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
css/font.css
View File

@ -104,6 +104,11 @@
content: "\e617"; content: "\e617";
} }
.icon-hangup {
color:#ff0000;
font-size: 1.4em;
}
.icon-reload:before { .icon-reload:before {
content: "\e618"; content: "\e618";
} }

29
css/main.css
View File

@ -38,17 +38,30 @@ html, body{
position: relative; position: relative;
} }
#toolbar a.button::after {
content: '';
display: inline-block;
position: absolute;
left: 40px;
width: 1px;
height: 20px;
background: #373737;
}
#toolbar a.button:last-child::after {
content: none;
}
.button { .button {
display: inline-block; display: inline-block;
position: relative; position: relative;
color: #FFFFFF; color: #FFFFFF;
top: 0px; top: 0;
padding: 10px 0px; padding: 10px 0;
width: 38px; width: 38px;
cursor: pointer; cursor: pointer;
font-size: 11pt;
text-align: center; text-align: center;
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.6); text-shadow: 0 1px 0 rgba(255,255,255,.3), 0 -1px 0 rgba(0,0,0,.6);
z-index: 1; z-index: 1;
} }
@ -61,13 +74,13 @@ html, body{
cursor: pointer; cursor: pointer;
} }
#chatButton, #chatBottomButton, #contactListButton, #numberOfParticipants { #toolbar_button_chat, #chatBottomButton, #contactListButton, #numberOfParticipants {
-webkit-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out; transition: all .5s ease-in-out;
} }
/*#ffde00*/ /*#ffde00*/
#chatButton.active, #contactListButton.glowing, #chatBottomButton.glowing { #toolbar_button_chat.active, #contactListButton.glowing, #chatBottomButton.glowing {
-webkit-text-shadow: -1px 0 10px #00ccff, -webkit-text-shadow: -1px 0 10px #00ccff,
0 1px 10px #00ccff, 0 1px 10px #00ccff,
1px 0 10px #00ccff, 1px 0 10px #00ccff,
@ -100,13 +113,13 @@ html, body{
color: #00ccff; color: #00ccff;
} }
#recordButton { #toolbar_button_record {
-webkit-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out; transition: all .5s ease-in-out;
} }
/*#ffde00*/ /*#ffde00*/
#recordButton.active { #toolbar_button_record.active {
-webkit-text-shadow: -1px 0 10px #00ccff, -webkit-text-shadow: -1px 0 10px #00ccff,
0 1px 10px #00ccff, 0 1px 10px #00ccff,
1px 0 10px #00ccff, 1px 0 10px #00ccff,

2
css/videolayout_default.css
View File

@ -135,7 +135,7 @@
z-index: 0; z-index: 0;
} }
#etherpadButton { #toolbar_button_etherpad {
display: none; display: none;
} }

92
index.html
View File

@ -22,7 +22,7 @@
<script src="libs/popover.js?v=1"></script><!-- bootstrap tooltip lib --> <script src="libs/popover.js?v=1"></script><!-- bootstrap tooltip lib -->
<script src="libs/toastr.js?v=1"></script><!-- notifications lib --> <script src="libs/toastr.js?v=1"></script><!-- notifications lib -->
<script src="interface_config.js?v=5"></script> <script src="interface_config.js?v=5"></script>
<script src="libs/app.bundle.js?v=119"></script> <script src="libs/app.bundle.js?v=120"></script>
<script src="analytics.js?v=1"></script><!-- google analytics plugin --> <script src="analytics.js?v=1"></script><!-- google analytics plugin -->
<link rel="stylesheet" href="css/font.css?v=7"/> <link rel="stylesheet" href="css/font.css?v=7"/>
<link rel="stylesheet" href="css/toastr.css?v=1"> <link rel="stylesheet" href="css/toastr.css?v=1">
@ -133,9 +133,7 @@
</div> </div>
<span id="toolbar"> <span id="toolbar">
<span id="authentication" class="authentication" style="display: none"> <span id="authentication" class="authentication" style="display: none">
<a class="button" id="toolbar_button_authentication" > <a class="button icon-avatar" id="toolbar_button_authentication" data-i18n="[content]toolbar.authenticate"></a>
<i id="authButton" class="icon-avatar"></i>
</a>
<ul class="loginmenu"> <ul class="loginmenu">
<span class="loginmenuPadding"></span> <span class="loginmenuPadding"></span>
<li id="toolbar_auth_identity" class="identity"></li> <li id="toolbar_auth_identity" class="identity"></li>
@ -146,79 +144,23 @@
<a class="authButton" data-i18n="toolbar.logout"></a> <a class="authButton" data-i18n="toolbar.logout"></a>
</li> </li>
</ul> </ul>
<div class="header_button_separator"></div>
</span> </span>
<a class="button" id="toolbar_button_mute" data-container="body" data-toggle="popover" data-placement="bottom" shortcut="mutePopover" data-i18n="[content]toolbar.mute" content="Mute / Unmute"> <a class="button icon-microphone" id="toolbar_button_mute" data-container="body" data-toggle="popover" data-placement="bottom" shortcut="mutePopover" data-i18n="[content]toolbar.mute" content="Mute / Unmute"></a>
<i id="mute" class="icon-microphone"></i> <a class="button icon-camera" id="toolbar_button_camera" data-container="body" data-toggle="popover" data-placement="bottom" shortcut="toggleVideoPopover" data-i18n="[content]toolbar.videomute" content="Start / stop camera"></a>
<a class="button icon-recEnable" id="toolbar_button_record" data-container="body" data-toggle="popover" data-placement="bottom" data-i18n="[content]toolbar.record" content="Record" style="display: none"></a>
<a class="button icon-security" id="toolbar_button_security" data-container="body" data-toggle="popover" data-placement="bottom" data-i18n="[content]toolbar.lock" content="Lock / unlock room"></a>
<a class="button icon-link" id="toolbar_button_link" data-container="body" data-toggle="popover" data-placement="bottom" data-i18n="[content]toolbar.invite" content="Invite others"></a>
<a class="button icon-chat" id="toolbar_button_chat" data-container="body" data-toggle="popover" shortcut="toggleChatPopover" data-placement="bottom" data-i18n="[content]toolbar.chat" content="Open / close chat">
<span id="unreadMessages"></span>
</a> </a>
<div class="header_button_separator"></div> <a class="button icon-prezi" id="toolbar_button_prezi" data-container="body" data-toggle="popover" data-placement="bottom" data-i18n="[content]toolbar.prezi" content="Share Prezi"></a>
<a class="button" id="toolbar_button_camera" data-container="body" data-toggle="popover" data-placement="bottom" shortcut="toggleVideoPopover" data-i18n="[content]toolbar.videomute" content="Start / stop camera"> <a class="button icon-share-doc" id="toolbar_button_etherpad" data-container="body" data-toggle="popover" data-placement="bottom" content="Shared document" data-i18n="[content]toolbar.etherpad"></a>
<i id="video" class="icon-camera"></i> <a class="button icon-share-desktop" id="toolbar_button_desktopsharing" data-container="body" data-toggle="popover" data-placement="bottom" content="Share screen" data-i18n="[content]toolbar.sharescreen" style="display: none"></a>
</a> <a class="button icon-full-screen" id="toolbar_button_fullScreen" data-container="body" data-toggle="popover" data-placement="bottom" content="Enter / Exit Full Screen" data-i18n="[content]toolbar.fullscreen"></a>
<span id="recording" style="display: none"> <a class="button icon-telephone" id="toolbar_button_sip" data-container="body" data-toggle="popover" data-placement="bottom" content="Call SIP number" data-i18n="[content]toolbar.sip" style="display: none"></a>
<div class="header_button_separator"></div> <a class="button icon-dialpad" id="toolbar_button_dialpad" data-container="body" data-toggle="popover" data-placement="bottom" content="Open dialpad" data-i18n="[content]toolbar.dialpad" style="display: none"></a>
<a class="button" id="toolbar_button_record" data-container="body" data-toggle="popover" data-placement="bottom" data-i18n="[content]toolbar.record" content="Record"> <a class="button icon-settings" id="toolbar_button_settings" data-container="body" data-toggle="popover" data-placement="bottom" content="Settings" data-i18n="[content]toolbar.Settings"></a>
<i id="recordButton" class="icon-recEnable"></i> <a class="button icon-hangup" id="toolbar_button_hangup" data-container="body" data-toggle="popover" data-placement="bottom" content="Hang Up" data-i18n="[content]toolbar.hangup"></a>
</a>
</span>
<div class="header_button_separator"></div>
<a class="button" id="toolbar_button_security" data-container="body" data-toggle="popover" data-placement="bottom" data-i18n="[content]toolbar.lock" content="Lock / unlock room">
<i id="lockIcon" class="icon-security"></i>
</a>
<div class="header_button_separator"></div>
<a class="button" id="toolbar_button_link" data-container="body" data-toggle="popover" data-placement="bottom" data-i18n="[content]toolbar.invite" content="Invite others">
<i class="icon-link"></i>
</a>
<div class="header_button_separator"></div>
<span class="toolbar_span">
<a class="button" id="toolbar_button_chat" data-container="body" data-toggle="popover" shortcut="toggleChatPopover" data-placement="bottom" data-i18n="[content]toolbar.chat" content="Open / close chat">
<i id="chatButton" class="icon-chat">
<span id="unreadMessages"></span>
</i>
</a>
</span>
<span id="prezi_button">
<div class="header_button_separator"></div>
<a class="button" id="toolbar_button_prezi" data-container="body" data-toggle="popover" data-placement="bottom" data-i18n="[content]toolbar.prezi" content="Share Prezi">
<i class="icon-prezi"></i>
</a>
</span>
<span id="etherpadButton">
<div class="header_button_separator"></div>
<a class="button" id="toolbar_button_etherpad" data-container="body" data-toggle="popover" data-placement="bottom" content="Shared document" data-i18n="[content]toolbar.etherpad">
<i class="icon-share-doc"></i>
</a>
</span>
<span id="desktopsharing" style="display: none">
<div class="header_button_separator"></div>
<a class="button" id="toolbar_button_desktopsharing" data-container="body" data-toggle="popover" data-placement="bottom" content="Share screen" data-i18n="[content]toolbar.sharescreen">
<i class="icon-share-desktop"></i>
</a>
</span>
<div class="header_button_separator"></div>
<a class="button" id="toolbar_button_fullScreen" data-container="body" data-toggle="popover" data-placement="bottom" content="Enter / Exit Full Screen" data-i18n="[content]toolbar.fullscreen">
<i id="fullScreen" class="icon-full-screen"></i>
</a>
<span id="sipCallButton" style="display: none">
<div class="header_button_separator"></div>
<a class="button" id="toolbar_button_sip" data-container="body" data-toggle="popover" data-placement="bottom" content="Call SIP number" data-i18n="[content]toolbar.sip">
<i class="icon-telephone"></i></a>
</span>
<span id="dialPadButton" style="display: none">
<div class="header_button_separator"></div>
<a class="button" id="toolbar_button_dialpad" data-container="body" data-toggle="popover" data-placement="bottom" content="Open dialpad" data-i18n="[content]toolbar.dialpad">
<i class="icon-dialpad"></i></a>
</span>
<div class="header_button_separator"></div>
<a class="button" id="toolbar_button_settings" data-container="body" data-toggle="popover" data-placement="bottom" content="Settings" data-i18n="[content]toolbar.Settings">
<i id="settingsButton" class="icon-settings"></i>
</a>
<div class="header_button_separator"></div>
<span id="hangup">
<a class="button" id="toolbar_button_hangup" data-container="body" data-toggle="popover" data-placement="bottom" content="Hang Up" data-i18n="[content]toolbar.hangup">
<i class="icon-hangup" style="color:#ff0000;font-size: 1.4em;"></i>
</a>
</span>
</span> </span>
</div> </div>
<div id="subject"></div> <div id="subject"></div>

38572
libs/app.bundle.js
View File

File diff suppressed because it is too large Load Diff

6
modules/UI/UI.js
View File

@ -811,10 +811,10 @@ UI.setAudioMuted = function (mute, earlyMute) {
if (!audioMute(mute, function () { if (!audioMute(mute, function () {
VideoLayout.showLocalAudioIndicator(mute); VideoLayout.showLocalAudioIndicator(mute);
UIUtil.buttonClick("#mute", "icon-microphone icon-mic-disabled"); UIUtil.buttonClick("#toolbar_button_mute", "icon-microphone icon-mic-disabled");
})) { })) {
// We still click the button. // We still click the button.
UIUtil.buttonClick("#mute", "icon-microphone icon-mic-disabled"); UIUtil.buttonClick("#toolbar_button_mute", "icon-microphone icon-mic-disabled");
return; return;
} }
}; };
@ -841,7 +841,7 @@ UI.dockToolbar = function (isDock) {
}; };
UI.setVideoMuteButtonsState = function (mute) { UI.setVideoMuteButtonsState = function (mute) {
var video = $('#video'); var video = $('#toolbar_button_camera');
var communicativeClass = "icon-camera"; var communicativeClass = "icon-camera";
var muteClass = "icon-camera icon-camera-disabled"; var muteClass = "icon-camera icon-camera-disabled";

4
modules/UI/etherpad/Etherpad.js
View File

@ -30,8 +30,8 @@ function resize() {
* Creates the Etherpad button and adds it to the toolbar. * Creates the Etherpad button and adds it to the toolbar.
*/ */
function enableEtherpadButton() { function enableEtherpadButton() {
if (!$('#etherpadButton').is(":visible")) if (!$('#toolbar_button_etherpad').is(":visible"))
$('#etherpadButton').css({display: 'inline-block'}); $('#toolbar_button_etherpad').css({display: 'inline-block'});
} }
/** /**

2
modules/UI/side_pannels/SidePanelToggler.js
View File

@ -17,7 +17,7 @@ var PanelToggler = (function(my) {
var buttons = { var buttons = {
'#chatspace': '#chatBottomButton', '#chatspace': '#chatBottomButton',
'#contactlist': '#contactListButton', '#contactlist': '#contactListButton',
'#settingsmenu': '#settingsButton' '#settingsmenu': '#toolbar_button_settings'
}; };
/** /**

4
modules/UI/side_pannels/chat/Chat.js
View File

@ -19,7 +19,7 @@ function setVisualNotification(show) {
var unreadMsgBottomElement var unreadMsgBottomElement
= document.getElementById('bottomUnreadMessages'); = document.getElementById('bottomUnreadMessages');
var glower = $('#chatButton'); var glower = $('#toolbar_button_chat');
var bottomGlower = $('#chatBottomButton'); var bottomGlower = $('#chatBottomButton');
if (unreadMessages) { if (unreadMessages) {
@ -29,7 +29,7 @@ function setVisualNotification(show) {
ToolbarToggler.dockToolbar(true); ToolbarToggler.dockToolbar(true);
var chatButtonElement var chatButtonElement
= document.getElementById('chatButton').parentNode; = document.getElementById('toolbar_button_chat');
var leftIndent = (UIUtil.getTextWidth(chatButtonElement) - var leftIndent = (UIUtil.getTextWidth(chatButtonElement) -
UIUtil.getTextWidth(unreadMsgElement)) / 2; UIUtil.getTextWidth(unreadMsgElement)) / 2;
var topIndent = (UIUtil.getTextHeight(chatButtonElement) - var topIndent = (UIUtil.getTextHeight(chatButtonElement) -

28
modules/UI/toolbars/Toolbar.js
View File

@ -46,7 +46,7 @@ var buttonHandlers = {
return APP.desktopsharing.toggleScreenSharing(); return APP.desktopsharing.toggleScreenSharing();
}, },
"toolbar_button_fullScreen": function() { "toolbar_button_fullScreen": function() {
UIUtil.buttonClick("#fullScreen", "icon-full-screen icon-exit-full-screen"); UIUtil.buttonClick("#toolbar_button_fullScreen", "icon-full-screen icon-exit-full-screen");
return Toolbar.toggleFullScreen(); return Toolbar.toggleFullScreen();
}, },
"toolbar_button_sip": function () { "toolbar_button_sip": function () {
@ -334,7 +334,7 @@ var Toolbar = (function (my) {
*/ */
my.setupButtonsFromConfig = function () { my.setupButtonsFromConfig = function () {
if (config.disablePrezi) { if (config.disablePrezi) {
$("#prezi_button").css({display: "none"}); $("#toolbar_button_prezi").css({display: "none"});
} }
}; };
@ -509,15 +509,15 @@ var Toolbar = (function (my) {
* Unlocks the lock button state. * Unlocks the lock button state.
*/ */
my.unlockLockButton = function () { my.unlockLockButton = function () {
if ($("#lockIcon").hasClass("icon-security-locked")) if ($("#toolbar_button_security").hasClass("icon-security-locked"))
UIUtil.buttonClick("#lockIcon", "icon-security icon-security-locked"); UIUtil.buttonClick("#toolbar_button_security", "icon-security icon-security-locked");
}; };
/** /**
* Updates the lock button state to locked. * Updates the lock button state to locked.
*/ */
my.lockLockButton = function () { my.lockLockButton = function () {
if ($("#lockIcon").hasClass("icon-security")) if ($("#toolbar_button_security").hasClass("icon-security"))
UIUtil.buttonClick("#lockIcon", "icon-security icon-security-locked"); UIUtil.buttonClick("#toolbar_button_security", "icon-security icon-security-locked");
}; };
/** /**
@ -540,16 +540,16 @@ var Toolbar = (function (my) {
} }
if (show) { if (show) {
$('#recording').css({display: "inline"}); $('#toolbar_button_record').css({display: "inline"});
} }
else { else {
$('#recording').css({display: "none"}); $('#toolbar_button_record').css({display: "none"});
} }
}; };
// Sets the state of the recording button // Sets the state of the recording button
my.setRecordingButtonState = function (isRecording) { my.setRecordingButtonState = function (isRecording) {
var selector = $('#recordButton'); var selector = $('#toolbar_button_record');
if (isRecording) { if (isRecording) {
selector.removeClass("icon-recEnable"); selector.removeClass("icon-recEnable");
selector.addClass("icon-recEnable active"); selector.addClass("icon-recEnable active");
@ -562,18 +562,18 @@ var Toolbar = (function (my) {
// Shows or hides SIP calls button // Shows or hides SIP calls button
my.showSipCallButton = function (show) { my.showSipCallButton = function (show) {
if (APP.xmpp.isSipGatewayEnabled() && show) { if (APP.xmpp.isSipGatewayEnabled() && show) {
$('#sipCallButton').css({display: "inline-block"}); $('#toolbar_button_sip').css({display: "inline-block"});
} else { } else {
$('#sipCallButton').css({display: "none"}); $('#toolbar_button_sip').css({display: "none"});
} }
}; };
// Shows or hides the dialpad button // Shows or hides the dialpad button
my.showDialPadButton = function (show) { my.showDialPadButton = function (show) {
if (show) { if (show) {
$('#dialPadButton').css({display: "inline-block"}); $('#toolbar_button_dialpad').css({display: "inline-block"});
} else { } else {
$('#dialPadButton').css({display: "none"}); $('#toolbar_button_dialpad').css({display: "none"});
} }
}; };
@ -621,7 +621,7 @@ var Toolbar = (function (my) {
* @param active the state of the desktop streaming. * @param active the state of the desktop streaming.
*/ */
my.changeDesktopSharingButtonState = function (active) { my.changeDesktopSharingButtonState = function (active) {
var button = $("#desktopsharing > a"); var button = $("#toolbar_button_desktopsharing");
if (active) { if (active) {
button.addClass("glow"); button.addClass("glow");
} else { } else {

4
modules/UI/toolbars/ToolbarToggler.js
View File

@ -6,9 +6,9 @@ var toolbarTimeoutObject,
function showDesktopSharingButton() { function showDesktopSharingButton() {
if (APP.desktopsharing.isDesktopSharingEnabled()) { if (APP.desktopsharing.isDesktopSharingEnabled()) {
$('#desktopsharing').css({display: "inline"}); $('#toolbar_button_desktopsharing').css({display: "inline"});
} else { } else {
$('#desktopsharing').css({display: "none"}); $('#toolbar_button_desktopsharing').css({display: "none"});
} }
} }