Skip to content
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

Fix notification drawer accordion panel sizing #548

Merged
merged 1 commit into from
Aug 4, 2017
Merged

Fix notification drawer accordion panel sizing #548

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
2 changes: 1 addition & 1 deletion src/notification/examples/notification-drawer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@
</li>
</ul>
</div>
<span ng-if="notification.status" class="{{'pull-left ' + $ctrl.customScope.getNotficationStatusIconClass(notification)}}" ng-click="$ctrl.customScope.markRead(notification)"></span>
<span ng-if="notification.status" class="{{'pull-left ' + $ctrl.customScope.getNotficationStatusIconClass(notification)}}" ng-click="$ctrl.customScope.markRead(notification)"></span>
<div class="drawer-pf-notification-content" ng-click="$ctrl.customScope.markRead(notification)">
<span class="drawer-pf-notification-message" tooltip-append-to-body="true" tooltip-popup-delay="500" tooltip-placement="bottom" tooltip="{{notification.message}}">
{{notification.message}}
Expand Down
23 changes: 19 additions & 4 deletions src/notification/notification-drawer.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,12 @@ angular.module('patternfly.notification').component('pfNotificationDrawer', {
});
};

var updateAccordionSizing = function () {
$timeout(function () {
Copy link
Member

Choose a reason for hiding this comment

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

Any concerns about performance here? if $onChanges is triggered frequently, do you want to be triggering resize often, or would a debounce/throttle be in order? I'm also curious about 100, vs (0 or any other small #) if its arbitrary or standardized across patternfly angular for this kind of thing.

Copy link
Member Author

Choose a reason for hiding this comment

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

I don't believe onChanges will get call that frequently. Typically most of these won't change, but should they, the size needs to be recalculated. Also, its only done if the draw is shown and one of these values change.

We've typically used 100 just to get past any follow up changes and get thru a digest cycle or two. Main idea is to get past the current digest cycle anyhow.

angular.element($window).triggerHandler('resize');
}, 100);
};

ctrl.toggleCollapse = function (selectedGroup) {
if (selectedGroup.open) {
selectedGroup.open = false;
Expand All @@ -59,6 +65,7 @@ angular.module('patternfly.notification').component('pfNotificationDrawer', {
group.open = false;
});
selectedGroup.open = true;
updateAccordionSizing();
}
};

