Merge branch 'theurere-header-to-bootstrap-navbar'

html/main.html

@@ -7,19 +7,36 @@
 <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">
-        <div class="left">
-          <%template "logo" .%>
+
+<div class="navbar navbar-default navbar-fixed-top bar">
+    <div class="container-fluid">
+        <div class="navbar-header">
+            <button type="button" class="navbar-toggle collapsed" ng-click="isCollapsed = !isCollapsed">
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </button>
+            <div class="navbar-brand left">
+                <%template "logo" .%>
+            </div>
+            <div class="nav navbar-nav middle visible-xs">
+                <status-message></status-message>
+            </div>
         </div>
-        <status-message></status-message>
-        <div class="ng-cloak right">
-           <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">{{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>
+        <div 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">
+                <div class="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>
+                </div>
+            </ul>
         </div>
     </div>
 </div>

src/styles/components/_audiolevel.scss

@@ -24,9 +24,13 @@
   margin: 0 auto;
   position: fixed;
   right: 0;
-  top: 38px;
+  top: $audiolevel-top;
   width: 400px;
   z-index: 6;
+  @include breakpt($breakpoint-medium) {
+    z-index: 60;
+    top: $mobile-audiolevel-top;
+  }
   .audio-level {
     background: $audiovideolevel; /* Old browsers */
     background: gradient(linear, left top, left bottom, color-stop(0%,$audiovideolevel), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */

src/styles/components/_audiovideo.scss

@@ -25,8 +25,11 @@
   left: 0;
   position: absolute;
   right: 0;
-  top: 44px;
+  top: $minbarheight;
   user-select: none;
+  @include breakpt($breakpoint-medium) {
+    top: $mobile-audiovideo-top;
+  }
 }
 
 #audiovideo {

src/styles/components/_bar.scss

@@ -19,50 +19,39 @@
  *
  */
 
-#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;
   text-align: center;
   touch-callout: none;
   user-select: none;
-  // @include debug-vertical-alignment();
+  z-index: 5;
   @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;
-  left: 0;
-  top: 0;
-  padding-left: 12px;
-  position: absolute;
+  padding: 5px 5px 5px 15px;
   .logo {
     background: $logo no-repeat;
     background-size: 100%;
     display: inline-block;
     color: black;
     height: 32px;
+    width: 90px;
     font: normal 11px/11px $font-sans-serif;
     text-align: left;
-    width: 90px;
     vertical-align: middle;
     span {
       font-style: italic;
@@ -77,18 +66,9 @@
 }
 
 .bar .middle {
-  background-color: $componentbg;
-  display: inline-block;
-  font-weight: bold;
-  min-height: 44px;
-  padding: 0 1em;
-  position: relative;
-  margin-left: -70px;
-  z-index: 5;
+  float: none;
+  margin-top: 5px;
   @include breakpt($breakpoint-medium) {
-    display: block;
-    margin-left: 0px;
-    max-width: 40%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -137,11 +117,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 +131,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/_buddylist.scss

@@ -26,6 +26,9 @@
   top: 0;
   width: 285px;
   z-index: 50;
+  @include breakpt($breakpoint-medium) {
+    top: $mobile-buddylist-top;
+  }
 }
 
 #buddylist:before {
@@ -63,7 +66,8 @@
 
 .buddylist {
   background: $buddylist-background;
-  border-top: 1px solid $bordercolor;
+  //border-top: 1px solid $bordercolor;
+  border-left: 1px solid $bordercolor;
   bottom: 0;
   left: 25px;
   overflow-x: hidden;

src/styles/components/_chat.scss

@@ -28,6 +28,9 @@
   top: 0px;
   width: 260px;
   z-index: 45;
+  @include breakpt($breakpoint-medium) {
+    top: $mobile-chat-top;
+  }
 }
 
 .withChat {
@@ -169,7 +172,7 @@
 }
 
 .chatbody {
-  border-right: 1px solid $bordercolor;
+  border-left: 1px solid $bordercolor;
   bottom: -1px;
   left: 0;
   position: absolute;
@@ -183,9 +186,8 @@
 
 .chatheader {
   background: $chat-header;
-  border-top: 1px solid $bordercolor;
   border-bottom: 1px solid $bordercolor;
-  border-right: 1px solid $bordercolor;
+  border-left: 1px solid $bordercolor;
   height: 36px;
   left: 0;
   line-height: 34px;

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

@@ -20,15 +20,19 @@
  */
 
 #settings {
-  border-top: 1px solid $bordercolor;
+  border-left: 1px solid $bordercolor;
+  background: $settings-background;
   bottom: 0;
   padding-right: 20px;
   position: fixed;
   right: -520px;
-  top: 44px;
+  top: $minbarheight;
   transition: right 200ms ease-in-out;
   width: 520px;
   z-index: 50;
+  @include breakpt($breakpoint-medium) {
+    top: $mobile-settings-top;
+  }
 }
 
 #settings.show {

src/styles/global/_base.scss

@@ -39,7 +39,7 @@ a {
 }
 
 #background {
-  background: $main-background repeat;
+  background: $main-background;
   bottom: 0;
   left: 0;
   position:fixed;
@@ -48,7 +48,7 @@ a {
   z-index: 0;
   @include hidpi {
     background-image: $main-background-retina;
-    background-size: 198px 200px;
+    background-size: image-width($main-background-image-retina)/2 image-height($main-background-image-retina)/2;
   }
 }
 

src/styles/global/_pages.scss

@@ -24,7 +24,10 @@
   left: 0;
   position: absolute;
   right: 0;
-  top: 44px;
+  top: $minbarheight;
+  @include breakpt($breakpoint-medium) {
+    top: $mobile-pages-top;
+  }
 }
 
 .welcome {

src/styles/global/_variables.scss

@@ -25,15 +25,18 @@
 
 // general
 $background: #e5e5e5 !default;
-$componentbg: #f5f5f5 !default;
+$componentbg: #f8f8f8 !default;
 $componentfg1: #262626 !default;
 $componentfg2: rgba(0,0,0,.5) !default;
 $componentfg3: rgba(0,0,0,.2) !default;
 $componentfg4: #737373 !default;
 $sidepanebg: white !default;
-$bordercolor: #ccc !default;
+$bordercolor: #e7e7e7 !default;
 $actioncolor1: rgb(132,184,25) !default;
 $actioncolor2: rgb(0,149,52) !default;
+$mobile-top-1: 48px !default;
+$mobile-top-2: 153px !default;
+$mobile-top-3: 99px !default;
 
 // branding
 $logo: url("../img/logo-small.png") !default;
@@ -42,8 +45,10 @@ $load-logo: $scalable-logo !default;
 
 
 // background
-$main-background: url("../img/bg-tiles.jpg") !default;
-$main-background-retina: url("../img/bg-tiles_x2.jpg") !default;
+$main-background-image: "../img/bg-tiles.jpg" !default;
+$main-background-image-retina: "../img/bg-tiles_x2.jpg" !default;
+$main-background: url($main-background-image) !default;
+$main-background-retina: url($main-background-image-retina) !default;
 
 // general action based colors
 $action-hover: rgba(0,0,0,.4) !default;
@@ -61,11 +66,25 @@ $base-line-height: 1.53846156; // compass vertical_rhythm mixin
 $font-color: lighten(#000, 20%) !default;
 $font-color-accent: lighten($font-color, 50%) !default;
 
+//pages
+$mobile-pages-top: $mobile-top-1;
+
+//view
+$mobile-view-top: $mobile-top-3;
+
+//presensation
+$mobile-presentation-top: $mobile-top-3;
+
 // audio video
 $audiovideolevel: $action-enable !default;
+$mobile-audiovideo-top: $mobile-top-3;
+
+//audiolevel
+$audiolevel-top: 43px !default;
+$mobile-audiolevel-top: 88px !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;
@@ -85,6 +104,9 @@ $video-onlyaudio-background: #666 !default;
 $video-onlyaudio: rgba(255,255,255,.3) !default;
 $video-overlayactions: rgba(0,0,0,.9) !default;
 
+// settings
+$settings-background: white;
+
 // buddylist
 $buddylist-background: $componentbg;
 $buddylist-tab-color: rgba(0,0,0,.3) !default;
@@ -92,6 +114,7 @@ $buddylist-tab-background: $componentbg !default;
 $buddylist-action-background: rgba(255,255,255,0.5) !default;
 $buddylist-buddy1: $componentfg1 !default;
 $buddylist-buddy2: $componentfg2 !default;
+$mobile-buddylist-top: $mobile-top-1;
 
 // chat
 $chat-background: #e7e7e7 !default;
@@ -126,6 +149,8 @@ $chat-bottom-background: $chat-background !default;
 $chat-typing: $chat-meta !default;
 $chat-input-border-color: #66afe9 !default;
 
+$mobile-chat-top: $mobile-top-1;
+
 // fileinfo
 $fileinfo-background: white !default;
 $fileinfo-border: #ddd !default;
@@ -139,6 +164,7 @@ $fileinfo-icon-background-color-remote: $fileinfo-icon-background-color !default
 $settings-version: #ccc !default;
 $form-help-text: #737373 !default;
 $settings-background: white !default;
+$mobile-settings-top: $mobile-top-2;
 
 // social
 $social-email-color: #aaa !default;

src/styles/global/_views.scss

@@ -25,7 +25,11 @@
   left: 150px;
   position: absolute;
   right: 0;
-  top: 44px;
+  top: $minbarheight;
+  @include breakpt($breakpoint-medium) {
+    top: $mobile-view-top;
+    left: 0px;
+  }
 }
 
 .withChat,

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>