Merge pull request #747 from dtaylor113/vert-nav-items-mobile-only

fix(pfVerticalNavigation): on mobile, move the masthead utility items to the vertical navigation
patternfly · Jun 15, 2018 · f3e71c9 · f3e71c9
2 parents bcf6d0d + fb4ffeb
commit f3e71c9
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 6 deletions.
diff --git a/src/navigation/examples/vertical-navigation-basic.js b/src/navigation/examples/vertical-navigation-basic.js
@@ -35,6 +35,8 @@
  *   <li>.tooltip      - (string) Tooltip to display for the badge
  *   <li>.badgeClass:  - (string) Additional class(es) to add to the badge container
  *   </ul>
+ * <li>.mobileOnly     - (boolean) When set to 'true', menu item will only be displayed when browser is in mobile mode (<768px).
+ * When <code>ignoreMobile</code> flag set to 'true', <code>mobileOnly</code> items are not displayed.
  * </ul>
  * @param {function} navigateCallback function(item) Callback method invoked on a navigation item click (one with no submenus)
  * @param {function} itemClickCallback function(item) Callback method invoked on an item click
@@ -76,7 +78,7 @@
               <span class="caret"></span>
             </a>
             <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
-              <li><a href="#">Preferences</a></li>
+              <li><a href="#">User Preferences</a></li>
               <li><a href="#">Logout</a></li>
             </ul>
           </li>
@@ -392,9 +394,19 @@
            href: "#/adipscing"
         },
         {
-           title: "Lorem",
-           iconClass: "fa fa-gamepad",
-           href: "#/lorem"
+           title: "Help",
+           iconClass: "fa pficon-help",
+           href: "#/help",
+           mobileOnly: true
+        },
+        {
+           title: "User",
+           iconClass: "fa pficon-user",
+           mobileOnly: true,
+           children: [
+              { title: "User Preferences" },
+              { title: "Logout" }
+           ]
         },
         {
            title: "Exit Demo"

diff --git a/src/navigation/examples/vertical-navigation-router.js b/src/navigation/examples/vertical-navigation-router.js
@@ -26,6 +26,8 @@
  *   </ul>
  * <li>.uiSref         - (string) Optional Angular UI Router state name. If specified, href must be not defined, and vice versa.
  * <li>.uiSrefOptions  - (object) Optional object to be passed to Angular UI Router $state.go() function
+ * <li>.mobileOnly     - (boolean) When set to 'true', menu item will only be displayed when browser is in mobile mode (<768px).
+ * When <code>ignoreMobile</code> flag set to 'true', <code>mobileOnly</code> items are not displayed.
  * </ul>
  * @param {function} navigateCallback function(item) Callback method invoked on a navigation item click (one with no submenus)
  * @param {function} itemClickCallback function(item) Callback method invoked on an item click
@@ -67,7 +69,7 @@
                 <span class="caret"></span>
               </a>
               <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
-                <li><a href="#">Preferences</a></li>
+                <li><a href="#">User Preferences</a></li>
                 <li><a href="#">Logout</a></li>
               </ul>
             </li>
@@ -125,6 +127,36 @@
                                 </p>\
                               </div>\
                             </div>'
+            })
+            .state('help', {
+                url: '/help',
+                template: '<div class="card-pf card-pf-accented card-pf-aggregate-status" style="height: 89px;">\
+                              <div class="card-pf-body" style="height: 50px;">\
+                                <p class="card-pf-aggregate-status-notifications">\
+                                  State: Help\
+                                </p>\
+                              </div>\
+                            </div>'
+            })
+            .state('user-prefs', {
+                url: '/help',
+                template: '<div class="card-pf card-pf-accented card-pf-aggregate-status" style="height: 89px;">\
+                              <div class="card-pf-body" style="height: 50px;">\
+                                <p class="card-pf-aggregate-status-notifications">\
+                                  State: User Preferences\
+                                </p>\
+                              </div>\
+                            </div>'
+            })
+            .state('logout', {
+                url: '/help',
+                template: '<div class="card-pf card-pf-accented card-pf-aggregate-status" style="height: 89px;">\
+                              <div class="card-pf-body" style="height: 50px;">\
+                                <p class="card-pf-aggregate-status-notifications">\
+                                  State: Logout\
+                                </p>\
+                              </div>\
+                            </div>'
             });
     })
       .controller('vertNavWithRouterController', ['$scope',
@@ -146,6 +178,21 @@
               iconClass : "fa fa-space-shuttle",
               uiSref: "ipsum"
             },
+            {
+               title: "Help",
+               iconClass: "fa pficon-help",
+               uiSref: "help",
+               mobileOnly: true
+            },
+            {
+               title: "User",
+               iconClass: "fa pficon-user",
+               mobileOnly: true,
+               children: [
+                  { title: "User Preferences", uiSref: "user-prefs" },
+                  { title: "Logout", uiSref: "logout" }
+               ]
+            },
             {
               title: "Exit Demo"
             }

diff --git a/src/navigation/vertical-navigation.html b/src/navigation/vertical-navigation.html
@@ -35,7 +35,8 @@
                        'active': item.isActive,
                        'is-hover': item.isHover,
                        'mobile-nav-item-pf': item.isMobileItem && $ctrl.showMobileSecondary,
-                       'mobile-secondary-item-pf': item.isMobileItem && $ctrl.showMobileTertiary}"
+                       'mobile-secondary-item-pf': item.isMobileItem && $ctrl.showMobileTertiary,
+                       'visible-xs': item.mobileOnly}"
             ng-mouseenter="$ctrl.handlePrimaryHover(item)" ng-mouseleave="$ctrl.handlePrimaryUnHover(item)">
           <a ng-click="$ctrl.handlePrimaryClick(item, $event)">
             <span class="{{item.iconClass}}" ng-if="item.iconClass" ng-class="{hidden: $ctrl.hiddenIcons}"