Re-designs toolbars, side panels like setting, contact list

css/_base.scss

@@ -17,139 +17,10 @@ html, body, input, textarea, keygen, select, button {
     font-family: $baseFontFamily !important;
 }
 
-.right-panel {
-    display:none;
-    position:absolute;
-    float: right;
-    top: 0px;
-    bottom: 0px;
-    right: 0px;
-    width: 0px;
-    max-width: 200px;
-    overflow: hidden;
-    /* background-color:#dfebf1;*/
-    background-color:#FFFFFF;
-    border-left:1px solid #424242;
-    z-index: 5;
-}
-
 #nowebrtc {
     display:none;
 }
 
-#header_container {
-    z-index: 1014;
-}
-
-.toolbar_span {
-    display: inline-block;
-    position: relative;
-}
-
-#toolbar a.button:last-child::after {
-    content: none;
-}
-
-.button {
-    display: inline-block;
-    position: relative;
-    color: #FFFFFF;
-    top:0px;
-    padding-top: 10px;
-    width: 38px;
-    height: 28px;
-    cursor: pointer;
-    text-align: center;
-    text-shadow: 0 1px 0 rgba(255,255,255,.3), 0 -1px 0 rgba(0,0,0,.6);
-    z-index: 1;
-    font-size: 1.44em !important;
-    vertical-align: middle;
-}
-
-.button[disabled] {
-    opacity: 0.5;
-}
-
-.toolbar_span>span {
-    display: inline-block;
-    position: absolute;
-    font-size: 7pt;
-    color: #ffffff;
-    text-align:center;
-    cursor: pointer;
-}
-
-#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*/
-#toolbar_button_chat.active, #contactListButton.glowing, #chatBottomButton.glowing {
-    -webkit-text-shadow:    -1px 0 10px #21B9FC,
-                            0 1px 10px #21B9FC,
-                            1px 0 10px #21B9FC,
-                            0 -1px 10px #21B9FC;
-    -moz-text-shadow:   1px 0 10px #21B9FC,
-                        0 1px 10px #21B9FC,
-                        1px 0 10px #21B9FC,
-                        0 -1px 10px #21B9FC;
-    text-shadow:    -1px 0 10px #21B9FC,
-                    0 1px 10px #21B9FC,
-                    1px 0 10px #21B9FC,
-                    0 -1px 10px #21B9FC;
-}
-
-#toolbar_button_hangup {
-    color: #ff0000;
-    font-size: 1.4em;
-}
-
-#numberOfParticipants {
-    position: absolute;
-    top: 0px;
-    right: -1px;
-    color: white;
-    width: 13px;
-    height: 13px;
-    line-height: 13px;
-    font-weight: bold;
-    border-radius: 1px;
-    font-size: 11px;
-    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
-}
-
-#contactListButton.active #numberOfParticipants {
-    color: #21B9FC;
-}
-
-#toolbar {
-    display:inline-block;
-    position:relative;
-    top:5px;
-    margin-left:auto;
-    margin-right:auto;
-    height:38px;
-    width:auto;
-    background-color: rgba(0,0,0,0.5);
-    border-radius: 1px;
-    pointer-events: auto;
-}
-
-#toolbar_button_record {
-    -webkit-transition: all .5s ease-in-out;
-    -moz-transition: all .5s ease-in-out;
-    transition: all .5s ease-in-out;
-}
-
-a.button:hover,
-a.bottomToolbarButton:hover {
-    cursor: pointer;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 1px;
-    -webkit-border-radius: 1px;
-}
-
 .no-fa-video-camera, .fa-microphone-slash {
     color: #636363;
 }
@@ -222,78 +93,10 @@ form {
     color: rgba(255,255,255,.50);
 }
 
