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
patternfly · Aug 3, 2017 · 7646c4e · 7646c4e
1 parent 9742960
commit 7646c4e
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 35 deletions.
diff --git a/src/notification/examples/notification-drawer.js b/src/notification/examples/notification-drawer.js
@@ -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}}

diff --git 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
@@ -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}">
-          <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>
@@ -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">

diff --git 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();
       });
     }
   };