Merge pull request #851 from jitsi/ui-redesign-in-progress

Ui redesign in progress

css/_base.scss

@@ -6,8 +6,8 @@
 html, body{
     margin:0px;
     height:100%;
-    color: #424242;
-    font-size: 14px;
+    color: $defaultColor;
+    font-size: 12px;
     font-weight: 400;
     background: #000000;
     overflow: hidden;
@@ -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;
 }
@@ -158,25 +29,17 @@ input[type='text'], input[type='password'], textarea {
     -webkit-user-select: text;
     user-select: text;
     display: inline-block;
-    font-size: 14px;
     padding: 5px;
-    background: #f3f3f3;
-    border-radius: 3px;
-    font-weight: 100;
-    line-height: 20px;
-    height: 40px;
-    color: #333;
+    color: $defaultDarkColor;
+    border-radius: $borderRadius;
+    line-height: 32px;
+    height: 32px;
     text-align: left;
-    border:1px solid #ACD8F0;
+    border:1px solid $inputBorderColor;
     outline: none; /* removes the default outline */
     resize: none; /* prevents the user-resizing, adjust to taste */
 }
 
-input[type='text'], input[type='password'], textarea:focus {
-    box-shadow: inset 0 0 3px 2px #ACD8F0; /* provides a more style-able
-                                         replacement to the outline */
-}
-
 textarea {
     overflow: hidden;
     word-wrap: break-word;
@@ -187,28 +50,33 @@ button.no-icon {
     padding: 0 1em;
 }
 
-button {
-    border: none;
-    height: 35px;
-    padding: 0 1em 0 2em;
-    position: relative;
-    border-radius: 1px;
-    font-weight: bold;
-    color: #fff;
-    line-height: 35px;
-    background: #2c8ad2;
-}
-
 button, input, select, textarea {
     margin: 0;
     vertical-align: baseline;
+    color: $defaultDarkColor;
+    background: $inputLightBackground;
+    font-size: 12px;
+    border: none;
+    box-shadow: none;
+    outline: none;
 }
 
-button, input[type="button"], input[type="reset"], input[type="submit"] {
+button, select, input[type="button"],
+input[type="reset"], input[type="submit"] {
+    height: 32px;
+    line-height: 32px;
+    padding-left: 4px;
+    padding-right: 4px;
     cursor: pointer;
-    -webkit-appearance: button;
 }
 
+button {
+    color: #FFF;
+    background-color: $buttonBackground !important;
+    border-radius: $borderRadius;
+}
+
+button,
 form {
     display: block;
 }
@@ -222,78 +90,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;
@@ -312,7 +112,8 @@ div.feedbackButton:hover {
 
 .leftwatermark {
     display: none;
-    left: 15;
+    left: $defaultToolbarSize;
+    margin-left: 10px;
     background-image:url(../images/watermark.png);
     background-position: center left;
 }
@@ -334,32 +135,6 @@ div.feedbackButton:hover {
     z-index: 100;
 }
 
-#toast-container.notification-bottom-right {
-    bottom: 140px;
-    right: 5px;
-}
-
-#toast-container.notification-bottom-right-center {
-    right: 205px;
-}
-
-#toast-container .toast-info {
-    -webkit-box-shadow: none;
-    box-shadow: none;
-}
-
-.toast-close-button {
-    right: -7px;
-    top: -19px;
-}
-
-#toast-container .toast-info {
-    background-color: black;
-    border: 1px solid #3a3a3a;
-    width: 220px;
-    padding: 10px 10px 10px 50px;
-}
-
 .connected {
     color: #21B9FC;
     font-size: 12px;
@@ -370,14 +145,34 @@ div.feedbackButton:hover {
     font-size: 12px;
 }
 
-.toast-close-button:hover,
-.toast-close-button:focus {
-    color: #ffffff;
-    opacity: 1;
-    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
-    filter: alpha(opacity=100);
+/**
+ * Hides an element.
+ */
+.hide {
+    display: none !important;
 }
 
-.toast-message .nickname {
-    font-weight: bold;
+/**
+ * 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,10 +1,4 @@
-#chatspace {
-    display: none;
-    background-color: black;
-    border-left: 1px solid #424242;
-}
-
-#chatspace * {
+#chat_container * {
     -webkit-user-select: text;
     user-select: text;
 }
@@ -22,8 +16,25 @@
     overflow-y: scroll;
     overflow-x: hidden;
     word-wrap: break-word;
+
+    a:link {
+        color: rgb(184, 184, 184);
+    }
+
+    a:visited {
+        color: white;
+    }
+
+    a:hover {
+        color: rgb(213, 213, 213);
+    }
+
+    a:active {
+        color: black;
+    }
 }
-#chatspace.is-conversation-mode #chatconversation {
+
+#chat_container.is-conversation-mode #chatconversation {
     visibility: visible;
 }
 
@@ -65,7 +76,7 @@
     box-shadow: none;
 }
 
-#chatspace.is-conversation-mode #usermsg {
+#chat_container.is-conversation-mode #usermsg {
     visibility: visible;
 }
 
@@ -80,7 +91,7 @@
     width: 95%;
 }
 
-#chatspace.is-conversation-mode #nickname {
+#chat_container.is-conversation-mode #nickname {
     visibility: hidden;
 }
 
@@ -98,26 +109,19 @@
     position: absolute;
 }
 
-#bottomUnreadMessages {
-    top: 5px;
-    left: 10px;
-    position: absolute;
-    font-size: 8px;
-}
-
-#chatspace .username {
+#chat_container .username {
     float: left;
     padding-left: 5px;
     font-weight: bold;
 }
 
-#chatspace .timestamp {
+#chat_container .timestamp {
     float: right;
     padding-right: 5px;
     font-size: 11px;
 }
 
-#chatspace .usermessage {
+#chat_container .usermessage {
     padding-top: 20px;
     padding-left: 5px;
 }
@@ -178,7 +182,7 @@
     visibility: hidden;
 }
 
-#chatspace.is-conversation-mode #smileysarea {
+#chat_container.is-conversation-mode #smileysarea {
     visibility: visible;
 }
 
@@ -234,20 +238,4 @@
 
 #usermsg::-webkit-scrollbar-track-piece {
     background: #3a3a3a;
-}
-
-a:link {
-    color: rgb(184, 184, 184);
-}
-
-a:visited {
-    color: white;
-}
-
-a:hover {
-    color: rgb(213, 213, 213);
-}
-
-a:active {
-    color: black;
 }

css/_contact_list.scss

@@ -1,21 +1,6 @@
-#contactlist {
-    display: none;
-    background-color: black;
+#contacts_container {
     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,11 +22,17 @@
     >li {
         list-style-type: none;
         text-align: left;
+        white-space: nowrap;
         color: #FFF;
         font-size: 10pt;
         padding: 7px 10px;
         margin: 2px;
 
+        &:hover,
+        &:active {
+            background: $toolbarSelectBackground;
+        }
+
         > p {
             display: inline-block;
             vertical-align: middle;

css/_device_settings_dialog.scss

@@ -0,0 +1,31 @@
+.settingsContent {
+    display: flex;
+    display: -webkit-flex;
+
+    #localVideoPreview {
+        width: 50%;
+        align-self: baseline;
+    }
+
+    .deviceSelection {
+        display: flex;
+        display: -webkit-flex;
+        -webkit-flex: 1;
+        flex: 1;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        align-items: left;
+        margin-left: 10px;
+
+        .device {
+            display: flex;
+            margin-bottom: 5px;
+
+            select {
+                flex: 1;
+                margin_right: 5px;
+            }
+        }
+    }
+}

css/_font.scss

@@ -1,15 +1,3 @@
-@font-face {
-    font-family: 'open_sanslight';
-    src: url('../fonts/OpenSans-Light-webfont.eot');
-    src: url('../fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
-    url('../fonts/OpenSans-Light-webfont.woff') format('woff'),
-    url('../fonts/OpenSans-Light-webfont.ttf') format('truetype'),
-    url('../fonts/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
-    font-weight: normal;
-    font-style: normal;
-
-}
-
 @font-face {
     font-family: 'jitsi';
     src:url('../fonts/jitsi.eot?94d075');
@@ -36,100 +24,105 @@
     -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-contactList:before {
-    content: "\e615";
+.icon-feedback:before {
+  content: "\e91d";
 }
-.icon-avatar:before {
-    content: "\e616";
+.icon-toggle-filmstrip:before {
+  content: "\e91c";
 }
-.icon-callRetro:before {
-    content: "\e611";
+.icon-avatar:before {
+  content: "\e901";
 }
-.icon-callModern:before {
-    content: "\e612";
+.icon-autorenew:before {
+  content: "\e903";
 }
-.icon-recDisable:before {
-    content: "\e613";
+.icon-hangup:before {
+  content: "\e905";
 }
-.icon-recEnable:before {
-    content: "\e614";
+.icon-chat:before {
+  content: "\e906";
 }
-.icon-authenticate:before {
-    content: "\e1ae";
+.icon-download:before {
+  content: "\e902";
 }
-.icon-kick1:before {
-    content: "\e60f";
+.icon-edit:before {
+  content: "\e907";
 }
-.icon-kick:before {
-    content: "\e610";
+.icon-share-doc:before {
+  content: "\e908";
 }
-.icon-share-desktop:before {
-	content: "\e602";
+.icon-telephone:before {
+  content: "\e909";
 }
-.icon-chat-simple:before {
-	content: "\e606";
+.icon-kick:before {
+  content: "\e904";
 }
 .icon-full-screen:before {
-	content: "\e60d";
+  content: "\e90b";
 }
 .icon-exit-full-screen:before {
-	content: "\e60e";
+  content: "\e90c";
 }
-.icon-link:before {
-	content: "\e600";
+.icon-star-full:before {
+  content: "\e90a";
 }
-.icon-chat:before {
-	content: "\e601";
+.icon-security:before {
+  content: "\e90d";
 }
-.icon-presentation:before {
-	content: "\e603";
+.icon-security-locked:before {
+  content: "\e90e";
 }
-.icon-security:before {
-	content: "\e604";
+.icon-reload:before {
+  content: "\e90f";
 }
-.icon-share-doc:before {
-	content: "\e605";
+.icon-microphone:before {
+  content: "\e910";
 }
-.icon-telephone:before {
-    content: "\e611";
+.icon-mic-empty:before {
+  content: "\e911";
 }
-.icon-security-locked:before {
-	content: "\e607";
+.icon-mic-disabled:before {
+  content: "\e912";
 }
-.icon-camera:before {
-	content: "\e608";
+.icon-contactList:before {
+  content: "\e91b";
 }
-.icon-camera-disabled:before {
-	content: "\e609";
+.icon-link:before {
+  content: "\e913";
 }
-.icon-mic-disabled:before {
-	content: "\e60a";
+.icon-shared-video:before {
+  content: "\e914";
 }
-.icon-microphone:before {
-	content: "\e60b";
+.icon-settings:before {
+  content: "\e915";
 }
-
-.icon-hangup:before {
-    content: "\e617";
+.icon-star:before {
+  content: "\e916";
 }
-
-.icon-reload:before {
-    content: "\e618";
+.icon-share-desktop:before {
+  content: "\e917";
 }
-
-.icon-filmstrip:before {
-    content: "\e619";
+.icon-camera:before {
+  content: "\e918";
+}
+.icon-camera-disabled:before {
+  content: "\e919";
+}
+.icon-volume:before {
+  content: "\e91a";
+}
+.icon-connection-lost:before {
+  content: "\e900";
 }
-
 .icon-connection:before {
-    line-height: normal;
-    content: "\e61a";
+  content: "\e61a";
 }
-
-.icon-settings:before {
-    content: "\e61b";
+.icon-recDisable:before {
+  content: "\e613";
 }
-
-.icon-dialPad:before {
-    content: "\e61c";
+.icon-recEnable:before {
+  content: "\e614";
 }
+.icon-presentation:before {
+  content: "\e603";
+}

css/_jquery-impromptu.scss

@@ -55,7 +55,7 @@ div.jqi .jqibuttons{
 div.jqi .jqibuttons button{ 
 	margin: 0;
 	padding: 5px 20px;
-	background-color: transparent;
+	background-color: transparent !important;
 	font-weight: normal; 
 	border: none;
 	border-left: solid 1px #e4e4e4; 

css/_keyboard-shortcuts.scss

@@ -2,11 +2,12 @@
     display: none;
     position: absolute;
     bottom: 20px;
-    left: 20px;
+    left: $defaultToolbarSize;
     overflow: hidden;
     padding: 20px;
+    margin-left: 10px;
     z-index: 10;
-    border-radius: 15px;
+    border-radius: $borderRadius;
     background-attachment: scroll;
     background-size: auto auto;
     color: rgba(255, 255, 255, .8);

css/_login_menu.scss

@@ -1,6 +1,7 @@
 /*Initialize*/
 ul.loginmenu {
-    font-family: inherit;
+    font-family: $baseFontFamily;
+    line-height: normal;
     display:none;
     position: absolute;
     margin: 0;
@@ -44,6 +45,10 @@ span.authentication:hover ul.loginmenu, ul.loginmenu:hover {
     display:block !important;
 }
 
+span.authentication {
+    position: relative;
+}
+
 a.disabled {
     color: gray !important;
     pointer-events: none;
@@ -55,4 +60,17 @@ a.disabled {
     position: absolute;
     top: -30px;
     left: 0px;
-}
+}
+
+.loginmenu.extendedToolbarPopup {
+    left: 55px;
+    top: 0px;
+}
+
+ul.loginmenu.extendedToolbarPopup:after {
+    content: url('../images/leftDropdownPointer.png');
+    display: block;
+    position: absolute;
+    top: 18px;
+    left: -7px;
+}

css/_mixins.scss

@@ -0,0 +1,37 @@
+/**
+ * Animation mixin.
+ */
+@mixin animation($animate...) {
+  $max: length($animate);
+  $animations: '';
+
+  @for $i from 1 through $max {
+    $animations: #{$animations + nth($animate, $i)};
+
+    @if $i < $max {
+      $animations: #{$animations + ", "};
+    }
+  }
+  -webkit-animation: $animations;
+  -moz-animation:    $animations;
+  -o-animation:      $animations;
+  animation:         $animations;
+}
+
+/**
+ * Keyframes mixin.
+ */
+@mixin keyframes($animationName) {
+  @-webkit-keyframes #{$animationName} {
+    @content;
+  }
+  @-moz-keyframes #{$animationName} {
+    @content;
+  }
+  @-o-keyframes #{$animationName} {
+    @content;
+  }
+  @keyframes #{$animationName} {
+    @content;
+  }
+}

css/_settingsmenu.scss

@@ -1,96 +0,0 @@
-#settingsmenu {
-    display: none;
-    background: black;
-    color: #21B9FC;
-    overflow-y: auto;
-}
-
-#settingsmenu input, select {
-    margin-top: 10px;
-    margin-left: 10%;
-    width: 80%;
-    font-size: 14px;
-    background: #3a3a3a;
-    border: none;
-    box-shadow: none;
-    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;
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-    border-bottom: 5px solid #3a3a3a;
-    position: relative;
-    top: 10px;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-#settingsmenu #avatar {
-    width: 24%;
-    left: 38%;
-    border-radius: 25px;
-    position: relative;
-}
-
-#languages_selectbox {
-    height: 40px;
-    cursor: pointer;
-}
-
-#startMutedOptions,
-#followMeOptions {
-    padding-left: 10%;
-    text-indent: -10%;
-    margin-top: 10px;
-    display: none; /* hide by default */
-    /* clearfix */
-    overflow: auto;
-    zoom: 1;
-}
-
-#startAudioMuted,
-#startVideoMuted,
-#followMeCheckBox {
-    width: 13px !important;
-}
-
-.startMutedLabel,
-.followMeLabel {
-    width: 94%;
-    float: left;
-    cursor: pointer;
-}
-
-#devicesOptions {
-    display: none;
-    margin-top: 10px;
-}
-
-#devicesOptions label {
-    display: block;
-    margin-top: 15px;
-}
-
-#devicesOptions span {
-    padding-left: 10%;
-}
-
-#devicesOptions select {
-    height: 40px;
-    cursor: pointer;
-}

css/_side_toolbar_container.css

@@ -0,0 +1,114 @@
+/**
+ * Toolbar side panel main container element.
+ */
+#sideToolbarContainer {
+    display: inline-block;
+    position:absolute;
+    top: 0px;
+    left: $defaultToolbarSize;
+    width: 0%;
+    height: 100%;
+    max-width: 200px;
+    background-color: rgba(0,0,0,0.8);
+    z-index: 800;
+    overflow: hidden;
+
+    /**
+     * Labels inside the side panel.
+     */
+    label {
+        color: $defaultSemiDarkColor;
+    }
+
+    /**
+     * Form elements and blocks.
+     */
+    input, label, select, button, a, .sideToolbarBlock {
+        display: inline-block;
+        margin-top: 15px;
+        margin-left: 10%;
+        width: 80%;
+    }
+
+    /**
+     * Specify colors for edit elements.
+     */
+    select, input[type="button"], input[type="text"],
+    input[type="reset"], input[type="submit"] {
+        color: $defaultColor;
+        background: $inputBackground;
+        border: none;
+    }
+
+    /**
+     * Specify styling of elements inside a block.
+     */
+    .sideToolbarBlock {
+        input, label, button, a, select {
+            margin-top: 5px;
+            margin-left: 0;
+            width: 100%;
+        }
+
+        .startMutedLabel,
+        .followMeLabel {
+            display: inline;
+            margin-top: 0;
+        }
+    }
+
+    /**
+     * Inner container, for example contact list, settings or profile.
+     */
+    .sideToolbarContainer__inner {
+        display: none;
+        width: 200px;
+        color: #FFF;
+
+        /**
+         * Titles and subtitles of inner containers.
+         */
+        > div.title,
+          div.subTitle {
+            color: $defaultColor !important;
+            text-align: left;
+            margin: 10px 0px 10px 0px;
+            padding: 5px 10px 5px 10px;
+        }
+
+        /**
+         * Main title size.
+         */
+        > div.title {
+            font-size: 16px;
+        }
+
+        /**
+         * Subtitle specific properties.
+         */
+        > div.subTitle {
+            font-size: 12px;
+            background: $inputSemiBackground !important;
+            margin-top: 20px !important;
+            margin-bottom: 8px !important;
+        }
+
+        /**
+         * First element after a title.
+         */
+        .first {
+            margin-top: 0px !important;
+        }
+    }
+}
+
+#device_settings {
+    width : auto !important;
+    text-align: center;
+}
+
+#startAudioMuted,
+#startVideoMuted,
+#followMeCheckBox {
+    width: 13px !important;
+}

css/_toastr.scss

@@ -19,32 +19,42 @@
 .toast-message label {
   color: #ffffff;
 }
+
+.toast-message .nickname {
+  font-weight: bold;
+}
+
 .toast-message a:hover {
   color: #cccccc;
   text-decoration: none;
 }
+
 .toast-close-button {
   position: relative;
   right: -0.3em;
   top: -0.3em;
   float: right;
-  font-size: 20px;
+  font-size: 15px;
+  height: 15px;
+  width: 15px;
   font-weight: bold;
   color: #ffffff;
+  background: transparent !important;
   -webkit-text-shadow: 0 1px 0 #ffffff;
   text-shadow: 0 1px 0 #ffffff;
   opacity: 0.8;
   -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
   filter: alpha(opacity=80);
 }
+
 .toast-close-button:hover,
 .toast-close-button:focus {
-  color: #000000;
+  color: #ffffff;
   text-decoration: none;
   cursor: pointer;
-  opacity: 0.4;
-  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
-  filter: alpha(opacity=40);
+  opacity: 1;
+  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+  filter: alpha(opacity=100);
 }
 /*Additional properties for button version
  iOS requires the button element instead of an anchor tag.
@@ -173,4 +183,30 @@ button.toast-close-button {
     padding: 15px 15px 15px 15px;
     width: 25em;
   }
+}
+
+#toast-container.notification-bottom-right {
+  bottom: 140px;
+  right: 5px;
+}
+
+#toast-container.notification-bottom-right-center {
+  right: 205px;
+}
+
+#toast-container .toast-info {
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.toast-close-button {
+  right: -7px;
+  top: -19px;
+}
+
+#toast-container .toast-info {
+  background-color: black;
+  border: 1px solid #3a3a3a;
+  width: 220px;
+  padding: 10px 10px 10px 50px;
 }

css/_toolbars.scss

@@ -0,0 +1,224 @@
+.toolbar {
+    background-color: rgba(0,0,0,0.5);
+    position: relative;
+    z-index: $toolbarZ;
+    height: 100%;
+    pointer-events: auto;
+}
+
+#mainToolbarContainer{
+    display: block;
+    position: absolute;
+    text-align: center;
+    top:0;
+    left:0;
+    right:0;
+    z-index: $toolbarZ;
+    pointer-events: none;
+    min-height: 100px;
+    transform: translateY(-100%);
+    -webkit-transform: translateY(-100%);
+}
+
+#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;
+}
+
+#mainToolbar {
+    height: $defaultToolbarSize;
+    display: inline-block;
+    position: relative;
+    top: 30px;
+    margin-left: auto;
+    margin-right: auto;
+    width: auto;
+    border-radius: 4px;
+
+    .first {
+        border-bottom-left-radius: 4px;
+        border-top-left-radius: 4px;
+    }
+
+    .last {
+        border-bottom-right-radius: 4px;
+        border-top-right-radius: 4px;
+    }
+}
+
+#extendedToolbar {
+    display: flex;
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    width: $defaultToolbarSize;
+    height: 100%;
+    top: 0px;
+    left: 0px;
+    padding-top: 10px;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+    transform: translateX(-100%);
+    -webkit-transform: translateX(-100%);
+}
+
+#toolbar_button_hangup {
+    color: #BF2117;
+    font-size: $hangupFontSize !important;
+}
+
+#toolbar_button_etherpad {
+    display: none;
+}
+
+#numberOfParticipants {
+  position: absolute;
+  top: 5px;
+  line-height: 13px;
+  font-weight: bold;
+  font-size: 11px;
+}
+
+#mainToolbar a.button:last-child::after {
+    content: none;
+}
+
+.button {
+    display: inline-block;
+    position: relative;
+    color: #FFFFFF;
+    top:0px;
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+    text-align: center;
+    z-index: 1;
+    font-size: $toolbarFontSize !important;
+    line-height: 50px !important;
+    vertical-align: middle;
+}
+
+.button[disabled] {
+    opacity: 0.5;
+}
+
+a.button:hover,
+a.button:active,
+a.button.selected {
+    cursor: pointer;
+    // sum opacity with background layer should give us 0.8
+    background: $toolbarSelectBackground;
+}
+
+a.button>#avatar {
+    width: 30px;
+    border-radius: 50%;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+#feedbackButton {
+    margin-top: auto;
+}
+
+/**
+ * START of slide in animation for extended toolbar.
+ */
+@include keyframes(slideInX) {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(0%); }
+}
+
+.slideInX {
+  @include animation('slideInX .5s forwards');
+}
+
+@include keyframes(slideOutX) {
+  0% { transform: translateX(0%); }
+  100% { transform: translateX(-100%); }
+}
+
+.slideOutX {
+  @include animation('slideOutX .5s forwards');
+}
+
+@include keyframes(slideInExtX) {
+    0% { transform: translateX(-500%); }
+    100% { transform: translateX(0%); }
+}
+
+.slideInExtX {
+  @include animation('slideInExtX .5s forwards');
+}
+
+@include keyframes(slideOutExtX) {
+    0% { transform: translateX(0%); }
+    100% { transform: translateX(-500%); }
+}
+
+.slideOutExtX {
+  @include animation('slideOutExtX .5s forwards');
+}
+
+/**
+ * END of slide out animation for extended toolbar.
+ */
+
+/**
+ * START of slide in / out animation for main toolbar.
+ */
+@include keyframes(slideInY) {
+    100% { transform: translateY(0%); }
+}
+
+.slideInY {
+  @include animation('slideInY .5s forwards');
+}
+
+@include keyframes(slideOutY) {
+    0% { transform: translateY(0%); }
+    100% { transform: translateY(-100%); }
+}
+
+.slideOutY {
+    @include animation('slideOutY .5s forwards');
+}
+/**
+ * END of slide in / out animation for main toolbar.
+ */
+
+/**
+ * START of slide in animation for extended toolbar panel.
+ */
+@include keyframes(slideInExt) {
+    from { width: 0px; }
+    to   { width: 200px; } // TO FIX: Make this value a percentage.
+}
+
+.slideInExt {
+    @include animation("slideInExt .5s forwards");
+}
+
+@include keyframes(slideOutExt) {
+  from { width: 200px; } // TO FIX: Make this value a percentage.
+  to   { width: 0px; }
+}
+
+.slideOutExt {
+  @include animation("slideOutExt .5s forwards");
+}
+/**
+ * END of slide in animation for extended toolbar panel.
+ */

