Merge pull request #1316 from eciis/bottom-menu

Create bottom navbar

frontend/home/home.html

@@ -8,7 +8,7 @@
         <div>
           <save-post is-dialog="false" hide show-gt-sm></save-post>
         </div>
-        <md-content flex id="content" class="body custom-scrollbar">
+        <md-content flex id="content" class="body custom-scrollbar" hide-top-navbar>
             <div flex layout="row">
                 <post-timeline flex layout="column" institution="false"
                   user="homeCtrl.user"></post-timeline>

frontend/home/homeController.js

@@ -3,7 +3,7 @@
 (function() {
     var app = angular.module("app");
 
-    app.controller("HomeController", function HomeController(AuthService, $mdDialog, $state, 
+    app.controller("HomeController", function HomeController(AuthService, $mdDialog, $state,
         ProfileService, EventService, $rootScope, POST_EVENTS) {
         var homeCtrl = this;
 

frontend/index.html

@@ -127,6 +127,7 @@
   <script src="app/config.js"></script>
   <script src="app/app.js"></script>
   <script src="app/main/mainController.js"></script>
+  <script src="app/main/hideTopNavbar.js"></script>
 
   <!--Utils-->
   <script src="app/utils/utils.js"></script>

frontend/main/hideTopNavbar.js

@@ -0,0 +1,29 @@
+'use strict';
+
+(function () {
+    const app = angular.module('app');
+
+    app.directive('hideTopNavbar', function() {
+        return {
+            restrict: 'A',
+            link: function(scope, element, attrs) {
+                const content = element[0];
+                const navbar = document.getElementById('main-toolbar');
+
+                if(Utils.isMobileScreen(450)){
+                    content.addEventListener('scroll', function() {
+                        const screenPosition = content.scrollTop;
+                        const limitScrol =  30;
+                        if (screenPosition <= limitScrol) {
+                            navbar.style.animation='1.0s fadeNav ease';
+                            navbar.style.animationDelay='0s';
+                            navbar.style.display = 'block';
+                        } else {
+                            navbar.style.display = 'none';
+                        }
+                    });
+                }
+            }
+        };
+    });
+})();

frontend/main/main.css

@@ -30,18 +30,54 @@
     width: auto;
 }
 
+#navbar-bottom{
+    background-color: #ffffff;
+    box-shadow: 0px -8px 25px #EEEEEE;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+
+#label-icon-navbottom{
+    font-size: 14px;
+    margin: 0;
+    margin-bottom: 0.8em;
+    text-align: center;
+}
+
+.icon-navbar-bottom{
+    display: grid;
+    justify-content: center;
+}
+
+.color-icon-navbar{
+    color: #818181 !important;
+}
+
+.color-icon-selected-navbar{
+    color: #009688 !important;
+}
+
+.big-label-icon{
+    justify-self: center;
+}
+
 @media screen and (max-width: 450px) {
     #logo-full {
         display: none;
     }
+    .navbar-top{
+        display: none;
+    }
 }
 
 @media screen and (min-width: 451px) {
     .logo {
         height: 35px;
     }
-
     #logo-resp {
         display: none;
     }
+    #navbar-bottom{
+        display: none;
+    }
 }

frontend/main/main.html

@@ -14,14 +14,13 @@
     </a>
 
     <div class="toolbar-btns" layout="row">
-      <a ui-sref="app.user.home">
+
+      <a ui-sref="app.user.home" class="navbar-top">
         <md-button class="md-icon-button" title="Home">
           <md-icon>home</md-icon>
         </md-button>
       </a>
-
-        <notification-button class-button="green-icon-notification"></notification-button>
-
+      <notification-button class-button="green-icon-notification" class="navbar-top"></notification-button>
       <div layout="row" md-theme="input" class="toolbar-search" md-colors="{background: mainCtrl.showSearch ? 'teal-800': 'teal-900'}">
         <form ng-submit="mainCtrl.search()" ng-show="mainCtrl.showSearch">
           <md-input-container flex md-no-float>
@@ -47,7 +46,8 @@ <h1 class="md-subhead">Atualização Disponível</h1>
   </div>
 </md-toolbar>
 
-<md-content ui-view="content" flex layout="column" md-colors="{background: 'grey-200'}"></md-content>
+<md-content ui-view="content" flex layout="column" md-colors="{background: 'grey-200'}" class="content-mobile">
+</md-content>
 
 <div hide-xs hide-sm>
   <md-button class="feedback-btn" ng-click="mainCtrl.goToReport()"
@@ -67,4 +67,33 @@ <h2 class="md-flex">Verifique seu email para confirmar sua conta.</h2>
     <md-button class="md-icon-button" ng-click="mainCtrl.refreshUser()"><md-icon>refresh</md-icon></md-button>
     <md-button class="md-icon-button" ng-click="hideEmailVerification = true"><md-icon>close</md-icon></md-button>
   </div>
-</md-toolbar>
+</md-toolbar>
+
+<footer>
+  <md-toolbar layout-align="space-around center" layout="row" id="navbar-bottom">
+    <div class="icon-navbar-bottom">
+      <md-button class="md-icon-button" aria-label="Início" ng-click="mainCtrl.goToOfBottomNav('home')">
+        <md-icon ng-class="mainCtrl.getSelectedStateClass('home')">home</md-icon>
+      </md-button>
+      <p ng-class="mainCtrl.getSelectedStateClass('home')" id="label-icon-navbottom">Início</p>
+    </div> 
+    <div class="icon-navbar-bottom">
+      <md-button class="md-icon-button" aria-label="Eventos" ng-click="mainCtrl.goToOfBottomNav('events')">
+        <md-icon ng-class="mainCtrl.getSelectedStateClass('events')">event</md-icon>
+      </md-button>
+      <p ng-class="mainCtrl.getSelectedStateClass('events')" id="label-icon-navbottom">Eventos</p>
+    </div>
+    <div class="icon-navbar-bottom">
+      <md-button class="md-icon-button big-label-icon" aria-label="Instituições" ng-click="mainCtrl.goToOfBottomNav('institutions')">
+        <md-icon ng-class="mainCtrl.getSelectedStateClass('institutions')">account_balance</md-icon>
+      </md-button>
+      <p ng-class="mainCtrl.getSelectedStateClass('institutions')" id="label-icon-navbottom">Instituições</p>
+    </div>
+    <div class="icon-navbar-bottom" ng-click="mainCtrl.selectNotificationState()">
+      <notification-button should-go-to-state="true"  style="justify-self:center"
+        class-button="{{mainCtrl.getSelectedStateClass('notifications')}}">
+      </notification-button>
+      <p id="label-icon-navbottom" ng-class="mainCtrl.getSelectedStateClass('notifications')">Notificações</p>  
+    </div> 
+  </md-toolbar>
+</footer>

frontend/main/mainController.js

@@ -14,6 +14,8 @@
         mainCtrl.pendingManagerMember = 0;
         mainCtrl.pendingInstInvitations = 0;
         mainCtrl.pendingInstLinksInvitations = 0;
+
+        mainCtrl.stateView =  $state.current.name;
 
         mainCtrl.APP_VERSION = Config.APP_VERSION;
 
@@ -112,7 +114,7 @@
             });
         };
 
