Changed the mobile navbar icons (thus reducing the number of animatio…

…ns) and redesigned the Settings menu.
bigbluebutton · Nov 29, 2015 · ad0a23c · ad0a23c
1 parent f7eb9b2
commit ad0a23c
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 209 deletions.
diff --git a/bigbluebutton-html5/app/client/globals.coffee b/bigbluebutton-html5/app/client/globals.coffee
@@ -385,10 +385,8 @@ Handlebars.registerHelper "getPollQuestions", ->
 @closeMenus = ->
   if $('.userlistMenu').hasClass('menuOut')
     toggleUserlistMenu()
-    toggleLeftHamburderIcon()
   else if $('.settingsMenu').hasClass('menuOut')
     toggleSettingsMenu()
-    toggleRightHamburderIcon()
 
 # 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
@@ -656,26 +654,30 @@ Handlebars.registerHelper "getPollQuestions", ->
     $('.FABContainer').removeClass('closedFAB')
     $('.FABContainer').addClass('openedFAB')
 
-@toggleLeftHamburderIcon = () ->
-  if $('.leftHamburgerButton').hasClass('hamburgerToggledOn')
-    $('.leftHamburgerButton').removeClass('hamburgerToggledOn')
-  else
-    $('.leftHamburgerButton').addClass('hamburgerToggledOn')
-
-@toggleRightHamburderIcon = () ->
-  if $('.rightHamburgerButton').hasClass('hamburgerToggledOn')
-    $('.rightHamburgerButton').removeClass('hamburgerToggledOn')
-  else
-    $('.rightHamburgerButton').addClass('hamburgerToggledOn')
-
 @toggleUserlistMenu = () ->
+
+  # menu
   if $('.userlistMenu').hasClass('menuOut')
     $('.userlistMenu').removeClass('menuOut')
   else
     $('.userlistMenu').addClass('menuOut')
 
+  # icon
+  if $('.toggleUserlistButton').hasClass('menuToggledOn')
+    $('.toggleUserlistButton').removeClass('menuToggledOn')
+  else
+    $('.toggleUserlistButton').addClass('menuToggledOn')
+
 @toggleSettingsMenu = () ->
+
+  # menu
   if $('.settingsMenu').hasClass('menuOut')
     $('.settingsMenu').removeClass('menuOut')
   else
     $('.settingsMenu').addClass('menuOut')
+
+  # icon
+  if $('.toggleMenuButton').hasClass('menuToggledOn')
+    $('.toggleMenuButton').removeClass('menuToggledOn')
+  else
+    $('.toggleMenuButton').addClass('menuToggledOn')
diff --git a/bigbluebutton-html5/app/client/main.coffee b/bigbluebutton-html5/app/client/main.coffee
@@ -58,20 +58,17 @@ Template.header.events
     else
       if $('.settingsMenu').hasClass('menuOut')
         toggleSettingsMenu()
-        toggleRightHamburderIcon()
       else
         toggleShield()
       toggleUserlistMenu()
-      toggleLeftHamburderIcon()
 
   "click .toggleMenuButton": (event) ->
     if $('.userlistMenu').hasClass('menuOut')
       toggleUserlistMenu()
-      toggleLeftHamburderIcon()
     else
       toggleShield()
+    $('.toggleMenuButton').blur()
     toggleSettingsMenu()
-    toggleRightHamburderIcon()
 
   "click .btn": (event) ->
     $(".ui-tooltip").hide()
@@ -80,7 +77,6 @@ Template.menu.events
   'click .slideButton': (event) ->
     toggleShield()
     toggleSettingsMenu()
-    toggleRightHamburderIcon()
     $('.slideButton').blur()
 
   'click .toggleChatButton': (event) ->
@@ -197,14 +193,14 @@ Template.main.gestures
           $('.shield').css('opacity', '')
           $('.left-drawer').removeClass('menuOut')
           $('.left-drawer').css('transform', '')
