Skip to content

Commit 8117714

Browse files
jeff-phillips-18jeff-phillips-18
committed
Add pfVerticalNavigation directive.
Directive for vertical navigation. This sets up the nav bar header with the collapse button (hamburger) and the application brand image (or text) as well as the vertical navigation menu containing the navigation items. This directive supports primary, secondary, and tertiary navigation with options to allow pinning of the secondary and tertiary navigation menus as well as the option for persistent secondary menus.
1 parent 13c321a commit 8117714

File tree

8 files changed

+1672
-0
lines changed

8 files changed

+1672
-0
lines changed

‎Gruntfile.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,11 @@ module.exports = function (grunt) {
166166
src: ['form/**/*.html'],
167167
dest: 'templates/form.js'
168168
},
169+
'patternfly.navigation': {
170+
cwd: 'src/',
171+
src: ['navigation/**/*.html'],
172+
dest: 'templates/navigation.js'
173+
},
169174
'patternfly.notification': {
170175
cwd: 'src/',
171176
src: ['notification/**/*.html'],

‎misc/examples.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,3 +103,23 @@ hr {
103103
border: solid 1px #d1d1d1;
104104
margin: 0 10px;
105105
}
106+
107+
.example-page-container.container-fluid {
108+
position: fixed;
109+
top: 37px;
110+
bottom: 0;
111+
left: 0;
112+
right: 0;
113+
background-color: #f5f5f5;
114+
padding-top: 15px;
115+
}
116+
.hide-vertical-nav {
117+
margin-top: 15px;
118+
margin-left: 30px;
119+
}
120+
.example-info-text {
121+
width: 100%;
122+
}
123+
.example-info-text:first-of-type {
124+
margin-top: 10px;
125+
}

‎src/navigation/navigation.module.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/**
2+
* @name patternfly navigation
3+
*
4+
* @description
5+
* Navigation module for patternfly.
6+
*
7+
*/
8+
angular.module('patternfly.navigation', ['ui.bootstrap']);

‎src/navigation/vertical-navigation-directive.js‎

Lines changed: 997 additions & 0 deletions
Large diffs are not rendered by default.

‎src/navigation/vertical-navigation.html‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<div>
2+
<nav class="navbar navbar-pf-vertical">
3+
<div class="navbar-header">
4+
<button type="button" class="navbar-toggle" ng-click="handleNavBarToggleClick()">
5+
<span class="sr-only">Toggle navigation</span>
6+
<span class="icon-bar"></span>
7+
<span class="icon-bar"></span>
8+
<span class="icon-bar"></span>
9+
</button>
10+
<span class="navbar-brand">
11+
<img class="navbar-brand-icon" ng-if="brandSrc" ng-src="brandSrc" alt="{{brandAlt}}"/>
12+
<span class="navbar-brand-txt" ng-if="!brandSrc">{{brandAlt}}</span>
13+
</span>
14+
</div>
15+
<nav class="collapse navbar-collapse" ng-transclude></nav>
16+
<div class="nav-pf-vertical"
17+
ng-class="{'nav-pf-vertical-with-sub-menus': hasSubMenus,
18+
'nav-pf-persistent-secondary': persistentSecondary,
19+
'nav-pf-vertical-collapsible-menus': pinnableMenus,
20+
'hidden-icons-pf': hiddenIcons,
21+
'show-mobile-secondary': showMobileSecondary,
22+
'show-mobile-tertiary': showMobileTertiary,
23+
'hover-secondary-nav-pf': hoverSecondaryNav,
24+
'hover-tertiary-nav-pf': hoverTertiaryNav,
25+
'collapsed-secondary-nav-pf': collapsedSecondaryNav,
26+
'collapsed-tertiary-nav-pf': collapsedTertiaryNav,
27+
'hidden': inMobileState,
28+
'collapsed': navCollapsed,
29+
'force-hide-secondary-nav-pf': forceHidden,
30+
'show-mobile-nav': showMobileNav}">
31+
<ul class="list-group">
32+
<li ng-repeat="item in items" class="list-group-item"
33+
ng-class="{'secondary-nav-item-pf': item.children && item.children.length > 0,
34+
'active': item.isActive,
35+
'is-hover': item.isHover,
36+
'mobile-nav-item-pf': item.isMobileItem && showMobileSecondary,
37+
'mobile-secondary-item-pf': item.isMobileItem && showMobileTertiary}"
38+
ng-mouseenter="handlePrimaryHover(item)" ng-mouseleave="handlePrimaryUnHover(item)">
39+
<a ng-click="handlePrimaryClick(item, $event)">
40+
<span class="{{item.iconClass}}" ng-if="item.iconClass" ng-class="{hidden: hiddenIcons}" tooltip-append-to-body="true" tooltip-enable="{{navCollapsed}}" tooltip-placement="bottom" tooltip="{{item.title}}" tooltip-class="nav-pf-vertical-tooltip"></span>
41+
<span class="list-group-item-value">{{item.title}}</span>
42+
</a>
43+
<div ng-if="item.children && item.children.length > 0" class="nav-pf-secondary-nav">
44+
<div class="nav-item-pf-header">
45+
<a class="secondary-collapse-toggle-pf" ng-click="collapseSecondaryNav(item, $event)" ng-class="{'collapsed': item.secondaryCollapsed}"></a>
46+
<span>{{item.title}}</span>
47+
</div>
48+
<ul class="list-group">
49+
<li ng-repeat="secondaryItem in item.children" class="list-group-item"
50+
ng-class="{'tertiary-nav-item-pf': secondaryItem.children && secondaryItem.children.length > 0,
51+
'active': secondaryItem.isActive,
52+
'is-hover': secondaryItem.isHover,
53+
'mobile-nav-item-pf': secondaryItem.isMobileItem}"
54+
ng-mouseenter="handleSecondaryHover(secondaryItem)" ng-mouseleave="handleSecondaryUnHover(secondaryItem)">
55+
<a ng-click="handleSecondaryClick(item, secondaryItem, $event)">
56+
<span class="list-group-item-value">{{secondaryItem.title}}</span>
57+
</a>
58+
<div ng-if="secondaryItem.children && secondaryItem.children.length > 0" class="nav-pf-tertiary-nav">
59+
<div class="nav-item-pf-header">
60+
<a class="tertiary-collapse-toggle-pf" ng-click="collapseTertiaryNav(secondaryItem, $event)" ng-class="{'collapsed': secondaryItem.tertiaryCollapsed}"></a>
61+
<span>{{secondaryItem.title}}</span>
62+
</div>
63+
<ul class="list-group">
64+
<li ng-repeat="tertiaryItem in secondaryItem.children" class="list-group-item" ng-class="{'active': tertiaryItem.isActive}">
65+
<a ng-click="handleTertiaryClick(item, secondaryItem, tertiaryItem, $event)">
66+
<span class="list-group-item-value">{{tertiaryItem.title}}</span>
67+
</a>
68+
</li>
69+
</ul>
70+
</div>
71+
</li>
72+
</ul>
73+
</div>
74+
</li>
75+
</ul>
76+
</div>
77+
</nav>
78+
</div>

‎src/patternfly.module.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ angular.module('patternfly', [
99
'patternfly.card',
1010
'patternfly.filters',
1111
'patternfly.form',
12+
'patternfly.navigation',
1213
'patternfly.notification',
1314
'patternfly.select',
1415
'patternfly.sort',

‎styles/angular-patternfly.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -415,3 +415,7 @@ accordion > .panel-group .panel-default .panel-title > a:before {
415415
accordion > .panel-group .panel-open .panel-title > a:before {
416416
content: "\f107";
417417
}
418+
419+
.navbar-brand-txt {
420+
line-height: 34px;
421+
}

0 commit comments

Comments
 (0)