Skip to content

Commit 24e6835

Browse files
dgutridedgutride
authored
Merge pull request patternfly#276 from jeff-phillips-18/navigation
Add pfVerticalNavigation directive.
2 parents 13c321a + 8117714 commit 24e6835

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)