patternfly/angular-patternfly

<div class="container-fluid">
  <div class="row toolbar-pf" ng-class="{'table-view-pf-toolbar': $ctrl.isTableViewSelected()}">
    <div class="col-sm-12">
      <form class="toolbar-pf-actions" ng-class="{'no-filter': !$ctrl.config.filterConfig}">
        <div class="form-group toolbar-apf-filter">
          <pf-filter-fields config="$ctrl.config.filterConfig" ng-if="$ctrl.config.filterConfig" add-filter-fn="$ctrl.addFilter"></pf-filter-fields>
        </div>
        <div class="form-group">
          <pf-sort config="$ctrl.config.sortConfig" ng-if="$ctrl.config.sortConfig && $ctrl.config.sortConfig.show"></pf-sort>
        </div>
        <div class="form-group toolbar-actions"
             ng-if="$ctrl.config.actionsConfig &&
                   (($ctrl.config.actionsConfig.primaryActions && $ctrl.config.actionsConfig.primaryActions.length > 0) ||
                    ($ctrl.config.actionsConfig.moreActions && $ctrl.config.actionsConfig.moreActions.length > 0) ||
                    $ctrl.config.actionsConfig.actionsInclude)">
          <button class="btn btn-default primary-action" type="button" ng-repeat="action in $ctrl.config.actionsConfig.primaryActions"
                  title="{{action.title}}"
                  ng-click="$ctrl.handleAction(action)"
                  ng-disabled="action.isDisabled === true">
            {{action.name}}
          </button>
          <div ng-if="$ctrl.config.actionsConfig.actionsInclude" pf-transclude class="toolbar-pf-include-actions" ng-tranclude="actions"></div>
          <div uib-dropdown class="dropdown-kebab-pf" ng-if="$ctrl.config.actionsConfig.moreActions && $ctrl.config.actionsConfig.moreActions.length > 0">
            <button uib-dropdown-toggle class="btn btn-link" type="button">
              <span class="fa fa-ellipsis-v"></span>
            </button>
            <ul uib-dropdown-menu aria-labelledby="dropdownKebab">
              <li ng-repeat="action in $ctrl.config.actionsConfig.moreActions"
                  role="{{action.isSeparator === true ? 'separator' : 'menuitem'}}"
                  ng-class="{'divider': action.isSeparator === true, 'disabled': action.isDisabled === true}">
                <a ng-if="action.isSeparator !== true"
                   class="secondary-action"
                   title="{{action.title}}"
                   ng-click="$ctrl.handleAction(action)">
                  {{action.name}}
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="toolbar-pf-action-right">
          <div class="form-group toolbar-pf-view-selector" ng-if="$ctrl.config.viewsConfig && $ctrl.config.viewsConfig.views">
            <button ng-repeat="view in $ctrl.config.viewsConfig.viewsList" class="btn btn-link"
                    ng-class="{'active': $ctrl.isViewSelected(view.id), 'disabled': $ctrl.checkViewDisabled(view)}"
                    title={{view.title}}  ng-click="$ctrl.viewSelected(view.id)">
              <i class="{{view.iconClass}}"></i>
            </button>
          </div>
        </div>
      </form>
      <pf-filter-results config="$ctrl.config.filterConfig" ng-if="$ctrl.config.filterConfig"></pf-filter-results>
    </div>
  </div>
</div>