Skip to content

Commit b7779a1

Browse files
jeff-phillips-18cdcabrera
jeff-phillips-18
authored and
cdcabrera
committed
Fix notification drawer accordion panel sizing (#548)
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
1 parent 884021d commit b7779a1

File tree

4 files changed

+51
-35
lines changed

4 files changed

+51
-35
lines changed

‎src/notification/examples/notification-drawer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@
111111
</li>
112112
</ul>
113113
</div>
114-
<span ng-if="notification.status" class="{{'pull-left ' + $ctrl.customScope.getNotficationStatusIconClass(notification)}}" ng-click="$ctrl.customScope.markRead(notification)"></span>
114+
<span ng-if="notification.status" class="{{'pull-left ' + $ctrl.customScope.getNotficationStatusIconClass(notification)}}" ng-click="$ctrl.customScope.markRead(notification)"></span>
115115
<div class="drawer-pf-notification-content" ng-click="$ctrl.customScope.markRead(notification)">
116116
<span class="drawer-pf-notification-message" tooltip-append-to-body="true" tooltip-popup-delay="500" tooltip-placement="bottom" tooltip="{{notification.message}}">
117117
{{notification.message}}

‎src/notification/notification-drawer.component.js‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,12 @@ angular.module('patternfly.notification').component('pfNotificationDrawer', {
5151
});
5252
};
5353

54+
var updateAccordionSizing = function () {
55+
$timeout(function () {
56+
angular.element($window).triggerHandler('resize');
57+
}, 100);
58+
};
59+
5460
ctrl.toggleCollapse = function (selectedGroup) {
5561
if (selectedGroup.open) {
5662
selectedGroup.open = false;
@@ -59,6 +65,7 @@ angular.module('patternfly.notification').component('pfNotificationDrawer', {
5965
group.open = false;
6066
});
6167
selectedGroup.open = true;
68+
updateAccordionSizing();
6269
}
6370
};
6471

