Skip to content

Commit 46fbdb8

Browse files
jeff-phillips-18jeff-phillips-18
committed
Update layout for sort, filter, and toolbar to match patternfly markup
This fixes: #315 #348
1 parent d9141b9 commit 46fbdb8

File tree

5 files changed

+70
-71
lines changed

5 files changed

+70
-71
lines changed

‎src/filters/filter-fields.html‎

Lines changed: 27 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,30 @@
11
<div class="filter-pf filter-fields">
2-
<form>
3-
<div class="form-group toolbar-pf-filter">
4-
<div class="input-group">
5-
<div uib-dropdown class="input-group-btn">
6-
<button uib-dropdown-toggle type="button" class="btn btn-default filter-fields" uib-tooltip="Filter by" tooltip-placement="top">
7-
{{currentField.title}}
8-
<span class="caret"></span>
9-
</button>
10-
<ul uib-dropdown-menu>
11-
<li ng-repeat="item in config.fields">
12-
<a class="filter-field" role="menuitem" tabindex="-1" ng-click="selectField(item)">
13-
{{item.title}}
14-
</a>
15-
</li>
16-
</ul>
17-
</div>
18-
<div ng-if="currentField.filterType !== 'select'">
19-
<input class="form-control" type="{{currentField.filterType}}" ng-model="config.currentValue"
20-
placeholder="{{currentField.placeholder}}"
21-
ng-keypress="onValueKeyPress($event)"/>
22-
</div>
23-
<div ng-if="currentField.filterType === 'select'">
24-
<select pf-select class="form-control filter-select" id="currentValue"
25-
ng-model="config.currentValue"
26-
ng-options="filterValue for filterValue in currentField.filterValues"
27-
ng-change="selectValue(config.currentValue)">
28-
<option value="">{{currentField.placeholder}}</option>
29-
</select>
30-
</div>
31-
</div>
2+
<div class="input-group form-group">
3+
<div uib-dropdown class="input-group-btn">
4+
<button uib-dropdown-toggle type="button" class="btn btn-default filter-fields" uib-tooltip="Filter by" tooltip-placement="top">
5+
{{currentField.title}}
6+
<span class="caret"></span>
7+
</button>
8+
<ul uib-dropdown-menu>
9+
<li ng-repeat="item in config.fields">
10+
<a class="filter-field" role="menuitem" tabindex="-1" ng-click="selectField(item)">
11+
{{item.title}}
12+
</a>
13+
</li>
14+
</ul>
3215
</div>
33-
</form>
16+
<div ng-if="currentField.filterType !== 'select'">
17+
<input class="form-control" type="{{currentField.filterType}}" ng-model="config.currentValue"
18+
placeholder="{{currentField.placeholder}}"
19+
ng-keypress="onValueKeyPress($event)"/>
20+
</div>
21+
<div ng-if="currentField.filterType === 'select'">
22+
<select pf-select class="form-control filter-select" id="currentValue"
23+
ng-model="config.currentValue"
24+
ng-options="filterValue for filterValue in currentField.filterValues"
25+
ng-change="selectValue(config.currentValue)">
26+
<option value="">{{currentField.placeholder}}</option>
27+
</select>
28+
</div>
29+
</div>
3430
</div>

‎src/sort/sort.html‎

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,18 @@
11
<div class="sort-pf">
2-
<form>
3-
<div class="form-group">
4-
<div uib-dropdown class="btn-group">
5-
<button uib-dropdown-toggle type="button" class="btn btn-default">
6-
{{config.currentField.title}}
7-
<span class="caret"></span>
8-
</button>
9-
<ul uib-dropdown-menu>
10-
<li ng-repeat="item in config.fields" ng-class="{'selected': item === config.currentField}">
11-
<a href="javascript:void(0);" class="sort-field" role="menuitem" tabindex="-1" ng-click="selectField(item)">
12-
{{item.title}}
13-
</a>
14-
</li>
15-
</ul>
16-
</div>
17-
<button class="btn btn-link" type="button" ng-click="changeDirection()">
18-
<span class="sort-direction" ng-class="getSortIconClass()"></span>
19-
</button>
20-
</div>
21-
</form>
2+
<div uib-dropdown class="btn-group">
3+
<button uib-dropdown-toggle type="button" class="btn btn-default">
4+
{{config.currentField.title}}
5+
<span class="caret"></span>
6+
</button>
7+
<ul uib-dropdown-menu>
8+
<li ng-repeat="item in config.fields" ng-class="{'selected': item === config.currentField}">
9+
<a href="javascript:void(0);" class="sort-field" role="menuitem" tabindex="-1" ng-click="selectField(item)">
10+
{{item.title}}
11+
</a>
12+
</li>
13+
</ul>
14+
</div>
15+
<button class="btn btn-link" type="button" ng-click="changeDirection()">
16+
<span class="sort-direction" ng-class="getSortIconClass()"></span>
17+
</button>
2218
</div>