css/_variables.scss

@@ -1,5 +1,36 @@
 /**
-*   Style variables
-*/
-
+ * Style variables
+ */
 $baseFontFamily: 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$toolbarFontSize: 1.9em;
+$hangupFontSize: 2em;
+
+/**
+ * Size variables.
+ */
+$defaultToolbarSize: 50px;
+
+/**
+ * Color variables.
+ */
+$defaultColor: #F1F1F1;
+$defaultSemiDarkColor: #ACACAC;
+$defaultDarkColor: #4F4F4F;
+$defaultBackground: #474747;
+$toolbarSelectBackground: rgba(0, 0, 0, .6);
+$inputBackground: rgba(132, 132, 132, .5);
+$inputSemiBackground: rgba(132, 132, 132, .8);
+$inputLightBackground: #EBEBEB;
+$inputBorderColor: #EBEBEB;
+$buttonBackground: #44A5FF;
+
+/**
+ * Misc.
+ */
+$borderRadius: 4px;
+
+/**
+ * Z-indexes. TODO: Replace this by a function.
+ */
+$toolbarZ: 900;
+$overlayZ: 800;

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;

css/_welcome_page.scss

@@ -1,4 +1,3 @@
-
 #disable_welcome {
     display:none;
 }
@@ -59,6 +58,7 @@
     font-size: 18px;
     font-weight: 500;
     padding-left: 20px;
+    color: $defaultDarkColor;
 }
 
 #enter_room_field {
