Merge pull request #561 from thevoiceofzeke/app-menu

Redesign top bar menu and add side navigation
uPortal-Attic · Oct 16, 2017 · 222c0a9 · 222c0a9
2 parents 7ffec78 + 0e83df7
commit 222c0a9
Show file tree

Hide file tree

Showing 14 changed files with 431 additions and 55 deletions.
diff --git a/components/css/buckyless/header.less b/components/css/buckyless/header.less
@@ -58,14 +58,17 @@ portal-header {
       }
 
       .md-menu {
-        margin: 0;
-
         > .md-button {
           min-width: 48px;
           margin: 0;
         }
       }
 
+      .menu-toggle.md-button {
+        min-width: 48px;
+        margin: 0;
+      }
+
       .top-bar-controls-xs {
         .avatar__default {
           margin-right: 12px;

diff --git a/components/css/buckyless/md-generated.less b/components/css/buckyless/md-generated.less
@@ -243,3 +243,96 @@ md-tooltip {
     }
   }
 }
+
+// Main menu
+main-menu {
+  .main-menu__mobile-bar {
+    background: @grayscale2;
+    min-height: 56px;
+
+    .md-button {
+      min-width: 48px;
+      margin: 0 8px 0 0;
+
+      .main-menu__high-priority {
+        position: absolute;
+        top: 0;
+        left: 4px;
+
+        .material-icons {
+          font-size: 16px;
+        }
+      }
+    }
+
+    .username-menu {
+      .md-button.avatar__default {
+        display: inline-block;
+        outline: none;
+        border-radius: 50%;
+        height: 40px;
+        width: 40px;
+        min-width: initial;
+        padding: 4px;
+        text-transform: uppercase;
+
+        > span {
+          color: @grayscale2;
+          background-color: @color1;
+          border-radius: 50%;
+          display: block;
+          margin: 0;
+          overflow: hidden;
+          position: relative;
+          height: 32px;
+          width: 32px;
+          z-index: 0;
+          line-height: 32px;
+          font-size: 18px;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+
+  md-sidenav.main-menu__sidenav {
+    .links-separated {
+      display: block;
+      padding: 12px 15px 12px 24px;
+      bottom: 0;
+      position: absolute;
+      width: 320px;
+
+      a {
+        color: @grayscale6;
+        cursor: pointer;
+        font-size: 12px;
+        padding: 2px 5px;
+        text-decoration: none;
+        white-space: nowrap;
+
+        &:hover {
+          color: @black;
+        }
+      }
+
+      @media (max-width: @xs) {
+        width: calc(100% - 56px);
+        min-width: calc(100% - 56px);
+        max-width: calc(100% - 56px);
+      }
+    }
+
+    @media (max-width: @xs) {
+      z-index: 80;
+    }
+
+    @media (min-width: @xs) {
+      padding-top: 56px;
+
+      &.has-priority-notifications {
+        padding-top: 102px;
+      }
+    }
+  }
+}
diff --git a/components/js/app-config.js b/components/js/app-config.js
@@ -30,6 +30,8 @@ define(['angular'], function(angular) {
         })
         .value('APP_OPTIONS', {
             'optionsTemplateURL': null,
+            'appMenuTemplateURL': null,
+            'appMenuItems': [],
         })
         .value('SERVICE_LOC', {
             'aboutURL': null,
@@ -81,7 +83,7 @@ define(['angular'], function(angular) {
         ])
         .value('APP_BETA_FEATURES', [
           {
-            'id': 'toogleSomething',
+            'id': 'toggleSomething',
             'title': 'Sample Toggle',
             'description':
               'This is just an example of a toggle. ' +

diff --git a/components/js/override.js b/components/js/override.js
@@ -22,6 +22,14 @@ define(['angular'], function(angular) {
     .constant('OVERRIDE', {
       'APP_OPTIONS': {
         'optionsTemplateURL': 'portal/misc/partials/example-options.html',
+        'appMenuTemplateURL': 'portal/misc/partials/example-menu.html',
+        'appMenuItems': [
+          {
+            'label': 'MyUW home',
+            'icon': 'home',
+            'url': '/web',
+          },
+        ],
       },
     });
 });
diff --git a/components/portal/main/controllers.js b/components/portal/main/controllers.js
@@ -145,9 +145,9 @@ define(['angular', 'require'], function(angular, require) {
 
   /* Header */
   .controller('PortalHeaderController', ['$rootScope', '$scope', '$location',
-    'APP_FLAGS', 'MISC_URLS', 'messagesService',
-    function($rootScope, $scope, $location, APP_FLAGS, MISC_URLS,
-             messagesService) {
+    '$mdSidenav', 'APP_FLAGS', 'MISC_URLS',
+    function($rootScope, $scope, $location, $mdSidenav,
+             APP_FLAGS, MISC_URLS) {
       var vm = this;
       vm.navbarCollapsed = true;
       vm.showLogout = true;
@@ -156,6 +156,81 @@ define(['angular', 'require'], function(angular, require) {
       $scope.MISC_URLS = MISC_URLS;
   }])
 
+  /* Side navigation controller */
+  .controller('MainMenuController', ['$rootScope', '$scope', '$mdSidenav',
+    '$window', 'APP_OPTIONS', 'FOOTER_URLS', 'MESSAGES', 'NAMES',
+    function($rootScope, $scope, $mdSidenav, $window, APP_OPTIONS,
+             FOOTER_URLS, MESSAGES, NAMES) {
+      var vm = this;
+
+      // Scope variables
+      vm.menuItems = [];
+      vm.appName = '';
+      vm.notificationsPageUrl = '';
+      vm.hideMainMenu = false;
+      vm.footerLinks = FOOTER_URLS;
+
+      // Close side nav on scroll to avoid awkward UI
+      $window.onscroll = function() {
+        if (vm.isMenuOpen()) {
+          vm.closeMainMenu();
+        }
+      };
+
+      /**
+       * Check if the side nav menu is open
+       * @return Boolean
+       */
+      vm.isMenuOpen = function() {
+        return $mdSidenav('main-menu').isOpen();
+      };
+
+      /**
+       * Close the side navigation menu (used in ng-click)
+       */
+      vm.closeMainMenu = function() {
+        if (vm.isMenuOpen()) {
+          $mdSidenav('main-menu').close();
+        }
+      };
+
+      /**
+       * Toggle the side navigation menu
+       */
+      vm.showMainMenu = function() {
+        $mdSidenav('main-menu').toggle();
+      };
+
+      /**
+       * Check for menu configuration in app config
+       */
+      var init = function() {
+        // Use either custom template or defined menu items
+        if (APP_OPTIONS.appMenuTemplateURL) {
+          vm.appMenuTemplate = require.toUrl(APP_OPTIONS.appMenuTemplateURL);
+        } else if (APP_OPTIONS.appMenuItems
+          && APP_OPTIONS.appMenuItems.length > 0) {
+          vm.menuItems = APP_OPTIONS.appMenuItems;
+        } else {
+          vm.hideMainMenu = true;
+        }
+        // Set mobile menu header values
+        if (NAMES.title) {
+          vm.appName = NAMES.title;
+        }
+        if (MESSAGES.notificationsPageURL) {
+          vm.notificationsPageUrl = MESSAGES.notificationsPageURL;
+        }
+        if ($rootScope.portal && $rootScope.portal.theme
+          && $rootScope.portal.theme.footerLinks) {
+          vm.footerLinks =
+            vm.footerLinks.concat($rootScope.portal.theme.footerLinks);
+        }
+      };
+
+      init();
+  }])
+
   /* Footer */
   .controller('PortalFooterController', ['$scope', 'FOOTER_URLS',
     function($scope, FOOTER_URLS) {

diff --git a/components/portal/main/directives.js b/components/portal/main/directives.js
@@ -26,6 +26,7 @@ define(['angular', 'require'], function(angular, require) {
       restrict: 'E',
       templateUrl: require.toUrl('./partials/body.html'),
       controller: 'PortalMainController',
+      controllerAs: 'mainCtrl',
     };
   })
 
@@ -36,10 +37,15 @@ define(['angular', 'require'], function(angular, require) {
     };
   })
 
-  .directive('sideBarMenu', function() {
+  .directive('mainMenu', function() {
     return {
       restrict: 'E',
-      templateUrl: require.toUrl('./partials/sidebar-left.html'),
+      templateUrl: require.toUrl('./partials/main-menu.html'),
+      scope: {
+        mainCtrl: '=mainCtrl',
+      },
+      controller: 'MainMenuController',
+      controllerAs: 'vm',
     };
   })
 

diff --git a/components/portal/main/partials/body.html b/components/portal/main/partials/body.html
@@ -20,7 +20,7 @@
 -->
 <div class="my-uw" md-theme="{{ portal.theme.name || 'default' }}" tabindex="0" aria-live="polite" aria-atomic="false">
   <div class="my-uw-body">
-    <portal-header ng-class="{'has-priority-nots': headerCtrl.hasPriorityNotifications}" ng-controller="PortalHeaderController as headerCtrl"></portal-header>
+    <portal-header ng-class="{'has-priority-nots': mainCtrl.hasPriorityNotifications}" ng-controller="PortalHeaderController as headerCtrl"></portal-header>
 
     <div class="page-content" layout="column" tabindex="0">
       <div role="main" class="region-main" class="no-padding">
@@ -29,6 +29,8 @@
     </div>
 
   </div>
-
+  <!-- MAIN MENU -->
+  <main-menu main-ctrl="mainCtrl"></main-menu>
+  <!-- FOOTER -->
   <site-footer class="my-uw" tabindex="0"></site-footer>
 </div>
diff --git a/components/portal/main/partials/header.html b/components/portal/main/partials/header.html
@@ -19,39 +19,16 @@
 
 -->
 <md-toolbar md-scroll-shrink class="md-primary" tabindex="0" ng-controller="MessagesController">
-  <notifications-bell mode="priority" class="priority-gt-xs" header-ctrl="headerCtrl" hide-xs></notifications-bell>
+  <notifications-bell mode="priority" class="priority-gt-xs" header-ctrl="mainCtrl" hide-xs></notifications-bell>
   <span ng-controller="AnnouncementsController" controllerAs="vm"></span>
   <div class="md-toolbar-tools"  role="banner">
     <div layout="row" flex-gt-xs="30" flex-xs="40" layout-align="start center">
-      <!-- MOBILE MENU -->
-      <md-menu md-position-mode="target target" md-offset="0 56" hide-gt-xs>
-        <md-button aria-label="toggle mobile menu" hide-gt-xs ng-click="$mdOpenMenu($event)" layout="row" layout-align="center center">
-          <notifications-bell mode="mobile-bell" ng-if="!GuestMode" hide-gt-xs></notifications-bell>
-          <i class="fa fa-bars" style='font-size: 1.5em;'></i>
-          <md-tooltip class="top-bar-tooltip" md-direction="bottom" md-delay="500">Main menu</md-tooltip>
-        </md-button>
-        <md-menu-content width="5" class="mobile-menu">
-          <!-- Mascot announcement -->
-          <mascot-announcement mode="mobile-menu" header-ctrl="headerCtrl"></mascot-announcement>
-          <!-- Notifications -->
-          <notifications-bell mode="mobile-menu" header-ctrl="headerCtrl" ng-if="!GuestMode"></notifications-bell>
-          <!-- Home link -->
-          <md-menu-item>
-            <md-button class="md-default" ng-if="APP_FLAGS.isWeb" ng-href="/web" ng-click="pushGAEvent('Mobile Menu', 'Click Link', 'Home');">
-              <md-icon>home</md-icon> Home
-            </md-button>
-            <md-button class="md-default" ng-if='!APP_FLAGS.isWeb' ng-href="/" target="_self" ng-click="pushGAEvent('Mobile Menu', 'Click Link', 'Home');">
-              <md-icon>home</md-icon> Home
-            </md-button>
-          </md-menu-item>
-          <!-- Log out link -->
-          <md-menu-item>
-            <md-button class="md-default" ng-href="{{MISC_URLS.logoutURL}}" target="_self" ng-click="pushGAEvent('Mobile Menu', 'Click Link', 'Log out');">
-              <md-icon>exit_to_app</md-icon> Log out
-            </md-button>
-          </md-menu-item>
-        </md-menu-content>
-      </md-menu>
+      <!-- MAIN MENU TOGGLE -->
+      <md-button class="menu-toggle" ng-controller="MainMenuController as vm" ng-click="vm.showMainMenu()" ng-class="{ 'hide-gt-xs' : vm.hideMainMenu }">
+        <md-icon>menu</md-icon>
+        <md-tooltip md-direction="bottom" md-delay="500" class="top-bar-tooltip">Menu</md-tooltip>
+        <notifications-bell mode="mobile-bell" ng-if="!GuestMode" hide-gt-xs></notifications-bell>
+      </md-button>
 
       <!-- MyUW APP ICON AND TITLE -->
       <a ng-href="{{MISC_URLS.rootURL}}"
@@ -60,21 +37,16 @@
          aria-label="{{portal.theme.ariaLabelTitle}}"
          layout="row"
          layout-align="start center">
-        <img ng-src="{{portal.theme.crest}}"
-             class="crest"
-             alt="{{portal.theme.crestalt}}"
-             hide-sm hide-xs>
         <h1 class="md-title" layout="row">
           <span>{{portal.theme.title}}</span>
           <span class="beta-logo" ng-if="portal.theme.subtitle">{{portal.theme.subtitle}}</span>
         </h1>
       </a>
     </div>
 
-    <!-- SEARCH BUTTON AND USERNAME MENU XS-ONLY -->
+    <!-- SEARCH BUTTON XS-ONLY -->
     <div layout="row" layout-align="end center" flex-xs="60" class="top-bar-controls-xs" hide-gt-xs>
-      <search ng-if="APP_FLAGS.showSearch" mode="mobile-search" layout="row" layout-align="end center" hide-gt-xs></search>
-      <username layout="row" layout-align="start center"></username>
+      <search ng-show="APP_FLAGS.showSearch" mode="mobile-search" layout="row" layout-align="end center" hide-gt-xs></search>
     </div>
 
     <!-- SEARCH BAR SM+ -->
@@ -85,9 +57,10 @@ <h1 class="md-title" layout="row">
 
     <!-- COLLAPSIBLE MENU SM+ -->
     <div layout="row" layout-align="end center" flex-gt-xs="30" hide-xs>
-      <mascot-announcement mode="mascot"></mascot-announcement>
+      <mascot-announcement mode="mascot" header-ctrl="mainCtrl"></mascot-announcement>
       <notifications-bell mode="bell" ng-if="!GuestMode"></notifications-bell>
       <username layout="row" layout-align="start center"></username>
     </div>
   </div>
 </md-toolbar>
+