Expand All @@ -82,12 +89,20 @@ angular.module('patternfly.notification').component('pfNotificationDrawer', {
ctrl.$onChanges = function (changesObj) {
if (changesObj.notificationGroups) {
setupGroups();
updateAccordionSizing();
}

if (changesObj.drawerHidden) {
$timeout(function () {
angular.element($window).triggerHandler('resize');
}, 100);
if (!ctrl.drawerHidden &&
(changesObj.drawerHidden ||
changesObj.showMarkAllRead ||
changesObj.showClearAll ||
changesObj.actionButtonTitle ||
changesObj.titleInclude ||
changesObj.headingInclude ||
changesObj.subheadingInclude ||
changesObj.notificationBodyInclude ||
changesObj.notificationFooterInclude)) {
updateAccordionSizing();
}
};

Expand Down
24 changes: 11 additions & 13 deletions src/notification/notification-drawer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,15 @@ <h4 class="panel-title">
<span class="panel-counter" ng-include src="$ctrl.subheadingInclude"></span>
</div>
<div class="panel-collapse collapse" ng-class="{in: notificationGroup.open || $ctrl.notificationGroups.length === 1}">
Copy link
Member

Choose a reason for hiding this comment

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

Nit: truthy check instead...

Copy link
Member Author

Choose a reason for hiding this comment

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

huh?

Copy link
Member

Choose a reason for hiding this comment

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

Truthy ~ $ctrl.notificationGroups.length vs $ctrl.notificationGroups.length === 1

Copy link
Member Author

Choose a reason for hiding this comment

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

But it must be exactly 1.

Copy link
Member

Choose a reason for hiding this comment

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

Right, this is the single panel option. Sorry, just saw the truthy "huh" :)

<div ng-if="$ctrl.hasNotifications(notificationGroup)">
<div class="panel-body">
<div class="drawer-pf-notification" ng-class="{unread: notification.unread, 'expanded-notification': $ctrl.drawerExpanded}"
ng-repeat="notification in notificationGroup.notifications" ng-include src="$ctrl.notificationBodyInclude">
</div>
<div ng-if="notificationGroup.isLoading" class="drawer-pf-loading text-center">
<span class="spinner spinner-xs spinner-inline"></span> Loading More
</div>
<div ng-if="$ctrl.hasNotifications(notificationGroup)" class="panel-body">
<div class="drawer-pf-notification" ng-class="{unread: notification.unread, 'expanded-notification': $ctrl.drawerExpanded}"
ng-repeat="notification in notificationGroup.notifications" ng-include src="$ctrl.notificationBodyInclude">
</div>
<div ng-if="notificationGroup.isLoading" class="drawer-pf-loading text-center">
<span class="spinner spinner-xs spinner-inline"></span> Loading More
</div>
<div class="drawer-pf-action">
</div>
<div ng-if="($ctrl.showClearAll || $ctrl.showMarkAllRead) && $ctrl.hasNotifications(notificationGroup)" class="drawer-pf-action">
<span class="drawer-pf-action-link" ng-if="$ctrl.showMarkAllRead && $ctrl.hasUnread(notificationGroup)">
<button class="btn btn-link" ng-click="$ctrl.onMarkAllRead(notificationGroup)">Mark All Read</button>
</span>
Expand All @@ -38,10 +37,9 @@ <h4 class="panel-title">
Clear All
</button>
</span>
</div>
<div class="drawer-pf-action" ng-if="$ctrl.actionButtonTitle">
<a class="btn btn-link btn-block" ng-click="$ctrl.actionButtonCallback(notificationGroup)">{{$ctrl.actionButtonTitle}}</a>
</div>
</div>
<div ng-if="$ctrl.actionButtonTitle && $ctrl.hasNotifications(notificationGroup)" class="drawer-pf-action">
<a class="btn btn-link btn-block" ng-click="$ctrl.actionButtonCallback(notificationGroup)">{{$ctrl.actionButtonTitle}}</a>
</div>
<div ng-if="!$ctrl.hasNotifications(notificationGroup)">
<div class="panel-body">
Expand Down
37 changes: 20 additions & 17 deletions src/utils/fixed-accordion.directive.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,13 +61,20 @@ angular.module('patternfly.utils').directive('pfFixedAccordion', function ($wind
groupClass: '@'
},
link: function ($scope, $element, $attrs) {
var contentElementHeight = function (contentElement) {
var contentHeight = contentElement.offsetHeight;
contentHeight += parseInt(getComputedStyle(contentElement).marginTop);
contentHeight += parseInt(getComputedStyle(contentElement).marginBottom);

return contentHeight;
};

var setBodyScrollHeight = function (parentElement, bodyHeight) {
// Set the max-height for the fixed height components
var collapsePanels = parentElement[0].querySelectorAll('.panel-collapse');
var collapsePanel;
var scrollElement;
var panelContents;
var nextContent;
var innerHeight;
var scroller;

Expand All @@ -78,24 +85,21 @@ angular.module('patternfly.utils').directive('pfFixedAccordion', function ($wind

if (angular.isDefined($scope.scrollSelector)) {
scroller = angular.element(collapsePanel[0].querySelector($scope.scrollSelector));
if (scroller.length === 1) {
if (scroller.length) {
scrollElement = angular.element(scroller[0]);

panelContents = collapsePanel.children();
angular.forEach(panelContents, function (contentElement) {
nextContent = angular.element(contentElement);

// Get the height of all the non-scroll element contents
if (nextContent[0] !== scrollElement[0]) {
innerHeight += nextContent[0].offsetHeight;
innerHeight += parseInt(getComputedStyle(nextContent[0]).marginTop);
innerHeight += parseInt(getComputedStyle(nextContent[0]).marginBottom);
if (contentElement !== scrollElement[0]) {
innerHeight += contentElementHeight(contentElement);
}
});
}
}

// set the max-height
angular.element(scrollElement).css('max-height', (bodyHeight - innerHeight) + 'px');
// Make sure we have enough height to be able to scroll the contents if necessary
angular.element(scrollElement).css('max-height', Math.max((bodyHeight - innerHeight), 25) + 'px');
angular.element(scrollElement).css('overflow-y', 'auto');
});
};
Expand All @@ -104,7 +108,6 @@ angular.module('patternfly.utils').directive('pfFixedAccordion', function ($wind
var height, openPanel, contentHeight, bodyHeight, overflowY = 'hidden';
var parentElement = angular.element($element[0].querySelector('.panel-group'));
var headings = angular.element(parentElement).children();
var headingElement;

height = parentElement[0].clientHeight;

Expand All @@ -118,10 +121,7 @@ angular.module('patternfly.utils').directive('pfFixedAccordion', function ($wind
contentHeight = 0;

angular.forEach(headings, function (heading) {
headingElement = angular.element(heading);
contentHeight += headingElement.prop('offsetHeight');
contentHeight += parseInt(getComputedStyle(headingElement[0]).marginTop);
contentHeight += parseInt(getComputedStyle(headingElement[0]).marginBottom);
contentHeight += contentElementHeight(heading);
});

// Determine the height remaining for opened collapse panels
Expand All @@ -148,6 +148,8 @@ angular.module('patternfly.utils').directive('pfFixedAccordion', function ($wind
});
};

var debounceResize = _.debounce(setCollapseHeights, 150, { maxWait: 250 });

if ($scope.groupHeight) {
angular.element($element[0].querySelector('.panel-group')).css('height', $scope.groupHeight);
}
Expand All @@ -161,10 +163,11 @@ angular.module('patternfly.utils').directive('pfFixedAccordion', function ($wind

// Update on window resizing
$element.on('resize', function () {
setCollapseHeights();
debounceResize();
});

angular.element($window).on('resize', function () {
setCollapseHeights();
debounceResize();
});
}
};
Expand Down