@@ -188,9 +188,9 @@
 #reload_roomname
 {
     width: 30px;
-    height: 19px;
     color: #acacac;
-    margin-top: 22px;
+    font-size: 1.9em;
+    line-height: 55px;
     z-index: 3;
     float:  left;
     cursor: pointer;

css/main.scss

@@ -4,6 +4,12 @@
 
 /* Variables END */
 
+/* Mixins BEGIN */
+
+@import "mixins";
+
+/* Mixins END */
+
 /* Fonts BEGIN */
 
 @import 'font';
@@ -15,7 +21,7 @@
 
 @import 'toastr';
 @import 'base';
-@import 'overlay';
+@import 'overlay/overlay';
 @import 'videolayout_default';
 @import 'jquery-impromptu';
 @import 'modaldialog';
@@ -27,8 +33,11 @@
 @import 'jitsi_popover';
 @import 'contact_list';
 @import 'chat';
+@import 'ringing/ringing';
 @import 'welcome_page';
-@import 'settingsmenu';
+@import 'toolbars';
+@import 'side_toolbar_container';
+@import 'device_settings_dialog';
 @import 'feedback';
 @import 'jquery.contextMenu';
 @import 'keyboard-shortcuts';

css/_overlay.scss → css/overlay/_overlay.scss

@@ -1,11 +1,10 @@
-
 .overlay {
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
-    z-index: 1013;
+    z-index: $overlayZ;
     background: #21B9FC; /* Old browsers */
     opacity: 0.75;
     display: block;
@@ -19,7 +18,7 @@
     width: 100%;
     height: 100%;
     position: fixed;
-    z-index: 1013;
+    z-index: $overlayZ;
 }
 
 .overlay_content {
@@ -36,23 +35,6 @@
     margin-left: -200px;
 }
 
-.overlay_avatar {
-    width: 200px;
-    height: 200px;
-    position: relative;
-    border-radius: 100px;
-    z-index: 1013;
-    float: left;
-    margin-left: 100px;
-}
-
-.overlay_text {
-    position: relative;
-    width: 400px;
-    z-index: 1013;
-    margin-top: 50px;
-    float: left;
-}
 
 .overlay_text_small {
     font-size: 18px;

css/ringing/_ringing.scss

@@ -0,0 +1,37 @@
+.ringing {
+    display: block;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    z-index: $overlayZ;
+    //background: linear-gradient(transparent, #000);
+    background: $defaultBackground; /* Old browsers */
+    opacity: 0.8;
+
+    &__content {
+        position: absolute;
+        width: 400px;
+        height: 250px;
+        left: 50%;
+        top: 50%;
+        margin-left: -200px;
+        margin-top: -125px;
+        font-weight: 400;
+        font-size: 14px;
+        text-align: center;
+    }
+
+    &__avatar {
+        width: 100px;
+        height: 100px;
+        border-radius: 50%;
+    }
+
+    &__caller-info {
+        .mention {
+            color: #333;
+        }
+    }
+}

fonts/jitsi.svg

@@ -4,36 +4,41 @@
 <metadata>Generated by IcoMoon</metadata>
 <defs>
 <font id="jitsi" horiz-adv-x="1024">
-<font-face units-per-em="1024" ascent="960" descent="-64" />
+<font-face units-per-em="1024" ascent="1024" descent="0" />
 <missing-glyph horiz-adv-x="1024" />
-<glyph unicode="&#x20;" d="" horiz-adv-x="512" />
-<glyph unicode="&#xe600;" d="M831.678 16.386h-144.885v258.653c-45.729 29.159-41.794 84.953-24.574 109.307 11.939 16.905 22.43 34.662 23.663 57.004 0.423 8.241 8.303 19.031 15.847 23.364 26.122 15.037 38.223 39.632 50.12 65.116 3.143 6.714 7.392 13.187 12.3 18.753 8.471 9.686 12.295 19.264 6.115 31.922-1.466 2.972 1.318 8.326 2.779 12.362 4.335 12.106 10.326 23.745 13.169 36.148 3.522 15.399 5.398 31.305 6.244 47.086 0.379 6.543-6.074 13.574-5.351 19.986 3.486 32.030-14.612 56.346-24.785 84.189-12.509 34.28-37.036 55.732-58.681 81.26-4.074 4.843-5.225 13.125-5.563 19.942-0.722 14.63-6.752 21.875-22.048 19.898-6.161-0.805-12.808-2.526-18.474-1.019-4.969 1.316-12.408 6.288-12.702 10.13-1.553 19.393-8.285 22.577-28.098 19.305-12.406-2.062-28.527 9.134-40.677 17.587-10.15 7.049-18.941 10.065-30.751 7.175-4.928-1.187-11.598-0.973-15.716 1.466-4.461 2.634-8.837 4.226-13.169 5.119v0.722c-0.975 0-1.976-0.17-2.934-0.276-0.975 0.106-1.951 0.276-2.908 0.276v-0.722c-4.355-0.893-8.726-2.485-13.169-5.119-4.167-2.441-10.811-2.652-15.718-1.466-11.851 2.89-20.598-0.126-30.751-7.175-12.212-8.453-28.287-19.648-40.671-17.587-19.816 3.272-26.591 0.085-28.119-19.305-0.299-3.844-7.73-8.816-12.7-10.13-5.692-1.509-12.32 0.212-18.497 1.019-15.27 1.976-21.302-5.269-22.024-19.898-0.338-6.819-1.486-15.102-5.565-19.942-21.622-25.528-46.154-46.98-58.684-81.26-10.171-27.843-28.271-52.161-24.765-84.189 0.699-6.412-5.736-13.443-5.395-19.986 0.87-15.78 2.74-31.687 6.267-47.086 2.843-12.403 8.835-24.042 13.187-36.148 1.466-4.033 4.229-9.387 2.784-12.362-6.203-12.658-2.379-22.236 6.115-31.922 4.887-5.565 9.134-12.039 12.277-18.753 11.874-25.484 24.001-50.079 50.125-65.116 7.516-4.332 15.417-15.122 15.863-23.364 1.21-22.342 11.701-40.099 23.64-57.004 18.33-25.954 21.194-86.95-34.216-114.687-76.673-38.336-154.083-75.357-232.624-109.632-49.189-21.498-73.891-57.6-82.238-108.192-2.549-15.331-5.862-30.539-7.88-45.961-3.014-22.956-7.839-69.874-7.839-69.874h831.678v80.386zM1188.556 80.89h-144.89v-144.89h-147.481v144.89h-144.885v147.481h144.885v144.888h147.481v-144.888h144.89v-147.481z" horiz-adv-x="1189" />
-<glyph unicode="&#xe601;" d="M956.063 962.932h-819.824c-73.036 0-132.489-60.717-132.489-135.316v-540.205c0-74.537 59.453-135.246 132.489-135.246h35.826v-212.941l344.987 212.941h439.011c72.964 0 132.42 60.711 132.42 135.246v540.202c0 74.602-59.456 135.318-132.42 135.318zM496.5 293.887l-195.714-123.997v123.997h-158.261v527.257h807.189l0.064-527.255h-453.278zM239.062 715.554h605.126v-110.62h-605.126v110.62zM239.062 522.476h605.126v-110.615h-605.126v110.615z" horiz-adv-x="1088" />
-<glyph unicode="&#xe602;" d="M955.816 960.317h-822.841c-73.303 0-132.975-60.931-132.975-135.844v-542.186c0-74.851 59.672-135.785 132.975-135.785h822.841c73.239 0 132.916 60.934 132.916 135.785v542.186c0 74.913-59.677 135.844-132.916 135.844zM949.51 288.784h-810.226v529.223h810.164l0.062-529.223zM945.219 0.34c0-35.738-28.261-64.66-63.207-64.66h-675.228c-34.949 0-63.209 28.921-63.209 64.66v29.618c0 35.7 28.261 64.657 63.209 64.657h675.228c34.946 0 63.207-28.957 63.207-64.657v-29.618zM776.792 342.434l-302.669 302.605 112.411 112.316 302.545-302.602v-112.318z" horiz-adv-x="1089" />
-<glyph unicode="&#xe603;" d="M952.495 955.065h-818.689c-72.81 0-132.183-60.63-132.183-135.162v-750.719c0-74.473 59.372-135.101 132.183-135.101h818.686c72.936 0 132.314 60.625 132.314 135.101v750.722c0.003 74.532-59.378 135.159-132.311 135.159zM946.346 75.651h-806.14v737.822h806.015l0.126-737.822zM685.753 674.544h216.911v-566.758h-216.911v566.758zM428.672 546.002h216.911v-438.216h-216.911v438.216zM172.339 417.46h216.161v-309.677h-216.161v309.677z" horiz-adv-x="1088" />
-<glyph unicode="&#xe604;" d="M878.259 965.513c-163.545 0-296.573-133.036-296.573-296.612v-43.752h-448.909c-73.14 0-132.777-60.909-132.777-135.751v-412.768c0-74.777 59.637-135.678 132.777-135.678h564.152c73.265 0 132.919 60.901 132.919 135.678v412.768c0 70.054-52.267 127.895-119.040 135.009v44.494c0 92.367 75.154 167.49 167.451 167.49 92.305 0 167.462-75.12 167.462-167.49v-77.422c0-35.681 28.883-64.564 64.556-64.564 35.69 0 64.569 28.883 64.569 64.564v77.422c-0.003 163.576-133.028 296.612-296.587 296.612z" horiz-adv-x="1179" />
-<glyph unicode="&#xe605;" d="M1.518 641.614h277.533v319.798c0 0-78.033-8.102-176.18-111.633-98.139-103.529-101.353-208.165-101.353-208.165zM683.281 961.412h-339.684v-384.596l-342.080 0.251-1.515 3.468v-510.502c0-73.845 61.4-133.979 136.847-133.979h546.434c75.514 0 136.911 60.137 136.911 133.979v757.403c-0.003 73.843-61.397 133.976-136.914 133.976zM691.854 145.164h-572.848v92.788h572.845v-92.788zM691.854 338.802h-572.848v92.783h572.845v-92.783z" horiz-adv-x="820" />
-<glyph unicode="&#xe606;" d="M953.901 962.387h-819.775c-72.965 0-132.418-60.712-132.418-135.344v-540.168c0-74.567 59.453-135.279 132.418-135.279h35.823v-212.891l344.966 212.891h438.986c72.963 0 132.415 60.709 132.415 135.279v540.168c0.003 74.632-59.45 135.344-132.415 135.344zM494.429 293.354l-195.769-124.001v124.001h-158.184v527.252h807.078l0.124-527.252h-453.249z" horiz-adv-x="1089" />
-<glyph unicode="&#xe607;" d="M709.515 620.094v44.455c0 163.090-132.662 295.749-295.749 295.749-163.093 0-295.752-132.659-295.752-295.749v-44.455c-66.226-7.393-118.013-64.915-118.013-134.607v-411.623c0-74.629 59.481-135.365 132.472-135.365h562.583c73.059 0 132.534 60.736 132.534 135.365v411.623c0 69.697-51.792 127.219-118.074 134.607zM413.765 831.537c92.043 0 166.987-74.944 166.987-166.987v-43.632h-333.978v43.632c0 92.043 74.883 166.987 166.99 166.987z" horiz-adv-x="828" />
-<glyph unicode="&#xe608;" d="M1223.129 717.217l-180.128-175.796v217.716c0 74.673-59.512 135.496-132.599 135.496h-634.716c-73.084 0-132.596-60.823-132.596-135.496v-609.237c0-74.673 59.512-135.496 132.596-135.496h634.716c73.084 0 132.599 60.82 132.599 135.496v172.679l193.45-153.712c48.784-35.558 96.695 5.178 96.695 40.424v483.533c-0.003 35.248-55.897 71.306-110.017 24.393zM601.169 199.935c-141.111 0-255.524 114.411-255.524 255.521s114.411 255.521 255.524 255.521c141.108 0 255.519-114.411 255.519-255.521 0-141.113-114.408-255.521-255.519-255.521zM599.045 600.249c-80.474 0-145.727-65.253-145.727-145.729 0-80.471 65.25-145.727 145.727-145.727s145.729 65.256 145.729 145.727c0 80.474-65.253 145.729-145.729 145.729z" horiz-adv-x="1334" />
-<glyph unicode="&#xe609;" d="M1223.934 717.147l-180.299-175.956v217.848c0 7.661-0.666 15.148-1.902 22.432l73.695 65.346c26.349 23.41 28.841 63.8 5.369 90.24-23.475 26.406-63.803 28.872-90.273 5.4l-1009.019-894.712c-26.408-23.41-28.841-63.806-5.398-90.209 12.607-14.237 30.183-21.539 47.85-21.539 15.076 0 30.214 5.305 42.39 16.1l95.841 84.979c20.995-14.627 46.26-23.232 73.592-23.232h635.191c73.099 0 132.66 60.807 132.66 135.537v172.868l193.659-153.955c48.815-35.46 96.765 5.248 96.765 40.584v483.829c0.003 35.305-55.933 71.386-110.123 24.44zM601.515 199.448c-58.81 0-112.566 20.216-155.526 53.797l82.93 73.533c20.863-11.665 44.849-18.386 70.47-18.386 80.533 0 145.832 65.299 145.832 145.835 0 19.421-3.896 37.857-10.857 54.713l86.847 77.001c22.848-38.259 36.012-82.969 36.012-130.782 0-141.214-114.493-255.71-255.707-255.71zM345.797 455.16c0 141.216 114.496 255.715 255.717 255.715 21.501 0 42.075-3.434 61.986-8.429l216.757 192.191h-604.474c-73.138 0-132.697-60.838-132.697-135.597v-518.074l205.894 182.543c-1.308 10.486-3.184 20.853-3.184 31.651z" horiz-adv-x="1334" />
-<glyph unicode="&#xe60a;" d="M1121.124 938.866c-23.48 26.413-63.883 28.849-90.296 5.372l-1009.306-894.905c-26.413-23.418-28.852-63.816-5.434-90.232 12.612-14.243 30.224-21.547 47.893-21.547 15.050 0 30.224 5.307 42.403 16.108l257.072 227.934c33.225-22.863 69.988-39.678 108.611-49.713-70.191-35.653-118.771-107.715-118.771-191.894h431.872c0 85.737-50.329 159.115-122.765 194.079 54.95 14.49 105.842 39.965 147.497 77.496 51.888 46.712 113.712 131.515 113.712 270.329v130.323c0 18.812-7.924 35.767-20.585 47.798l212.664 188.558c26.419 23.477 28.849 63.816 5.434 90.294zM791.535 481.891c0-157.985-117.649-229.923-226.99-229.923-35.214 0-68.659 7.217-98.285 20.786l55.735 49.416c14.733-4.59 30.356-7.132 46.609-7.132 89.357 0 161.984 72.687 161.984 161.979v30.1l60.947 54.042v-79.269zM730.589 793.867c0 89.298-72.625 161.984-161.984 161.984-89.298 0-161.984-72.687-161.984-161.984v-316.85c0-0.25 0-0.498 0-0.748l323.969 287.25v30.348zM350.795 426.69c-3.246 17.483-5.119 35.782-5.119 55.201v130.323c0 36.406-29.6 66.004-66.006 66.004-36.466 0-66.004-29.597-66.004-66.004v-130.323c0-57.198 11.115-107.026 29.099-150.931l108.030 95.73z" horiz-adv-x="1137" />
-<glyph unicode="&#xe60b;" d="M858.414 679.944c-36.595 0-66.246-29.652-66.246-66.182v-130.725c0-158.421-117.982-230.597-227.635-230.597-58.674 0-112.618 19.87-151.86 55.959-44.23 40.819-67.696 101.203-67.696 174.64v130.725c0 36.53-29.654 66.182-66.182 66.182-36.53 0-66.182-29.652-66.182-66.182v-130.725c0-195.834 119.494-314.763 259.177-351.040-70.408-35.71-119.176-108.014-119.176-192.431h433.118c0 85.993-50.409 159.621-123.029 194.572 55.079 14.64 106.121 40.127 147.886 77.79 52.050 46.877 114.008 131.925 114.008 271.106v130.725c0 36.53-29.59 66.182-66.184 66.182zM568.571 315.719c-89.589 0-162.459 72.932-162.459 162.521v317.665c0 89.589 72.87 162.459 162.459 162.459 89.592 0 162.524-72.87 162.524-162.459v-317.665c0.003-89.592-72.929-162.521-162.524-162.521z" horiz-adv-x="1137" />
-<glyph unicode="&#xe60c;" d="M512.356 960c-282.456 0-512.356-229.838-512.356-512.478 0-282.389 229.9-512.227 512.356-512.227 282.515 0 512.414 229.838 512.414 512.227 0 282.64-229.9 512.478-512.414 512.478zM512.356 14.856c-238.545 0-432.671 194.126-432.671 432.666 0 238.796 194.126 432.858 432.671 432.858 238.601 0 432.856-194.062 432.856-432.858 0-238.54-194.255-432.666-432.856-432.666zM512.545 854.962c-224.755 0-407.508-182.75-407.508-407.315 0-224.563 182.75-407.315 407.508-407.315 224.437 0 407.187 182.755 407.187 407.315-0.003 224.566-182.75 407.315-407.187 407.315zM512.545 127.323c-176.715 0-320.453 143.804-320.453 320.324 0 176.523 143.737 320.324 320.453 320.324 176.523 0 320.196-143.802 320.196-320.324 0-176.52-143.673-320.324-320.196-320.324zM283.851 562.789l-0.954-1.398v-234.413l0.954-1.398c15.757-23.060 36.473-44.542 61.699-63.797l8.961-6.801v378.341l-8.961-6.735c-25.1-19.191-45.814-40.544-61.699-63.799zM415.637 665.729l-3.621-1.334v-440.36l3.621-1.398c18.683-7.055 38.887-11.94 61.766-14.931l6.224-0.762v474.415l-6.163-0.762c-22.237-2.795-43.016-7.753-61.827-14.869zM547.367 680.599l-6.165 0.762v-474.415l6.165 0.762c22.301 2.793 43.077 7.811 61.763 14.864l3.685 1.4v440.488l-3.685 1.334c-18.811 7.053-39.525 12.010-61.763 14.805zM740.98 562.789c-15.692 23.002-36.473 44.48-61.699 63.797l-8.894 6.86v-378.469l8.894 6.801c25.351 19.381 46.132 40.862 61.699 63.861l0.89 1.398v234.352l-0.89 1.4z" horiz-adv-x="1025" />
-<glyph unicode="&#xe60d;" d="M952.366 960.134h-820.477c-73.027 0-132.531-60.761-132.531-135.455v-752.358c0-74.66 59.504-135.424 132.531-135.424h820.48c73.089 0 132.596 60.766 132.596 135.424v752.358c-0.003 74.694-59.507 135.455-132.599 135.455zM946.135 78.801h-807.894v739.462h807.834l0.059-739.462zM569.742 511.875l91.772 96.865-77.305 77.308 316.393 85.040-84.981-316.391-75.357 75.293-91.834-96.865zM514.763 384.563l-91.767-96.865 77.3-77.305-316.388-85.043 84.979 316.388 75.357-75.29 91.834 96.871z" horiz-adv-x="1089" />
-<glyph unicode="&#xe60e;" d="M953.225 959.18h-820.663c-73.045 0-132.562-60.776-132.562-135.488v-752.525c0-74.647 59.517-135.421 132.562-135.421h820.66c73.107 0 132.624 60.776 132.624 135.421v752.525c0.003 74.712-59.515 135.488-132.622 135.488zM946.994 77.647h-808.079v739.596h808.017l0.062-739.596zM915.539 706.7l-91.795-96.889 77.326-77.323-316.463-85.030 84.999 316.463 75.373-75.339 91.852 96.889zM170.625 188.221l91.793 96.884-77.323 77.326 316.463 85.028-84.997-316.46-75.373 75.342-91.857-96.891z" horiz-adv-x="1089" />
-<glyph unicode="&#xe60f;" d="M513.036 960c283.57-0.188 512.414-229.474 512.037-512.664-0.377-283.756-228.965-512.228-512.541-512.288-283.191-0.067-512.912 229.474-512.533 512.099 0.374 284.638 228.965 513.103 513.036 512.853zM512.285 810.729c-200.79-0.126-362.957-162.291-362.831-363.014 0-201.105 161.788-363.081 362.831-363.334 201.164-0.312 363.581 162.294 363.455 363.772-0.25 200.852-162.417 362.702-363.455 362.575zM597.392 447.588h-0.503l-0.126 0.126h0.63l115.615 115.866c0 0-78.247 78.505-82.153 82.153l-117.754-116.183-119.014 118.196-82.024-82.279 88.815-88.818 26.674-29.061h0.503l0.253-0.253h-0.756l-115.489-115.806c0 0 78.249-78.564 82.024-82.212l117.76 116.245 119.008-118.26 82.153 82.406-88.815 88.82-26.8 29.061z" horiz-adv-x="1025" />
-<glyph unicode="&#xe610;" d="M66.491-63.997h1027.94zM1198.596 487.986c-135.702 135.893-271.415 271.66-407.367 407.241-6.244 6.089-13.868 11.714-21.867 14.653-31.236 11.399-63.48-12.808-63.728-47.674-0.253-67.663-0.126-135.331-0.126-202.965 0-4.281 0-8.62 0-13.964-6.123 0-10.87 0-15.62 0-106.247 0-212.334 0.062-318.485 0-35.178-0.031-54.86-19.71-54.86-54.922-0.059-92.778-0.059-185.5 0-278.345 0-35.8 19.682-55.479 55.611-55.479 105.775-0.062 211.423 0 317.11 0 4.877 0 9.622 0 16.245 0 0-5.375 0-9.374 0-13.309 0-66.793 0.25-133.703 0-200.496 0-23.057 9.247-40.241 30.242-49.547 21.116-9.371 39.361-2.81 55.231 12.937 135.955 136.079 272.031 272.034 407.989 408.175 23.49 23.431 23.24 50.112-0.374 73.695zM532.596 44.729c-2.627 19.62-22.055 32.116-27.928 35.426-8.811 5.186-18.371 5.811-25.683 5.811l-6.37-0.126-227.926 0.188c-56.042 0.124-98.468 42.173-98.591 97.717-0.188 177.127-0.188 354.321 0.065 531.51 0.059 53.983 42.671 96.53 96.968 96.811l235.922 0.062c33.426 0.031 51.294 16.121 54.481 49.235 1.001 12.965 0.81 26.052 0.439 39.172-1.128 39.737-19.369 57.481-59.107 57.512l-217.866-0.121c-15.494 0-30.926-0.562-46.361-2.343-115.52-13.154-207.555-113.649-209.681-228.798-1.313-63.888-0.996-127.804-0.684-191.718l0.186-60.201h-0.377c0 0-0.121-227.954 0.065-289.811 0.248-135.702 101.528-240.796 235.545-244.48 33.176-0.875 66.419-1.189 99.654-1.189h0.065l148.012 0.753c29.368 0 47.483 17.37 49.73 47.545 1.755 22.058 1.628 40.173-0.557 57.045z" horiz-adv-x="1216" />
-<glyph unicode="&#xe611;" d="M839.334 386.487c0-79.199-64.257-143.461-143.486-143.461-79.174 0-143.431 64.262-143.431 143.461 0 79.227 64.257 143.431 143.431 143.431 79.23-0.003 143.486-64.204 143.486-143.431zM1372.769 706.485c-6.595 39.459-29.496 64.168-70.606 69.276-23.788 2.918-38.256 15.637-44.726 39.040-9.706 35.519-33.678 58.993-67.811 70.76-24.807 8.595-50.3 16.462-76.186 20.491-69.655 10.911-140.51 15.924-209.526 29.943-69.53 14.178-139.053 23.342-208.893 24.073-69.845-0.731-139.371-9.895-208.893-24.073-69.022-14.016-139.876-19.029-209.526-29.94-25.884-4.028-51.385-11.896-76.189-20.491-34.13-11.767-58.105-35.24-67.814-70.76-6.469-23.403-20.934-36.122-44.723-39.040-41.105-5.108-64.006-29.82-70.601-69.278-6.788-40.41-11.737-81.202-16.811-121.885-2.728-22.109 6.405-32.576 30.386-32.448 120.839 0.697 241.692 0.697 362.595 0.095 24.045-0.128 33.115 9.388 33.433 33.338 0.762 57.369-4.631 111.895-47.136 156.618-7.041 7.39-10.849 25.281-6.726 33.846 4.062 8.5 40.856 16.716 45.992 16.716 43.328-0.19 43.138-0.223 49.418-43.423 1.205-8.28 2.539-18.46 7.803-23.853 30.319-30.863 21.252-66.706 7.234-97.634-30.389-67.139-61.537-134.827-100.867-196.869-73.458-115.831-104.41-160.744-198.679-260.844-58.675-62.293-68.573-101.687-68.573-137.466 0-70.989 41.038-96.744 137.148-96.744 181.614 0 260.908 0.315 442.528 0.315 181.614 0 260.905-0.315 442.528-0.315 96.102 0 137.142 25.752 137.142 96.744 0 35.779-9.898 75.173-68.573 137.466-94.264 100.1-125.222 145.012-198.679 260.844-39.333 62.042-70.475 129.73-100.861 196.869-14.019 30.927-23.091 66.77 7.234 97.634 5.264 5.393 6.595 15.575 7.803 23.853 6.28 43.202 6.090 43.233 49.412 43.423 5.139 0 41.933-8.216 45.992-16.716 4.126-8.565 0.318-26.453-6.723-33.846-42.502-44.723-47.898-99.249-47.136-156.618 0.315-23.947 9.388-33.466 33.43-33.338 120.909 0.603 241.753 0.603 362.601-0.095 23.975-0.126 33.109 10.342 30.383 32.448-5.075 40.686-10.018 81.475-16.806 121.885zM959.991 383.505c0-146.315-118.624-264.936-264.97-264.936s-264.973 118.621-264.973 264.936c0 146.318 118.624 264.936 264.973 264.936 146.343 0 264.97-118.621 264.97-264.936z" horiz-adv-x="1390" />
-<glyph unicode="&#xe612;" d="M310.262 30.43c0-52.13-42.207-94.43-94.399-94.43h-121.405c-52.195 0-94.458 42.3-94.458 94.43v835.67c0 52.158 42.266 94.458 94.458 94.458h121.403c52.195 0 94.399-42.3 94.399-94.458v-835.67zM1077.118 960.56h-561.987c-72.919 0-132.33-60.673-132.33-135.253v-754.115c0-74.518 59.411-135.191 132.33-135.191h561.987c72.98 0 132.394 60.673 132.394 135.191v754.115c0 74.58-59.414 135.253-132.394 135.253zM529.83 826.906h532.653l0.062-143.298h-532.715v143.298zM643.255 51.628h-113.551v113.551h113.551v-113.551zM643.255 256.748h-113.551v113.554h113.551v-113.554zM643.382 463.756h-113.551v113.554h113.551v-113.554zM852.9 51.628h-113.551v113.551h113.551v-113.551zM852.9 256.748h-113.551v113.554h113.551v-113.554zM853.027 463.756h-113.556v113.554h113.556v-113.554zM1062.548 51.628h-113.556v113.551h113.556v-113.551zM1062.548 256.748h-113.556v113.554h113.556v-113.554zM1062.669 463.756h-113.554v113.554h113.554v-113.554z" horiz-adv-x="1210" />
-<glyph unicode="&#xe613;" d="M1123.444 939.015c-23.593 26.481-64.131 28.989-90.74 5.395l-1008.269-893.436c-26.609-23.468-28.991-64.131-5.46-90.676 12.674-14.306 30.308-21.649 48.126-21.649 15.123 0 30.372 5.401 42.544 16.195l130.045 115.22c90.743-81.844 210.569-132.165 342.473-132.101 282.816 0.061 510.913 227.969 511.287 510.972 0.126 109.934-34.682 211.367-93.499 294.72l118.088 104.625c26.483 23.526 28.997 64.129 5.404 90.735zM944.422 449.818c0.128-200.922-161.896-363.201-362.509-362.952-87.56 0.123-167.573 31.151-230.061 82.569l331.277 293.509v-73.176c1.071-60.993 32.696-92.18 94.944-93.692 61.997 1.512 93.686 32.763 95.131 93.756v41.096h-72.227v-47.499c0.251-4.642-0.564-10.607-2.511-17.949-1.25-3.261-3.448-6.020-6.525-8.093-3.197-2.572-7.845-3.828-13.868-3.828-10.543 0.31-17.132 4.268-19.827 11.921-1.068 3.512-1.947 6.905-2.508 10.163-0.254 2.887-0.377 5.532-0.377 7.786v143.511l42.477 37.634c0.215-0.432 0.452-0.851 0.63-1.303 1.947-6.467 2.762-12.799 2.511-19.076v-36.772h72.227v30.121c-0.246 31.245-9.086 54.699-26.363 70.447l40.711 36.069c35.787-56.055 56.803-122.585 56.867-194.244zM239.795 331.47c-12.613 37.023-19.827 76.557-19.827 117.913-0.19 200.236 161.584 362.009 361.945 362.135 56.853 0 110.313-13.302 158.133-36.398l117.846 104.421c-79.444 50.952-173.758 80.817-275.292 80.948-283.377 0.181-511.354-227.729-511.789-511.675-0.126-79.567 18.636-154.679 51.137-221.882l117.848 104.538zM388.576 626.020h-97.514v-249.057l72.23 64.070v0.689h0.815l117.72 104.418c0 0.564 0.123 0.94 0.123 1.509 0.753 53.898-30.369 80.069-93.374 78.37zM405.959 561.517c1.942-2.767 3.074-6.469 3.323-11.112 0.312-4.452 0.438-9.6 0.438-15.246 0.251-10.916-0.689-19.83-2.949-26.985-2.952-7.594-10.983-11.357-24.159-11.357h-19.325v74.043h15.31c7.842 0 13.865-0.683 18.072-2.19 4.397-1.573 7.468-3.953 9.29-7.153z" horiz-adv-x="1140" />
-<glyph unicode="&#xe614;" d="M581.278 961.708c284.857-0.19 514.807-230.517 514.427-514.997-0.378-285.047-230.073-514.553-514.869-514.615-284.541-0.062-515.311 230.517-514.933 514.422 0.439 285.936 230.009 515.439 515.375 515.19zM580.579 811.756c-201.764-0.123-364.666-163.032-364.478-364.663 0-202.018 162.524-364.735 364.478-364.984 202.018-0.316 365.174 163.030 365.048 365.423-0.252 201.767-163.156 364.35-365.048 364.224zM287.698 624.907h98.196c63.442 1.767 94.785-24.518 94.027-78.863 0.254-19.081-2.211-34.882-7.456-47.521-6.005-12.508-18.706-21.988-38.167-28.181v-0.819c28.373-6.259 43.031-23.573 43.981-51.946v-57.689c0-11.247 0.254-22.813 0.758-34.756 0.819-12.005 3.033-20.979 6.696-27.043h-71.846c-3.727 6.064-6.128 15.038-7.14 27.043-1.012 11.943-1.454 23.509-1.138 34.756v52.321c0 9.603-2.214 16.553-6.573 20.979-4.675 4.107-12.701 6.19-24.012 6.19h-14.599v-141.291h-72.73v326.82zM360.428 494.861h19.463c13.271 0 21.359 3.794 24.331 11.375 2.276 7.204 3.221 16.304 2.969 27.171 0 5.815-0.126 10.867-0.442 15.418-0.252 4.675-1.392 8.404-3.352 11.247-1.831 3.157-4.926 5.561-9.352 7.14-4.233 1.454-10.299 2.211-18.2 2.211h-15.418v-74.564zM498.372 624.907h162.082v-62.687h-89.35v-65.587h78.103v-62.685h-78.103v-73.11h92.822v-62.749h-165.557v326.818zM682.507 535.999c0.316 31.782 9.416 55.542 27.425 71.407 17.44 15.29 40.185 22.936 68.181 22.936 28.247 0 51.119-7.646 68.623-23 17.82-15.798 26.92-39.623 27.171-71.407v-30.333h-72.73v37.031c0.254 6.192-0.57 12.639-2.527 19.209-1.264 3.157-3.475 5.938-6.573 8.214-3.221 1.515-7.898 2.404-13.964 2.404-10.615-0.316-17.249-3.855-19.967-10.618-2.211-6.573-3.223-13.017-2.907-19.209v-161.956c0-2.273 0.126-4.865 0.38-7.772 0.568-3.411 1.454-6.824 2.527-10.233 2.717-7.775 9.352-11.756 19.967-12.007 6.067 0 10.744 1.261 13.964 3.791 3.098 2.15 5.309 4.867 6.573 8.216 1.96 7.33 2.782 13.33 2.527 18.007v47.837h72.73v-41.328c-1.451-61.547-33.364-93.015-95.794-94.469-62.685 1.454-94.53 32.922-95.607 94.343v148.937z" horiz-adv-x="1142" />
-<glyph unicode="&#xe615;" d="M1016.824 5.766c-2.051 15.373-5.331 30.537-7.859 45.847-8.334 50.458-33.006 86.503-82.063 107.922-78.373 34.198-155.103 72.121-232.111 109.395-55.686 27.025-52.409 88.519-34.097 114.413 11.89 16.88 22.344 34.572 23.575 56.852 0.444 8.226 8.303 18.99 15.817 23.294 26.070 15.035 38.161 39.565 50.020 64.982 3.109 6.696 7.379 13.187 12.266 18.722 8.471 9.668 12.264 19.235 6.079 31.842-1.435 2.97 1.331 8.334 2.8 12.367 4.304 12.026 10.285 23.676 13.12 36.043 3.556 15.339 5.398 31.225 6.252 46.975 0.374 6.523-6.045 13.528-5.362 19.95 3.483 31.912-14.557 56.202-24.739 83.977-12.465 34.198-36.928 55.619-58.519 81.106-4.066 4.784-5.227 13.051-5.571 19.886-0.72 14.588-6.732 21.797-22.004 19.813-6.11-0.787-12.772-2.495-18.41-0.991-4.957 1.334-12.406 6.288-12.676 10.112-1.538 19.336-8.264 22.517-28.016 19.235-12.364-2.049-28.457 9.155-40.584 17.561-10.145 7.041-18.89 10.045-30.681 7.176-4.915-1.195-11.544-0.991-15.716 1.435-4.441 2.663-8.775 4.237-13.118 5.124v0.748c-0.957-0.031-1.982-0.204-2.939-0.307-0.955 0.103-1.912 0.274-2.867 0.307v-0.751c-4.371-0.888-8.749-2.462-13.156-5.124-4.133-2.425-10.762-2.632-15.68-1.435-11.822 2.867-20.569-0.137-30.684-7.176-12.158-8.404-28.217-19.609-40.584-17.561-19.746 3.282-26.509 0.103-28.047-19.235-0.307-3.824-7.686-8.778-12.676-10.112-5.669-1.504-12.297 0.204-18.446 0.991-15.236 1.984-21.25-5.225-21.97-19.813-0.338-6.832-1.502-15.102-5.568-19.886-21.588-25.485-46.051-46.908-58.555-81.106-10.117-27.773-28.189-52.063-24.669-83.975 0.686-6.422-5.744-13.427-5.4-19.95 0.89-15.749 2.735-31.636 6.254-46.975 2.836-12.367 8.814-24.019 13.151-36.043 1.437-4.033 4.242-9.397 2.769-12.367-6.182-12.607-2.358-22.174 6.115-31.842 4.853-5.535 9.121-12.026 12.23-18.722 11.859-25.417 23.947-49.947 50.014-64.982 7.519-4.304 15.378-15.068 15.858-23.294 1.192-22.28 11.65-39.972 23.57-56.852 18.281-25.895 21.147-86.738-34.162-114.413-76.456-38.264-153.741-75.2-232.042-109.395-49.129-21.418-73.726-57.463-82.063-107.922-2.526-15.311-5.878-30.475-7.859-45.847-3.009-22.928-7.823-69.766-7.823-69.766h1024.611c-0.003 0-4.781 46.838-7.787 69.766z" horiz-adv-x="1025" />
-<glyph unicode="&#xe616;" d="M1026.175 449.067c0-283.345-229.709-513.051-513.108-513.051-283.348 0-513.069 229.703-513.069 513.051 0 283.384 229.721 513.106 513.069 513.106 283.4 0 513.108-229.721 513.108-513.106zM513.069-63.985c135.725 0 259.112 52.711 350.874 138.739-9.717 11.65-22.551 21.114-39.113 28.343-58.934 25.745-116.627 54.256-174.534 82.256-41.871 20.322-39.405 66.587-25.639 86.057 8.943 12.692 16.805 25.998 17.728 42.746 0.333 6.169 6.241 14.284 11.889 17.522 19.604 11.304 28.697 29.747 37.604 48.861 2.34 5.031 5.555 9.89 9.229 14.077 6.37 7.243 9.224 14.436 4.572 23.942-1.086 2.209 1.004 6.241 2.105 9.273 3.238 9.067 7.733 17.801 9.861 27.115 2.67 11.549 4.059 23.48 4.701 35.323 0.281 4.902-4.544 10.184-4.033 14.986 2.621 24.022-10.943 42.271-18.598 63.158-9.376 25.714-27.771 41.82-44.005 60.97-3.058 3.623-3.927 9.838-4.188 14.952-0.539 10.981-5.060 16.415-16.544 14.924-4.598-0.601-9.611-1.886-13.843-0.756-3.728 0.988-9.327 4.724-9.534 7.604-1.153 14.539-6.213 16.929-21.065 14.475-9.296-1.543-21.395 6.858-30.513 13.203-7.632 5.292-14.209 7.555-23.069 5.38-3.697-0.9-8.682-0.746-11.815 1.094-3.341 1.976-6.605 3.184-9.867 3.839v0.552c-0.72-0.013-1.489-0.129-2.209-0.217-0.722 0.088-1.44 0.206-2.157 0.217v-0.552c-3.29-0.653-6.574-1.863-9.89-3.839-3.112-1.837-8.091-1.992-11.797-1.094-8.886 2.173-15.448-0.088-23.064-5.38-9.157-6.345-21.222-14.746-30.518-13.203-14.862 2.451-19.94 0.062-21.093-14.475-0.219-2.879-5.793-6.616-9.516-7.604-4.278-1.13-9.247 0.155-13.887 0.756-11.456 1.491-15.987-3.943-16.516-14.924-0.261-5.111-1.13-11.33-4.19-14.952-16.222-19.15-34.616-35.258-44.018-60.97-7.627-20.887-21.204-39.136-18.57-63.158 0.511-4.802-4.304-10.083-4.046-14.986 0.655-11.846 2.041-23.776 4.701-35.323 2.131-9.312 6.626-18.048 9.89-27.115 1.094-3.032 3.174-7.062 2.082-9.273-4.649-9.508-1.788-16.702 4.582-23.942 3.674-4.188 6.874-9.046 9.224-14.077 8.899-19.111 17.992-37.557 37.596-48.861 5.653-3.238 11.559-11.353 11.905-17.522 0.913-16.748 8.773-30.054 17.739-42.746 13.745-19.47 15.902-65.245-25.673-86.057-57.52-28.772-115.6-56.511-174.503-82.256-16.57-7.23-29.409-16.694-39.123-28.338 91.759-86.031 215.138-138.744 350.843-138.744z" horiz-adv-x="1026" />
-<glyph unicode="&#xe617;" d="M65.774 516.748c10.052 9.358 25.988 21.772 43.285 32.699 51.335 32.619 108.115 50.897 166.829 64.133 48.763 10.95 98.246 16.887 148.066 20.203 55.755 3.754 111.559 3.78 167.392 0.797 39.944-2.185 79.686-6.502 119.119-13.211 43.956-7.506 87.037-17.994 128.785-33.751 24.419-9.175 48.172-20.105 70.534-33.573 29.716-17.891 56.552-39.224 77.22-67.348 20.819-28.302 31.721-60.407 33.829-95.392 1.747-27.402 0.717-54.697-5.656-81.588-2.877-12.083-8.226-23.134-16.554-32.386-11.417-12.648-26.424-17.021-42.772-17.636-20.463-0.668-40.411 4.113-60.361 8.226-38.912 7.97-77.836 16.245-116.699 24.728-14.137 3.034-28.689 5.093-41.649 12.596-22.308 12.955-34.445 31.775-34.033 57.783 0.258 16.869 2.216 33.782 2.469 50.695 0.312 25.010-9.923 45.161-30.898 59.042-14.395 9.539-30.694 14.911-47.452 18.665-40.411 9.046-81.387 10.179-122.561 10.050-28.821-0.126-57.582-1.669-86.093-6.143-19.947-3.161-39.562-7.813-57.732-17.014-24.318-12.364-39.353-31.465-40.073-59.352-0.441-16.351 0.973-32.802 1.927-49.15 0.642-11.822-0.080-23.446-5.295-34.288-9.26-19.385-24.935-31.672-45.37-36.964-22.646-5.865-45.605-10.54-68.504-15.223-38.102-7.764-76.216-15.368-114.416-22.517-14.526-2.774-29.254-1.951-43.133 3.602-18.742 7.457-28.924 22.775-34.138 41.337-7.096 25.397-7.841 51.513-6.966 77.731 0.9 27.040 5.883 53.237 18.404 77.607 9.794 19.065 22.491 35.955 42.493 55.642z" horiz-adv-x="1026" />
-<glyph unicode="&#xe618;" d="M797.086 112.301c-0.059 0.163-0.119 0.328-0.16 0.485-71.399-45.638-151.782-69.931-234.023-69.931-0.013 0-0.021 0-0.028 0-122.52 0-237.501 52.772-315.469 144.741-99.778 117.698-134.252 329.954-73.022 427.789 4.004-1.662 7.875-3.233 11.68-4.773 13.585-5.511 26.413-10.716 42.305-19.096 6.063-3.202 12.338-4.812 18.673-4.812 11.714 0 22.6 5.648 29.848 15.486 7.815 10.617 10.313 24.778 6.538 36.951l-3.525 11.41c-10.687 34.59-21.723 70.354-34.211 105.078-9.983 27.765-22.399 62.327-59.226 62.327-12.057 0-26.037-3.656-46.73-12.204-44.294-18.319-71.058-29.961-114.534-49.81-15.102-6.887-25.234-22.698-25.203-39.343 0.028-15.842 8.992-29.337 23.975-36.115 18.208-8.257 30.536-13.716 43.468-19.447l10.687-4.753c-101.938-259.102 24.803-526.458 211.314-639.212 83.497-50.474 178.5-77.14 274.769-77.14h0.041c102.72 0 205.561 31.099 284.501 85.198-31.729 28.803-45.566 69.167-51.671 87.171zM1098.203 210.090c-18.113 8.577-30.356 14.258-43.221 20.244l-10.496 4.892c106.448 257.268-15.569 526.801-200.067 642.788-85.36 53.663-183.123 82.032-282.716 82.032-104.848 0-206.41-30.593-285.967-86.165l-5.385-3.764c31.597-27.564 45.86-66.788 52.917-86.41 72.926 47.94 155.675 73.409 239.895 73.409 125.407 0 242.142-54.785 320.294-150.316 97.683-119.447 128.439-332.255 65.498-429.015-3.989 1.736-7.815 3.385-11.624 4.998-13.471 5.759-26.204 11.18-41.954 19.821-6.203 3.424-12.645 5.155-19.212 5.155-11.585 0-22.399-5.558-29.69-15.267-7.813-10.434-10.478-24.432-6.966-36.515l3.279-11.301c10.096-34.845 20.531-70.857 32.412-105.842 9.588-28.238 21.514-63.382 59.179-63.382 11.843 0 25.577 3.424 45.881 11.399 44.351 17.439 71.319 28.601 115.409 47.777 15.19 6.623 25.601 22.252 25.859 38.894 0.281 15.822-8.445 29.499-23.325 36.569z" horiz-adv-x="1122" />
-<glyph unicode="&#xe619;" d="M46.993 961.7c461.234 0 553.793 0 1015.024 0 35.919 0 53.356-25.959 53.356-57.959-0.581-303.259-0.325-606.488-0.449-909.809 0-43.984-13.203-57.058-57.703-57.058-443.072-0.126-556.453-0.126-999.553 0-44.534 0-57.799 13.009-57.799 57.058-0.098 303.257 0.485 608.072-0.093 911.329-0.034 26.21 11.301 53.761 47.217 56.439zM311.405 450.298c0-119.045-0.072-172.168 0.057-291.249 0.036-50.043 11.208-61.050 62.12-61.050 233.352 0 137.075 0 370.522 0 47.075 0 59.249 11.982 59.249 58.095 0.126 239.111 0.126 346.338 0 585.389 0 48.138-10.687 58.991-57.768 58.991-235.323 0.101-140.844 0.101-376.157 0-47.044 0-57.93-11.043-57.966-58.89-0.129-119.109-0.057-172.209-0.057-291.287zM153.944 838.566c-74.929-0.062-66.687 5.958-66.845-66.685-0.201-63.95-7.054-63.534 62.528-63.372 72.999 0.194 67.201-3.764 67.302 67.554 0 67.722 4.087 62.595-62.985 62.502zM963.644 838.566c-71.159-0.034-65.56 6.185-65.751-65.364-0.129-67.302-4.508-64.693 64.528-64.693 73.089 0 65.299-2.031 65.299 66.238-0.003 68.646 6.956 63.911-64.076 63.818zM216.828 122.408c0.359 73.094 4.639 66.914-67.358 67.17-68.104 0.191-62.569 2.763-62.407-63.31 0.129-73.476-6.954-66.52 67.074-66.649 66.042-0.065 63.142-6.056 62.691 62.789zM1027.718 124.4c0.134 68.334 6.443 65.304-63.297 65.178-70.132-0.132-66.656 5.793-66.527-65.304 0.129-70.645-4.384-64.721 63.756-64.657 71.995 0.132 66.202-6.698 66.068 64.783zM1027.718 342.077c0 70.55 7.219 66.842-67.485 66.522-0.898 0-1.873 0-2.838 0-59.375 0-59.375 0-59.375-58.023 0-77.922-6.443-69.936 69.293-70.196 66.076-0.387 60.539-3.091 60.405 61.697zM151.307 489.873c68.295-0.163 65.815-5.568 65.624 62.982-0.194 71.128 4.895 64.917-66.014 65.010-69.905 0.101-63.813 4.704-63.885-63.978-0.062-67.431-5.7-64.463 64.275-64.014zM961.263 489.873c72.511-0.258 66.589-4.603 66.455 64.494 0 68.558 6.185 63.537-64.267 63.498-70.196-0.028-65.686 6.053-65.498-65.493 0.132-62.5 0.067-62.5 63.31-62.5zM150.399 280.38c71.004 0 66.659-6.567 66.466 64.528-0.163 63.694-0.036 63.501-65.013 63.756-70.805 0.258-64.822 2.673-64.822-63.756 0.036-69.167-5.919-64.788 63.369-64.528z" horiz-adv-x="1115" />
-<glyph unicode="&#xe61a;" d="M3.881 146.835h220.26v-210.835h-220.26v210.835zM308.817 350.143h220.27v-414.143h-220.27v414.143zM613.764 553.412h220.268v-617.412h-220.268v617.412zM918.685 756.715h220.265v-820.715h-220.265v820.715zM1223.629 960h220.263v-1024h-220.263v1024z" horiz-adv-x="1444" />
-<glyph unicode="&#xe61b;" d="M526.071 234.749c-28.637-30.869-56.465-60.861-84.282-90.859-51.578-55.636-103.047-111.376-154.842-166.832-7.606-8.135-15.958-16.1-25.317-22.012-28.075-17.708-58.31-18.090-88.472-6.492-59.84 23.028-80.004 90.727-59.734 139.234 5.413 12.95 13.721 23.601 23.709 33.173 70.256 67.351 140.506 134.717 210.76 202.077 15.638 14.993 31.264 29.995 47.364 45.45-9.302 9.529-18.386 18.833-27.451 28.137-12.122 12.442-13.234 20.28-5.067 35.498 4.735 8.816 4.789 8.878-2.627 16.198-20.012 19.72-40.168 39.198-63.498 55.188-27.167 18.624-57.161 24.233-89.083 19.849-53.402-7.328-91.609-38.372-121.413-81.046-12.774-18.299-15.365-40.313-17.517-61.875-3.23-32.245-2.415-64.479 2.209-96.597 1.654-11.515-3.863-16.539-13.835-11.175-8.306 4.448-16.095 11.048-22.115 18.353-15.574 18.89-22.223 42.042-27.474 65.395-12.955 57.652-8.86 114.49 12.191 169.495 32.345 84.537 79.743 159.571 145.953 221.932 13.659 12.857 176.841 180.564 202.944 207.021 7.493 7.599 14.895 7.635 22.393 0.028 43.009-43.641 85.985-87.316 128.927-131.029 8.117-8.267 8.019-15.097-0.222-23.49-26.339-26.834-52.726-53.627-79.106-80.419-6.244-6.334-97.34-82.437-73.027-128.816 22.693-25.090 46.196-49.449 69.575-73.904 1.189-1.238 4.686-1.386 6.523-0.632 3.63 1.499 6.848 3.997 10.248 6.066 9.745 5.94 19.545 4.918 27.812-3.083 11.755-11.381 23.405-22.858 35.392-34.59 4.807 4.575 9.939 9.41 15.027 14.294 27.128 26.039 54.272 52.071 81.351 78.146 16.413 15.778 18.652 28.418 11.038 49.658-10.473 29.221-14.356 59.677-13.85 90.624 1.017 61.045 20.438 115.334 61.003 161.416 32.825 37.286 72.054 64.311 121.643 74.325 35.227 7.101 69.139 4.513 100.663-14.026 6.365-3.752 11.908-9.007 17.455-14.005 3.491-3.125 3.153-6.236-0.565-9.98-42.503-42.885-84.772-86.013-127.154-129.035-12.442-12.638-12.356-23.167 0.196-35.914 40.344-40.978 80.597-82.050 120.936-123.052 10.076-10.233 19.537-10.021 29.504 0.134 43.195 44.077 86.449 88.090 129.706 132.118 1.21 1.233 2.572 2.322 5.135 4.624 5.491-5.893 11.895-10.924 15.961-17.406 19.452-30.944 22.608-64.83 17.073-100.25-14.253-91.080-97.188-175.638-197.712-190.123-39.977-5.764-79.372-2.562-118.067 9.031-5.898 1.775-11.541 4.629-17.538 5.829-12.47 2.474-23.872-0.366-32.74-9.877-30.921-33.168-61.674-66.484-92.474-99.758-0.73-0.805-1.349-1.718-0.181-1.099 8.992-10.006 17.354-20.662 27.061-29.94 81.064-77.54 164.91-151.986 250.882-224.063 9.936-8.347 10.274-15.695 1.040-25.1-42.338-43.068-84.689-86.111-127.059-129.154-9.413-9.575-16.846-9.152-25.291 1.295-76.686 94.78-156.8 186.609-239.707 276.002-1.334 1.453-2.562 3.029-4.257 5.042z" horiz-adv-x="1105" />
-<glyph unicode="&#xe61c;" d="M74.418 881.299h239.304v-228.491h-239.304v228.491zM393.455 881.299h239.304v-228.491h-239.304v228.491zM712.494 881.299h239.263v-228.491h-239.263v228.491zM74.418 562.265h239.304v-228.555h-239.304v228.555zM393.455 562.265h239.304v-228.555h-239.304v228.555zM712.494 562.265h239.263v-228.555h-239.263v228.555zM74.418 243.166h239.304v-228.465h-239.304v228.465zM393.455 243.166h239.304v-228.465h-239.304v228.465zM712.494 243.166h239.263v-228.465h-239.263v228.465z" horiz-adv-x="1026" />
+<glyph unicode="&#x20;" d="" />
+<glyph unicode="&#xe603;" glyph-name="presentation" horiz-adv-x="1088" d="M952.495 1019.065h-818.689c-72.81 0-132.183-60.63-132.183-135.162v-750.719c0-74.473 59.372-135.101 132.183-135.101h818.686c72.936 0 132.314 60.625 132.314 135.101v750.722c0.003 74.532-59.378 135.159-132.311 135.159zM946.346 139.651h-806.14v737.822h806.015l0.126-737.822zM685.753 738.544h216.911v-566.758h-216.911v566.758zM428.672 610.002h216.911v-438.216h-216.911v438.216zM172.339 481.46h216.161v-309.677h-216.161v309.677z" />
+<glyph unicode="&#xe613;" glyph-name="recDisable" horiz-adv-x="1140" d="M1123.444 1003.015c-23.593 26.481-64.131 28.989-90.74 5.395l-1008.269-893.436c-26.609-23.468-28.991-64.131-5.46-90.676 12.674-14.306 30.308-21.649 48.126-21.649 15.123 0 30.372 5.401 42.544 16.195l130.045 115.22c90.743-81.844 210.569-132.165 342.473-132.101 282.816 0.061 510.913 227.969 511.287 510.972 0.126 109.934-34.682 211.367-93.499 294.72l118.088 104.625c26.483 23.526 28.997 64.129 5.404 90.735zM944.422 513.818c0.128-200.922-161.896-363.201-362.509-362.952-87.56 0.123-167.573 31.151-230.061 82.569l331.277 293.509v-73.176c1.071-60.993 32.696-92.18 94.944-93.692 61.997 1.512 93.686 32.763 95.131 93.756v41.096h-72.227v-47.499c0.251-4.642-0.564-10.607-2.511-17.949-1.25-3.261-3.448-6.020-6.525-8.093-3.197-2.572-7.845-3.828-13.868-3.828-10.543 0.31-17.132 4.268-19.827 11.921-1.068 3.512-1.947 6.905-2.508 10.163-0.254 2.887-0.377 5.532-0.377 7.786v143.511l42.477 37.634c0.215-0.432 0.452-0.851 0.63-1.303 1.947-6.467 2.762-12.799 2.511-19.076v-36.772h72.227v30.121c-0.246 31.245-9.086 54.699-26.363 70.447l40.711 36.069c35.787-56.055 56.803-122.585 56.867-194.244zM239.795 395.47c-12.613 37.023-19.827 76.557-19.827 117.913-0.19 200.236 161.584 362.009 361.945 362.135 56.853 0 110.313-13.302 158.133-36.398l117.846 104.421c-79.444 50.952-173.758 80.817-275.292 80.948-283.377 0.181-511.354-227.729-511.789-511.675-0.126-79.567 18.636-154.679 51.137-221.882l117.848 104.538zM388.576 690.020h-97.514v-249.057l72.23 64.070v0.689h0.815l117.72 104.418c0 0.564 0.123 0.94 0.123 1.509 0.753 53.898-30.369 80.069-93.374 78.37zM405.959 625.517c1.942-2.767 3.074-6.469 3.323-11.112 0.312-4.452 0.438-9.6 0.438-15.246 0.251-10.916-0.689-19.83-2.949-26.985-2.952-7.594-10.983-11.357-24.159-11.357h-19.325v74.043h15.31c7.842 0 13.865-0.683 18.072-2.19 4.397-1.573 7.468-3.953 9.29-7.153z" />
+<glyph unicode="&#xe614;" glyph-name="recEnable" horiz-adv-x="1142" d="M581.278 1025.708c284.857-0.19 514.807-230.517 514.427-514.997-0.378-285.047-230.073-514.553-514.869-514.615-284.541-0.062-515.311 230.517-514.933 514.422 0.439 285.936 230.009 515.439 515.375 515.19zM580.579 875.756c-201.764-0.123-364.666-163.032-364.478-364.663 0-202.018 162.524-364.735 364.478-364.984 202.018-0.316 365.174 163.030 365.048 365.423-0.252 201.767-163.156 364.35-365.048 364.224zM287.698 688.907h98.196c63.442 1.767 94.785-24.518 94.027-78.863 0.254-19.081-2.211-34.882-7.456-47.521-6.005-12.508-18.706-21.988-38.167-28.181v-0.819c28.373-6.259 43.031-23.573 43.981-51.946v-57.689c0-11.247 0.254-22.813 0.758-34.756 0.819-12.005 3.033-20.979 6.696-27.043h-71.846c-3.727 6.064-6.128 15.038-7.14 27.043-1.012 11.943-1.454 23.509-1.138 34.756v52.321c0 9.603-2.214 16.553-6.573 20.979-4.675 4.107-12.701 6.19-24.012 6.19h-14.599v-141.291h-72.73v326.82zM360.428 558.861h19.463c13.271 0 21.359 3.794 24.331 11.375 2.276 7.204 3.221 16.304 2.969 27.171 0 5.815-0.126 10.867-0.442 15.418-0.252 4.675-1.392 8.404-3.352 11.247-1.831 3.157-4.926 5.561-9.352 7.14-4.233 1.454-10.299 2.211-18.2 2.211h-15.418v-74.564zM498.372 688.907h162.082v-62.687h-89.35v-65.587h78.103v-62.685h-78.103v-73.11h92.822v-62.749h-165.557v326.818zM682.507 599.999c0.316 31.782 9.416 55.542 27.425 71.407 17.44 15.29 40.185 22.936 68.181 22.936 28.247 0 51.119-7.646 68.623-23 17.82-15.798 26.92-39.623 27.171-71.407v-30.333h-72.73v37.031c0.254 6.192-0.57 12.639-2.527 19.209-1.264 3.157-3.475 5.938-6.573 8.214-3.221 1.515-7.898 2.404-13.964 2.404-10.615-0.316-17.249-3.855-19.967-10.618-2.211-6.573-3.223-13.017-2.907-19.209v-161.956c0-2.273 0.126-4.865 0.38-7.772 0.568-3.411 1.454-6.824 2.527-10.233 2.717-7.775 9.352-11.756 19.967-12.007 6.067 0 10.744 1.261 13.964 3.791 3.098 2.15 5.309 4.867 6.573 8.216 1.96 7.33 2.782 13.33 2.527 18.007v47.837h72.73v-41.328c-1.451-61.547-33.364-93.015-95.794-94.469-62.685 1.454-94.53 32.922-95.607 94.343v148.937z" />
+<glyph unicode="&#xe61a;" glyph-name="connection" horiz-adv-x="1444" d="M3.881 210.835h220.26v-210.835h-220.26v210.835zM308.817 414.143h220.27v-414.143h-220.27v414.143zM613.764 617.412h220.268v-617.412h-220.268v617.412zM918.685 820.715h220.265v-820.715h-220.265v820.715zM1223.629 1024h220.263v-1024h-220.263v1024z" />
+<glyph unicode="&#xe900;" glyph-name="connection-lost" horiz-adv-x="1414" d="M0 299.153h196.337v-187.951h-196.337v187.951zM271.842 480.372h196.337v-369.169h-196.337v369.169zM543.656 661.562h196.337v-550.36h-196.337v550.36zM815.47 842.766v-731.564h119.56c-14.589 33.025-23.125 71.503-23.232 111.943 0.132 86.42 38.697 163.851 99.656 216.468l0.348 403.153h-196.332zM1087.292 1024v-533.672c28.874 10.572 62.222 16.73 97.009 16.825 35.717-0.129 69.823-6.614 101.322-18.371l-1.999 535.218h-196.332zM1192.868 439.852c-0.009 0-0.020 0-0.031 0-122.247 0-221.351-98.447-221.372-219.896 0-0.007 0-0.014 0-0.021 0-121.467 99.111-219.935 221.372-219.935 0.011 0 0.021 0 0.032 0 122.248 0.014 221.345 98.477 221.345 219.935 0 0.007 0 0.013 0 0.020-0.021 121.441-99.11 219.883-221.345 219.897zM1194.706 372.607c87.601-0.006 158.614-69.787 158.614-155.866 0-0.006 0-0.012 0-0.019-0.022-86.062-71.026-155.822-158.614-155.828-87.588 0.006-158.593 69.766-158.615 155.826 0 0.007 0 0.014 0 0.020 0 86.079 71.013 155.86 158.613 155.866zM1286.795 355.682l48.348-52.528-236.375-217.567-48.348 52.528 236.375 217.567z" />
+<glyph unicode="&#xe901;" glyph-name="avatar" d="M512 204c106 0 200 56 256 138-2 84-172 132-256 132-86 0-254-48-256-132 56-82 150-138 256-138zM512 810c-70 0-128-58-128-128s58-128 128-128 128 58 128 128-58 128-128 128zM512 938c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426z" />
+<glyph unicode="&#xe902;" glyph-name="download" d="M726 470h-128v170h-172v-170h-128l214-214zM826 596c110-8 198-100 198-212 0-118-96-214-214-214h-554c-142 0-256 114-256 256 0 132 100 240 228 254 54 102 160 174 284 174 156 0 284-110 314-258z" />
+<glyph unicode="&#xe903;" glyph-name="autorenew" d="M800 694c34-52 54-116 54-182 0-188-154-342-342-342v-128l-170 172 170 170v-128c142 0 256 114 256 256 0 44-12 84-30 120zM512 768c-142 0-256-114-256-256 0-44 10-84 30-120l-62-62c-34 52-54 116-54 182 0 188 154 342 342 342v128l170-172-170-170v128z" />
+<glyph unicode="&#xe904;" glyph-name="kick" d="M512 810l284-426h-568zM214 298h596v-84h-596v84z" />
+<glyph unicode="&#xe905;" glyph-name="hangup" d="M512 640c-68 0-134-10-196-30v-132c0-16-10-34-24-40-42-20-80-46-114-78-8-8-18-12-30-12s-22 4-30 12l-106 106c-8 8-12 18-12 30s4 22 12 30c130 124 306 200 500 200s370-76 500-200c8-8 12-18 12-30s-4-22-12-30l-106-106c-8-8-18-12-30-12s-22 4-30 12c-34 32-72 58-114 78-14 6-24 20-24 38v132c-62 20-128 32-196 32z" />
+<glyph unicode="&#xe906;" glyph-name="chat" d="M854 342v512h-684v-598l86 86h598zM854 938c46 0 84-38 84-84v-512c0-46-38-86-84-86h-598l-170-170v768c0 46 38 84 84 84h684z" />
+<glyph unicode="&#xe907;" glyph-name="edit" d="M884 724l-78-78-160 160 78 78c16 16 44 16 60 0l100-100c16-16 16-44 0-60zM128 288l472 472 160-160-472-472h-160v160z" />
+<glyph unicode="&#xe908;" glyph-name="share-doc" d="M554 640h236l-236 234v-234zM682 426v86h-340v-86h340zM682 256v86h-340v-86h340zM598 938l256-256v-512c0-46-40-84-86-84h-512c-46 0-86 38-86 84l2 684c0 46 38 84 84 84h342z" />
+<glyph unicode="&#xe909;" glyph-name="telephone" d="M854 362c24 0 42-18 42-42v-150c0-24-18-42-42-42-400 0-726 326-726 726 0 24 18 42 42 42h150c24 0 42-18 42-42 0-54 8-104 24-152 4-14 2-32-10-44l-94-94c62-122 162-220 282-282l94 94c12 12 30 14 44 10 48-16 98-24 152-24zM854 810v44h-44v-44h44zM768 896h128v-128h-86v-86h-42v214zM640 810v-128h-128v44h86v42h-86v128h128v-42h-86v-44h86zM726 896v-214h-44v214h44z" />
+<glyph unicode="&#xe90a;" glyph-name="star-full" d="M512 288l-264-160 70 300-232 202 306 26 120 282 120-282 306-26-232-202 70-300z" />
+<glyph unicode="&#xe90b;" glyph-name="full-screen" d="M598 810h212v-212h-84v128h-128v84zM726 298v128h84v-212h-212v84h128zM214 598v212h212v-84h-128v-128h-84zM298 426v-128h128v-84h-212v212h84z" />
+<glyph unicode="&#xe90c;" glyph-name="exit-full-screen" d="M682 682h128v-84h-212v212h84v-128zM598 214v212h212v-84h-128v-128h-84zM342 682v128h84v-212h-212v84h128zM214 342v84h212v-212h-84v128h-128z" />
+<glyph unicode="&#xe90d;" glyph-name="security" d="M768 170v428h-512v-428h512zM768 682c46 0 86-38 86-84v-428c0-46-40-84-86-84h-512c-46 0-86 38-86 84v428c0 46 40 84 86 84h388v86c0 72-60 132-132 132s-132-60-132-132h-82c0 118 96 214 214 214s214-96 214-214v-86h42zM512 298c-46 0-86 40-86 86s40 86 86 86 86-40 86-86-40-86-86-86z" />
+<glyph unicode="&#xe90e;" glyph-name="security-locked" d="M768 170v428h-512v-428h512zM380 768v-86h264v86c0 72-60 132-132 132s-132-60-132-132zM768 682c46 0 86-38 86-84v-428c0-46-40-84-86-84h-512c-46 0-86 38-86 84v428c0 46 40 84 86 84h42v86c0 118 96 214 214 214s214-96 214-214v-86h42zM512 298c-46 0-86 40-86 86s40 86 86 86 86-40 86-86-40-86-86-86z" />
+<glyph unicode="&#xe90f;" glyph-name="reload" d="M512 256v128l170-170-170-172v128c-188 0-342 154-342 342 0 66 20 130 54 182l62-62c-20-36-30-76-30-120 0-142 114-256 256-256zM512 854c188 0 342-154 342-342 0-66-20-130-54-182l-62 62c20 36 30 76 30 120 0 142-114 256-256 256v-128l-170 170 170 172v-128z" />
+<glyph unicode="&#xe910;" glyph-name="microphone" d="M738 554h72c0-146-116-266-256-286v-140h-84v140c-140 20-256 140-256 286h72c0-128 108-216 226-216s226 88 226 216zM512 426c-70 0-128 58-128 128v256c0 70 58 128 128 128s128-58 128-128v-256c0-70-58-128-128-128z" />
+<glyph unicode="&#xe911;" glyph-name="mic-empty" d="M738 554h72c0-146-116-266-256-286v-140h-84v140c-140 20-256 140-256 286h72c0-128 108-216 226-216s226 88 226 216zM460 814v-264c0-28 24-50 52-50s50 22 50 50l2 264c0 28-24 52-52 52s-52-24-52-52zM512 426c-70 0-128 58-128 128v256c0 70 58 128 128 128s128-58 128-128v-256c0-70-58-128-128-128z" />
+<glyph unicode="&#xe912;" glyph-name="mic-disabled" d="M182 896l714-714-54-54-178 178c-32-20-72-32-110-38v-140h-84v140c-140 20-256 140-256 286h72c0-128 108-216 226-216 34 0 68 8 98 22l-70 70c-8-2-18-4-28-4-70 0-128 58-128 128v32l-256 256zM640 548l-256 254v8c0 70 58 128 128 128s128-58 128-128v-262zM810 554c0-50-14-98-38-140l-52 54c12 26 18 54 18 86h72z" />
+<glyph unicode="&#xe913;" glyph-name="link" d="M640 426c114 0 342-56 342-170v-86h-684v86c0 114 228 170 342 170zM256 598h128v-86h-128v-128h-86v128h-128v86h128v128h86v-128zM640 512c-94 0-170 76-170 170s76 172 170 172 170-78 170-172-76-170-170-170z" />
+<glyph unicode="&#xe914;" glyph-name="shared-video" d="M512 170c188 0 342 154 342 342s-154 342-342 342-342-154-342-342 154-342 342-342zM512 938c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426zM426 320v384l256-192z" />
+<glyph unicode="&#xe915;" glyph-name="settings" d="M512 362c82 0 150 68 150 150s-68 150-150 150-150-68-150-150 68-150 150-150zM830 470l90-70c8-6 10-18 4-28l-86-148c-6-10-16-12-26-8l-106 42c-22-16-46-32-72-42l-16-112c-2-10-10-18-20-18h-172c-10 0-18 8-20 18l-16 112c-26 10-50 24-72 42l-106-42c-10-4-20-2-26 8l-86 148c-6 10-4 22 4 28l90 70c-2 14-2 28-2 42s0 28 2 42l-90 70c-8 6-10 18-4 28l86 148c6 10 16 12 26 8l106-42c22 16 46 32 72 42l16 112c2 10 10 18 20 18h172c10 0 18-8 20-18l16-112c26-10 50-24 72-42l106 42c10 4 20 2 26-8l86-148c6-10 4-22-4-28l-90-70c2-14 2-28 2-42s0-28-2-42z" />
+<glyph unicode="&#xe916;" glyph-name="star" d="M512 366l160-96-42 182 142 124-188 16-72 172-72-172-188-16 142-124-42-182zM938 630l-232-202 70-300-264 160-264-160 70 300-232 202 306 26 120 282 120-282z" />
+<glyph unicode="&#xe917;" glyph-name="share-desktop" d="M896 298v512h-768v-512h768zM896 896c46 0 86-40 86-86l-2-512c0-46-38-84-84-84h-214v-86h-340v86h-214c-46 0-86 38-86 84v512c0 46 40 86 86 86h768z" />
+<glyph unicode="&#xe918;" glyph-name="camera" d="M726 576l170 170v-468l-170 170v-150c0-24-20-42-44-42h-512c-24 0-42 18-42 42v428c0 24 18 42 42 42h512c24 0 44-18 44-42v-150z" />
+<glyph unicode="&#xe919;" glyph-name="camera-disabled" d="M140 938l756-756-54-54-136 136c-6-4-16-8-24-8h-512c-24 0-42 18-42 42v428c0 24 18 42 42 42h32l-116 116zM896 746v-456l-478 478h264c24 0 44-18 44-42v-150z" />
+<glyph unicode="&#xe91a;" glyph-name="volume" d="M598 886c172-38 298-192 298-374s-126-336-298-374v88c124 36 212 150 212 286s-88 250-212 286v88zM704 512c0-76-42-140-106-172v344c64-32 106-96 106-172zM128 640h170l214 214v-684l-214 214h-170v256z" />
+<glyph unicode="&#xe91b;" glyph-name="contactList" d="M704 746c-46 0-86-38-86-84s40-86 86-86 86 40 86 86-40 84-86 84zM704 512c-82 0-150 68-150 150s68 148 150 148 150-66 150-148-68-150-150-150zM320 746c-46 0-86-38-86-84s40-86 86-86 86 40 86 86-40 84-86 84zM320 512c-82 0-150 68-150 150s68 148 150 148 150-66 150-148-68-150-150-150zM918 278v52c0 24-110 76-214 76-46 0-90-12-128-24 14-16 22-32 22-52v-52h320zM534 278v52c0 24-110 76-214 76s-214-52-214-76v-52h428zM704 470c92 0 278-48 278-140v-116h-940v116c0 92 186 140 278 140 52 0 130-16 192-44 62 28 140 44 192 44z" />
+<glyph unicode="&#xe91c;" glyph-name="toggle-filmstrip" d="M896 896h-768c-46.933 0-85.333-38.4-85.333-85.333v-597.333c0-46.933 38.4-85.333 85.333-85.333h768c46.933 0 85.333 38.4 85.333 85.333v597.333c0 46.933-38.4 85.333-85.333 85.333zM896 213.333h-768v128h768v-128z" />
+<glyph unicode="&#xe91d;" glyph-name="feedback" d="M42.667 128h170.667v512h-170.667v-512zM981.333 597.333c0 46.933-38.4 85.333-85.333 85.333h-269.227l40.533 194.987 1.28 13.653c0 17.493-7.253 33.707-18.773 45.227l-45.227 44.8-280.747-281.173c-15.787-15.36-25.173-36.693-25.173-60.16v-426.667c0-46.933 38.4-85.333 85.333-85.333h384c35.413 0 65.707 21.333 78.507 52.053l128.853 300.8c3.84 9.813 5.973 20.053 5.973 31.147v81.493l-0.427 0.427 0.427 3.413z" />
 </font></defs></svg>

index.html

@@ -96,58 +96,121 @@
         <!--#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>
-                    <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>
-                        </ul>
-                        <ul id="unableToUnmutePopup" class="loginmenu">
-                            <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>
-                </span>
+                <span id="mainToolbar" class="toolbar"></span>
+        </div>
+        <div id="subject" class="hide"></div>
+        <div id="extendedToolbar" class="toolbar">
+            <a class="button" id="toolbar_button_profile" 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 extendedToolbarPopup">
+                    <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-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 icon-shared-video" 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 extendedToolbarPopup">
+                    <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-full-screen" id="toolbar_button_fullScreen" data-container="body" data-toggle="popover" data-placement="right" shortcut="toggleFullscreenPopover" data-i18n="[content]toolbar.fullscreen" content="Enter / Exit Full Screen"></a>
+            <a class="button icon-toggle-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 icon-feedback" id="feedbackButton" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[content]feedback"></a>
+            <div id="sideToolbarContainer">
+                <div id="profile_container" class="sideToolbarContainer__inner">
+                    <div class="title" data-i18n="profile.title"></div>
+                    <div class="sideToolbarBlock first">
+                        <label class="first" data-i18n="profile.setDisplayNameLabel"></label>
+                        <input type="text" id="setDisplayName" data-i18n="[placeholder]settings.name" placeholder="Name">
+                    </div>
+                    <div class="sideToolbarBlock">
+                        <label data-i18n="profile.setEmailLabel"></label>
+                        <input type="text" id="setEmail" placeholder="Enter e-mail">
+                    </div>
+                </div>
+                <div id="chat_container" class="sideToolbarContainer__inner">
+                    <div id="nickname">
+                        <span data-i18n="chat.nickname.title"></span>
+                        <form>
+                            <input type='text' id="nickinput" data-i18n="[placeholder]chat.nickname.popover" autofocus>
+                        </form>
+                    </div>
+
+                    <div id="chatconversation"></div>
+                    <audio id="chatNotification" src="sounds/incomingMessage.wav" preload="auto"></audio>
+                    <textarea id="usermsg" data-i18n="[placeholder]chat.messagebox" autofocus></textarea>
+                    <div id="smileysarea">
+                        <div id="smileys" id="toggle_smileys">
+                            <img src="images/smile.svg"/>
+                        </div>
+                    </div>
+                </div>
+                <div id="contacts_container" class="sideToolbarContainer__inner">
+                    <div class="title" data-i18n="contactlist"></div>
+                    <ul id="contacts"></ul>
+                </div>
+                <div id="settings_container" class="sideToolbarContainer__inner">
+                    <div class="title" data-i18n="settings.title"></div>
+                    <select class="first" id="languages_selectbox"></select>
+                    <div class="subTitle" data-i18n="settings.audioVideo"></div>
+                    <div id="devicesOptions">
+                        <div class="sideToolbarBlock first">
+                            <label class="first" data-i18n="settings.selectCamera"></label>
+                            <select id="selectCamera"></select>
+                        </div>
+                        <div class="sideToolbarBlock">
+                            <label data-i18n="settings.selectMic"></label>
+                            <select  id="selectMic"></select>
+                        </div>
+                        <div class="sideToolbarBlock">
+                            <label data-i18n="settings.selectAudioOutput"></label>
+                            <select  id="selectAudioOutput"></select>
+                        </div>
+                    </div>
+                    <div class="subTitle" data-i18n="settings.moderator"></div>
+                    <div id = "startMutedOptions">
+                        <div class="sideToolbarBlock first">
+                            <input type="checkbox" id="startAudioMuted">
+                            <label class="startMutedLabel" for="startAudioMuted" data-i18n="settings.startAudioMuted"></label>
+                        </div>
+                        <div class="sideToolbarBlock">
+                            <input type="checkbox" id="startVideoMuted">
+                            <label class="startMutedLabel" for="startVideoMuted" data-i18n="settings.startVideoMuted"></label>
+                        </div>
+                    </div>
+                    <div id="followMeOptions" class="sideToolbarBlock">
+                        <input type="checkbox" id="followMeCheckBox">
+                        <label class="followMeLabel" for="followMeCheckBox" data-i18n="settings.followMe"></label>
+                    </div>
+                    <a id="downloadlog" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[data-content]downloadlogs" ><i class="icon-download"></i></a>
+                </div>
             </div>
-            <div id="subject"></div>
         </div>
         <div id="videospace">
-
             <div id="largeVideoContainer" class="videocontainer">
                 <div id="presentation"></div>
                 <div id="sharedVideo"><div id="sharedVideoIFrame"></div></div>
@@ -183,96 +246,6 @@
                 <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="nickname">
-                <span data-i18n="chat.nickname.title"></span>
-                <form>
-                    <input type='text' id="nickinput" data-i18n="[placeholder]chat.nickname.popover" autofocus>
-                </form>
-            </div>
-
-            <div id="chatconversation"></div>
-            <audio id="chatNotification" src="sounds/incomingMessage.wav" preload="auto"></audio>
-                <textarea id="usermsg" data-i18n="[placeholder]chat.messagebox" autofocus></textarea>
-            <div id="smileysarea">
-                <div id="smileys" id="toggle_smileys">
-                    <img src="images/smile.svg"/>
-                </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>
-            <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 class="arrow-up"></div>
-            <input type="text" id="setDisplayName" data-i18n="[placeholder]settings.name" placeholder="Name">
-            <input type="text" id="setEmail" placeholder="E-Mail">
-            <select id="languages_selectbox"></select>
-            <div id = "startMutedOptions">
-                <label class = "startMutedLabel">
-                    <input type="checkbox" id="startAudioMuted">
-                    <span  data-i18n="settings.startAudioMuted"></span>
-                </label>
-                <label class = "startMutedLabel">
-                    <input type="checkbox" id="startVideoMuted">
-                    <span data-i18n="settings.startVideoMuted"></span>
-                </label>
-            </div>
-            <div id="devicesOptions">
-                <label className="devicesOptionsLabel">
-                    <span data-i18n="settings.selectCamera"></span>
-                    <select id="selectCamera"></select>
-                </label>
-                <label className="devicesOptionsLabel">
-                    <span data-i18n="settings.selectMic"></span>
-                    <select id="selectMic"></select>
-                </label>
-                <label className="devicesOptionsLabel">
-                    <span data-i18n="settings.selectAudioOutput"></span>
-                    <select id="selectAudioOutput"></select>
-                </label>
-            </div>
-            <div id="followMeOptions">
-                <label class = "followMeLabel">
-                    <input type="checkbox" id="followMeCheckBox">
-                    <span  data-i18n="settings.followMe"></span>
-                </label>
-            </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;">

interface_config.js

@@ -2,6 +2,9 @@ var interfaceConfig = {
     CANVAS_EXTRA: 104,
     CANVAS_RADIUS: 0,
     SHADOW_COLOR: '#ffffff',
+    // TO FIX: this needs to be handled from SASS variables. There are some
+    // methods allowing to use variables both in css and js.
+    DEFAULT_BACKGROUND: '#474747',
     INITIAL_TOOLBAR_TIMEOUT: 20000,
     TOOLBAR_TIMEOUT: 4000,
     DEFAULT_REMOTE_DISPLAY_NAME: "Fellow Jitster",
@@ -16,7 +19,8 @@ var interfaceConfig = {
     INVITATION_POWERED_BY: true,
     // the toolbar buttons line is intentionally left in one line, to be able
     // to easily override values or remove them using regex
-    TOOLBAR_BUTTONS: ['authentication', 'microphone', 'camera', 'desktop', 'recording', 'security', 'invite', 'chat', 'etherpad', 'sharedvideo', 'fullscreen', 'sip', 'dialpad', 'settings', 'hangup', 'filmstrip', 'contacts'], // jshint ignore:line
+    MAIN_TOOLBAR_BUTTONS: ['microphone', 'camera', 'desktop', 'invite', 'hangup'], // jshint ignore:line
+    TOOLBAR_BUTTONS: ['profile', 'authentication', 'microphone', 'camera', 'desktop', 'recording', 'security', 'invite', 'chat', 'etherpad', 'sharedvideo', 'fullscreen', 'sip', 'dialpad', 'settings', 'hangup', 'filmstrip', 'contacts'], // jshint ignore:line
     // Determines how the video would fit the screen. 'both' would fit the whole
     // screen, 'height' would fit the original video height to the height of the
     // screen, 'width' would fit the original video width to the width of the
@@ -29,4 +33,4 @@ var interfaceConfig = {
     RANDOM_AVATAR_URL_PREFIX: false,
     RANDOM_AVATAR_URL_SUFFIX: false,
     FILM_STRIP_MAX_HEIGHT: 120
-};
+};

lang/main.json

@@ -1,5 +1,5 @@
 {
-    "contactlist": "CONTACT LIST",
+    "contactlist": "ON CALL (__participants__)",
     "connectionsettings": "Connection Settings",
     "poweredby": "powered by",
     "downloadlogs": "Download logs",
@@ -11,7 +11,7 @@
     "raisedHand": "Would like to speak",
     "defaultNickname": "ex. Jane Pink",
     "defaultLink": "e.g. __url__",
-    "calling": "Calling __name__ ...",
+    "callingName": "__name__",
     "userMedia": {
       "react-nativeGrantPermissions": "Please grant permissions to use your camera and microphone by pressing <b><i>Allow</i></b> button",
       "chromeGrantPermissions": "Please grant permissions to use your camera and microphone by pressing <b><i>Allow</i></b> button",
@@ -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.",
@@ -93,11 +93,12 @@
         "micMutedPopup": "Your microphone has been muted so that you<br/>would fully enjoy your shared video.",
         "unableToUnmutePopup": "You cannot un-mute while the shared video is on.",
         "cameraDisabled": "Camera is not available",
-        "micDisabled": "Microphone is not available"
+        "micDisabled": "Microphone is not available",
+        "filmstrip": "Show / hide videos"
     },
     "bottomtoolbar": {
         "chat": "Open / close chat",
-        "filmstrip": "Show / hide film strip",
+        "filmstrip": "Show / hide videos",
         "contactlist": "Open / close contact list"
     },
     "chat":{
@@ -112,14 +113,24 @@
         "title": "SETTINGS",
         "update": "Update",
         "name": "Name",
-        "startAudioMuted": "Start without audio",
-        "startVideoMuted": "Start without video",
+        "startAudioMuted": "Everyone starts muted",
+        "startVideoMuted": "Everyone starts hidden",
         "selectCamera": "Select camera",
         "selectMic": "Select microphone",
         "selectAudioOutput": "Select audio output",
-        "followMe": "Enable follow me",
+        "followMe": "Everyone follows me",
         "noDevice": "None",
-        "noPermission": "Permission to use device is not granted"
+        "noPermission": "Permission to use device is not granted",
+        "cameraAndMic": "Camera and microphone",
+        "moderator": "MODERATOR",
+        "password": "SET PASSWORD",
+        "audioVideo": "AUDIO / VIDEO",
+        "setPasswordLabel": "Lock your room with a password."
+    },
+    "profile": {
+        "title": "PROFILE",
+        "setDisplayNameLabel": "Set your display name",
+        "setEmailLabel": "Set your gravatar email"
     },
     "videothumbnail":
     {
@@ -221,18 +232,18 @@
         "Remove": "Remove",
         "passwordMsg": "Set a password to lock your room",
         "Invite": "Invite",
-        "shareLink": "Share this link with everyone you want to invite",
+        "shareLink": "Copy and share this link",
         "settings1": "Configure your conference",
         "settings2": "Participants join muted",
         "settings3": "Require nicknames<br/><br/>Set a password to lock your room:",
-        "yourPassword": "your password",
+        "yourPassword": "Enter new password",
         "Back": "Back",
         "serviceUnavailable": "Service unavailable",
         "gracefulShutdown": "Our service is currently down for maintenance. Please try again later.",
         "Yes": "Yes",
         "reservationError": "Reservation system error",
         "reservationErrorMsg": "Error code: __code__, message: __msg__",
-        "password": "password",
+        "password": "Enter password",
         "userPassword": "user password",
         "token": "token",
         "tokenAuthFailed": "Failed to authenticate with XMPP server: invalid token",

modules/UI/Feedback.js

@@ -20,11 +20,11 @@ var constructOverallFeedbackHtml = function() {
         feedbackQuestion +
         '</div><br/><br/>' +
         '<div id="stars">' +
-        '<a><i class="fa fa-star-o fa fa-star"></i></a>' +
-        '<a><i class="fa fa-star-o fa fa-star"></i></a>' +
-        '<a><i class="fa fa-star-o fa fa-star"></i></a>' +
-        '<a><i class="fa fa-star-o fa fa-star"></i></a>' +
-        '<a><i class="fa fa-star-o fa fa-star"></i></a>' +
+        '<a><i class="icon-star icon-star-full"></i></a>' +
+        '<a><i class="icon-star icon-star-full"></i></a>' +
+        '<a><i class="icon-star icon-star-full"></i></a>' +
+        '<a><i class="icon-star icon-star-full"></i></a>' +
+        '<a><i class="icon-star icon-star-full"></i></a>' +
         '</div></div>';
 
     return message;
@@ -252,10 +252,10 @@ var Feedback = {
     {
         $('#stars >a >i').each(function(index) {
             if (index <= starCount) {
-                $(this).removeClass("fa-star-o");
+                $(this).removeClass("icon-star");
             }
             else
-                $(this).addClass("fa-star-o");
+                $(this).addClass("icon-star");
         });
     },
     /**
@@ -280,7 +280,7 @@ var Feedback = {
     unhoverStars: function (starCount)
     {
         $('#stars >a >i').each(function(index) {
-            if (index <= starCount && $(this).hasClass("fa-star-o"))
+            if (index <= starCount && $(this).hasClass("icon-star"))
                 $(this).removeClass("starHover");
         });
     }

modules/UI/UI.js

@@ -5,10 +5,9 @@ var UI = {};
 import Chat from "./side_pannels/chat/Chat";
 import Toolbar from "./toolbars/Toolbar";
 import ToolbarToggler from "./toolbars/ToolbarToggler";
-import BottomToolbar from "./toolbars/BottomToolbar";
 import ContactList from "./side_pannels/contactlist/ContactList";
 import Avatar from "./avatar/Avatar";
-import PanelToggler from "./side_pannels/SidePanelToggler";
+import SideContainerToggler from "./side_pannels/SideContainerToggler";
 import UIUtil from "./util/UIUtil";
 import UIEvents from "../../service/UI/UIEvents";
 import CQEvents from '../../service/connectionquality/CQEvents';
@@ -20,6 +19,7 @@ import GumPermissionsOverlay from './gum_overlay/UserMediaPermissionsGuidanceOve
 import VideoLayout from "./videolayout/VideoLayout";
 import FilmStrip from "./videolayout/FilmStrip";
 import SettingsMenu from "./side_pannels/settings/SettingsMenu";
+import Profile from "./side_pannels/profile/Profile";
 import Settings from "./../settings/Settings";
 import { reload } from '../util/helpers';
 import RingOverlay from "./ring_overlay/RingOverlay";
@@ -134,7 +134,6 @@ function setupChat() {
  */
 function setupToolbars() {
     Toolbar.init(eventEmitter);
-    BottomToolbar.setupListeners(eventEmitter);
 }
 
 /**
@@ -142,7 +141,7 @@ function setupToolbars() {
  * (a.k.a. presentation mode in Chrome).
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
  */
-function toggleFullScreen () {
+UI.toggleFullScreen = function() {
                             // alternative standard method
     let isNotFullScreen = !document.fullscreenElement &&
             !document.mozFullScreenElement && // current working methods
@@ -171,7 +170,7 @@ function toggleFullScreen () {
             document.webkitExitFullscreen();
         }
     }
-}
+};
 
 /**
  * Notify user that server has shut down.
@@ -253,7 +252,7 @@ UI.changeDisplayName = function (id, displayName) {
     VideoLayout.onDisplayNameChanged(id, displayName);
 
     if (APP.conference.isLocalId(id) || id === 'localVideoContainer') {
-        SettingsMenu.changeDisplayName(displayName);
+        Profile.changeDisplayName(displayName);
         Chat.setChatConversationMode(!!displayName);
     }
 };
@@ -299,7 +298,7 @@ UI.initConference = function () {
     //if local role changes buttons state will be again updated
     UI.updateLocalRole(false);
 
-    ToolbarToggler.showToolbar();
+    UI.showToolbar();
 
     let displayName = config.displayJids ? id : Settings.getDisplayName();
 
@@ -337,7 +336,7 @@ UI.mucJoined = function () {
  */
 UI.handleToggleFilmStrip = () => {
     UI.toggleFilmStrip();
-    VideoLayout.resizeVideoArea(PanelToggler.isVisible(), true, false);
+    VideoLayout.resizeVideoArea(true, false);
 };
 
 /**
@@ -357,16 +356,20 @@ function registerListeners() {
         }
     });
 
-    UI.addListener(UIEvents.FULLSCREEN_TOGGLE, toggleFullScreen);
+    UI.addListener(UIEvents.FULLSCREEN_TOGGLE, UI.toggleFullScreen);
 
     UI.addListener(UIEvents.TOGGLE_CHAT, UI.toggleChat);
 
     UI.addListener(UIEvents.TOGGLE_SETTINGS, function () {
-        PanelToggler.toggleSettingsMenu();
+        UI.toggleSidePanel("settings_container");
     });
 
     UI.addListener(UIEvents.TOGGLE_CONTACT_LIST, UI.toggleContactList);
 
+    UI.addListener( UIEvents.TOGGLE_PROFILE, function() {
+        UI.toggleSidePanel("profile_container");
+    });
+
     UI.addListener(UIEvents.TOGGLE_FILM_STRIP, UI.handleToggleFilmStrip);
 
     UI.addListener(UIEvents.FOLLOW_ME_ENABLED, function (isEnabled) {
@@ -380,8 +383,8 @@ function registerListeners() {
  */
 function bindEvents() {
     function onResize() {
-        PanelToggler.resizeChat();
-        VideoLayout.resizeVideoArea(PanelToggler.isVisible());
+        SideContainerToggler.resize();
+        VideoLayout.resizeVideoArea();
     }
 
     // Resize and reposition videos in full screen mode.
@@ -430,22 +433,22 @@ UI.start = function () {
     registerListeners();
 
     ToolbarToggler.init();
-    BottomToolbar.init();
+    SideContainerToggler.init(eventEmitter);
     FilmStrip.init(eventEmitter);
 
     VideoLayout.init(eventEmitter);
     if (!interfaceConfig.filmStripOnly) {
-        VideoLayout.initLargeVideo(PanelToggler.isVisible());
+        VideoLayout.initLargeVideo();
     }
-    VideoLayout.resizeVideoArea(PanelToggler.isVisible(), true, true);
+    VideoLayout.resizeVideoArea(true, true);
 
     ContactList.init(eventEmitter);
 
     bindEvents();
     sharedVideoManager = new SharedVideoManager(eventEmitter);
     if (!interfaceConfig.filmStripOnly) {
-        $("#videospace").mousemove(function () {
-            return ToolbarToggler.showToolbar();
+        $("#videoconference_page").mousemove(function () {
+            return UI.showToolbar();
         });
         setupToolbars();
         setupChat();
@@ -468,9 +471,8 @@ UI.start = function () {
             elem.href = 'data:application/json;charset=utf-8,\n' + data;
         });
     } else {
-        $("#header").css("display", "none");
+        $("#mainToolbarContainer").css("display", "none");
         $("#downloadlog").css("display", "none");
-        BottomToolbar.hide();
         FilmStrip.setupFilmStripOnly();
         messageHandler.enableNotifications(false);
         $('body').popover("disable");
@@ -499,17 +501,11 @@ UI.start = function () {
             "hideEasing": "linear",
             "showMethod": "fadeIn",
             "hideMethod": "fadeOut",
-            "reposition": function () {
-                if (PanelToggler.isVisible()) {
-                    $("#toast-container").addClass("notification-bottom-right-center");
-                } else {
-                    $("#toast-container").removeClass("notification-bottom-right-center");
-                }
-            },
             "newestOnTop": false
         };
 
         SettingsMenu.init(eventEmitter);
+        Profile.init(eventEmitter);
     }
 
     if(APP.tokenData.callee) {
@@ -727,16 +723,26 @@ UI.isFilmStripVisible = function () {
  * Toggles chat panel.
  */
 UI.toggleChat = function () {
-    PanelToggler.toggleChat();
+    UI.toggleSidePanel("chat_container");
 };
 
 /**
  * Toggles contact list panel.
  */
 UI.toggleContactList = function () {
-    PanelToggler.toggleContactList();
+    UI.toggleSidePanel("contacts_container");
+};
+
+/**
+ * Toggles the given side panel.
+ *
+ * @param {String} sidePanelId the identifier of the side panel to toggle
+ */
+UI.toggleSidePanel = function (sidePanelId) {
+    SideContainerToggler.toggle(sidePanelId);
 };
 
+
 /**
  * Handle new user display name.
  */
@@ -828,6 +834,16 @@ UI.removeListener = function (type, listener) {
     eventEmitter.removeListener(type, listener);
 };
 
+/**
+ * Emits the event of given type by specifying the parameters in options.
+ *
+ * @param type the type of the event we're emitting
+ * @param options the parameters for the event
+ */
+UI.emitEvent = function (type, options) {
+    eventEmitter.emit(type, options);
+};
+
 UI.clickOnVideo = function (videoNumber) {
     var remoteVideos = $(".videocontainer:not(#mixedstream)");
     if (remoteVideos.length > videoNumber) {
@@ -854,7 +870,7 @@ function changeAvatar(id, avatarUrl) {
     VideoLayout.changeUserAvatar(id, avatarUrl);
     ContactList.changeUserAvatar(id, avatarUrl);
     if (APP.conference.isLocalId(id)) {
-        SettingsMenu.changeAvatar(avatarUrl);
+        Profile.changeAvatar(avatarUrl);
     }
 }
 
@@ -1483,6 +1499,15 @@ UI.hideRingOverLay = function () {
     FilmStrip.toggleFilmStrip(true);
 };
 
+/**
+ * Indicates if the ring overlay is currently visible.
+ *
+ * @returns {*|boolean} {true} if the ring overlay is visible, {false} otherwise
+ */
+UI.isRingOverlayVisible = function () {
+    return RingOverlay.isVisible();
+};
+
 /**
  * Shows browser-specific overlay with guidance how to proceed with gUM prompt.
  * @param {string} browser - name of browser for which to show the guidance

modules/UI/etherpad/Etherpad.js

@@ -4,7 +4,6 @@ import VideoLayout from "../videolayout/VideoLayout";
 import LargeContainer from '../videolayout/LargeContainer';
 import UIUtil from "../util/UIUtil";
 import UIEvents from "../../../service/UI/UIEvents";
-import SidePanelToggler from "../side_pannels/SidePanelToggler";
 import FilmStrip from '../videolayout/FilmStrip';
 
 /**

modules/UI/recording/Recording.js

@@ -19,7 +19,6 @@ import UIUtil from '../util/UIUtil';
 import VideoLayout from '../videolayout/VideoLayout';
 import Feedback from '../Feedback.js';
 import Toolbar from '../toolbars/Toolbar';
-import BottomToolbar from '../toolbars/BottomToolbar';
 
 /**
  * The dialog for user input.
@@ -260,7 +259,6 @@ var Recording = {
             VideoLayout.setLocalVideoVisible(false);
             Feedback.enableFeedback(false);
             Toolbar.enable(false);
-            BottomToolbar.enable(false);
             APP.UI.messageHandler.enableNotifications(false);
             APP.UI.messageHandler.enablePopups(false);
         }

modules/UI/ring_overlay/RingOverlay.js

@@ -1,4 +1,5 @@
 /* global $ */
+/* jshint -W101 */
 
 /**
  * Shows ring overlay
@@ -8,35 +9,39 @@ class RingOverlay {
      * @param callee instance of User class from TokenData.js
      */
     constructor(callee) {
+        this._containerId = 'ringOverlay';
+        this._audioContainerId = 'ringOverlayRinging';
+
         this.callee = callee;
-        this._buildHtml();
-        this.audio = $("#ring_overlay_ringing");
-        this.audio[0].play();
+        this.render();
+        this.audio = document.getElementById(this._audioContainerId);
+        this.audio.play();
         this._setAudioTimeout();
     }
 
     /**
      * Builds and appends the ring overlay to the html document
      */
-    _buildHtml() {
-        $("body").append("<div class='overlay_container' >" +
-        "<div class='overlay' /><div class='overlay_content'>" +
-        "<img class='overlay_avatar' src='" +
-        this.callee.getAvatarUrl() + "' />" +
-        "<span data-i18n='calling' data-i18n-options='" +
-        JSON.stringify({name: this.callee.getName()}) +
-        "' class='overlay_text'>Calling " +
-        this.callee.getName() + "...</span></div>" +
-        "<audio id='ring_overlay_ringing' src='/sounds/ring.ogg' /></div>");
+    _getHtmlStr(callee) {
+        return `
+            <div id="${this._containerId}" class='ringing' >
+                <div class='ringing__content'>
+                    <p>Calling...</p>
+                    <img class='ringing__avatar' src="${callee.getAvatarUrl()}" />
+                    <div class="ringing__caller-info">
+                        <p>${callee.getName()}</p>
+                    </div>
+                </div>
+                <audio id="${this._audioContainerId}" src="/sounds/ring.ogg" />
+            </div>`;
     }
 
     /**
-     * Sets the interval that is going to play the ringing sound.
+     *
      */
-    _setAudioTimeout() {
-        this.interval = setInterval( () => {
-            this.audio[0].play();
-        }, 5000);
+    render() {
+        this.htmlStr = this._getHtmlStr(this.callee);
+        this._attach();
     }
 
     /**
@@ -44,9 +49,28 @@ class RingOverlay {
      * related to the ring overlay.
      */
     destroy() {
-        if(this.interval)
+        if (this.interval) {
             clearInterval(this.interval);
-        $(".overlay_container").remove();
+        }
+
+        this._detach();
+    }
+
+    _attach() {
+        $("body").append(this.htmlStr);
+    }
+
+    _detach() {
+        $(`#${this._containerId}`).remove();
+    }
+
+    /**
+     * Sets the interval that is going to play the ringing sound.
+     */
+    _setAudioTimeout() {
+        this.interval = setInterval( () => {
+            this.audio.play();
+        }, 5000);
     }
 }
 
@@ -66,26 +90,30 @@ export default {
         if(overlay) {
             this.hide();
         }
+
         overlay = new RingOverlay(callee);
     },
+
     /**
      * Hides the ring overlay. Destroys all the elements related to the ring
      * overlay.
      */
     hide() {
-        if(!overlay)
+        if(!overlay) {
             return false;
+        }
         overlay.destroy();
         overlay = null;
         return true;
     },
+
     /**
      * Checks whether or not the ring overlay is currently displayed.
      *
      * @returns {boolean} true if the ring overlay is currently displayed or
      * false otherwise.
      */
-    isDisplayed () {
+    isVisible () {
         return overlay !== null;
     }
 };

modules/UI/side_pannels/SideContainerToggler.js

@@ -0,0 +1,127 @@
+/* global $ */
+import UIEvents from "../../../service/UI/UIEvents";
+
+/**
+ * Handles open and close of the extended toolbar side panel
+ * (chat, settings, etc.).
+ *
+ * @type {{init, toggle, isVisible, hide, show, resize}}
+ */
+const SideContainerToggler = {
+    /**
+     * Initialises this toggler by registering the listeners.
+     *
+     * @param eventEmitter
+     */
+    init(eventEmitter) {
+        this.eventEmitter = eventEmitter;
+
+        // Adds a listener for the animation end event that would take care
+        // of hiding all internal containers when the extendedToolbarPanel is
+        // closed.
+        document.getElementById("sideToolbarContainer")
+            .addEventListener("animationend", function(e) {
+                if(e.animationName === "slideOutExt")
+                    $("#sideToolbarContainer").children().each(function() {
+                        if ($(this).hasClass("show"))
+                            SideContainerToggler.hideInnerContainer($(this));
+                    });
+            }, false);
+    },
+
+    /**
+     * Toggles the container with the given element id.
+     *
+     * @param {String} elementId the identifier of the container element to
+     * toggle
+     */
+    toggle(elementId) {
+        let elementSelector = $(`#${elementId}`);
+        let isSelectorVisible = elementSelector.hasClass("show");
+
+        if (isSelectorVisible) {
+            this.hide();
+        }
+        else {
+            if (this.isVisible())
+                $("#sideToolbarContainer").children().each(function() {
+                    if ($(this).id !== elementId && $(this).hasClass("show"))
+                        SideContainerToggler.hideInnerContainer($(this));
+                });
+
+            if (!this.isVisible())
+                this.show();
+
+            this.showInnerContainer(elementSelector);
+        }
+    },
+
+    /**
+     * Returns {true} if the side toolbar panel is currently visible,
+     * otherwise returns {false}.
+     */
+    isVisible() {
+        return $("#sideToolbarContainer").hasClass("slideInExt");
+    },
+
+    /**
+     * Returns {true} if the side toolbar panel is currently hovered and
+     * {false} otherwise.
+     */
+    isHovered() {
+        return $("#sideToolbarContainer:hover").length > 0;
+    },
+
+    /**
+     * Hides the side toolbar panel with a slide out animation.
+     */
+    hide() {
+        $("#sideToolbarContainer")
+            .removeClass("slideInExt").addClass("slideOutExt");
+    },
+
+    /**
+     * Shows the side toolbar panel with a slide in animation.
+     */
+    show() {
+        if (!this.isVisible())
+            $("#sideToolbarContainer")
+                .removeClass("slideOutExt").addClass("slideInExt");
+    },
+
+    /**
+     * Hides the inner container given by the selector.
+     *
+     * @param {Object} containerSelector the jquery selector for the
+     * element to hide
+     */
+    hideInnerContainer(containerSelector) {
+        containerSelector.removeClass("show").addClass("hide");
+
+        this.eventEmitter.emit(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
+            containerSelector.attr('id'), false);
+    },
+
+    /**
+     * Shows the inner container given by the selector.
+     *
+     * @param {Object} containerSelector the jquery selector for the
+     * element to show
+     */
+    showInnerContainer(containerSelector) {
+        containerSelector.removeClass("hide").addClass("show");
+
+        this.eventEmitter.emit(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
+            containerSelector.attr('id'), true);
+    },
+
+    /**
+     * TO FIX: do we need to resize the chat?
+     */
+    resize () {
+        //let [width, height] = UIUtil.getSidePanelSize();
+        //Chat.resizeChat(width, height);
+    }
+};
+
+export default SideContainerToggler;

modules/UI/side_pannels/SidePanelToggler.js

@@ -1,186 +0,0 @@
-/* global require, $ */
-import Chat from "./chat/Chat";
-import ContactList from "./contactlist/ContactList";
-import Settings from "./../../settings/Settings";
-import SettingsMenu from "./settings/SettingsMenu";
-import VideoLayout from "../videolayout/VideoLayout";
-import ToolbarToggler from "../toolbars/ToolbarToggler";
-import UIUtil from "../util/UIUtil";
-
-const buttons = {
-    '#chatspace': '#chatBottomButton',
-    '#contactlist': '#contactListButton',
-    '#settingsmenu': '#toolbar_button_settings'
-};
-
-var currentlyOpen = null;
-
-/**
- * Toggles the windows in the side panel
- * @param object the window that should be shown
- * @param selector the selector for the element containing the panel
- * @param onOpenComplete function to be called when the panel is opened
- * @param onOpen function to be called if the window is going to be opened
- * @param onClose function to be called if the window is going to be closed
- * @param onVideoResizeComplete function to be called after the video area
- * is resized
- */
-function toggle (object, selector, onOpenComplete,
-                 onOpen, onClose, onVideoResizeComplete) {
-    let isSideBarVisible = object.isVisible();
-
-    UIUtil.buttonClick(buttons[selector], "active");
-
-    if (isSideBarVisible) {
-        $("#toast-container").animate({
-            right: 5
-        }, {
-            queue: false,
-            duration: 500
-        });
-
-        $(selector).hide("slide", {
-            direction: "right",
-            queue: false,
-            duration: 500,
-            // Set the size to 0 at the end of the animation to ensure that
-            // the is(":visible") function on this selector will return {false}
-            // when the element is hidden.
-            complete: function() {$(selector).css("width", "0");}
-        });
-
-        resizeVideoArea(false, onVideoResizeComplete);
-
-        if(typeof onClose === "function") {
-            onClose();
-        }
-
-        currentlyOpen = null;
-    } else {
-        resizeVideoArea(true, onVideoResizeComplete);
-
-        // Undock the toolbar when the chat is shown and if we're in a
-        // video mode.
-        if (VideoLayout.isLargeVideoVisible()) {
-            ToolbarToggler.dockToolbar(false);
-        }
-
-        if (currentlyOpen) {
-            var current = $(currentlyOpen);
-            UIUtil.buttonClick(buttons[currentlyOpen], "active");
-            current.css('z-index', 4);
-            setTimeout(function () {
-                current.css('display', 'none');
-                current.css('z-index', 5);
-            }, 500);
-        }
-
-        $("#toast-container").animate({
-            right: (UIUtil.getSidePanelSize()[0] + 5)
-        }, {
-            queue: false,
-            duration: 500
-        });
-        // Set the size dynamically (not in the css), so that we're sure that
-        // when is(":visible") is called on this selector the result is {false}
-        // before it's actually visible.
-        // (Chrome seems to return {true} for an element which is in the DOM and
-        // has non-null size set).
-        $(selector).css("width", "20%");
-        $(selector).show("slide", {
-            direction: "right",
-            queue: false,
-            duration: 500,
-            complete: onOpenComplete
-        });
-        if(typeof onOpen === "function") {
-            onOpen();
-        }
-
-        currentlyOpen = selector;
-    }
-}
-
-function resizeVideoArea(isSidePanelVisible, completeFunction) {
-    VideoLayout.resizeVideoArea(isSidePanelVisible,
-        false,//don't force thumbnail count update
-        true, //animate
-        completeFunction);
-}
-
-/**
- * Toggler for the chat, contact list, settings menu, etc..
- */
-var PanelToggler = {
-
-    /**
-     * Opens / closes the chat area.
-     */
-    toggleChat () {
-        var chatCompleteFunction = Chat.isVisible()
-            ? function () {}
-            : function () {
-                Chat.scrollChatToBottom();
-                $('#chatspace').trigger('shown');
-            };
-
-        toggle(Chat, //Object
-            '#chatspace', // Selector
-            function () { //onOpenComplete
-                // Request the focus in the nickname field or the chat input
-                // field.
-                if ($('#nickname').css('visibility') === 'visible') {
-                    $('#nickinput').focus();
-                } else {
-                    $('#usermsg').focus();
-                }
-            },
-            () => this.resizeChat(), //OnOpen
-            null,
-            chatCompleteFunction); //OnClose
-    },
-
-    resizeChat () {
-        let [width, height] = UIUtil.getSidePanelSize();
-        Chat.resizeChat(width, height);
-    },
-
-    /**
-     * Opens / closes the contact list area.
-     */
-    toggleContactList () {
-        var completeFunction = ContactList.isVisible()
-            ? function () {}
-            : function () {
-                $('#contactlist').trigger('shown');
-            };
-
-        toggle(ContactList,
-            '#contactlist',
-            null,
-            function() {
-                ContactList.setVisualNotification(false);
-            },
-            null,
-            completeFunction);
-    },
-
-    /**
-     * Opens / closes the settings menu
-     */
-    toggleSettingsMenu () {
-        toggle(SettingsMenu,
-            '#settingsmenu',
-            null,
-            function() {},
-            null);
-    },
-
-    isVisible () {
-        return (Chat.isVisible() ||
-                ContactList.isVisible() ||
-                SettingsMenu.isVisible());
-    }
-};
-
-export default PanelToggler;

modules/UI/side_pannels/chat/Chat.js

@@ -18,15 +18,11 @@ var unreadMessages = 0;
  */
 function setVisualNotification(show) {
     var unreadMsgElement = document.getElementById('unreadMessages');
-    var unreadMsgBottomElement
-        = document.getElementById('bottomUnreadMessages');
 
     var glower = $('#toolbar_button_chat');
-    var bottomGlower = $('#chatBottomButton');
 
     if (unreadMessages) {
         unreadMsgElement.innerHTML = unreadMessages.toString();
-        unreadMsgBottomElement.innerHTML = unreadMessages.toString();
 
         ToolbarToggler.dockToolbar(true);
 
@@ -42,19 +38,6 @@ function setVisualNotification(show) {
                 'top:' + topIndent +
                 '; left:' + leftIndent + ';');
 
-        var chatBottomButtonElement
-            = document.getElementById('chatBottomButton').parentNode;
-        var bottomLeftIndent = (UIUtil.getTextWidth(chatBottomButtonElement) -
-            UIUtil.getTextWidth(unreadMsgBottomElement)) / 2;
-        var bottomTopIndent = (UIUtil.getTextHeight(chatBottomButtonElement) -
-            UIUtil.getTextHeight(unreadMsgBottomElement)) / 2 - 2;
-
-        unreadMsgBottomElement.setAttribute(
-            'style',
-                'top:' + bottomTopIndent +
-                '; left:' + bottomLeftIndent + ';');
-
-
         if (!glower.hasClass('icon-chat-simple')) {
             glower.removeClass('icon-chat');
             glower.addClass('icon-chat-simple');
@@ -62,7 +45,6 @@ function setVisualNotification(show) {
     }
     else {
         unreadMsgElement.innerHTML = '';
-        unreadMsgBottomElement.innerHTML = '';
         glower.removeClass('icon-chat-simple');
         glower.addClass('icon-chat');
     }
@@ -70,15 +52,12 @@ function setVisualNotification(show) {
     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');
     }
 }
 
@@ -144,7 +123,7 @@ function addSmileys() {
         smileysContainer.appendChild(smileyContainer);
     }
 
-    $("#chatspace").append(smileysContainer);
+    $("#chat_container").append(smileysContainer);
 }
 
 /**
@@ -152,7 +131,7 @@ function addSmileys() {
  */
 function resizeChatConversation() {
     var msgareaHeight = $('#usermsg').outerHeight();
-    var chatspace = $('#chatspace');
+    var chatspace = $('#chat_container');
     var width = chatspace.width();
     var chat = $('#chatconversation');
     var smileys = $('#smileysarea');
@@ -208,7 +187,7 @@ var Chat = {
         };
         usermsg.autosize({callback: onTextAreaResize});
 
-        $("#chatspace").bind("shown",
+        $("#chat_container").bind("shown",
             function () {
                 unreadMessages = 0;
                 setVisualNotification(false);
@@ -296,7 +275,8 @@ var Chat = {
      * conversation mode or not.
      */
     setChatConversationMode (isConversationMode) {
-        $('#chatspace').toggleClass('is-conversation-mode', isConversationMode);
+        $('#chat_container')
+            .toggleClass('is-conversation-mode', isConversationMode);
         if (isConversationMode) {
             $('#usermsg').focus();
         }
@@ -306,7 +286,7 @@ var Chat = {
      * Resizes the chat area.
      */
     resizeChat (width, height) {
-        $('#chatspace').width(width).height(height);
+        $('#chat_container').width(width).height(height);
 
         resizeChatConversation();
     },
@@ -315,7 +295,8 @@ var Chat = {
      * Indicates if the chat is currently visible.
      */
     isVisible () {
-        return UIUtil.isVisible(document.getElementById("chatspace"));
+        return UIUtil.isVisible(
+            document.getElementById("chat_container"));
     },
     /**
      * Shows and hides the window with the smileys

modules/UI/side_pannels/contactlist/ContactList.js

@@ -14,16 +14,19 @@ let notificationInterval;
  */
 function updateNumberOfParticipants(delta) {
     numberOfContacts += delta;
-    if (numberOfContacts === 1) {
-        // when the user is alone we don't show the number of participants
-        $("#numberOfParticipants").text('');
-        ContactList.setVisualNotification(false);
-    } else if (numberOfContacts > 1) {
-        ContactList.setVisualNotification(!ContactList.isVisible());
-        $("#numberOfParticipants").text(numberOfContacts);
-    } else {
+
+    if (numberOfContacts <= 0) {
         console.error("Invalid number of participants: " + numberOfContacts);
+        return;
     }
+
+    let buttonIndicatorText = (numberOfContacts === 1) ? '' : numberOfContacts;
+    $("#numberOfParticipants").text(buttonIndicatorText);
+
+    $("#contacts_container>div.title").text(
+        APP.translation.translateString(
+            "contactlist", {participants: numberOfContacts}
+        ));
 }
 
 /**
@@ -131,23 +134,6 @@ var ContactList = {
         }
     },
 
-    setVisualNotification (show, stopGlowingIn) {
-        let glower = $('#contactListButton');
-
-        if (show && !notificationInterval) {
-            notificationInterval = window.setInterval(function () {
-                glower.toggleClass('active glowing');
-            }, 800);
-        } else if (!show && notificationInterval) {
-            stopGlowing(glower);
-        }
-        if (stopGlowingIn) {
-            setTimeout(function () {
-                stopGlowing(glower);
-            }, stopGlowingIn);
-        }
-    },
-
     setClickable (id, isClickable) {
         getContactEl(id).toggleClass('clickable', isClickable);
     },

modules/UI/side_pannels/profile/Profile.js

@@ -0,0 +1,61 @@
+/* global APP, $, JitsiMeetJS */
+import UIUtil from "../../util/UIUtil";
+import UIEvents from "../../../../service/UI/UIEvents";
+import languages from "../../../../service/translation/languages";
+import Settings from '../../../settings/Settings';
+
+export default {
+    init (emitter) {
+        // DISPLAY NAME
+        function updateDisplayName () {
+            emitter.emit(UIEvents.NICKNAME_CHANGED, $('#setDisplayName').val());
+        }
+
+        $('#setDisplayName')
+            .val(Settings.getDisplayName())
+            .keyup(function (event) {
+                if (event.keyCode === 13) { // enter
+                    updateDisplayName();
+                }
+            })
+            .focusout(updateDisplayName);
+
+
+        // EMAIL
+        function updateEmail () {
+            emitter.emit(UIEvents.EMAIL_CHANGED, $('#setEmail').val());
+        }
+
+        $('#setEmail')
+            .val(Settings.getEmail())
+            .keyup(function (event) {
+                if (event.keyCode === 13) { // enter
+                    updateEmail();
+                }
+            }).focusout(updateEmail);
+    },
+
+    /**
+     * Check if settings menu is visible or not.
+     * @returns {boolean}
+     */
+    isVisible () {
+        return UIUtil.isVisible(document.getElementById("profile_container"));
+    },
+
+    /**
+     * Change user display name in the settings menu.
+     * @param {string} newDisplayName
+     */
+    changeDisplayName (newDisplayName) {
+        $('#setDisplayName').val(newDisplayName);
+    },
+
+    /**
+     * Change user avatar in the settings menu.
+     * @param {string} avatarUrl url of the new avatar
+     */
+    changeAvatar (avatarUrl) {
+        $('#avatar').attr('src', avatarUrl);
+    }
+};

modules/UI/side_pannels/settings/SettingsMenu.js

@@ -62,34 +62,6 @@ function generateDevicesOptions(items, selectedId, permissionGranted) {
 
 export default {
     init (emitter) {
-
-        // DISPLAY NAME
-        function updateDisplayName () {
-            emitter.emit(UIEvents.NICKNAME_CHANGED, $('#setDisplayName').val());
-        }
-        $('#setDisplayName')
-            .val(Settings.getDisplayName())
-            .keyup(function (event) {
-                if (event.keyCode === 13) { // enter
-                    updateDisplayName();
-                }
-            })
-            .focusout(updateDisplayName);
-
-
-        // EMAIL
-        function updateEmail () {
-            emitter.emit(UIEvents.EMAIL_CHANGED, $('#setEmail').val());
-        }
-
-        $('#setEmail')
-            .val(Settings.getEmail())
-            .keyup(function (event) {
-            if (event.keyCode === 13) { // enter
-                updateEmail();
-            }
-        }).focusout(updateEmail);
-
         // START MUTED
         $("#startMutedOptions").change(function () {
             let startAudioMuted = $("#startAudioMuted").is(":checked");
@@ -191,23 +163,7 @@ export default {
      * @returns {boolean}
      */
     isVisible () {
-        return UIUtil.isVisible(document.getElementById("settingsmenu"));
-    },
-
-    /**
-     * Change user display name in the settings menu.
-     * @param {string} newDisplayName
-     */
-    changeDisplayName (newDisplayName) {
-        $('#setDisplayName').val(newDisplayName);
-    },
-
-    /**
-     * Change user avatar in the settings menu.
-     * @param {string} avatarUrl url of the new avatar
-     */
-    changeAvatar (avatarUrl) {
-        $('#avatar').attr('src', avatarUrl);
+        return UIUtil.isVisible(document.getElementById("settings_container"));
     },
 
     /**
@@ -290,6 +246,6 @@ export default {
 
         $('#devicesOptions').show();
 
-        APP.translation.translateElement($('#settingsmenu option'));
+        APP.translation.translateElement($('#settings_container option'));
     }
-};
+};

modules/UI/toolbars/BottomToolbar.js

@@ -1,130 +0,0 @@
-/* global $, APP, interfaceConfig, JitsiMeetJS */
-import UIUtil from '../util/UIUtil';
-import UIEvents from '../../../service/UI/UIEvents';
-
-const defaultBottomToolbarButtons = {
-    'chat': {
-        id: '#bottom_toolbar_chat'
-    },
-    'contacts': {
-        id: '#bottom_toolbar_contact_list'
-    },
-    'filmstrip': {
-        id: '#bottom_toolbar_film_strip',
-        shortcut: "F",
-        shortcutAttr: "filmstripPopover",
-        shortcutFunc: function() {
-            JitsiMeetJS.analytics.sendEvent("shortcut.film.toggled");
-            APP.UI.handleToggleFilmStrip();
-        },
-        shortcutDescription: "keyboardShortcuts.toggleFilmstrip"
-    }
-};
-
-const BottomToolbar = {
-    init () {
-        this.toolbar = $('#bottomToolbar');
-
-        // The bottom toolbar is enabled by default.
-        this.enabled = true;
-    },
-    /**
-     * Enables / disables the bottom toolbar.
-     * @param {e} set to {true} to enable the bottom toolbar or {false}
-     * to disable it
-     */
-    enable (e) {
-        this.enabled = e;
-        if (!e && this.isVisible())
-            this.hide(false);
-    },
-    /**
-     * Indicates if the bottom toolbar is currently enabled.
-     * @return {this.enabled}
-     */
-    isEnabled() {
-        return this.enabled;
-    },
-
-    setupListeners (emitter) {
-        UIUtil.hideDisabledButtons(defaultBottomToolbarButtons);
-
-        const buttonHandlers = {
-            "bottom_toolbar_contact_list": function () {
-                JitsiMeetJS.analytics.sendEvent(
-                    'bottomtoolbar.contacts.toggled');
-                emitter.emit(UIEvents.TOGGLE_CONTACT_LIST);
-            },
-            "bottom_toolbar_film_strip": function () {
-                JitsiMeetJS.analytics.sendEvent(
-                    'bottomtoolbar.filmstrip.toggled');
-                emitter.emit(UIEvents.TOGGLE_FILM_STRIP);
-            },
-            "bottom_toolbar_chat": function () {
-                JitsiMeetJS.analytics.sendEvent('bottomtoolbar.chat.toggled');
-                emitter.emit(UIEvents.TOGGLE_CHAT);
-            }
-        };
-
-        Object.keys(defaultBottomToolbarButtons).forEach(
-                id => {
-                if (UIUtil.isButtonEnabled(id)) {
-                    var button = defaultBottomToolbarButtons[id];
-
-                    if (button.shortcut)
-                        APP.keyboardshortcut.registerShortcut(
-                            button.shortcut,
-                            button.shortcutAttr,
-                            button.shortcutFunc,
-                            button.shortcutDescription
-                        );
-                }
-            }
-        );
-
-        Object.keys(buttonHandlers).forEach(
-            buttonId => $(`#${buttonId}`).click(buttonHandlers[buttonId])
-        );
-    },
-
-    resizeToolbar (thumbWidth, thumbHeight) {
-        let bottom = (thumbHeight - this.toolbar.outerHeight())/2 + 18;
-        this.toolbar.css({bottom});
-    },
-
-    /**
-     * Returns true if this toolbar is currently visible, or false otherwise.
-     * @return <tt>true</tt> if currently visible, <tt>false</tt> - otherwise
-     */
-    isVisible() {
-        return this.toolbar.is(":visible");
-    },
-
-    /**
-     * Hides the bottom toolbar with animation or not depending on the animate
-     * parameter.
-     * @param animate <tt>true</tt> to hide the bottom toolbar with animation,
-     * <tt>false</tt> or nothing to hide it without animation.
-     */
-    hide(animate) {
-        if (animate)
-            this.toolbar.hide("slide", {direction: "right", duration: 300});
-        else
-            this.toolbar.css("display", "none");
-    },
-
-    /**
-     * Shows the bottom toolbar with animation or not depending on the animate
-     * parameter.
-     * @param animate <tt>true</tt> to show the bottom toolbar with animation,
-     * <tt>false</tt> or nothing to show it without animation.
-     */
-    show(animate) {
-        if (animate)
-            this.toolbar.show("slide", {direction: "right", duration: 300});
-        else
-            this.toolbar.css("display", "block");
-    }
-};
-
-export default BottomToolbar;

modules/UI/toolbars/Toolbar.js

@@ -2,6 +2,7 @@
 /* jshint -W101 */
 import UIUtil from '../util/UIUtil';
 import UIEvents from '../../../service/UI/UIEvents';
+import SideContainerToggler from "../side_pannels/SideContainerToggler";
 
 let roomUrl = null;
 let emitter = null;
@@ -19,9 +20,13 @@ function openLinkDialog () {
     } else {
         inviteAttributes = "value=\"" + encodeURI(roomUrl) + "\"";
     }
+
+    let title = APP.translation.generateTranslationHTML("dialog.shareLink");
     APP.UI.messageHandler.openTwoButtonDialog(
-        "dialog.shareLink", null, null,
-        `<input id="inviteLinkRef" type="text" ${inviteAttributes} onclick="this.select();" readonly>`,
+        null, null, null,
+        '<h2>' + title + '</h2>'
+        + '<input id="inviteLinkRef" type="text" '
+        + inviteAttributes + ' onclick="this.select();" readonly>',
         false, "dialog.Invite",
         function (e, v) {
             if (v && roomUrl) {
@@ -37,7 +42,8 @@ function openLinkDialog () {
                 document.getElementById('inviteLinkRef').select();
             } else {
                 if (event && event.target) {
-                    $(event.target).find('button[value=true]').prop('disabled', true);
+                    $(event.target).find('button[value=true]')
+                        .prop('disabled', true);
                 }
             }
         },
@@ -49,6 +55,10 @@ function openLinkDialog () {
 }
 
 const buttonHandlers = {
+    "toolbar_button_profile": function () {
+        JitsiMeetJS.analytics.sendEvent('toolbar.profile.toggled');
+        emitter.emit(UIEvents.TOGGLE_PROFILE);
+    },
     "toolbar_button_mute": function () {
         let sharedVideoManager = APP.UI.getSharedVideoManager();
 
@@ -92,6 +102,11 @@ const buttonHandlers = {
         JitsiMeetJS.analytics.sendEvent('toolbar.chat.toggled');
         emitter.emit(UIEvents.TOGGLE_CHAT);
     },
+    "toolbar_contact_list": function () {
+        JitsiMeetJS.analytics.sendEvent(
+            'toolbar.contacts.toggled');
+        emitter.emit(UIEvents.TOGGLE_CONTACT_LIST);
+    },
     "toolbar_button_etherpad": function () {
         JitsiMeetJS.analytics.sendEvent('toolbar.etherpad.clicked');
         emitter.emit(UIEvents.ETHERPAD_CLICKED);
@@ -110,7 +125,7 @@ const buttonHandlers = {
     },
     "toolbar_button_fullScreen": function() {
         JitsiMeetJS.analytics.sendEvent('toolbar.fullscreen.enabled');
-        UIUtil.buttonClick("#toolbar_button_fullScreen",
+        UIUtil.buttonClick("toolbar_button_fullScreen",
             "icon-full-screen icon-exit-full-screen");
         emitter.emit(UIEvents.FULLSCREEN_TOGGLE);
     },
@@ -150,66 +165,129 @@ const buttonHandlers = {
                 }
             }
         );
+    },
+    "toolbar_film_strip": function () {
+        JitsiMeetJS.analytics.sendEvent(
+            'bottomtoolbar.filmstrip.toggled');
+        emitter.emit(UIEvents.TOGGLE_FILM_STRIP);
     }
 };
+
 const defaultToolbarButtons = {
     'microphone': {
-        id: '#toolbar_button_mute',
+        id: 'toolbar_button_mute',
+        className: "button icon-microphone",
         shortcut: 'M',
         shortcutAttr: 'mutePopover',
         shortcutFunc: function() {
             JitsiMeetJS.analytics.sendEvent('shortcut.audiomute.toggled');
             APP.conference.toggleAudioMuted();
         },
-        shortcutDescription: "keyboardShortcuts.mute"
+        shortcutDescription: "keyboardShortcuts.mute",
+        popups: [
+            {
+                id: "micMutedPopup",
+                className: "loginmenu",
+                dataAttr: "[html]toolbar.micMutedPopup"
+            },
+            {
+                id: "unableToUnmutePopup",
+                className: "loginmenu",
+                dataAttr: "[html]toolbar.unableToUnmutePopup"
+            }
+        ],
+        content: "Mute / Unmute",
+        i18n: "[content]toolbar.mute"
     },
     'camera': {
-        id: '#toolbar_button_camera',
+        id: 'toolbar_button_camera',
+        className: "button icon-camera",
         shortcut: 'V',
         shortcutAttr: 'toggleVideoPopover',
         shortcutFunc: function() {
             JitsiMeetJS.analytics.sendEvent('shortcut.videomute.toggled');
             APP.conference.toggleVideoMuted();
         },
-        shortcutDescription: "keyboardShortcuts.videoMute"
+        shortcutDescription: "keyboardShortcuts.videoMute",
+        content: "Start / stop camera",
+        i18n: "[content]toolbar.videomute"
     },
     'desktop': {
-        id: '#toolbar_button_desktopsharing',
+        id: 'toolbar_button_desktopsharing',
+        className: 'button icon-share-desktop',
         shortcut: 'D',
         shortcutAttr: 'toggleDesktopSharingPopover',
         shortcutFunc: function() {
             JitsiMeetJS.analytics.sendEvent('shortcut.screen.toggled');
             APP.conference.toggleScreenSharing();
         },
-        shortcutDescription: "keyboardShortcuts.toggleScreensharing"
+        shortcutDescription: 'keyboardShortcuts.toggleScreensharing',
+        content: 'Share screen',
+        i18n: '[content]toolbar.sharescreen'
     },
     'security': {
-        id: '#toolbar_button_security'
+        id: 'toolbar_button_security'
     },
     'invite': {
-        id: '#toolbar_button_link'
+        id: 'toolbar_button_link',
+        className: 'button icon-link',
+        content: 'Invite others',
+        i18n: '[content]toolbar.invite'
     },
     'chat': {
-        id: '#toolbar_button_chat',
+        id: 'toolbar_button_chat',
         shortcut: 'C',
         shortcutAttr: 'toggleChatPopover',
         shortcutFunc: function() {
             JitsiMeetJS.analytics.sendEvent('shortcut.chat.toggled');
             APP.UI.toggleChat();
         },
-        shortcutDescription: "keyboardShortcuts.toggleChat"
+        shortcutDescription: 'keyboardShortcuts.toggleChat',
+        sideContainerId: 'chat_container'
+    },
+    'contacts': {
+        id: 'toolbar_contact_list',
+        sideContainerId: 'contacts_container'
+    },
+    'profile': {
+        id: 'toolbar_button_profile',
+        sideContainerId: 'profile_container'
     },
     'etherpad': {
-        id: '#toolbar_button_etherpad'
+        id: 'toolbar_button_etherpad'
     },
     'fullscreen': {
-        id: '#toolbar_button_fullScreen'
+        id: 'toolbar_button_fullScreen',
+        className: "button icon-full-screen",
+        shortcut: 'F',
+        shortcutAttr: 'toggleFullscreenPopover',
+        shortcutFunc: function() {
+            JitsiMeetJS.analytics.sendEvent('shortcut.fullscreen.toggled');
+            APP.UI.toggleFullScreen();
+        },
+        shortcutDescription: "keyboardShortcuts.toggleChat",
+        content: "Enter / Exit Full Screen",
+        i18n: "[content]toolbar.fullscreen"
     },
     'settings': {
-        id: '#toolbar_button_settings'
+        id: 'toolbar_button_settings',
+        sideContainerId: "settings_container"
     },
     'hangup': {
-        id: '#toolbar_button_hangup'
+        id: 'toolbar_button_hangup',
+        className: "button icon-hangup",
+        content: "Hang Up",
+        i18n: "[content]toolbar.hangup"
+    },
+    'filmstrip': {
+        id: 'toolbar_film_strip',
+        shortcut: "F",
+        shortcutAttr: "filmstripPopover",
+        shortcutFunc: function() {
+            JitsiMeetJS.analytics.sendEvent("shortcut.film.toggled");
+            APP.UI.toggleFilmStrip();
+        },
+        shortcutDescription: "keyboardShortcuts.toggleFilmstrip"
     }
 };
 
@@ -242,7 +320,10 @@ const Toolbar = {
         emitter = eventEmitter;
         // The toolbar is enabled by default.
         this.enabled = true;
-        this.toolbarSelector = $("#header");
+        this.toolbarSelector = $("#mainToolbarContainer");
+        this.extendedToolbarSelector = $("#extendedToolbar");
+
+        this._initMainToolbarButtons();
 
         UIUtil.hideDisabledButtons(defaultToolbarButtons);
 
@@ -267,6 +348,12 @@ const Toolbar = {
                 !$(this).prop('disabled') && buttonHandlers[buttonId](event);
             })
         );
+
+        APP.UI.addListener(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
+            function(containerId, isVisible) {
+                Toolbar._handleSideToolbarContainerToggled( containerId,
+                                                            isVisible);
+            });
     },
     /**
      * Enables / disables the toolbar.
@@ -307,7 +394,7 @@ const Toolbar = {
      */
     unlockLockButton () {
         if ($("#toolbar_button_security").hasClass("icon-security-locked"))
-            UIUtil.buttonClick("#toolbar_button_security",
+            UIUtil.buttonClick("toolbar_button_security",
                                 "icon-security icon-security-locked");
     },
 
@@ -316,7 +403,7 @@ const Toolbar = {
      */
     lockLockButton () {
         if ($("#toolbar_button_security").hasClass("icon-security"))
-            UIUtil.buttonClick("#toolbar_button_security",
+            UIUtil.buttonClick("toolbar_button_security",
                                 "icon-security icon-security-locked");
     },
 
@@ -507,7 +594,9 @@ const Toolbar = {
         });
         if (hovered)
             return true;
-        if ($("#bottomToolbar:hover").length > 0) {
+        if ($("#bottomToolbar:hover").length > 0
+            || $("#extendedToolbar:hover").length > 0
+            || SideContainerToggler.isHovered()) {
             return true;
         }
         return false;
@@ -518,7 +607,7 @@ const Toolbar = {
      * @return <tt>true</tt> if currently visible, <tt>false</tt> - otherwise
      */
     isVisible() {
-        return this.toolbarSelector.is(":visible");
+        return this.toolbarSelector.hasClass("slideInY");
     },
 
     /**
@@ -526,8 +615,17 @@ const Toolbar = {
      * parameter.
      */
     hide() {
-        this.toolbarSelector.hide(
-            "slide", { direction: "up", duration: 300});
+        this.toolbarSelector.toggleClass("slideInY").toggleClass("slideOutY");
+
+        let slideInAnimation = (SideContainerToggler.isVisible)
+                                    ? "slideInExtX"
+                                    : "slideInX";
+        let slideOutAnimation = (SideContainerToggler.isVisible)
+                                    ? "slideOutExtX"
+                                    : "slideOutX";
+
+        this.extendedToolbarSelector.toggleClass(slideInAnimation)
+            .toggleClass(slideOutAnimation);
     },
 
     /**
@@ -535,8 +633,117 @@ const Toolbar = {
      * parameter.
      */
     show() {
-        this.toolbarSelector.show(
-            "slide", { direction: "up", duration: 300});
+        if (this.toolbarSelector.hasClass("slideOutY"))
+            this.toolbarSelector.toggleClass("slideOutY");
+
+        let slideInAnimation = (SideContainerToggler.isVisible)
+                                ? "slideInExtX"
+                                : "slideInX";
+        let slideOutAnimation = (SideContainerToggler.isVisible)
+                                ? "slideOutExtX"
+                                : "slideOutX";
+
+        if (this.extendedToolbarSelector.hasClass(slideOutAnimation))
+            this.extendedToolbarSelector.toggleClass(slideOutAnimation);
+
+        this.toolbarSelector.toggleClass("slideInY");
+        this.extendedToolbarSelector.toggleClass(slideInAnimation);
+    },
+
+    registerClickListeners(listener) {
+        $('#mainToolbarContainer').click(listener);
+
+        $("#extendedToolbar").click(listener);
+    },
+
+    /**
+     * Handles the side toolbar toggle.
+     */
+    _handleSideToolbarContainerToggled(containerId, isVisible) {
+        Object.keys(defaultToolbarButtons).forEach(
+            id => {
+                if (!UIUtil.isButtonEnabled(id))
+                    return;
+
+                var button = defaultToolbarButtons[id];
+
+                if (button.sideContainerId
+                    && button.sideContainerId === containerId) {
+                    UIUtil.buttonClick(button.id, "selected");
+                    return;
+                }
+            }
+        );
+    },
+    /**
+     * TODO: Fix mic popups
+     * <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>
+     *   </ul>
+     *   <ul id="unableToUnmutePopup" class="loginmenu">
+     *       <li data-i18n="[html]toolbar.unableToUnmutePopup"></li>
+     *   </ul>
+     * </a>
+     */
+    _initMainToolbarButtons() {
+        interfaceConfig.MAIN_TOOLBAR_BUTTONS.forEach((value, index) => {
+            if (value && value in defaultToolbarButtons) {
+                let button = defaultToolbarButtons[value];
+                this._addMainToolbarButton(
+                    button,
+                    (index === 0),
+                    (index === interfaceConfig.MAIN_TOOLBAR_BUTTONS.length -1));
+            }
+        });
+    },
+
+    /**
+     * Adds the given button to the main (top) toolbar.
+     *
+     * @param {Object} the button to add.
+     * @param {boolean} isFirst indicates if this is the first button in the
+     * toolbar
+     * @param {boolean} isLast indicates if this is the last button in the
+     * toolbar
+     */
+    _addMainToolbarButton(button, isFirst, isLast) {
+        let buttonElement = document.createElement("a");
+        if (button.className)
+            buttonElement.className = button.className
+                                    + ((isFirst) ? " first" : "")
+                                    + ((isLast) ? " last" : "");
+
+        buttonElement.id = button.id;
+
+        if (button.shortcutAttr)
+            buttonElement.setAttribute("shortcut", button.shortcutAttr);
+
+        if (button.content)
+            buttonElement.setAttribute("content", button.content);
+
+        if (button.i18n)
+            buttonElement.setAttribute("data-i18n", button.i18n);
+
+        buttonElement.setAttribute("data-container", "body");
+        buttonElement.setAttribute("data-toggle", "popover");
+        buttonElement.setAttribute("data-placement", "bottom");
+        this._addPopups(buttonElement, button.popups);
+
+        document.getElementById("mainToolbar")
+            .appendChild(buttonElement);
+    },
+
+    _addPopups(buttonElement, popups = []) {
+        popups.forEach((popup) => {
+            let popupElement = document.createElement("ul");
+            popupElement.id = popup.id;
+            popupElement.className = popup.className;
+            let liElement = document.createElement("li");
+            liElement.setAttribute("data-i18n", popup.dataAttr);
+            popupElement.appendChild(liElement);
+            buttonElement.appendChild(popupElement);
+        });
     }
 };
 

modules/UI/toolbars/ToolbarToggler.js

@@ -1,8 +1,8 @@
 /* global APP, config, $, interfaceConfig */
 
 import UIUtil from '../util/UIUtil';
-import BottomToolbar from './BottomToolbar';
 import Toolbar from './Toolbar';
+import SideContainerToggler from "../side_pannels/SideContainerToggler";
 import FilmStrip from '../videolayout/FilmStrip.js';
 
 let toolbarTimeoutObject;
@@ -23,8 +23,11 @@ function showDesktopSharingButton() {
 
 /**
  * Hides the toolbar.
+ *
+ * @param force {true} to force the hiding of the toolbar without caring about
+ * the extended toolbar side panels.
  */
-function hideToolbar() {
+function hideToolbar(force) {
     if (alwaysVisibleToolbar) {
         return;
     }
@@ -32,14 +35,11 @@ function hideToolbar() {
     clearTimeout(toolbarTimeoutObject);
     toolbarTimeoutObject = null;
 
-    if (Toolbar.isHovered()) {
+    if (Toolbar.isHovered() || APP.UI.isRingOverlayVisible()) {
         toolbarTimeoutObject = setTimeout(hideToolbar, toolbarTimeout);
-    } else {
+    } else if (!SideContainerToggler.isVisible() || force) {
         Toolbar.hide();
         $('#subject').animate({top: "-=40"}, 300);
-        if (!FilmStrip.isFilmStripVisible()) {
-            BottomToolbar.hide(true);
-        }
     }
 }
 
@@ -49,7 +49,26 @@ const ToolbarToggler = {
      */
     init() {
         alwaysVisibleToolbar = (config.alwaysVisibleToolbar === true);
+
+        this._registerWindowClickListeners();
+    },
+
+    /**
+     * Registers click listeners handling the show and hode of toolbars when
+     * user clicks outside of toolbar area.
+     */
+    _registerWindowClickListeners() {
+        $(window).click(function() {
+            (Toolbar.isEnabled() && Toolbar.isVisible())
+                ? hideToolbar(true)
+                : this.showToolbar();
+        }.bind(this));
+
+        Toolbar.registerClickListeners(function(event){
+            event.stopPropagation();
+        });
     },
+
     /**
      * Sets the value of alwaysVisibleToolbar variable.
      * @param value {boolean} the new value of alwaysVisibleToolbar variable
@@ -57,12 +76,14 @@ const ToolbarToggler = {
     setAlwaysVisibleToolbar(value) {
         alwaysVisibleToolbar = value;
     },
+
     /**
      * Resets the value of alwaysVisibleToolbar variable to the default one.
      */
     resetAlwaysVisibleToolbar() {
         alwaysVisibleToolbar = (config.alwaysVisibleToolbar === true);
     },
+
     /**
      * Shows the main toolbar.
      */
@@ -78,11 +99,6 @@ const ToolbarToggler = {
             updateTimeout = true;
         }
 
-        if (BottomToolbar.isEnabled() && !BottomToolbar.isVisible()) {
-            BottomToolbar.show(true);
-            updateTimeout = true;
-        }
-
         if (updateTimeout) {
             if (toolbarTimeoutObject) {
                 clearTimeout(toolbarTimeoutObject);

modules/UI/util/MessageHandler.js

@@ -258,7 +258,8 @@ var messageHandler = {
     notify: function(displayName, displayNameKey, cls, messageKey,
                      messageArguments, options) {
 
-        if(!notificationsEnabled)
+        // If we're in ringing state we skip all toaster notifications.
+        if(!notificationsEnabled || APP.UI.isRingOverlayVisible())
             return;
 
         var displayNameSpan = '<span class="nickname" ';

modules/UI/util/UIUtil.js

@@ -5,31 +5,12 @@
  */
  var UIUtil = {
 
-    /**
-     * Returns the size of the side panel.
-     */
-     getSidePanelSize () {
-        var availableHeight = window.innerHeight;
-        var availableWidth = window.innerWidth;
-
-        var panelWidth = 200;
-        if (availableWidth * 0.2 < 200) {
-            panelWidth = availableWidth * 0.2;
-        }
-
-        return [panelWidth, availableHeight];
-     },
-
     /**
      * Returns the available video width.
      */
-    getAvailableVideoWidth: function (isSidePanelVisible) {
+    getAvailableVideoWidth: function () {
         let rightPanelWidth = 0;
 
-        if (isSidePanelVisible) {
-            rightPanelWidth = UIUtil.getSidePanelSize()[0];
-        }
-
         return window.innerWidth - rightPanelWidth;
     },
 
@@ -37,7 +18,8 @@
      * Changes the style class of the element given by id.
      */
     buttonClick: function(id, classname) {
-        $(id).toggleClass(classname); // add the class to the clicked element
+        // add the class to the clicked element
+        $("#" + id).toggleClass(classname);
     },
     /**
      * Returns the text width for the given element.
@@ -130,7 +112,7 @@
         var selector = Object.keys(mappings)
           .map(function (buttonName) {
                 return UIUtil.isButtonEnabled(buttonName)
-                    ? null : mappings[buttonName].id; })
+                    ? null : "#" + mappings[buttonName].id; })
           .filter(function (item) { return item; })
           .join(',');
         $(selector).hide();
@@ -138,7 +120,7 @@
 
     redirect (url) {
          window.location.href = url;
-     },
+    },
 
      isFullScreen () {
          return document.fullScreen

modules/UI/videolayout/FilmStrip.js

@@ -68,10 +68,8 @@ const FilmStrip = {
 
     /**
      * Calculates the thumbnail size.
-     * @param videoAreaAvailableWidth the currently available video area width
-     * that we want to take into account when calculating the film strip width.
      */
-     calculateThumbnailSize (isSideBarVisible) {
+     calculateThumbnailSize () {
         let availableHeight = interfaceConfig.FILM_STRIP_MAX_HEIGHT;
 
         let numvids = this.getThumbs(true).length;
@@ -84,7 +82,7 @@ const FilmStrip = {
          * film strip size hasn't been updated yet, but it will be.
          */
         let videoAreaAvailableWidth
-            = UIUtil.getAvailableVideoWidth(isSideBarVisible)
+            = UIUtil.getAvailableVideoWidth()
                 - UIUtil.parseCssInt(this.filmStrip.css('right'), 10)
                 - UIUtil.parseCssInt(this.filmStrip.css('paddingLeft'), 10)
                 - UIUtil.parseCssInt(this.filmStrip.css('paddingRight'), 10)

modules/UI/videolayout/LargeVideo.js

@@ -317,6 +317,15 @@ class VideoContainer extends LargeContainer {
      * @param {boolean} show
      */
     showAvatar (show) {
+        // TO FIX: Video background need to be black, so that we don't have a
+        // flickering effect when scrolling between videos and have the screen
+        // move to grey before going back to video. Avatars though can have the
+        // default background set.
+        // In order to fix this code we need to introduce video background or
+        // find a workaround for the video flickering.
+        $("#largeVideoContainer").css("background",
+            (show) ? interfaceConfig.DEFAULT_BACKGROUND : "#000");
+
         this.$avatar.css("visibility", show ? "visible" : "hidden");
     }
 
@@ -536,11 +545,10 @@ export default class LargeVideoManager {
     }
 
     /**
-     * Update container size optionally taking side bar size into account.
-     * @param {boolean} isSideBarVisible if side bar is visible.
+     * Update container size.
      */
-    updateContainerSize (isSideBarVisible) {
-        this.width = UIUtil.getAvailableVideoWidth(isSideBarVisible);
+    updateContainerSize () {
+        this.width = UIUtil.getAvailableVideoWidth();
         this.height = window.innerHeight;
     }
 

modules/UI/videolayout/LocalVideo.js

@@ -45,7 +45,7 @@ function createEditDisplayNameButton() {
     UIUtil.setTooltip(editButton,
         "videothumbnail.editnickname",
         "top");
-    editButton.innerHTML = '<i class="fa fa-pencil"></i>';
+    editButton.innerHTML = '<i class="icon-edit"></i>';
 
     return editButton;
 }

modules/UI/videolayout/RemoteVideo.js

@@ -119,7 +119,7 @@ RemoteVideo.prototype._generatePopupContent = function () {
     muteMenuItem.appendChild(muteLinkItem);
     popupmenuElement.appendChild(muteMenuItem);
 
-    var ejectIndicator = "<i style='float:left;' class='fa fa-eject'></i>";
+    var ejectIndicator = "<i style='float:left;' class='icon-kick'></i>";
 
     var ejectMenuItem = document.createElement('li');
     var ejectLinkItem = document.createElement('a');

modules/UI/videolayout/SmallVideo.js

@@ -309,7 +309,7 @@ SmallVideo.prototype.createModeratorIndicatorElement = function () {
     if (indicatorSpan.children().length !== 0)
         return;
     var moderatorIndicator = document.createElement('i');
-    moderatorIndicator.className = 'fa fa-star';
+    moderatorIndicator.className = 'icon-star';
     indicatorSpan[0].appendChild(moderatorIndicator);
 
     UIUtil.setTooltip(indicatorSpan[0],

modules/UI/videolayout/VideoLayout.js

@@ -3,7 +3,6 @@
 
 import AudioLevels from "../audio_levels/AudioLevels";
 import Avatar from "../avatar/Avatar";
-import BottomToolbar from "../toolbars/BottomToolbar";
 import FilmStrip from "./FilmStrip";
 import UIEvents from "../../../service/UI/UIEvents";
 import UIUtil from "../util/UIUtil";
@@ -12,7 +11,6 @@ import RemoteVideo from "./RemoteVideo";
 import LargeVideoManager, {VIDEO_CONTAINER_TYPE} from "./LargeVideo";
 import {SHARED_VIDEO_CONTAINER_TYPE} from '../shared_video/SharedVideo';
 import LocalVideo from "./LocalVideo";
-import PanelToggler from "../side_pannels/SidePanelToggler";
 
 const RTCUIUtil = JitsiMeetJS.util.RTCUIHelper;
 
@@ -115,12 +113,12 @@ var VideoLayout = {
         this.lastNCount = config.channelLastN;
     },
 
-    initLargeVideo (isSideBarVisible) {
+    initLargeVideo () {
         largeVideo = new LargeVideoManager();
         if(localFlipX) {
             largeVideo.onLocalFlipXChange(localFlipX);
         }
-        largeVideo.updateContainerSize(isSideBarVisible);
+        largeVideo.updateContainerSize();
         AudioLevels.init();
     },
 
@@ -487,21 +485,16 @@ var VideoLayout = {
      */
     resizeThumbnails (  animate = false,
                         forceUpdate = false,
-                        isSideBarVisible = null,
                         onComplete = null) {
-        isSideBarVisible
-            = (isSideBarVisible !== null)
-                ? isSideBarVisible : PanelToggler.isVisible();
 
         let {thumbWidth, thumbHeight}
-            = FilmStrip.calculateThumbnailSize(isSideBarVisible);
+            = FilmStrip.calculateThumbnailSize();
 
         $('.userAvatar').css('left', (thumbWidth - thumbHeight) / 2);
 
         FilmStrip.resizeThumbnails(thumbWidth, thumbHeight,
             animate, forceUpdate)
             .then(function () {
-                BottomToolbar.resizeToolbar(thumbWidth, thumbHeight);
                 AudioLevels.updateCanvasSize(thumbWidth, thumbHeight);
                 if (onComplete && typeof onComplete === "function")
                     onComplete();
@@ -891,31 +884,29 @@ var VideoLayout = {
     /**
      * Resizes the video area.
      *
-     * @param isSideBarVisible indicates if the side bar is currently visible
      * @param forceUpdate indicates that hidden thumbnails will be shown
      * @param completeFunction a function to be called when the video area is
      * resized.
      */
-    resizeVideoArea (isSideBarVisible,
-                    forceUpdate = false,
+    resizeVideoArea (forceUpdate = false,
                     animate = false,
                     completeFunction = null) {
 
         if (largeVideo) {
-            largeVideo.updateContainerSize(isSideBarVisible);
+            largeVideo.updateContainerSize();
             largeVideo.resize(animate);
         }
 
         // Calculate available width and height.
         let availableHeight = window.innerHeight;
-        let availableWidth = UIUtil.getAvailableVideoWidth(isSideBarVisible);
+        let availableWidth = UIUtil.getAvailableVideoWidth();
 
         if (availableWidth < 0 || availableHeight < 0) {
             return;
         }
 
         // Resize the thumbnails first.
-        this.resizeThumbnails(false, forceUpdate, isSideBarVisible);
+        this.resizeThumbnails(false, forceUpdate);
 
         // Resize the video area element.
         $('#videospace').animate({

service/UI/UIEvents.js

@@ -37,6 +37,10 @@ export default {
     TOGGLE_CHAT: "UI.toggle_chat",
     TOGGLE_SETTINGS: "UI.toggle_settings",
     TOGGLE_CONTACT_LIST: "UI.toggle_contact_list",
+    /**
+     * Notifies that the profile toolbar button has been clicked.
+     */
+    TOGGLE_PROFILE: "UI.toggle_profile",
     /**
      * Notifies that a command to toggle the film strip has been issued. The
      * event may optionally specify a {Boolean} (primitive) value to assign to
@@ -68,26 +72,38 @@ export default {
     VIDEO_DEVICE_CHANGED: "UI.video_device_changed",
     AUDIO_DEVICE_CHANGED: "UI.audio_device_changed",
     AUDIO_OUTPUT_DEVICE_CHANGED: "UI.audio_output_device_changed",
+
     /**
      * Notifies interested listeners that the follow-me feature is enabled or
      * disabled.
      */
     FOLLOW_ME_ENABLED: "UI.follow_me_enabled",
+
     /**
      * Notifies that flipX property of the local video is changed.
      */
     LOCAL_FLIPX_CHANGED: "UI.local_flipx_changed",
+
     // An event which indicates that the resolution of a remote video has
     // changed.
     RESOLUTION_CHANGED: "UI.resolution_changed",
+
     /**
      * Notifies that the button "Go to webstore" is pressed on the dialog for
      * external extension installation.
      */
     OPEN_EXTENSION_STORE: "UI.open_extension_store",
+
     /**
      * Notifies that the button "Cancel" is pressed on the dialog for
      * external extension installation.
      */
-    EXTERNAL_INSTALLATION_CANCELED: "UI.external_installation_canceled"
+    EXTERNAL_INSTALLATION_CANCELED: "UI.external_installation_canceled",
+
+    /**
+     * Notifies that the side toolbar container has been toggled. The actual
+     * event must contain the identifier of the container that has been toggled
+     * and information about toggle on or off.
+     */
+    SIDE_TOOLBAR_CONTAINER_TOGGLED: "UI.side_container_toggled"
 };