patternfly/angular-patternfly

<div class="drawer-pf" ng-class="{'hide': $ctrl.drawerHidden, 'drawer-pf-expanded': $ctrl.drawerExpanded}">
  <div ng-if="$ctrl.drawerTitle" class="drawer-pf-title">
    <a href="" ng-if="$ctrl.allowExpand" class="drawer-pf-toggle-expand fa fa-angle-double-left hidden-xs" ng-click="$ctrl.toggleExpandDrawer()"></a>
    <a href="" ng-if="$ctrl.onClose" class="drawer-pf-close pficon pficon-close" ng-click="$ctrl.onClose()"></a>
    <h3 class="text-center">{{$ctrl.drawerTitle}}</h3>
  </div>
  <div ng-if="$ctrl.titleInclude" class="drawer-pf-title" ng-include src="$ctrl.titleInclude"></div>
  <div ng-if="!$ctrl.notificationGroups" class="apf-blank-notification-groups">
    <pf-empty-state config="$ctrl.emptyStateConfig"></pf-empty-state>
  </div>
  <div ng-if="$ctrl.notificationGroups" pf-fixed-accordion scroll-selector=".panel-body">
    <div class="panel-group">
      <div class="panel panel-default" ng-repeat="notificationGroup in $ctrl.notificationGroups track by $index">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a ng-if="!$ctrl.singleGroup" ng-click="$ctrl.toggleCollapse(notificationGroup)" ng-class="{collapsed: !notificationGroup.open}" ng-include src="$ctrl.headingInclude"></a>
            <span ng-if="$ctrl.singleGroup" ng-include src="$ctrl.headingInclude"></span>
          </h4>
          <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)" class="panel-body">
            <div class="drawer-pf-notification" ng-class="{unread: notification.unread, 'expanded-notification': $ctrl.drawerExpanded}"
                 ng-repeat="notification in notificationGroup.notifications track by $ctrl.notificationTrackField ? notification[$ctrl.notificationTrackField] || $index : $index" 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>
          <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>
            <span class="drawer-pf-action-link">
              <button class="btn btn-link" ng-if="$ctrl.showClearAll" ng-click="$ctrl.onClearAll(notificationGroup)">
                <span class="pficon pficon-close"></span>
                Clear All
              </button>
            </span>
          </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">
              <pf-empty-state config="notificationGroup.emptyStateConfig"></pf-empty-state>
            </div>
          </div>
          <div ng-if="$ctrl.notificationFooterInclude" ng-include src="$ctrl.notificationFooterInclude">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>