Refactor toolbar to add separators via css and remove unneeded containers

css/font.css

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

css/main.css

@@ -38,17 +38,30 @@ html, body{
     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 {
     display: inline-block;
     position: relative;
     color: #FFFFFF;
-    top: 0px;
-    padding: 10px 0px;
+    top: 0;
+    padding: 10px 0;
     width: 38px;
     cursor: pointer;
-    font-size: 11pt;
     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;
 }
 
@@ -61,13 +74,13 @@ html, body{
     cursor: pointer;
 }
 
-#chatButton, #chatBottomButton, #contactListButton, #numberOfParticipants {
+#toolbar_button_chat, #chatBottomButton, #contactListButton, #numberOfParticipants {
     -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
             transition: all .5s ease-in-out;
 }
 /*#ffde00*/
-#chatButton.active, #contactListButton.glowing, #chatBottomButton.glowing {
+#toolbar_button_chat.active, #contactListButton.glowing, #chatBottomButton.glowing {
     -webkit-text-shadow:    -1px 0 10px #00ccff,
                             0 1px 10px #00ccff,
                             1px 0 10px #00ccff,
@@ -100,13 +113,13 @@ html, body{
     color: #00ccff;
 }
 
-#recordButton {
+#toolbar_button_record {
     -webkit-transition: all .5s ease-in-out;
     -moz-transition: all .5s ease-in-out;
     transition: all .5s ease-in-out;
 }
 /*#ffde00*/
-#recordButton.active {
+#toolbar_button_record.active {
     -webkit-text-shadow:    -1px 0 10px #00ccff,
     0 1px 10px #00ccff,
     1px 0 10px #00ccff,

css/videolayout_default.css

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

index.html

@@ -22,7 +22,7 @@
     <script src="libs/popover.js?v=1"></script><!-- bootstrap tooltip lib -->
     <script src="libs/toastr.js?v=1"></script><!-- notifications lib -->
     <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 -->
     <link rel="stylesheet" href="css/font.css?v=7"/>
     <link rel="stylesheet" href="css/toastr.css?v=1">
@@ -133,9 +133,7 @@
                 </div>
                 <span id="toolbar">
                     <span id="authentication" class="authentication" style="display: none">
-                        <a class="button" id="toolbar_button_authentication" >
-                            <i id="authButton" class="icon-avatar"></i>
-                        </a>
+                        <a class="button icon-avatar" id="toolbar_button_authentication" data-i18n="[content]toolbar.authenticate"></a>
                         <ul class="loginmenu">
                             <span class="loginmenuPadding"></span>
                             <li id="toolbar_auth_identity" class="identity"></li>
@@ -146,79 +144,23 @@
                                 <a class="authButton" data-i18n="toolbar.logout"></a>
                             </li>
                         </ul>
-                        <div class="header_button_separator"></div>
                     </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">
-                        <i id="mute" class="icon-microphone"></i>
+                    <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>
+                    <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>
-                    <div class="header_button_separator"></div>
-                    <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">
-                        <i id="video" class="icon-camera"></i>
-                    </a>
-                    <span id="recording" style="display: none">
-                        <div class="header_button_separator"></div>
-                        <a class="button" id="toolbar_button_record" data-container="body" data-toggle="popover" data-placement="bottom" data-i18n="[content]toolbar.record" content="Record">
-                            <i id="recordButton" class="icon-recEnable"></i>
-                        </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>
+                    <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 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>
+                    <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 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>
+                    <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>
+                    <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 icon-settings" id="toolbar_button_settings" data-container="body" data-toggle="popover" data-placement="bottom" content="Settings" data-i18n="[content]toolbar.Settings"></a>
+                    <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>
                 </span>
             </div>
             <div id="subject"></div>

modules/UI/UI.js

@@ -811,10 +811,10 @@ UI.setAudioMuted = function (mute, earlyMute) {
     if (!audioMute(mute, function () {
             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.
-        UIUtil.buttonClick("#mute", "icon-microphone icon-mic-disabled");
+        UIUtil.buttonClick("#toolbar_button_mute", "icon-microphone icon-mic-disabled");
         return;
     }
 };
@@ -841,7 +841,7 @@ UI.dockToolbar = function (isDock) {
 };
 
 UI.setVideoMuteButtonsState = function (mute) {
-    var video = $('#video');
+    var video = $('#toolbar_button_camera');
     var communicativeClass = "icon-camera";
     var muteClass = "icon-camera icon-camera-disabled";
 

modules/UI/etherpad/Etherpad.js

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

modules/UI/side_pannels/SidePanelToggler.js

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

modules/UI/side_pannels/chat/Chat.js

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

modules/UI/toolbars/Toolbar.js

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

modules/UI/toolbars/ToolbarToggler.js

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