-#feedbackButton {
-    position: absolute;
-    bottom: 60;
-    left: 60;
-    overflow: visible;
-    color: rgba(255,255,255,.50);
-}
-
-#feedbackButtonDiv {
-    display: none;
-    position: absolute;
-    background-color: rgba(0,0,0,.50);
-    border-radius: 50%;
-    width: 100px;
-    height: 100px;
-    bottom: -50px;
-    left: -50px;
-    z-index: 100;
-    overflow: hidden;
-    transition: all 2s ease-in-out;
-}
-
-#feedbackButtonDiv.hidden {
-    bottom: -246px;
-}
-
-div.feedbackButton:hover {
-    transform: scale(1.3);
-}
-
-#bottomToolbar {
-    display:block;
-    position: absolute;
-    right: 0;
-    margin-right: 5px;
-    bottom: 40px;
-    width: 29px;
-    border-radius: 1px;
-    color: #FFF;
-    background: rgba(0,0,0,0.5);
-    z-index: 6; /*+1 from #remoteVideos*/
-}
-
-.bottomToolbarButton {
-    display: inline-block;
-    position: relative;
-    color: #FFFFFF;
-    top: 0;
-    padding-top: 6px;
-    margin: 2px;
-    width: 25px;
-    height: 20px;
-    cursor: pointer;
-    font-size: 10pt;
-    text-align: center;
-    text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
-    z-index: 1;
-}
-
 .active {
     background-color: #00ccff;
 }
 
-.bottomToolbar_span>span {
-    display: inline-block;
-    position: absolute;
-    font-size: 7pt;
-    color: #ffffff;
-    text-align: center;
-    cursor: pointer;
-}
-
 .glow
 {
     text-shadow: 0px 0px 30px #06a5df, 0px 0px 10px #06a5df, 0px 0px 5px #06a5df,0px 0px 3px #06a5df;
@@ -381,3 +184,35 @@ div.feedbackButton:hover {
 .toast-message .nickname {
     font-weight: bold;
 }
+
+/**
+ * Hides an element.
+ */
+.hide {
+    display: none !important;
+}
+
+/**
+ * Shows an element.
+ */
+.show {
+    display: block !important;
+}
+
+/**
+ * Shows an inline element.
+ */
+.show-inline {
+    display: inline-block !important;
+}
+
+/**
+ * Shows a flex element.
+ */
+.show-flex {
+    display: -webkit-box !important;
+    display: -moz-box !important;
+    display: -ms-flexbox !important;
+    display: -webkit-flex !important;
+    display: flex !important;
+}

css/_chat.scss

@@ -1,9 +1,3 @@
-#chatspace {
-    display: none;
-    background-color: black;
-    border-left: 1px solid #424242;
-}
-
 #chatspace * {
     -webkit-user-select: text;
     user-select: text;
@@ -98,13 +92,6 @@
     position: absolute;
 }
 
-#bottomUnreadMessages {
-    top: 5px;
-    left: 10px;
-    position: absolute;
-    font-size: 8px;
-}
-
 #chatspace .username {
     float: left;
     padding-left: 5px;

css/_contact_list.scss

@@ -1,21 +1,6 @@
 #contactlist {
-    display: none;
-    background-color: black;
     cursor: default;
 
-    > div.title {
-        text-align: left;
-        padding: 7px 10px;
-        margin: 2px;
-        color: #21B9FC;
-        font-size: 11pt;
-        border-bottom: 1px solid #676767;
-
-        > span {
-            margin-left: 5px;
-        }
-    }
-
     > ul#contacts {
         position: absolute;
         top: 31px;
@@ -37,6 +22,7 @@
     >li {
         list-style-type: none;
         text-align: left;
+        white-space: nowrap;
         color: #FFF;
         font-size: 10pt;
         padding: 7px 10px;

css/_settingsmenu.scss

@@ -1,10 +1,3 @@
-#settingsmenu {
-    display: none;
-    background: black;
-    color: #21B9FC;
-    overflow-y: auto;
-}
-
 #settingsmenu input, select {
     margin-top: 10px;
     margin-left: 10%;
@@ -16,18 +9,6 @@
     color: #a7a7a7;
 }
 
