Merge pull request #662 from gthacoder/meteor-client-sliding-in-on-top

HTML5 client: new sliding menu.

bigbluebutton-html5/app/.meteor/packages

@@ -25,3 +25,4 @@ sanjo:jasmine
 pagebakers:ionicons
 ewall:foundation
 maibaum:foundation-icons
+gthacoder:sled

bigbluebutton-html5/app/.meteor/versions

@@ -20,8 +20,10 @@ duongthienduc:meteor-winston@1.0.0
 ejson@1.0.6
 ewall:foundation@5.5.2
 fastclick@1.0.3
+fourseven:scss@3.1.1
 francocatena:status@1.1.2
 geojson-utils@1.0.3
+gthacoder:sled@0.0.1
 html-tools@1.0.4
 htmljs@1.0.4
 http@1.1.0

bigbluebutton-html5/app/client/globals.coffee

@@ -152,11 +152,14 @@ Handlebars.registerHelper "pointerLocation", ->
 Handlebars.registerHelper "safeName", (str) ->
   safeString(str)
 
-Handlebars.registerHelper "visibility", (section) ->
+###Handlebars.registerHelper "visibility", (section) ->
   if getInSession "display_#{section}"
     style: 'display:block;'
   else
-    style: 'display:none;'
+    style: 'display:none;'###
+
+Handlebars.registerHelper "visibility", (section) ->
+  style: 'display:block;'
 
 Handlebars.registerHelper 'containerPosition', (section) ->
   if getInSession 'display_usersList'
@@ -202,13 +205,18 @@ Handlebars.registerHelper 'whiteboardSize', (section) ->
 @toggleMic = (event) ->
   BBB.toggleMyMic()
 
-# toggle state of session variable
 @toggleUsersList = ->
-  setInSession "display_usersList", !getInSession "display_usersList"
+  if $('.sl-left-drawer').hasClass('hiddenInLandscape')
+    $('.sl-left-drawer').removeClass('hiddenInLandscape')
+  else
+    $('.sl-left-drawer').addClass('hiddenInLandscape')
   setTimeout(redrawWhiteboard, 0)
 
-@toggleMenu = ->
-  setInSession 'display_menu', !getInSession 'display_menu'
+@toggleShield = ->
+  if $('.shield').hasClass('darken')
+    $('.shield').removeClass('darken')
+  else
+    $('.shield').addClass('darken')
 
 @removeFullscreenStyles = ->
   $('#whiteboard-paper').removeClass('verticallyCentered')
@@ -253,9 +261,13 @@ Handlebars.registerHelper 'whiteboardSize', (section) ->
       removeFullscreenStyles()
       redrawWhiteboard()
 
-@closePushMenus = ->
-  setInSession 'display_usersList', false
-  setInSession 'display_menu', false
+@closeMenus = ->
+  if $('.sl-left-drawer').hasClass('sl-left-drawer-out')
+    toggleLeftDrawer()
+    toggleLeftArrowClockwise()
+  else if $('.sl-right-drawer').hasClass('sl-right-drawer-out')
+    toggleRightDrawer()
+    toggleRightArrowClockwise()
 
 # Periodically check the status of the WebRTC call, when a call has been established attempt to hangup,
 # retry if a call is in progress, send the leave voice conference message to BBB

bigbluebutton-html5/app/client/main.coffee

@@ -48,23 +48,36 @@ Template.header.events
     $(".tooltip").hide()
     toggleNavbar()
 
-  "click .usersListIcon": (event) ->
-    $(".tooltip").hide()
-    toggleUsersList()
-
   "click .videoFeedIcon": (event) ->
     $(".tooltip").hide()
     toggleCam @
 
   "click .toggleUserlistButton": (event) ->
-    toggleUsersList()
+    if isLandscape()
+      toggleUsersList()
+    else
+      if $('.sl-right-drawer').hasClass('sl-right-drawer-out')
+        toggleRightDrawer()
+        toggleRightArrowClockwise()
+      else
+        toggleShield()
+      toggleLeftDrawer()
+      toggleLeftArrowClockwise()
 
   "click .toggleMenuButton": (event) ->
-    toggleMenu()
+    if $('.sl-left-drawer').hasClass('sl-left-drawer-out')
+      toggleLeftDrawer()
+      toggleLeftArrowClockwise()
+    else
+      toggleShield()
+    toggleRightDrawer()
+    toggleRightArrowClockwise()
 
 Template.menu.events
   'click .slideButton': (event) ->
-    toggleMenu()
+    toggleShield()
+    toggleRightDrawer()
+    toggleRightArrowClockwise()
 
   'click .toggleChatButton': (event) ->
     toggleChatbar()
@@ -117,7 +130,8 @@ Template.main.rendered = ->
 
 Template.main.events
   'click .shield': (event) ->
-    closePushMenus()
+    toggleShield()
+    closeMenus()
 
   'click .settingsIcon': (event) ->
     setInSession("tempFontSize", getInSession("messageFontSize"))

bigbluebutton-html5/app/client/main.html

@@ -1,10 +1,8 @@
 <template name="header">
   <nav id="navbar" class="myNavbar gradientBar top-bar" role="navigation">
-    {{#if getInSession "display_usersList"}}
-      {{> makeButton btn_class="toggleUserlistButton navbarButton pressedButton" i_class="ion-navicon-round" rel="tooltip" data_placement="bottom" title="Close Userlist"}}
-    {{else}}
-      {{> makeButton btn_class="toggleUserlistButton navbarButton" i_class="ion-navicon-round" rel="tooltip" data_placement="bottom" title="Open Userlist"}}
-    {{/if}}
+    <button class="btn toggleUserlistButton navbarButton sl-hamburger sl-ham-la-cw sl-portrait-mobile sl-portrait-keyboard">
+      <span></span>
+    </button>
 
     {{#if amIInAudio}}
       {{#if amIListenOnlyAudio}}
@@ -36,11 +34,9 @@
       {{> makeButton id="logout" btn_class="signOutIcon navbarButton" i_class="ion-log-out" rel="tooltip"
       title="Logout"}}
     </div>
-    {{#if getInSession "display_menu"}}
-      {{> makeButton btn_class="toggleMenuButton navbarButton pressedButton" i_class="ion-navicon-round" rel="tooltip" data_placement="bottom" title="Close Menu"}}
-    {{else}}
-      {{> makeButton btn_class="toggleMenuButton navbarButton" i_class="ion-navicon-round" rel="tooltip" data_placement="bottom" title="Open Menu"}}
-    {{/if}}
+    <button class="btn toggleMenuButton navbarButton sl-hamburger sl-ham-ra-cw sl-portrait-mobile sl-portrait-keyboard">
+      <span></span>
+    </button>
   </nav>
 </template>
 
@@ -49,8 +45,12 @@
     {{#if isDisconnected}}
       {{>status}}
     {{else}}
-      {{> usersList id="users" name="usersList"}}
-      {{> menu id="menu"}}
+      <div class="sl-left-drawer sl-left-drawer-content-delay sl-portrait-mobile sl-portrait-keyboard">
+        {{> usersList id="users" name="usersList"}}
+      </div>
+      <div class="sl-right-drawer sl-portrait-mobile sl-portrait-keyboard">
+        {{> menu id="menu"}}
+      </div>
       <div id="main">
         {{> header}}
         <div id="panels">