Merge pull request #3537 from jrsquared/sticky-component

refactor(core): convert sticky-header to a component

app/scripts/modules/core/cluster/clusterPod.html

@@ -1,38 +1,41 @@
 <div class="row rollup-entry sub-group">
-  <div sticky-header class="rollup-summary">
-    <div class="rollup-title-cell">
-      <account-label-color account="$ctrl.parentHeading"></account-label-color>
-      <div class="pod-center">
-        <div>
-          <span class="glyphicon glyphicon-th"></span>
-          {{$ctrl.grouping.heading}}
+  <sticky-header>
+    <div class="rollup-summary">
+      <div class="rollup-title-cell">
+        <account-label-color account="$ctrl.parentHeading"></account-label-color>
+        <div class="pod-center">
+          <div>
+            <span class="glyphicon glyphicon-th"></span>
+            {{$ctrl.grouping.heading}}
+          </div>
+          <entity-ui-tags component="$ctrl.grouping"
+                          application="$ctrl.application"
+                          entity-type="cluster"
+                          page-location="pod"
+                          class="inverse"
+                          on-update="$ctrl.application.serverGroups.refresh()"></entity-ui-tags>
+        </div>
+        <health-counts container="$ctrl.grouping.cluster.instanceCounts"></health-counts>
+        <div class="remove-button" ng-if="$ctrl.showCloseButton">
+          <button class="btn btn-link" ng-click="$ctrl.close()" uib-tooltip="Remove cluster from view">
+            <span class="glyphicon glyphicon-remove"></span>
+          </button>
         </div>
-        <entity-ui-tags component="$ctrl.grouping"
-                        application="$ctrl.application"
-                        entity-type="cluster"
-                        page-location="pod"
-                        class="inverse"
-                        on-update="$ctrl.application.serverGroups.refresh()"></entity-ui-tags>
-      </div>
-      <health-counts container="$ctrl.grouping.cluster.instanceCounts"></health-counts>
-      <div class="remove-button" ng-if="$ctrl.showCloseButton">
-        <button class="btn btn-link" ng-click="$ctrl.close()" uib-tooltip="Remove cluster from view">
-          <span class="glyphicon glyphicon-remove"></span>
-        </button>
       </div>
     </div>
-  </div>
+  </sticky-header>
   <div class="rollup-details">
     <div class="pod-subgroup" ng-repeat="subgroup in $ctrl.grouping.subgroups">
-      <h6 class="subgroup-title"
-          sticky-header added-offset-height="36">
-        {{subgroup.heading}}
-        <entity-ui-tags component="subgroup"
-                        application="$ctrl.application"
-                        entity-type="cluster"
-                        page-location="pod"
-                        on-update="$ctrl.application.serverGroups.refresh()"></entity-ui-tags>
-      </h6>
+      <sticky-header added-offset-height="36">
+        <h6 class="subgroup-title">
+          {{subgroup.heading}}
+          <entity-ui-tags component="subgroup"
+                          application="$ctrl.application"
+                          entity-type="cluster"
+                          page-location="pod"
+                          on-update="$ctrl.application.serverGroups.refresh()"></entity-ui-tags>
+        </h6>
+      </sticky-header>
       <server-group
         ng-repeat="serverGroup in subgroup.serverGroups | orderBy:'-name'"
         ng-if="$ctrl.grouping.cluster.category === 'serverGroup'"

app/scripts/modules/core/delivery/executionGroup/executionGroup.component.html

@@ -1,66 +1,66 @@
 <div ng-class="$ctrl.isShowingDetails() ? 'showing-details' : 'details-hidden'">
