diff --git a/app/scripts/modules/core/cluster/clusterPod.html b/app/scripts/modules/core/cluster/clusterPod.html index dfc69162a8a..d11b68689c7 100644 --- a/app/scripts/modules/core/cluster/clusterPod.html +++ b/app/scripts/modules/core/cluster/clusterPod.html @@ -1,38 +1,41 @@
-
-
- -
-
- - {{$ctrl.grouping.heading}} + +
+
+ +
+
+ + {{$ctrl.grouping.heading}} +
+ +
+ +
+
- -
- -
-
-
+
-
- {{subgroup.heading}} - -
+ +
+ {{subgroup.heading}} + +
+ -
-
- - -
- - -

- {{ $ctrl.group.heading }} - - (disabled) - - {{$ctrl.group.runningExecutions.length}} - -

-
- - -

- - - Configure - -

-

- - - Starting Manual Execution… - - - Start Manual Execution - - + +
+
+ + +
+ + +

+ {{ $ctrl.group.heading }} + + (disabled) + + {{$ctrl.group.runningExecutions.length}} +

+
+ + +

+ + + Configure + +

+

+ + + Starting Manual Execution… + + + Start Manual Execution + + +

+
-

+
diff --git a/app/scripts/modules/core/diffs/changes.html b/app/scripts/modules/core/diffs/changes.html index bcb077e52f1..ce52da08d0c 100644 --- a/app/scripts/modules/core/diffs/changes.html +++ b/app/scripts/modules/core/diffs/changes.html @@ -5,17 +5,21 @@

Changes to {{$ctrl.nameItem.name}}

-
-

Commits

-
+ +
+

Commits

+
+
-
-

JAR Changes

-
+ +
+

JAR Changes

+
+
diff --git a/app/scripts/modules/core/loadBalancer/loadBalancer/loadBalancer.html b/app/scripts/modules/core/loadBalancer/loadBalancer/loadBalancer.html index 18c49d6a866..e5724a4084b 100644 --- a/app/scripts/modules/core/loadBalancer/loadBalancer/loadBalancer.html +++ b/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})}"> -
- {{loadBalancer.region | uppercase}} - - - - -
- + +
+ {{loadBalancer.region | uppercase}} + + + + +
+
-
-
- -
-
- - {{grouping.heading}} + +
+
+ +
+
+ + {{grouping.heading}} +
-
+
-
+
diff --git a/app/scripts/modules/core/modal/wizard/v2wizardPage.component.html b/app/scripts/modules/core/modal/wizard/v2wizardPage.component.html index e79b2efeaf2..69ac0c0191d 100644 --- a/app/scripts/modules/core/modal/wizard/v2wizardPage.component.html +++ b/app/scripts/modules/core/modal/wizard/v2wizardPage.component.html @@ -1,8 +1,10 @@
-
-

{{$ctrl.label}}

-
+ +
+

{{$ctrl.label}}

