From 7646c4e04163cf711c8555e89ce4df777cbc66dc Mon Sep 17 00:00:00 2001 From: Jeffrey Phillips Date: Thu, 3 Aug 2017 11:19:10 -0400 Subject: [PATCH] Fix notification drawer accordion panel sizing Update sizes when elements in the notification drawer are updated. Update collapse children to not have a intermediate parent. Fix for example notification drawer body html indentation error. Fixes #545 --- .../examples/notification-drawer.js | 2 +- .../notification-drawer.component.js | 23 ++++++++++-- src/notification/notification-drawer.html | 24 ++++++------ src/utils/fixed-accordion.directive.js | 37 ++++++++++--------- 4 files changed, 51 insertions(+), 35 deletions(-) diff --git a/src/notification/examples/notification-drawer.js b/src/notification/examples/notification-drawer.js index 63c1966be..63e367dea 100644 --- a/src/notification/examples/notification-drawer.js +++ b/src/notification/examples/notification-drawer.js @@ -111,7 +111,7 @@ - +
{{notification.message}} diff --git a/src/notification/notification-drawer.component.js b/src/notification/notification-drawer.component.js index 206daeb5a..adf51dd89 100644 --- a/src/notification/notification-drawer.component.js +++ b/src/notification/notification-drawer.component.js @@ -51,6 +51,12 @@ angular.module('patternfly.notification').component('pfNotificationDrawer', { }); }; + var updateAccordionSizing = function () { + $timeout(function () { + angular.element($window).triggerHandler('resize'); + }, 100); + }; + ctrl.toggleCollapse = function (selectedGroup) { if (selectedGroup.open) { selectedGroup.open = false; @@ -59,6 +65,7 @@ angular.module('patternfly.notification').component('pfNotificationDrawer', { group.open = false; }); selectedGroup.open = true; + updateAccordionSizing(); } }; @@ -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(); } }; diff --git a/src/notification/notification-drawer.html b/src/notification/notification-drawer.html index e475b8d8a..752703e0b 100644 --- a/src/notification/notification-drawer.html +++ b/src/notification/notification-drawer.html @@ -19,16 +19,15 @@

-
-
-
-
-
- Loading More -
+
+
+
+
+ Loading More
-
+
+
@@ -38,10 +37,9 @@

Clear All -

-
- {{$ctrl.actionButtonTitle}} -
+
+
+ {{$ctrl.actionButtonTitle}}
diff --git a/src/utils/fixed-accordion.directive.js b/src/utils/fixed-accordion.directive.js index cfb4f332b..ce0f51df0 100644 --- a/src/utils/fixed-accordion.directive.js +++ b/src/utils/fixed-accordion.directive.js @@ -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; @@ -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'); }); }; @@ -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; @@ -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 @@ -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); } @@ -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(); }); } };