-          $('.toggleUserlistButton').removeClass('hamburgerToggledOn')
+          $('.toggleUserlistButton').removeClass('menuToggledOn')
           $('.shield').removeClass('darken') # in case it was opened by clicking a button
         else
           $('.left-drawer').css('transform', 'translateX(' + leftDrawerWidth + 'px)')
           $('.shield').css('opacity', 0.5)
           $('.left-drawer').addClass('menuOut')
           $('.left-drawer').css('transform', '')
-          $('.toggleUserlistButton').addClass('hamburgerToggledOn')
+          $('.toggleUserlistButton').addClass('menuToggledOn')
 
       if panIsValid and
       menuPanned is 'right' and
@@ -216,14 +212,14 @@ Template.main.gestures
           $('.right-drawer').css('transform', 'translateX(' + screenWidth + 'px)')
           $('.right-drawer').removeClass('menuOut')
           $('.right-drawer').css('transform', '')
-          $('.toggleMenuButton').removeClass('hamburgerToggledOn')
+          $('.toggleMenuButton').removeClass('menuToggledOn')
           $('.shield').removeClass('darken') # in case it was opened by clicking a button
         else
           $('.shield').css('opacity', 0.5)
           $('.right-drawer').css('transform', 'translateX(' + (screenWidth - $('.right-drawer').width()) + 'px)')
           $('.right-drawer').addClass('menuOut')
           $('.right-drawer').css('transform', '')
-          $('.toggleMenuButton').addClass('hamburgerToggledOn')
+          $('.toggleMenuButton').addClass('menuToggledOn')
 
       $('.left-drawer').addClass('userlistMenu')
       $('.userlistMenu').removeClass('left-drawer')
@@ -301,7 +297,6 @@ Template.main.gestures
 
         if $('.settingsMenu').hasClass('menuOut')
           toggleSettingsMenu()
-          toggleRightHamburderIcon()
 
         $('.left-drawer').css('transform', 'translateX(' + (initTransformValue + event.deltaX) + 'px)')
 
@@ -318,7 +313,6 @@ Template.main.gestures
 
         if $('.userlistMenu').hasClass('menuOut')
           toggleUserlistMenu()
-          toggleLeftHamburderIcon()
 
         $('.right-drawer').css('transform', 'translateX(' + (initTransformValue + event.deltaX) + 'px)')
 

diff --git a/bigbluebutton-html5/app/client/main.html b/bigbluebutton-html5/app/client/main.html
@@ -1,6 +1,6 @@
 <template name="header">
   <nav id="navbar" class="myNavbar top-bar" role="navigation">
-    {{> makeButton btn_class="btn toggleUserlistButton navbarButton leftHamburgerButton" rel="tooltip" title="Toggle Userlist" span=true notification="all_chats"}}
+    {{> makeButton btn_class="btn toggleUserlistButton navbarButton" i_class="ion-navicon" rel="tooltip" title="Toggle Userlist" span=true notification="all_chats"}}
 
       {{#if amIInAudio}}
         <div class="audioNavbarSection">
@@ -37,7 +37,7 @@
       {{> makeButton id="logout" btn_class="signOutIcon navbarButton" i_class="ion-log-out" rel="tooltip"
       title="Logout"}}
     </div>
-    {{> makeButton btn_class="btn toggleMenuButton navbarButton rightHamburgerButton" rel="tooltip" title="Toggle Menu" span=true}}
+    {{> makeButton btn_class="btn toggleMenuButton navbarButton" i_class="ion-android-more-vertical" rel="tooltip" title="Toggle Menu" span=true}}
   </nav>
 </template>
 
@@ -54,7 +54,6 @@
         {{> usersList id="users" name="usersList"}}
       </div>
       <div class="settingsMenu">
-        <div class="titleArea"></div>
         {{> menu id="menu"}}
       </div>
       <div id="main">