-  <div class="clickable execution-group-header"
-       sticky-header
-       added-offset-height="-3"
-       analytics-on="click"
-       analytics-category="Pipeline"
-       analytics-event="Group {{$ctrl.viewState.open ? 'collapsed' : 'expanded'}}"
-       analytics-label="{{$ctrl.group.heading}}"
-       ng-click="$ctrl.toggle()"
-       ng-if="$ctrl.group.heading">
-    <div class="execution-group-heading" ng-class="$ctrl.viewState.isRetired  || $ctrl.pipelineConfig.disabled ? 'inactive' : 'active'">
-      <span class="glyphicon pipeline-toggle"
-            ng-class="{'glyphicon-chevron-right': !$ctrl.viewState.open, 'glyphicon-chevron-down': $ctrl.viewState.open}">
-      </span>
-      <div class="shadowed">
-        <account-label-color ng-if="$ctrl.viewState.showAccounts"
-                             ng-repeat="account in $ctrl.deploymentAccounts"
-                             account="account"></account-label-color>
-        <account-label-color ng-repeat="account in $ctrl.group.targetAccounts"
-                             account="account"></account-label-color>
-        <h4 class="execution-group-title">
-          {{ $ctrl.group.heading }}
-          <span ng-if="$ctrl.pipelineConfig.description" class="glyphicon glyphicon-info-sign" uib-tooltip="{{ $ctrl.pipelineConfig.description }}"></span>
-          <span ng-if="$ctrl.pipelineConfig.disabled">(disabled)</span>
-          <span ng-if="$ctrl.group.runningExecutions.length" class="badge">
-            {{$ctrl.group.runningExecutions.length}}
-          </span>
-        </h4>
-        <div class="text-right execution-group-actions" ng-if="$ctrl.viewState.canConfigure">
-          <triggers-tag is-visible="!$ctrl.pipelineConfig.disabled" pipeline="$ctrl.pipelineConfig"></triggers-tag>
-          <next-run-tag ng-if="!$ctrl.pipelineConfig.disabled" pipeline="$ctrl.pipelineConfig"></next-run-tag>
-          <h4>
-            <a href
-               class="btn btn-xs btn-link"
-               analytics-on="click"
-               analytics-category="Pipeline"
-               analytics-event="Configure pipeline button clicked"
-               analytics-label="{{$ctrl.group.heading}}"
-               ng-click="$ctrl.configure($ctrl.group.config.id); $event.stopPropagation();">
-              <span class="glyphicon glyphicon-cog"></span>
-              Configure
-            </a>
-          </h4>
-          <h4 ng-if="$ctrl.viewState.canTriggerPipelineManually" is-visible="!$ctrl.pipelineConfig.disabled">
-            <a href
-               class="btn btn-xs btn-link"
-               analytics-on="click"
-               analytics-category="Pipeline"
-               analytics-event="Trigger pipeline button clicked"
-               analytics-label="{{$ctrl.group.heading}}"
-               ng-click="$ctrl.triggerPipeline(); $event.stopPropagation();">
-              <span ng-if="$ctrl.viewState.triggeringExecution">
-                <span class="glyphicon glyphicon-asterisk glyphicon-spinning"></span> Starting Manual Execution&hellip;
-              </span>
-              <span ng-if="!$ctrl.viewState.triggeringExecution">
-                <span class="glyphicon glyphicon-play"></span> Start Manual Execution
-              </span>
-            </a>
+  <sticky-header added-offset-height="-3">
+    <div class="clickable execution-group-header"
+        analytics-on="click"
+        analytics-category="Pipeline"
+        analytics-event="Group {{$ctrl.viewState.open ? 'collapsed' : 'expanded'}}"
+        analytics-label="{{$ctrl.group.heading}}"
+        ng-click="$ctrl.toggle()"
+        ng-if="$ctrl.group.heading">
+      <div class="execution-group-heading" ng-class="$ctrl.viewState.isRetired  || $ctrl.pipelineConfig.disabled ? 'inactive' : 'active'">
+        <span class="glyphicon pipeline-toggle"
+              ng-class="{'glyphicon-chevron-right': !$ctrl.viewState.open, 'glyphicon-chevron-down': $ctrl.viewState.open}">
+        </span>
+        <div class="shadowed">
+          <account-label-color ng-if="$ctrl.viewState.showAccounts"
+                              ng-repeat="account in $ctrl.deploymentAccounts"
+                              account="account"></account-label-color>
+          <account-label-color ng-repeat="account in $ctrl.group.targetAccounts"
+                              account="account"></account-label-color>
+          <h4 class="execution-group-title">
+            {{ $ctrl.group.heading }}
+            <span ng-if="$ctrl.pipelineConfig.description" class="glyphicon glyphicon-info-sign" uib-tooltip="{{ $ctrl.pipelineConfig.description }}"></span>
+            <span ng-if="$ctrl.pipelineConfig.disabled">(disabled)</span>
+            <span ng-if="$ctrl.group.runningExecutions.length" class="badge">
+              {{$ctrl.group.runningExecutions.length}}
+            </span>
           </h4>
