Skip to content

Add ability to have actions pulldown menu in pfDataList directive #95

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
erundle merged 1 commit into from
Sep 24, 2015
Merged

Add ability to have actions pulldown menu in pfDataList directive #95

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
219 changes: 184 additions & 35 deletions dist/angular-patternfly.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3200,7 +3200,8 @@ angular.module('patternfly.validation', []).directive('pfValidation', ["$timeout
* Directive for rendering a data list.
* <br><br>
*
* @param {object} config configuration settings for the data list:<br/>
* @param {array} items Array of items to display in the list
* @param {object} config Configuration settings for the data list:
* <ul style='list-style-type: none'>
* <li>.showSelectBox - (boolean) Show item selection boxes for each item, default is true
* <li>.selectItems - (boolean) Allow row selection, default is false
Expand All @@ -3216,28 +3217,35 @@ angular.module('patternfly.validation', []).directive('pfValidation', ["$timeout
* <li>.onClick - ( function(item, event) ) Called to notify when an item is clicked, default is none
* <li>.onDblClick - ( function(item, event) ) Called to notify when an item is double clicked, default is none
* </ul>
*
* @param {Array} items the data to be shown in the data list<br/>
*
* @param {array} actions List of actions for dropdown menu in each row
* <ul style='list-style-type: none'>
* <li>.name - (String) The name of the action, displayed on the button
* <li>.title - (String) Optional title, used for the tooltip
* <li>.actionFn - (function(action)) Function to invoke when the action selected
* <li>.isVisible - (Boolean) set to true to disable the action
* <li>.isDisabled - (Boolean) set to true to disable the action
* <li>.isSeparator - (Boolean) set to true if this is a placeholder for a separator rather than an action
* </ul>
* @param {function (action, item))} updateActionForItemFn function(action, item) Used to update an action based on the current item
* @example
<example module="patternfly.views" deps="patternfly.utils">
<file name="index.html">
<div ng-controller="ViewCtrl" class="row" style="display:inline-block; width: 100%;">
<div class="col-md-12">
<div pf-data-list id="exampleDataList" config="config" items="items">
<div class="col-md-12 cfme-row-column">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 list-column">
<span>{{item.name}}</span>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 list-column">
<span>{{item.address}}</span>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 list-column">
<span>{{item.city}}</span>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 list-column">
<span>{{item.state}}</span>
</div>
<div ng-controller="ViewCtrl" class="row example-container">
<div class="col-md-12 list-view-container">
<div pf-data-list class="example-data-list" id="exampleDataList" config="config" items="items" actions="actions">
<div class="row">
<div class="col-md-3">
<span>{{item.name}}</span>
</div>
<div class="col-md-3">
<span>{{item.address}}</span>
</div>
<div class="col-md-3">
<span>{{item.city}}</span>
</div>
<div class="col-md-3">
<span>{{item.state}}</span>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -3369,36 +3377,144 @@ angular.module('patternfly.validation', []).directive('pfValidation', ["$timeout
state: "Pennsylvania"
},
{
name: "Judy Green",
address: "2 Apple Boulevard",
city: "Cincinatti",
state: "Ohio"
name: "Linda McGovern",
address: "22 Oak Street",
city: "Denver",
state: "Colorado"
},
{
name: "Jim Beam",
address: "72 Bourbon Way",
city: "Nashville",
state: "Tennessee"
},
{
name: "Holly Nichols",
address: "21 Jump Street",
city: "Hollywood",
state: "California"
},
{
name: "Marie Edwards",
address: "17 Cross Street",
city: "Boston",
state: "Massachusetts"
},
{
name: "Pat Thomas",
address: "50 Second Street",
city: "New York",
state: "New York"
},
]
];

var performAction = function (action, item) {
$scope.eventText = item.name + " : " + action.name + "\n" + $scope.eventText;
};

$scope.actions = [
{
name: 'Action',
title: 'Perform an action',
actionFn: performAction
},
{
name: 'Another Action',
title: 'Do something else',
actionFn: performAction
},
{
name: 'Disabled Action',
title: 'Unavailable action',
actionFn: performAction,
isDisabled: true
},
{
name: 'Something Else',
title: '',
actionFn: performAction
},
{
isSeparator: true
},
{
name: 'Grouped Action 1',
title: 'Do something',
actionFn: performAction
},
{
name: 'Grouped Action 2',
title: 'Do something similar',
actionFn: performAction
}
];
}
]);
</file>
</example>
*/
angular.module('patternfly.views').directive('pfDataList', ["pfUtils", function (pfUtils) {
angular.module('patternfly.views').directive('pfDataList',
["$timeout", "$window", "pfUtils", function ($timeout, $window, pfUtils) {
'use strict';
return {
restrict: 'A',
scope: {
config: '=?',
items: '=',
eventId: '@id'
actions: '=?',
updateActionForItemFn: '=?'
},
transclude: true,
templateUrl: 'views/datalist/data-list.html',
controller: ['$scope',
function ($scope) {
controller:
["$scope", "$element", function ($scope, $element) {
var setDropMenuLocation = function (parentDiv) {
var dropButton = parentDiv.querySelector('.dropdown-toggle');
var dropMenu = parentDiv.querySelector('.dropdown-menu');
var buttonRect = dropButton.getBoundingClientRect();
var menuRect = dropMenu.getBoundingClientRect();
var top = buttonRect.top + buttonRect.height;
var left = buttonRect.left + buttonRect.width - menuRect.width;
var docHeight = $window.innerHeight;

if (top + menuRect.height > docHeight) {
top = docHeight - menuRect.height;
}

dropMenu.style.top = top + "px";
dropMenu.style.left = left + "px";
};

var hideOnScroll = function () {
$scope.prevMenuItem.showMenu = false;
angular.element(angular.element($element).find('.data-list-pf')[0]).unbind("scroll", hideOnScroll);
angular.element($window).unbind("scroll", hideOnScroll);
$scope.$apply();
};

var showActionMenu = function (item, event) {
item.showMenu = true;
$scope.prevMenuItem = item;

$timeout(function () {
var parentDiv = undefined;
var nextElement;

nextElement = event.toElement;
while (nextElement && !parentDiv) {
if (nextElement.className.indexOf('list-menu') === 0) {
parentDiv = nextElement;
setDropMenuLocation (parentDiv);
}
nextElement = nextElement.parentElement;
}

angular.element(angular.element($element).find('.data-list-pf')[0]).bind("scroll", hideOnScroll);
angular.element($window).bind("scroll", hideOnScroll);
});

};

$scope.defaultConfig = {
selectItems: false,
multiSelect: false,
Expand All @@ -3421,8 +3537,40 @@ angular.module('patternfly.views').directive('pfDataList', ["pfUtils", function
'Illegal use of pfDataList directive! ' +
'Cannot allow both select box and click selection in the same data list.');
}
}
],

$scope.handleAction = function (action, item) {
if (action && action.actionFn && (action.isDisabled !== true)) {
action.actionFn(action, item);
}
};

$scope.updateActions = function (item) {
$scope.actionItem = item;
if (typeof $scope.updateActionForItemFn === 'function') {
$scope.actions.forEach(function (action) {
$scope.updateActionForItemFn(action, item);
});
}
};

$scope.setupActions = function (item, event) {
if ($scope.prevMenuItem) {
$scope.prevMenuItem.showMenu = false;
$scope.prevMenuItem = undefined;
}

// Ignore disabled items completely
if ($scope.checkDisabled(item)) {
return;
}

// update the actions based on the current item
$scope.updateActions(item);

// Show the action menu for the item
showActionMenu(item, event);
};
}],

link: function (scope, element, attrs) {
attrs.$observe('config', function () {
Expand Down Expand Up @@ -3713,7 +3861,8 @@ angular.module('patternfly.views').directive('pfDataList', ["pfUtils", function
</file>
</example>
*/
angular.module('patternfly.views').directive('pfDataTiles', ["pfUtils", function (pfUtils) {
angular.module('patternfly.views').directive('pfDataTiles',
["pfUtils", function (pfUtils) {
'use strict';
return {
restrict: 'A',
Expand Down Expand Up @@ -3902,8 +4051,8 @@ angular.module('patternfly.views').directive('pfDataTiles', ["pfUtils", function
<label class="events-label">Valid Items: </label>
</div>
<div class="col-md-12 list-view-container" ng-if="viewType == 'listView'">
<div pf-data-list class="row" config="listConfig" items="items">
<div class="row list-row">
<div pf-data-list config="listConfig" items="items">
<div class="row">
<div class="col-md-3">
<span>{{item.name}}</span>
</div>
Expand Down Expand Up @@ -4423,7 +4572,7 @@ angular.module('patternfly.views').directive('pfDataToolbar',
'use strict';

$templateCache.put('views/datalist/data-list.html',
"<div class=data-list-pf><div class=list-group-item ng-repeat=\"item in items track by $index\" ng-class=\"{'pf-selectable': selectItems, 'active': isSelected(item), 'disabled': checkDisabled(item)}\"><div class=\"row list-row\"><div pf-transclude=parent class=list-content ng-class=\"{'with-check-box': config.showSelectBox, 'with-menu':config.showActionMenus}\" ng-click=\"itemClick($event, item)\" ng-dblclick=\"dblClick($event, item)\"></div><div class=list-check-box ng-if=config.showSelectBox style=\"padding-top: {{(config.rowHeight - 32) / 2}}px\"><input type=checkbox value=item.selected ng-model=item.selected ng-disabled=checkDisabled(item) ng-change=\"checkBoxChange(item)\"></div></div></div></div>"
"<div class=data-list-pf><div class=list-group-item ng-repeat=\"item in items track by $index\" ng-class=\"{'pf-selectable': selectItems, 'active': isSelected(item), 'disabled': checkDisabled(item)}\"><div class=list-row><div pf-transclude=parent class=list-content ng-class=\"{'with-check-box': config.showSelectBox, 'with-menu':actions && actions.length > 0}\" ng-click=\"itemClick($event, item)\" ng-dblclick=\"dblClick($event, item)\"></div><div class=list-check-box ng-if=config.showSelectBox style=\"padding-top: {{(config.rowHeight - 32) / 2}}px\"><input type=checkbox value=item.selected ng-model=item.selected ng-disabled=checkDisabled(item) ng-change=\"checkBoxChange(item)\"></div><div class=\"list-menu dropdown btn-group {{$index}}\" ng-if=\"actions && actions.length > 0\" ng-class=\"{'disabled': checkDisabled(item)}\"><button type=button class=\"btn btn-link dropdown-toggle\" data-toggle=dropdown aria-haspopup=true aria-expanded=false ng-click=\"setupActions(item, $event)\"><span class=\"fa fa-ellipsis-v\"></span></button><ul class=dropdown-menu ng-if=item.showMenu><li ng-repeat=\"action in actions\" ng-if=\"action.isVisible !== false\" role=\"{{action.isSeparator === true ? 'separator' : 'menuitem'}}\" ng-class=\"{'divider': (action.isSeparator === true), 'disabled': (action.isDisabled === true)}\"><a ng-if=\"action.isSeparator !== true\" href=# title={{action.title}} ng-click=\"handleAction(action, item)\">{{action.name}}</a></li></ul></div></div></div></div>"
);


Expand Down
4 changes: 2 additions & 2 deletions dist/angular-patternfly.min.js
View file
Open in desktop

Large diffs are not rendered by default.

48 changes: 42 additions & 6 deletions dist/styles/angular-patternfly.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@
background: #fff;
overflow-x: hidden;
overflow-y: auto;
height: 100%;
padding-bottom: 1px;
}
.data-list-pf .list-row {
Expand All @@ -112,21 +113,19 @@
width: 100%;
}
.data-list-pf .list-content {
left: 15px;
margin-left: 15px;
position: relative;
}
.data-list-pf .list-content.with-check-box {
border-left: solid 2px #d2d2d2;
left: 30px;
margin-left: 10px;
margin-left: 35px;
padding-left: 5px;
}
.data-list-pf .list-content.with-menu {
margin-right: 30px;
right: 15px;
margin-right: 10px;
}
.data-list-pf .list-check-box {
bottom: 0px;
left: 20px;
position: absolute;
top: 0px;
width: 20px;
Expand Down Expand Up @@ -172,6 +171,43 @@
padding-right: 5px;
}

.data-list-pf .list-menu {
bottom: 0px;
position: absolute;
right: 0px;
top: 0px;
}

.data-list-pf .list-menu .btn-link {
color: #222;
font-size: 16px;
line-height: 1;
padding: 4px 0;
}

.data-list-pf .list-menu .btn-link:hover {
color: #0099d3;
}

.data-list-pf .list-menu.disabled .btn-link,
.data-list-pf .list-menu.disabled .btn-link:hover {
color: #999999;
cursor: not-allowed;
}

.data-list-pf .list-menu .dropdown-menu {
cursor: pointer;
Copy link

@erundle erundle Sep 21, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

instead of ul use .dropdown-menu it is more performant

font-size: 12px;
left: inherit;
line-height: 7px;
padding: 0;
position: fixed;
}

.data-list-pf .list-menu li {
color: #000000;
}

.tiles-view-pf {
overflow: auto;
padding-top: 20px;
Expand Down
Loading