-#settingsmenu>div.title {
-    text-align: left;
-    padding: 7px 10px;
-    margin: 2px;
-    font-size: 11pt;
-    border-bottom: 1px solid #676767;
-}
-
-#settingsmenu>div.title>span {
-    margin-left: 5px;
-}
-
 #settingsmenu .arrow-up {
     width: 0;
     height: 0;

css/_variables.scss

@@ -1,5 +1,10 @@
 /**
-*   Style variables
-*/
-
+ * Style variables
+ */
 $baseFontFamily: 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+/**
+ * Size variables.
+ */
+$defaultToolbarSize: 50px;
+

css/_videolayout_default.scss

@@ -141,10 +141,6 @@
     z-index: 0;
 }
 
-#toolbar_button_etherpad {
-    display: none;
-}
-
 #remoteVideos .videocontainer>span.focusindicator,
 #remoteVideos .videocontainer>div.remotevideomenu {
     position: absolute;
@@ -357,33 +353,6 @@
     z-index: 20; /*The reload button should appear on top of the header!*/
 }
 
-#header{
-    display:none;
-    position:absolute;
-    text-align:center;
-    top:0;
-    left:0;
-    right:0;
-    z-index:10;
-    pointer-events: none;
-    min-height: 100px;
-}
-
-#subject {
-    position: relative;
-    z-index: 3;
-    width: auto;
-    padding: 5px;
-    margin-left: 40%;
-    margin-right: 40%;
-    text-align: center;
-    background: linear-gradient(to bottom, rgba(255,255,255,.85) , rgba(255,255,255,.35));
-    box-shadow: 0 0 2px #000000, 0 0 10px #000000;
-    border-bottom-left-radius: 12px;
-    border-bottom-right-radius: 12px;
-    display: none;
-}
-
 .audiolevel {
     display: inline-block;
     position: absolute;

index.html

@@ -96,25 +96,12 @@
         <!--#include virtual="plugin.welcomepage.footer.html" -->
     </div>
     <div id="videoconference_page">
-        <div style="position: relative;" id="header_container">
-            <div id="header">
+        <div id="mainToolbarContainer">
                 <div id="notice" class="notice" style="display: none">
                     <span id="noticeText" class="noticeText"></span>
                 </div>
-                <span id="toolbar">
-                    <span id="authentication" class="authentication" style="display: none">
-                        <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"></li>
-                            <li id="toolbar_button_login">
-                                <a class="authButton" data-i18n="toolbar.login"></a>
-                            </li>
-                            <li id="toolbar_button_logout">
-                                <a class="authButton" data-i18n="toolbar.logout"></a>
-                            </li>
-                        </ul>
-                    </span>
+                <span id="mainToolbar" class="toolbar">
+                    <a class="button icon-share-desktop first" id="toolbar_button_desktopsharing" data-container="body" data-toggle="popover" data-placement="bottom" shortcut="toggleDesktopSharingPopover" content="Share screen" data-i18n="[content]toolbar.sharescreen" style="display: none"></a>
                     <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">
                         <ul id="micMutedPopup" class="loginmenu">
                             <li data-i18n="[html]toolbar.micMutedPopup"></li>
@@ -123,31 +110,51 @@
                             <li data-i18n="[html]toolbar.unableToUnmutePopup"></li>
                         </ul>
                     </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" id="toolbar_button_record" data-container="body" data-toggle="popover" data-placement="bottom" 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 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 fa fa-share-alt-square" id="toolbar_button_sharedvideo" data-container="body" data-toggle="popover" data-placement="bottom" content="Share a YouTube video" data-i18n="[content]toolbar.sharedvideo" style="display: none">
-                        <ul id="sharedVideoMutedPopup" class="loginmenu">
-                            <li data-i18n="[html]toolbar.sharedVideoMutedPopup"></li>
-                        </ul>
-                    </a>
-                    <a class="button icon-share-desktop" id="toolbar_button_desktopsharing" data-container="body" data-toggle="popover" data-placement="bottom" shortcut="toggleDesktopSharingPopover" 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>
+                    <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-full-screen last" 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>
-            </div>
-            <div id="subject"></div>
         </div>
+        <div id="subject" class="hide"></div>
+        <span id="extendedToolbar" class="toolbar">
+            <a class="button" data-container="body" data-placement="right" data-i18n="[content]toolbar.profile" content="Edit your profile">
+                <img id="avatar" src="images/avatar2.png"/>
+            </a>
+            <span id="authentication" class="authentication" style="display: none">
+                <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"></li>
+                    <li id="toolbar_button_login">
+                        <a class="authButton" data-i18n="toolbar.login"></a>
+                    </li>
+                    <li id="toolbar_button_logout">
+                        <a class="authButton" data-i18n="toolbar.logout"></a>
+                    </li>
+                </ul>
+            </span>
+            <a class="button icon-contactList" id="toolbar_contact_list" data-container="body" data-toggle="popover" data-placement="right" shortcut="contactlistpopover"  data-i18n="[content]bottomtoolbar.contactlist" content="Open / close contact list">
+                <span id="numberOfParticipants"></span>
+            </a>
+            <a class="button icon-chat" id="toolbar_button_chat" data-container="body" data-toggle="popover" shortcut="toggleChatPopover" data-placement="right" data-i18n="[content]toolbar.chat" content="Open / close chat">
+                <span id="unreadMessages"></span>
+            </a>
+            <a class="button" id="toolbar_button_record" data-container="body" data-toggle="popover" data-placement="right" style="display: none"></a>
+            <a class="button icon-security" id="toolbar_button_security" data-container="body" data-toggle="popover" data-placement="right" 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="right" data-i18n="[content]toolbar.invite" content="Invite others"></a>
+            <a class="button icon-share-doc" id="toolbar_button_etherpad" data-container="body" data-toggle="popover" data-placement="right" content="Shared document" data-i18n="[content]toolbar.etherpad"></a>
+            <a class="button fa fa-share-alt-square" id="toolbar_button_sharedvideo" data-container="body" data-toggle="popover" data-placement="right" content="Share a YouTube video" data-i18n="[content]toolbar.sharedvideo" style="display: none">
+                <ul id="sharedVideoMutedPopup" class="loginmenu">
+                    <li data-i18n="[html]toolbar.sharedVideoMutedPopup"></li>
+                </ul>
+            </a>
+            <a class="button icon-telephone" id="toolbar_button_sip" data-container="body" data-toggle="popover" data-placement="right" 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="right" 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="right" content="Settings" data-i18n="[content]toolbar.Settings"></a>
+            <a class="button icon-filmstrip" id="toolbar_film_strip" data-container="body" data-toggle="popover" shortcut="filmstripPopover" data-placement="right" data-i18n="[content]toolbar.filmstrip" content="Show / hide videos"></a>
+            <a class="button fa fa-heart" id="feedbackButton" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[content]feedback"></a>
+        </span>
         <div id="videospace">
-
             <div id="largeVideoContainer" class="videocontainer">
                 <div id="presentation"></div>
                 <div id="sharedVideo"><div id="sharedVideoIFrame"></div></div>
@@ -183,29 +190,9 @@
                 <audio id="userJoined" src="sounds/joined.wav" preload="auto"></audio>
                 <audio id="userLeft" src="sounds/left.wav" preload="auto"></audio>
             </div>
-            <span id="bottomToolbar">
-                <span class="bottomToolbar_span">
-                    <a class="bottomToolbarButton" id="bottom_toolbar_chat" data-container="body" data-toggle="popover" shortcut="toggleChatPopover" data-placement="top" data-i18n="[content]bottomtoolbar.chat" content="Open / close chat">
-                        <i id="chatBottomButton" class="icon-chat-simple">
-                            <span id="bottomUnreadMessages"></span>
-                        </i>
-                    </a>
-                </span>
-                <span class="bottomToolbar_span">
-                    <a class="bottomToolbarButton" id="bottom_toolbar_contact_list" data-container="body" data-toggle="popover" data-placement="top" id="contactlistpopover"  data-i18n="[content]bottomtoolbar.contactlist" content="Open / close contact list">
-                        <i id="contactListButton" class="icon-contactList">
-                            <span id="numberOfParticipants"></span>
-                        </i>
-                    </a>
-                </span>
-                <span class="bottomToolbar_span">
-                    <a class="bottomToolbarButton" id="bottom_toolbar_film_strip" data-container="body" data-toggle="popover" shortcut="filmstripPopover" data-placement="top" data-i18n="[content]bottomtoolbar.filmstrip" content="Show / hide film strip">
-                        <i id="filmStripButton" class="icon-filmstrip"></i>
-                    </a>
-                </span>
-            </span>
         </div>
-        <div id="chatspace" class="right-panel" style="display:none;">
+        <div id="extendedToolbarPanel">
+            <div id="chatspace" class="extendedToolbarPanel__inner">
             <div id="nickname">
                 <span data-i18n="chat.nickname.title"></span>
                 <form>
@@ -222,19 +209,12 @@
                 </div>
             </div>
         </div>
-        <div id="contactlist" class="right-panel" style="display:none;">
-            <div class="title">
-                <i class="icon-contactList"></i>
-                <span data-i18n="contactlist"></span>
-            </div>
+        <div id="contactlist" class="extendedToolbarPanel__inner">
+            <div class="title" data-i18n="contactlist"></div>
             <ul id="contacts"></ul>
         </div>
-        <div id="settingsmenu" class="right-panel" style="display:none;">
-            <div class="title">
-                <i class="icon-settings"></i>
-                <span data-i18n="settings.title"></span>
-            </div>
-            <img id="avatar" src="images/avatar2.png"/>
+        <div id="settingsmenu" class="extendedToolbarPanel__inner">
+            <div class="title" data-i18n="settings.title"></div>
             <div class="arrow-up"></div>
             <input type="text" id="setDisplayName" data-i18n="[placeholder]settings.name" placeholder="Name">
             <input type="text" id="setEmail" placeholder="E-Mail">
@@ -271,8 +251,6 @@
             </div>
             <a id="downloadlog" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[data-content]downloadlogs" ><i class="fa fa-cloud-download"></i></a>
         </div>
-        <div id="feedbackButtonDiv">
-            <a id="feedbackButton" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[data-content]feedback"><i class="fa fa-heart"></i></a>
         </div>
     </div>
     <div id="keyboard-shortcuts" class="keyboard-shortcuts" style="display:none;">

lang/main.json

@@ -1,5 +1,5 @@
 {
-    "contactlist": "CONTACT LIST",
+    "contactlist": "On Call (__participants__)",
     "connectionsettings": "Connection Settings",
     "poweredby": "powered by",
     "downloadlogs": "Download logs",
@@ -27,7 +27,7 @@
         "raiseHand": "Raise your hand.",
         "pushToTalk": "Push to talk.",
         "toggleScreensharing": "Switch between camera and screensharing.",
-        "toggleFilmstrip": "Show or hide the filmstrip.",
+        "toggleFilmstrip": "Show or hide the videos.",
         "toggleShortcuts": "Show or hide this help menu.",
         "focusLocal": "Focus on the local video.",
         "focusRemote": "Focus on one of the remote videos.",
@@ -97,7 +97,7 @@
     },
     "bottomtoolbar": {
         "chat": "Open / close chat",
-        "filmstrip": "Show / hide film strip",
+        "filmstrip": "Show / hide videos",
         "contactlist": "Open / close contact list"
     },
     "chat":{
@@ -109,7 +109,7 @@
     },
     "settings":
     {
-        "title": "SETTINGS",
+        "title": "Settings",
         "update": "Update",
         "name": "Name",
         "startAudioMuted": "Start without audio",