+          <div class="text-right execution-group-actions" ng-if="$ctrl.viewState.canConfigure">
+            <triggers-tag is-visible="!$ctrl.pipelineConfig.disabled" pipeline="$ctrl.pipelineConfig"></triggers-tag>
+            <next-run-tag ng-if="!$ctrl.pipelineConfig.disabled" pipeline="$ctrl.pipelineConfig"></next-run-tag>
+            <h4>
+              <a href
+                class="btn btn-xs btn-link"
+                analytics-on="click"
+                analytics-category="Pipeline"
+                analytics-event="Configure pipeline button clicked"
+                analytics-label="{{$ctrl.group.heading}}"
+                ng-click="$ctrl.configure($ctrl.group.config.id); $event.stopPropagation();">
+                <span class="glyphicon glyphicon-cog"></span>
+                Configure
+              </a>
+            </h4>
+            <h4 ng-if="$ctrl.viewState.canTriggerPipelineManually" is-visible="!$ctrl.pipelineConfig.disabled">
+              <a href
+                class="btn btn-xs btn-link"
+                analytics-on="click"
+                analytics-category="Pipeline"
+                analytics-event="Trigger pipeline button clicked"
+                analytics-label="{{$ctrl.group.heading}}"
+                ng-click="$ctrl.triggerPipeline(); $event.stopPropagation();">
+                <span ng-if="$ctrl.viewState.triggeringExecution">
+                  <span class="glyphicon glyphicon-asterisk glyphicon-spinning"></span> Starting Manual Execution&hellip;
+                </span>
+                <span ng-if="!$ctrl.viewState.triggeringExecution">
+                  <span class="glyphicon glyphicon-play"></span> Start Manual Execution
+                </span>
+              </a>
+            </h4>
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  </sticky-header>
   <div class="execution-groups" ng-if="$ctrl.viewState.open">
     <div class="execution-group-container">
       <div ng-if="!$ctrl.group.executions.length" style="padding-bottom: 10px">

app/scripts/modules/core/diffs/changes.html

@@ -5,17 +5,21 @@ <h3>Changes to {{$ctrl.nameItem.name}}</h3>
   </div>
   <div class="modal-body" style="max-height: 800px; overflow-y: scroll;" sticky-headers>
     <div ng-if="$ctrl.commits.length">
-      <div class="component-heading" sticky-header>
-        <h4>Commits</h4>
-      </div>
+      <sticky-header>
+        <div class="component-heading">
+          <h4>Commits</h4>
+        </div>
+      </sticky-header>
       <div class="component-body">
         <commit-history commits="$ctrl.commits"></commit-history>
       </div>
     </div>
     <div ng-if="$ctrl.hasJarChanges">
-      <div class="component-heading" sticky-header>
-        <h4>JAR Changes</h4>
-      </div>
+      <sticky-header>
+        <div class="component-heading">
+          <h4>JAR Changes</h4>
+        </div>
+      </sticky-header>
       <div class="component-body">
         <jar-diff jar-diffs="$ctrl.jarDiffs"></jar-diff>
       </div>

app/scripts/modules/core/loadBalancer/loadBalancer/loadBalancer.html

@@ -3,18 +3,19 @@
      ng-click="loadDetails($event)"
      ng-class="{active: $state.includes('**.loadBalancerDetails', {region: loadBalancer.region, accountId: loadBalancer.account, name: loadBalancer.name, vpcId: loadBalancer.vpcId, provider: loadBalancer.cloudProvider})}">
 
-  <h6 sticky-header added-offset-height="36">
-    <span class="icon icon-elb"></span> {{loadBalancer.region | uppercase}}
-    <entity-ui-tags component="loadBalancer"
-                    application="application"
-                    entity-type="loadBalancer"
-                    page-location="pod"
-                    on-update="application.loadBalancers.refresh()"></entity-ui-tags>
-    <span class="text-right">
-      <health-counts container="loadBalancer.instanceCounts"></health-counts>
-    </span>
-  </h6>
-
+  <sticky-header added-offset-height="36">
+    <h6>
+      <span class="icon icon-elb"></span> {{loadBalancer.region | uppercase}}
+      <entity-ui-tags component="loadBalancer"
+                      application="application"
+                      entity-type="loadBalancer"
+                      page-location="pod"
+                      on-update="application.loadBalancers.refresh()"></entity-ui-tags>
+      <span class="text-right">
+        <health-counts container="loadBalancer.instanceCounts"></health-counts>
+      </span>
+    </h6>
+  </sticky-header>
   <div class="cluster-container">
     <div ng-if="sortFilter.showServerGroups">
       <load-balancer-server-group

app/scripts/modules/core/loadBalancer/loadBalancer/loadBalancerPod.html

@@ -1,15 +1,17 @@
 <div class="row rollup-entry sub-group">
-  <div sticky-header class="rollup-summary">
-    <div class="rollup-title-cell">
-      <account-label-color account="parentHeading"></account-label-color>
-      <div class="pod-center">
-        <div>
-          <span class="icon icon-elb"></span>
-          {{grouping.heading}}
+  <sticky-header>
+    <div class="rollup-summary">
+      <div class="rollup-title-cell">
+        <account-label-color account="parentHeading"></account-label-color>
+        <div class="pod-center">
+          <div>
+            <span class="icon icon-elb"></span>
+            {{grouping.heading}}
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  </sticky-header>
   <div class="rollup-details">
     <div class="pod-subgroup" ng-repeat="subgroup in grouping.subgroups">
       <load-balancer

