Update main menu bar to bootstrap syntax.

html/main.html

@@ -7,22 +7,37 @@
 <div id="background"></div>
 <div id="loader"><div><i class="fa fa-circle-o-notch fa-spin"></i><div class="loader-message"></div></div></div>
 <page></page>
-<div id="bar">
+
-    <div class="bar">
+<header class="navbar navbar-default navbar-fixed-top bar">
-        <div class="left">
+    <div class="container-fluid">
-          <%template "logo" .%>
+        <div class="navbar-header">
-        </div>
+            <button type="button" class="navbar-toggle collapsed" ng-click="isCollapsed = !isCollapsed">
-        <status-message></status-message>
+                <span class="icon-bar"></span>
-        <div class="ng-cloak right">
+                <span class="icon-bar"></span>
-           <button title="{{_('Present a file')}}" class="btn aenablebtn" ng-show="status=='connected' || status=='conference' || layout.presentation" ng-model="layout.presentation" btn-checkbox><i class="fa fa-folder-open-o"></i></button>
+                <span class="icon-bar"></span>
-           <button title="{{_('Share your screen')}}" class="btn aenablebtn" ng-show="isChrome && webrtcDetectedVersion >= 32 && (status=='connected' || status=='conference' || layout.screenshare)" ng-model="layout.screenshare" btn-checkbox><i class="fa fa-desktop"></i></button>
+            </button>
-           <button title="{{_('Chat')}}" class="btn" ng-class="{messagesunseen: chatMessagesUnseen>0}" ng-model="layout.chat" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-comments-o"></i><span class="badge" ng-show="chatMessagesUnseen">{{chatMessagesUnseen}}</span></button>
+            <div class="navbar-brand left">
-           <button title="{{_('Mute microphone')}}" class="btn amutebtn" ng-model="microphoneMute" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-microphone-slash"></i></button>
+                <%template "logo" .%>
-           <button title="{{_('Turn camera off')}}" class="btn amutebtn" ng-model="cameraMute" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-eye-slash"></i></button>
+            </div>
-           <button title="{{_('Settings')}}" class="btn" ng-model="layout.settings" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-cog"></i></button>
+            <div class="nav navbar-nav middle visible-xs">
+                <status-message></status-message>
+            </div>
         </div>
+        <nav class="navbar-collapse collapse" collapse="isCollapsed">
+            <ul class="nav navbar-nav middle hidden-xs">
+                <status-message></status-message>
+            </ul>
+            <ul class="nav navbar-nav navbar-right right ng-cloak">
+                <button title="{{_('Present a file')}}" class="btn aenablebtn" ng-show="status=='connected' || status=='conference' || layout.presentation" ng-model="layout.presentation" btn-checkbox><i class="fa fa-folder-open-o"></i></button>
+                <button title="{{_('Share your screen')}}" class="btn aenablebtn" ng-show="isChrome && webrtcDetectedVersion >= 32 && (status=='connected' || status=='conference' || layout.screenshare)" ng-model="layout.screenshare" btn-checkbox><i class="fa fa-desktop"></i></button>
+                <button title="{{_('Chat')}}" class="btn" ng-class="{messagesunseen: chatMessagesUnseen>0}" ng-model="layout.chat" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-comments-o"></i><span class="badge" ng-show="chatMessagesUnseen" ng-bind="chatMessagesUnseen"></span></button>
+                <button title="{{_('Mute microphone')}}" class="btn amutebtn" ng-model="microphoneMute" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-microphone-slash"></i></button>
+                <button title="{{_('Turn camera off')}}" class="btn amutebtn" ng-model="cameraMute" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-eye-slash"></i></button>
+                <button title="{{_('Settings')}}" class="btn" ng-model="layout.settings" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-cog"></i></button>
+            </ul>
+        </nav>
     </div>
-</div>
+</header>
 <div id="roombar" class="ng-cloak">
     <room-bar/>
 </div>
@@ -35,9 +50,6 @@
 <div id="screenshare" class="ng-cloak mainview">
     <screenshare/>
 </div>
-<div id="presentation" class="ng-cloak mainview">
-    <presentation/>
-</div>
 <div class="ng-cloak" id="rightslide">
     <div class="rightslidepane">
         <div id="buddylist"><buddy-list/></div>

src/styles/components/_bar.scss

@@ -19,41 +19,33 @@
  *
  */
 