+
+
diff --git a/app/scripts/modules/core/presentation/navigation/pageNavigation.less b/app/scripts/modules/core/presentation/navigation/pageNavigation.less index 0c9bd67e1e6..529a42391e8 100644 --- a/app/scripts/modules/core/presentation/navigation/pageNavigation.less +++ b/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; diff --git a/app/scripts/modules/core/presentation/navigation/pageSection.component.ts b/app/scripts/modules/core/presentation/navigation/pageSection.component.ts index 61e02ae35eb..a6c6fa33b7f 100644 --- a/app/scripts/modules/core/presentation/navigation/pageSection.component.ts +++ b/app/scripts/modules/core/presentation/navigation/pageSection.component.ts @@ -53,7 +53,9 @@ class PageSectionComponent implements ng.IComponentOptions { public transclude = true; public template = `
-

{{$ctrl.pageConfig.label}}

+ +

{{$ctrl.pageConfig.label}}

+
`; diff --git a/app/scripts/modules/core/securityGroup/securityGroup.html b/app/scripts/modules/core/securityGroup/securityGroup.html index 413562f1543..3d7735d3706 100644 --- a/app/scripts/modules/core/securityGroup/securityGroup.html +++ b/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})}"> - -
- - {{heading | uppercase}} - -
- + +
+ + {{heading | uppercase}} + +
+
diff --git a/app/scripts/modules/core/securityGroup/securityGroupPod.html b/app/scripts/modules/core/securityGroup/securityGroupPod.html index 60c71e7b654..2d308259ae4 100644 --- a/app/scripts/modules/core/securityGroup/securityGroupPod.html +++ b/app/scripts/modules/core/securityGroup/securityGroupPod.html @@ -1,15 +1,17 @@
-
-
- -
-
- - {{grouping.heading}} + +
+
+ +
+
+ + {{grouping.heading}} +
-
+
-
-
-
-
- - - {{ $ctrl.viewModel.serverGroupSequence }}: - - Build: #{{ $ctrl.viewModel.jenkins.number }} - - - {{ $ctrl.viewModel.images }} - - -
-
- - - + +
+
+
+
+ + + {{ $ctrl.viewModel.serverGroupSequence }}: + + Build: #{{ $ctrl.viewModel.jenkins.number }} + + + {{ $ctrl.viewModel.images }} + + +
+
+ + + +
-
+
diff --git a/app/scripts/modules/core/utils/stickyHeader/stickyHeader.directive.ts b/app/scripts/modules/core/utils/stickyHeader/stickyHeader.component.ts similarity index 57% rename from app/scripts/modules/core/utils/stickyHeader/stickyHeader.directive.ts rename to app/scripts/modules/core/utils/stickyHeader/stickyHeader.component.ts index bfb3773b846..c5c751e0e4b 100644 --- a/app/scripts/modules/core/utils/stickyHeader/stickyHeader.directive.ts +++ b/app/scripts/modules/core/utils/stickyHeader/stickyHeader.component.ts @@ -1,68 +1,75 @@ -import {module, IAttributes, IDirective, ILogService, IWindowService, IScope} from 'angular'; -import {DirectiveFactory} from 'core/utils/tsDecorators/directiveFactoryDecorator'; +import { module, ILogService, IWindowService, IScope, IComponentOptions } from 'angular'; import * as $ from 'jquery'; -import {throttle} from 'lodash'; +import { throttle } from 'lodash'; -require('./stickyHeader.less'); +import './stickyHeader.less'; /** * Based on https://github.com/polarblau/stickySectionHeaders */ - -interface IStickyHeaderAttributes extends IAttributes { - addedOffsetHeight: string; - notifyOnly: string; - stickyIf: string; -} - export class StickyHeaderController implements ng.IComponentController { - public $element: JQuery; - public $attrs: IStickyHeaderAttributes; - public $scope: IScope; + private addedOffsetHeight: number; + private notifyOnly: boolean; + private stickyIf: string; + private $scrollableContainer: JQuery; private $section: JQuery; + private $header: JQuery; private id: number; private isSticky = false; - private notifyOnly = false; - private addedOffsetHeight = 0; private topOffset = 0; - public constructor(private $log: ILogService, private $window: IWindowService) {} + static get $inject(): string[] { return ['$scope', '$element', '$log', '$window']; } + public constructor(public $scope: IScope, + public $element: JQuery, + private $log: ILogService, + private $window: IWindowService) {} - public initialize() { + public $postLink(): void { this.id = Math.round(Math.random() * Date.now()); - this.$section = this.$element.parent(); + this.$section = this.$element.parent(); // Maybe? this.$scrollableContainer = this.$element.closest('[sticky-headers]'); this.isSticky = false; - this.notifyOnly = this.$attrs.notifyOnly === 'true'; this.positionHeader = throttle(this.positionHeader, 50, {trailing: true}); + this.addedOffsetHeight = this.addedOffsetHeight || 0; if (!this.$scrollableContainer.length) { - this.$log.warn('No parent container with attribute "sticky-header"; headers will not stick.'); + this.$log.warn('No parent container with attribute "sticky-headers"; headers will not stick.'); return; } - this.addedOffsetHeight = this.$attrs.addedOffsetHeight ? parseInt(this.$attrs.addedOffsetHeight, 10) : 0; - // fun thing about modals is they use a CSS transform, which resets position: fixed element placement - // but not offset() positioning, so we need to take that into account when calculating the fixed position const $modalDialog = this.$element.closest('div.modal-dialog'); this.topOffset = $modalDialog.size() > 0 ? parseInt($modalDialog.css('marginTop'), 10) : 0; - if (this.$attrs.stickyIf) { - this.$scope.$watch(this.$attrs.stickyIf, (sticky: boolean) => this.toggleSticky(sticky)); + if (this.stickyIf !== undefined) { + this.$scope.$watch(this.stickyIf, (sticky: boolean) => this.toggleSticky(sticky)); } else { this.toggleSticky(true); } } + // We need to wait for the first digest cycle to build the children, so this convenience function will + // cache the header the first time we look it up + private getHeader(): JQuery { + if (!this.$header) { + const header = this.$element.children().first(); + if (header.get(0) !== undefined) { + this.$header = header; + } + } + return this.$header; + } + private positionHeader(): void { - const sectionRect = this.$section.get(0).getBoundingClientRect(), + const $header = this.getHeader(), + sectionRect = this.$section.get(0).getBoundingClientRect(), sectionTop = sectionRect.top, windowHeight = this.$window.innerHeight, bottom = sectionRect.bottom; - if (bottom < 0 || sectionTop > windowHeight) { + if (!$header || bottom < 0 || sectionTop > windowHeight) { this.clearStickiness(); return; } @@ -71,9 +78,9 @@ export class StickyHeaderController implements ng.IComponentController { top = sectionTop - containerTop; if (top < 0 && bottom > containerTop) { - const headingRect = this.$element.get(0).getBoundingClientRect(), + const headingRect = $header.get(0).getBoundingClientRect(), headingWidth = headingRect.width, - headingHeight = this.$element.outerHeight(true); + headingHeight = $header.outerHeight(true); let topBase = containerTop, zIndex = 5; @@ -91,10 +98,8 @@ export class StickyHeaderController implements ng.IComponentController { if (this.notifyOnly) { this.$scope.$emit('sticky-header-enabled', newHeaderStyle); } else { - this.$section.css({ - paddingTop: headingHeight, - }); - this.$element.addClass('heading-sticky').removeClass('not-sticky').css(newHeaderStyle); + this.$section.css({ paddingTop: headingHeight }); + $header.addClass('heading-sticky').removeClass('not-sticky').css(newHeaderStyle); } this.isSticky = true; } else { @@ -103,8 +108,9 @@ export class StickyHeaderController implements ng.IComponentController { } private resetHeaderWidth(): void { - if (this.$element.get(0).className.includes('heading-sticky')) { - this.$element.removeClass('heading-sticky').addClass('not-sticky').removeAttr('style').css({width: '', top: ''}); + const $header = this.getHeader(); + if ($header && $header.get(0).className.includes('heading-sticky')) { + $header.removeClass('heading-sticky').addClass('not-sticky').removeAttr('style').css({width: '', top: ''}); } } @@ -114,10 +120,11 @@ export class StickyHeaderController implements ng.IComponentController { } private destroyStickyBindings(): void { + const $header = this.getHeader(); this.$scrollableContainer.unbind('.stickyHeader-' + this.id); $(this.$window).unbind('.stickyHeader-' + this.id); this.$section.removeData(); - this.$element.removeData(); + $header.removeData(); } private clearStickiness(): void { @@ -125,9 +132,7 @@ export class StickyHeaderController implements ng.IComponentController { if (this.notifyOnly) { this.$scope.$emit('sticky-header-disabled'); } else { - this.$section.css({ - paddingTop: 0, - }); + this.$section.css({ paddingTop: 0 }); this.resetHeaderWidth(); } } @@ -140,31 +145,21 @@ export class StickyHeaderController implements ng.IComponentController { $(this.$window).bind('resize.stickyHeader-' + this.id, () => this.handleWindowResize()); this.$scope.$on('page-reflow', () => this.handleWindowResize()); - this.$scope.$on('$destroy', () => this.destroyStickyBindings()); } else { this.destroyStickyBindings(); } } } - -@DirectiveFactory('$log', '$window') -class StickyHeaderDirective implements IDirective { - public restrict = 'A'; - public controller: any = StickyHeaderController; - - public link = { - post: this.postLink +export class StickyHeaderComponent implements IComponentOptions { + public bindings: any = { + addedOffsetHeight: '<', + notifyOnly: '<', + stickyIf: '<' }; - - private postLink($scope: IScope, $element: JQuery, $attrs: IStickyHeaderAttributes, ctrl: StickyHeaderController): void { - ctrl.$scope = $scope; - ctrl.$element = $element; - ctrl.$attrs = $attrs; - ctrl.initialize(); - } + public controller: any = StickyHeaderController; } -export const STICKY_HEADER_DIRECTIVE = 'spinnaker.core.utils.stickyHeader'; -module(STICKY_HEADER_DIRECTIVE, []) - .directive('stickyHeader', StickyHeaderDirective); +export const STICKY_HEADER_COMPONENT = 'spinnaker.core.utils.stickyHeader'; +module(STICKY_HEADER_COMPONENT, []) + .component('stickyHeader', new StickyHeaderComponent()); diff --git a/app/scripts/modules/core/utils/utils.module.js b/app/scripts/modules/core/utils/utils.module.js index b7491a6e6e3..f4ddfda1312 100644 --- a/app/scripts/modules/core/utils/utils.module.js +++ b/app/scripts/modules/core/utils/utils.module.js @@ -1,7 +1,7 @@ 'use strict'; import {RENDER_IF_FEATURE} from './renderIfFeature.component'; -import {STICKY_HEADER_DIRECTIVE} from './stickyHeader/stickyHeader.directive'; +import {STICKY_HEADER_COMPONENT} from './stickyHeader/stickyHeader.component'; import {COPY_TO_CLIPBOARD_COMPONENT} from './clipboard/copyToClipboard.component'; import {TIME_FORMATTERS} from './timeFormatters'; @@ -15,5 +15,5 @@ module.exports = angular.module('spinnaker.utils', [ TIME_FORMATTERS, require('./infiniteScroll.directive.js'), RENDER_IF_FEATURE, - STICKY_HEADER_DIRECTIVE, + STICKY_HEADER_COMPONENT, ]); diff --git a/app/scripts/modules/netflix/ci/detail/detailTab/detailTabView.html b/app/scripts/modules/netflix/ci/detail/detailTab/detailTabView.html index 99e4d48d327..822ae8fea63 100644 --- a/app/scripts/modules/netflix/ci/detail/detailTab/detailTabView.html +++ b/app/scripts/modules/netflix/ci/detail/detailTab/detailTabView.html @@ -13,18 +13,18 @@
-
- + +
+ - -
+ +
+