app/scripts/modules/core/loadBalancer/loadBalancer/loadBalancerServerGroup.html

@@ -1,6 +1,5 @@
 <div class="cluster-container" ng-class="{disabled: serverGroup.isDisabled}">
-  <div class="server-group-title" sticky-header added-offset-height="69"
-       sticky-if="headerIsSticky()">
+  <div class="server-group-title">
     <div class="container-fluid no-padding">
       <div class="row">
         <div class="col-md-8">

app/scripts/modules/core/modal/wizard/v2wizardPage.component.html

@@ -1,8 +1,10 @@
 <div class="modal-page"
      ng-if="$ctrl.state.rendered"
      waypoint="{{$ctrl.key}}">
-  <div class="wizard-subheading" sticky-header>
-    <h4 ng-class="{ default: !$ctrl.state.done, current: $ctrl.state.current, done: $ctrl.state.done, dirty: $ctrl.state.dirty }">{{$ctrl.label}}</h4>
-  </div>
+  <sticky-header>
+    <div class="wizard-subheading">
+      <h4 ng-class="{ default: !$ctrl.state.done, current: $ctrl.state.current, done: $ctrl.state.done, dirty: $ctrl.state.dirty }">{{$ctrl.label}}</h4>
+    </div>
+  </sticky-header>
   <div class="wizard-page-body" ng-transclude></div>
 </div>

app/scripts/modules/core/presentation/navigation/pageNavigation.less

@@ -47,7 +47,7 @@ page-navigator {
       padding: 15px;
     }
     .clearfix();
-    h4[sticky-header] {
+    sticky-header h4 {
       padding: 10px;
       background-color: @pod_header_blue;
       margin: 0;

app/scripts/modules/core/presentation/navigation/pageSection.component.ts

@@ -53,7 +53,9 @@ class PageSectionComponent implements ng.IComponentOptions {
   public transclude = true;
   public template = `
     <div ng-if="$ctrl.pageConfig.visible" class="page-subheading" data-page-id="{{$ctrl.pageConfig.key}}">
-      <h4 sticky-header>{{$ctrl.pageConfig.label}}</h4>
+      <sticky-header>
+        <h4>{{$ctrl.pageConfig.label}}</h4>
+      </sticky-header>
       <div ng-class="$ctrl.noWrapper ? 'no-wrapper' : 'section-body'" data-page-content="{{$ctrl.pageConfig.key}}" ng-transclude></div>
     </div>
   `;

app/scripts/modules/core/securityGroup/securityGroup.html

@@ -2,17 +2,17 @@
      waypoint="{{waypoint}}"
      ng-click="loadDetails($event)"
      ng-class="{active: $state.includes('**.securityGroupDetails', {region: securityGroup.region, accountId: securityGroup.accountName, name: securityGroup.name, vpcId: securityGroup.vpcId, provider: securityGroup.provider})}">
-
-  <h6 sticky-header added-offset-height="36">
-    <span class="glyphicon glyphicon-transfer"></span>
-    {{heading | uppercase}}
-    <entity-ui-tags component="securityGroup"
-                    application="application"
-                    entity-type="securityGroup"
-                    page-location="details"
-                    on-update="application.securityGroups.refresh()"></entity-ui-tags>
-  </h6>
-
+  <sticky-header added-offset-height="36">
+    <h6>
+      <span class="glyphicon glyphicon-transfer"></span>
+      {{heading | uppercase}}
+      <entity-ui-tags component="securityGroup"
+                      application="application"
+                      entity-type="securityGroup"
+                      page-location="details"
+                      on-update="application.securityGroups.refresh()"></entity-ui-tags>
+    </h6>
+  </sticky-header>
   <div class="cluster-container">
     <div class="rollup-details-section col-md-6" ng-if="sortFilter.showServerGroups">
       <div ng-if="!securityGroup.usages.serverGroups.length" class="small">

app/scripts/modules/core/securityGroup/securityGroupPod.html

@@ -1,15 +1,17 @@
 <div class="row rollup-entry sub-group">
-  <div sticky-header class="rollup-summary">
-    <div class="rollup-title-cell">
-      <account-label-color account="parentHeading"></account-label-color>
-      <div class="pod-center">
-        <div>
-          <span class="glyphicon glyphicon-transfer"></span>
-          {{grouping.heading}}
+  <sticky-header>
+    <div class="rollup-summary">
+      <div class="rollup-title-cell">
+        <account-label-color account="parentHeading"></account-label-color>
+        <div class="pod-center">
+          <div>
+            <span class="glyphicon glyphicon-transfer"></span>
+            {{grouping.heading}}
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  </sticky-header>
   <div class="rollup-details">
     <div class="pod-subgroup" ng-repeat="subgroup in grouping.subgroups">
       <security-group