@@ -82,12 +89,20 @@ angular.module('patternfly.notification').component('pfNotificationDrawer', {
8289
ctrl.$onChanges = function (changesObj) {
8390
if (changesObj.notificationGroups) {
8491
setupGroups();
92+
updateAccordionSizing();
8593
}
8694

87-
if (changesObj.drawerHidden) {
88-
$timeout(function () {
89-
angular.element($window).triggerHandler('resize');
90-
}, 100);
95+
if (!ctrl.drawerHidden &&
96+
(changesObj.drawerHidden ||
97+
changesObj.showMarkAllRead ||
98+
changesObj.showClearAll ||
99+
changesObj.actionButtonTitle ||
100+
changesObj.titleInclude ||
101+
changesObj.headingInclude ||
102+
changesObj.subheadingInclude ||
103+
changesObj.notificationBodyInclude ||
104+
changesObj.notificationFooterInclude)) {
105+
updateAccordionSizing();
91106
}
92107
};
93108

‎src/notification/notification-drawer.html‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,15 @@ <h4 class="panel-title">
1919
<span class="panel-counter" ng-include src="$ctrl.subheadingInclude"></span>
2020
</div>
2121
<div class="panel-collapse collapse" ng-class="{in: notificationGroup.open || $ctrl.notificationGroups.length === 1}">
22-
<div ng-if="$ctrl.hasNotifications(notificationGroup)">
23-
<div class="panel-body">
24-
<div class="drawer-pf-notification" ng-class="{unread: notification.unread, 'expanded-notification': $ctrl.drawerExpanded}"
25-
ng-repeat="notification in notificationGroup.notifications" ng-include src="$ctrl.notificationBodyInclude">
26-
</div>
27-
<div ng-if="notificationGroup.isLoading" class="drawer-pf-loading text-center">
28-
<span class="spinner spinner-xs spinner-inline"></span> Loading More
29-
</div>
22+
<div ng-if="$ctrl.hasNotifications(notificationGroup)" class="panel-body">
23+
<div class="drawer-pf-notification" ng-class="{unread: notification.unread, 'expanded-notification': $ctrl.drawerExpanded}"
24+
ng-repeat="notification in notificationGroup.notifications" ng-include src="$ctrl.notificationBodyInclude">
25+
</div>
26+
<div ng-if="notificationGroup.isLoading" class="drawer-pf-loading text-center">
27+
<span class="spinner spinner-xs spinner-inline"></span> Loading More
3028
</div>
31-
<div class="drawer-pf-action">
29+
</div>
30+
<div ng-if="($ctrl.showClearAll || $ctrl.showMarkAllRead) && $ctrl.hasNotifications(notificationGroup)" class="drawer-pf-action">
3231
<span class="drawer-pf-action-link" ng-if="$ctrl.showMarkAllRead && $ctrl.hasUnread(notificationGroup)">
3332
<button class="btn btn-link" ng-click="$ctrl.onMarkAllRead(notificationGroup)">Mark All Read</button>
3433
</span>
@@ -38,10 +37,9 @@ <h4 class="panel-title">
3837
Clear All
3938
</button>
4039
</span>
41-
</div>
42-
<div class="drawer-pf-action" ng-if="$ctrl.actionButtonTitle">
43-
<a class="btn btn-link btn-block" ng-click="$ctrl.actionButtonCallback(notificationGroup)">{{$ctrl.actionButtonTitle}}</a>
44-
</div>
40+
</div>
41+
<div ng-if="$ctrl.actionButtonTitle && $ctrl.hasNotifications(notificationGroup)" class="drawer-pf-action">
42+
<a class="btn btn-link btn-block" ng-click="$ctrl.actionButtonCallback(notificationGroup)">{{$ctrl.actionButtonTitle}}</a>
4543
</div>
4644
<div ng-if="!$ctrl.hasNotifications(notificationGroup)">
4745
<div class="panel-body">

‎src/utils/fixed-accordion.directive.js‎

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -61,13 +61,20 @@ angular.module('patternfly.utils').directive('pfFixedAccordion', function ($wind
6161
groupClass: '@'
6262
},
6363
link: function ($scope, $element, $attrs) {
64+
var contentElementHeight = function (contentElement) {
65+
var contentHeight = contentElement.offsetHeight;
66+
contentHeight += parseInt(getComputedStyle(contentElement).marginTop);
67+
contentHeight += parseInt(getComputedStyle(contentElement).marginBottom);
68+
69+
return contentHeight;
70+
};
71+
6472
var setBodyScrollHeight = function (parentElement, bodyHeight) {
6573
// Set the max-height for the fixed height components
6674
var collapsePanels = parentElement[0].querySelectorAll('.panel-collapse');
6775
var collapsePanel;
6876
var scrollElement;
6977
var panelContents;
70-
var nextContent;
7178
var innerHeight;
7279
var scroller;
7380

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

7986
if (angular.isDefined($scope.scrollSelector)) {
8087
scroller = angular.element(collapsePanel[0].querySelector($scope.scrollSelector));
81-
if (scroller.length === 1) {
88+
if (scroller.length) {
8289
scrollElement = angular.element(scroller[0]);
90+
8391
panelContents = collapsePanel.children();
8492
angular.forEach(panelContents, function (contentElement) {
85-
nextContent = angular.element(contentElement);
86-
8793
// Get the height of all the non-scroll element contents
88-
if (nextContent[0] !== scrollElement[0]) {
89-
innerHeight += nextContent[0].offsetHeight;
90-
innerHeight += parseInt(getComputedStyle(nextContent[0]).marginTop);
91-
innerHeight += parseInt(getComputedStyle(nextContent[0]).marginBottom);
94+
if (contentElement !== scrollElement[0]) {
95+
innerHeight += contentElementHeight(contentElement);
9296
}
9397
});
9498
}
9599
}
96100

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

109112
height = parentElement[0].clientHeight;
110113

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

120123
angular.forEach(headings, function (heading) {
121-
headingElement = angular.element(heading);
122-
contentHeight += headingElement.prop('offsetHeight');
123-
contentHeight += parseInt(getComputedStyle(headingElement[0]).marginTop);
124-
contentHeight += parseInt(getComputedStyle(headingElement[0]).marginBottom);
124+
contentHeight += contentElementHeight(heading);
125125
});
126126

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

151+
var debounceResize = _.debounce(setCollapseHeights, 150, { maxWait: 250 });
152+
151153
if ($scope.groupHeight) {
152154
angular.element($element[0].querySelector('.panel-group')).css('height', $scope.groupHeight);
153155
}
@@ -161,10 +163,11 @@ angular.module('patternfly.utils').directive('pfFixedAccordion', function ($wind
161163

162164
// Update on window resizing
163165
$element.on('resize', function () {
164-
setCollapseHeights();
166+
debounceResize();
165167
});
168+
166169
angular.element($window).on('resize', function () {
167-
setCollapseHeights();
170+
debounceResize();
168171
});
169172
}
170173
};

0 commit comments

Comments
 (0)