-#bar {
-  left: 0;
-  min-height: $minbarheight;
-  position: fixed;
-  right: 0;
-  top: 0;
-  z-index: 5;
-}
-
 .bar {
   background: $bar-background;
   box-shadow: 0 2px 10px 0 $componentfg3;
   color: $componentfg1;
   font: bold 1em/40px $font-sans-serif;
   // without height bar jumps and disappears on reload, use em to scale with text.
-  height: #{$minbarheight/$base-font-size}em;
+  // height: #{$minbarheight/$base-font-size}em;
   text-align: center;
   touch-callout: none;
   user-select: none;
   // @include debug-vertical-alignment();
   @include breakpt($breakpoint-medium) {
-    z-index: 40;
+    height: auto;
+    z-index: 60;
     box-shadow: none;
   }
   .btn {
     position: relative;
   }
+  .navbar-nav {
+    display: inline-block;
+    vertical-align: middle;
+  }
 }
 
 .bar .left {
-  bottom: 0;
+  padding: 5px 5px 5px 15px;
-  left: 0;
-  top: 0;
-  padding-left: 12px;
-  position: absolute;
   .logo {
     background: $logo no-repeat;
     background-size: 100%;
@@ -77,18 +69,9 @@
 }
 
 .bar .middle {
-  background-color: $componentbg;
+  float: none;
-  display: inline-block;
+  margin-top: 5px;
-  font-weight: bold;
-  min-height: 44px;
-  padding: 0 1em;
-  position: relative;
-  margin-left: -70px;
-  z-index: 5;
   @include breakpt($breakpoint-medium) {
-    display: block;
-    margin-left: 0px;
-    max-width: 40%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -137,11 +120,8 @@
 }
 
 .bar .right {
-  bottom: 1px;
+  margin-top: 3px;
   padding-right: 8px;
-  position: absolute;
-  right: 0;
-  top: 1px;
   .badge {
     background-color: $actioncolor1;
     border: 1px solid white;
@@ -154,7 +134,6 @@
     background: transparent;
     border-color: transparent;
     color: $bar-btn-action-color;
-    display: inline-block;
     height: 42px;
     font: 24px/40px $font-sans-serif;
     margin-left: -4px;

src/styles/components/_rightslide.scss

@@ -25,7 +25,7 @@
   pointer-events: none;
   position: absolute;
   right: -260px;
-  top: 44px;
+  top: $minbarheight;
   transition: right 200ms ease-in-out;
   z-index: 5;
 }

src/styles/components/_roombar.scss

@@ -24,7 +24,7 @@
   min-width: 260px;
   position: absolute;
   right: 0;
-  top: 44px;
+  top: $minbarheight;
   z-index: 4;
 }
 

src/styles/components/_settings.scss

@@ -25,7 +25,7 @@
   padding-right: 20px;
   position: fixed;
   right: -520px;
-  top: 44px;
+  top: $minbarheight;
   transition: right 200ms ease-in-out;
   width: 520px;
   z-index: 50;

src/styles/global/_base.scss

@@ -52,6 +52,87 @@ a {
   }
 }
 
+#loader {
+  background: $load-logo no-repeat center;
+  background-size: contain;
+  bottom: 15%;
+  left: 15%;
+  max-width: 200px;
+  max-height: 150px;
+  margin: auto;
+  opacity: 1;
+  pointer-events: none;
+  position: fixed;
+  right: 15%;
+  top: 15%;
+  z-index: 20000;
+  transition-property: opacity;
+  transition-duration: .5s;
+  &.done {
+    opacity: 0;
+  }
+  > div {
+    color: $loading;
+    display: block;
+    font-size: 2em;
+    left: 0;
+    margin: 0 auto;
+    right: 0;
+    position: absolute;
+    bottom: 0px;
+    margin-bottom: -40px;
+    text-align: center;
+    text-shadow: 0 0 5px black;
+  }
+  .loader-message {
+    font-size: 0.5em;
+  }
+}
+
+#page {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: $minbarheight;
+}
+
+.welcome {
+  color: $welcome;
+  font-size: 1.1em;
+  margin-top: 80px;
+  text-shadow: 0 0 5px black;
+  max-width:600px;
+
+  h1 {
+    text-align: center;
+  }
+
+  .welcome-container {
+    max-width: 450px;
+    margin: 0 auto;
+  }
+
+  .welcome-input {
+    position: relative;
+    input {
+      padding-right: 105px;
+    }
+  }
+
+  .welcome-input-buttons {
+    text-shadow: none;
+    position: absolute;
+    top: 6px;
+    right: 8px;
+    a {
+      padding-right: .5em;
+      color: black;
+    }
+  }
+
+}
+
 .help-block {
   color: $form-help-text;
 }

src/styles/global/_variables.scss

@@ -65,7 +65,7 @@ $font-color-accent: lighten($font-color, 50%) !default;
 $audiovideolevel: $action-enable !default;
 
 // main navigation bar
-$minbarheight: 44px !default;
+$minbarheight: 51px !default;
 $bar-background: $componentbg;
 $bar-logo-text-desc: rgb(34,34,34) !default;
 $bar-btn-action-border: $bordercolor !default;

static/js/controllers/mediastreamcontroller.js

@@ -136,6 +136,7 @@ define(['underscore', 'bigscreen', 'moment', 'sjcl', 'modernizr', 'webrtc.adapte
 		};
 		$scope.chatMessagesUnseen = 0;
 		$scope.autoAccept = null;
+		$scope.isCollapsed = true;
 		$scope.master = {
 			displayName: null,
 			buddyPicture: null,

static/partials/statusmessage.html

@@ -1,4 +1,4 @@
-<span class="middle status-{{status}}" ng-switch on="status">
+<span class="status-{{status}}" ng-switch on="status">
   <span ng-switch-when="initializing">{{_("Initializing")}} <i class="fa fa-circle-o-notch fa-spin"></i></span>
   <span ng-switch-when="waiting"><span class="msg">{{_("Online")}} </span><i style="color:rgb(132,184,25)" class="fa fa-bullseye"></i> {{id|displayName}} <img class="userpicture" ng-show="master.buddyPicture" ng-src="{{master.buddyPicture}}" alt="" /></span>
   <span ng-switch-when="connecting"><span class="msg">{{_("Calling")}} {{dialing|displayName}}</span> <a class="btn btn-small btn-danger" ng-click="doAbort()"><i class="fa fa-circle-o-notch fa-spin"></i> {{_("Hangup")}}</a></span>