‎src/toolbars/toolbar.html‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,12 @@
22
<div class="row toolbar-pf">
33
<div class="col-sm-12">
44
<form class="toolbar-pf-actions" ng-class="{'no-filter-results': !config.filterConfig}">
5-
<div pf-filter-fields id="{{filterDomId}}_fields" config="config.filterConfig" ng-if="config.filterConfig" add-filter-fn="addFilter"></div>
6-
<div pf-sort id="{{sortDomId}}" config="config.sortConfig" ng-if="config.sortConfig"></div>
5+
<div class="form-group toolbar-apf-filter">
6+
<div pf-filter-fields id="{{filterDomId}}_fields" config="config.filterConfig" ng-if="config.filterConfig" add-filter-fn="addFilter"></div>
7+
</div>
8+
<div class="form-group">
9+
<div pf-sort id="{{sortDomId}}" config="config.sortConfig" ng-if="config.sortConfig"></div>
10+
</div>
711
<div class="form-group toolbar-actions"
812
ng-if="config.actionsConfig &&
913
((config.actionsConfig.primaryActions && config.actionsConfig.primaryActions.length > 0) ||
@@ -34,16 +38,14 @@
3438
</ul>
3539
</div>
3640
</div>
37-
<div class="toolbar-pf-view-selector pull-right" ng-if="config.viewsConfig && config.viewsConfig.views">
38-
<ul class="list-inline">
39-
<li ng-repeat="view in config.viewsConfig.viewsList"
41+
<div class="toolbar-pf-action-right">
42+
<div class="form-group toolbar-pf-view-selector" ng-if="config.viewsConfig && config.viewsConfig.views">
43+
<button ng-repeat="view in config.viewsConfig.viewsList" class="btn btn-link"
4044
ng-class="{'active': isViewSelected(view.id), 'disabled': checkViewDisabled(view)}"
41-
title={{view.title}}>
42-
<a>
43-
<i class="view-selector {{view.iconClass}}" ng-click="viewSelected(view.id)"></i>
44-
</a>
45-
</li>
46-
</ul>
45+
title={{view.title}} ng-click="viewSelected(view.id)">
46+
<i class="{{view.iconClass}}"></i>
47+
</button>
48+
</div>
4749
</div>
4850
</form>
4951
<div pf-filter-results id="{{filterDomId}_results}" config="config.filterConfig" ng-if="config.filterConfig"></div>

‎styles/angular-patternfly.css‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -307,15 +307,15 @@
307307
color: #999999;
308308
}
309309

310-
.sort-pf .form-group .btn-link {
311-
color: #222;
310+
.sort-pf .btn-link {
311+
color: #252525;
312312
font-size: 16px;
313313
line-height: 1;
314314
padding: 4px 0;
315315
margin-left: 10px;
316316
}
317317

318-
.sort-pf .form-group .btn-link:hover {
318+
.sort-pf .btn-link:hover {
319319
color: #0099d3;
320320
}
321321

@@ -325,6 +325,12 @@
325325
color: #fff !important;
326326
}
327327

328+
@media (min-width: 768px) {
329+
.toolbar-pf-actions .toolbar-apf-filter {
330+
padding-left: 0;
331+
}
332+
}
333+
328334
.toolbar-pf-actions .toolbar-pf-view-selector a {
329335
cursor: pointer;
330336
}

‎test/toolbars/toolbar.spec.js‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -264,7 +264,7 @@ describe('Directive: pfToolbar', function () {
264264
});
265265

266266
it ('should show the correct view selection buttons', function () {
267-
var selectors = element.find('.view-selector');
267+
var selectors = element.find('.toolbar-pf-view-selector .btn-link');
268268
expect(selectors.length).toBe(5);
269269

270270
expect(element.find('.fa-dashboard').length).toBe(1);
@@ -291,22 +291,21 @@ describe('Directive: pfToolbar', function () {
291291
it ('should update the currently selected view when a view selector clicked', function () {
292292
var viewSelector = element.find('.toolbar-pf-view-selector');
293293
var active = element.find('.active');
294-
var listSelector = element.find('.fa-th-list');
294+
var listSelector = element.find('.toolbar-pf-view-selector .btn-link');
295295

296296
expect(viewSelector.length).toBe(1);
297297
expect(active.length).toBe(0);
298-
expect(listSelector.length).toBe(1);
298+
expect(listSelector.length).toBe(5);
299299

300300
eventFire(listSelector[0], 'click');
301301
$scope.$apply();
302302

303-
listSelector = element.find('.fa-th-list');
304303
active = element.find('.active');
305304
expect(active.length).toBe(1);
306305
});
307306

308307
it ('should call the callback function when a view selector clicked', function () {
309-
var listSelector = element.find('.fa-th-list');
308+
var listSelector = element.find('.toolbar-pf-view-selector .btn-link');
310309
var functionCalled = false;
311310

312311
var onViewSelect = function () {
@@ -315,7 +314,7 @@ describe('Directive: pfToolbar', function () {
315314

316315
$scope.config.viewsConfig.onViewSelect = onViewSelect;
317316
expect(functionCalled).toBeFalsy();
318-
expect(listSelector.length).toBe(1);
317+
expect(listSelector.length).toBe(5);
319318

320319
eventFire(listSelector[0], 'click');
321320
$scope.$apply();

0 commit comments

Comments
 (0)