-        mainCtrl.goToEditInfo = function goToEditInfo(instKey){
+        mainCtrl.goToEditInstInfo = function goToEditInstInfo(instKey){
             $state.go('app.manage_institution.edit_info', {
                 institutionKey: instKey || mainCtrl.user.current_institution.key
             });
@@ -173,14 +175,45 @@
             $window.location.reload();
         };
 
+        /** Function used in bottom navbar to redirect to new state and
+         * reset properties of CSS that can be modified while using in mode mobile
+         * @param {string} state - state that should be redirect. 
+         */
+        mainCtrl.goToOfBottomNav = function goToOfBottomNav(state) {
+            mainCtrl.stateView = "app.user." + state;
+            resetNavBarDisplayStyle();
+            $state.go(mainCtrl.stateView);
+        };
+
+        /** Update the state view to notifications
+         *  and reset properties of CSS.
+         */
+        mainCtrl.selectNotificationState = function selectNotificationState(){
+            mainCtrl.stateView = "app.user.notifications";
+            resetNavBarDisplayStyle();
+        }
+
+        /** Return correct class according currently state view.
+         */
+        mainCtrl.getSelectedStateClass = function getSelectedStateClass(state){
+            state = "app.user." + state;
+            return (state === mainCtrl.stateView) ? "color-icon-selected-navbar":"color-icon-navbar";
+        };
+
+        /** Reset properties CSS. 
+         * In mode mobile maybe changes some properties.
+         */
+        function resetNavBarDisplayStyle(){
+            document.getElementById('main-toolbar').style.display = 'block';
+        }
+
         /** Add new observers to listen events that user should be refresh. 
          */ 
         function notificationListener() {
             NotificationListenerService.multipleEventsListener(UserService.NOTIFICATIONS_TO_UPDATE_USER,
                 mainCtrl.refreshUser);
         }
 
-
         (function main() {
             if (mainCtrl.user.name === 'Unknown') {
                 $state.go("app.user.config_profile");

frontend/styles/custom.css

@@ -339,6 +339,16 @@ a:active {
   }
 }
 
+@keyframes fadeNav {
+    0% {
+      opacity: 0;
+    }
+
+    60% {
+      opacity: 1;
+    }
+}
+
 .image-view{
     position:relative;
     max-width: 37%;

frontend/test/specs/main/mainControllerSpec.js

@@ -172,6 +172,18 @@
         it('User should not be admin of your current institution', function(){
             expect(mainCtrl.isAdmin(mainCtrl.user.current_institution.key)).toBe(true);
         });
+
+        it("The class css of state selected should be 'color-icon-selected-navbar'", function(){
+            mainCtrl.stateView = "app.user.home";
+            expect(mainCtrl.getSelectedStateClass("home")).toBe("color-icon-selected-navbar");
+            expect(mainCtrl.getSelectedStateClass("events")).toBe("color-icon-navbar");
+            expect(mainCtrl.getSelectedStateClass("notifications")).toBe("color-icon-navbar");
+
+            mainCtrl.stateView = "app.user.events";
+            expect(mainCtrl.getSelectedStateClass("home")).toBe("color-icon-navbar");
+            expect(mainCtrl.getSelectedStateClass("events")).toBe("color-icon-selected-navbar");
+            expect(mainCtrl.getSelectedStateClass("notifications")).toBe("color-icon-navbar");
+        });
     });
 
     describe('Main Controller listenners', function(){

frontend/user/left_nav.html

@@ -48,7 +48,7 @@
 
               <div class="row section-menu">
                 <md-menu-content width="4" md-colors="{background: 'grey-100'}">
-                  <md-menu-item>
+                 <md-menu-item hide-xs>
                     <md-button ng-click="homeCtrl.goHome()"
                       ng-class="homeCtrl.getSelectedItemClass('home')">
                       <md-icon>home</md-icon>
@@ -85,18 +85,18 @@
                 <md-divider style="margin-top: 10px"></md-divider>
                 <md-menu-content width="4" md-colors="{background: 'grey-100'}">
                   <md-menu-item>
-                    <md-button ng-click="mainCtrl.goToEditInfo()">
-                      <md-icon>edit</md-icon>
-                      <b>Editar Informações</b>
+                    <md-button ng-click="mainCtrl.goToEditInstInfo()">
+                      <md-icon>account_balance</md-icon>
+                      <b>Gerenciar instituição</b>
                     </md-button>
                   </md-menu-item>
-                  <md-menu-item>
+                  <md-menu-item hide-xs>
                     <md-button  ng-click="mainCtrl.goToManageMembers()">
                       <md-icon ng-class="mainCtrl.pendingManagerMember? 'notification-badge': ''"
                         data-badge>account_circle</md-icon>
                       <b>Gerenciar Membros</b>
                   </md-menu-item>
-                  <md-menu-item>
+                  <md-menu-item hide-xs>
                     <md-button ng-click="mainCtrl.goToManageInstitutions()">
                       <md-icon ng-class="mainCtrl.pendingInstLinksInvitations? 'notification-badge': ''"
                         data-badge>account_balance</md-icon>