Skip to content

Commit 4641c43

Browse files
arjunlalbarjunlalb
authored
fix: define a service to provide global header height (#1535)
* fix: define a service to provide global header height
1 parent 91d4c6b commit 4641c43

File tree

9 files changed

+35
-30
lines changed

9 files changed

+35
-30
lines changed

‎projects/common/src/constants/application-constants.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
import { InjectionToken } from '@angular/core';
2-
3-
export const GLOBAL_HEADER_HEIGHT = new InjectionToken<string>('Global Header Height');
4-
51
export const enum ApplicationFeature {
62
PageTimeRange = 'ui.page-time-range'
73
}

‎projects/common/src/global-header-height/global-header-height-provider.service.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Injectable } from '@angular/core';
2+
3+
@Injectable({ providedIn: 'root' })
4+
export class GlobalHeaderHeightProviderService {
5+
protected headerHeight: string = '56px';
6+
7+
public get globalHeaderHeight(): string {
8+
return this.headerHeight;
9+
}
10+
}

‎projects/common/src/public-api.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,3 +127,6 @@ export * from './utilities/validators';
127127

128128
// Color Palette
129129
export * from './color/color-palette';
130+
131+
// Global header height provider
132+
export * from './global-header-height/global-header-height-provider.service';

‎projects/components/src/header/application/application-header.component.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { ChangeDetectionStrategy, Component, Inject, Input } from '@angular/core';
1+
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
22
import {
33
ApplicationFeature,
44
FeatureState,
55
FeatureStateResolver,
6-
GLOBAL_HEADER_HEIGHT,
6+
GlobalHeaderHeightProviderService,
77
NavigationService
88
} from '@hypertrace/common';
99
import { Observable } from 'rxjs';
@@ -14,7 +14,7 @@ import { map } from 'rxjs/operators';
1414
changeDetection: ChangeDetectionStrategy.OnPush,
1515
styleUrls: ['./application-header.component.scss'],
1616
template: `
17-
<div class="ht-header" [style.height]="this.height">
17+
<div class="ht-header" [style.height]="this.headerHeightProvider.globalHeaderHeight">
1818
<div class="left-side">
1919
<div class="logo" (click)="this.onLogoClick()">
2020
<ng-content select="[logo]"></ng-content>
@@ -43,7 +43,7 @@ export class ApplicationHeaderComponent {
4343
public pageLevelTimeRangeDisabled$: Observable<boolean>;
4444

4545
public constructor(
46-
@Inject(GLOBAL_HEADER_HEIGHT) public readonly height: string,
46+
public readonly headerHeightProvider: GlobalHeaderHeightProviderService,
4747
private readonly navigationService: NavigationService,
4848
private readonly featureStateResolver: FeatureStateResolver
4949
) {

‎projects/components/src/overlay/overlay.service.test.ts‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
22
import { fakeAsync, flush } from '@angular/core/testing';
33
import { IconLibraryTestingModule } from '@hypertrace/assets-library';
4-
import { GLOBAL_HEADER_HEIGHT, NavigationService } from '@hypertrace/common';
4+
import { GlobalHeaderHeightProviderService, NavigationService } from '@hypertrace/common';
55
import { OverlayService, SheetRef, SheetSize } from '@hypertrace/components';
66
import { createHostFactory, mockProvider } from '@ngneat/spectator/jest';
77
import { EMPTY } from 'rxjs';
@@ -33,10 +33,9 @@ describe('Overlay service', () => {
3333
mockProvider(NavigationService, {
3434
navigation$: EMPTY
3535
}),
36-
{
37-
provide: GLOBAL_HEADER_HEIGHT,
38-
useValue: 100
39-
}
36+
mockProvider(GlobalHeaderHeightProviderService, {
37+
globalHeaderHeight: '56px'
38+
})
4039
],
4140
template: `<host></host>`
4241
});

‎projects/components/src/overlay/sheet/sheet-overlay.component.test.ts‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { ChangeDetectionStrategy, Component, Inject, Injector, Optional } from '@angular/core';
22
import {
33
ExternalNavigationWindowHandling,
4-
GLOBAL_HEADER_HEIGHT,
4+
GlobalHeaderHeightProviderService,
55
LayoutChangeService,
66
NavigationParamsType
77
} from '@hypertrace/common';
@@ -38,10 +38,9 @@ describe('Sheet Overlay component', () => {
3838
</ht-sheet-overlay>
3939
`,
4040
providers: [
41-
{
42-
provide: GLOBAL_HEADER_HEIGHT,
43-
useValue: 20
44-
},
41+
mockProvider(GlobalHeaderHeightProviderService, {
42+
globalHeaderHeight: '56px'
43+
}),
4544
mockProvider(LayoutChangeService)
4645
]
4746
});

‎projects/components/src/overlay/sheet/sheet-overlay.component.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ChangeDetectionStrategy, Component, HostListener, Inject, Injector, TemplateRef, Type } from '@angular/core';
22
import { IconType } from '@hypertrace/assets-library';
3-
import { ExternalNavigationParams, GLOBAL_HEADER_HEIGHT, LayoutChangeService } from '@hypertrace/common';
3+
import { ExternalNavigationParams, GlobalHeaderHeightProviderService, LayoutChangeService } from '@hypertrace/common';
44
import { ButtonStyle } from '../../button/button';
55
import { IconSize } from '../../icon/icon-size';
66
import { PopoverFixedPositionLocation, POPOVER_DATA } from '../../popover/popover';
@@ -71,8 +71,8 @@ export class SheetOverlayComponent {
7171

7272
public constructor(
7373
private readonly popoverRef: PopoverRef,
74+
private readonly globalHeaderHeightProvider: GlobalHeaderHeightProviderService,
7475
@Inject(POPOVER_DATA) sheetData: SheetConstructionData,
75-
@Inject(GLOBAL_HEADER_HEIGHT) globalHeaderHeight: string,
7676
layoutChange: LayoutChangeService
7777
) {
7878
const sheetConfig: SheetOverlayConfig = sheetData.config;
@@ -85,7 +85,9 @@ export class SheetOverlayComponent {
8585

8686
this.isComponentSheet = !(sheetConfig.content instanceof TemplateRef);
8787
this.renderer = sheetConfig.content;
88-
this.popoverRef.height(this.getHeightForPopover(globalHeaderHeight, sheetConfig.position));
88+
this.popoverRef.height(
89+
this.getHeightForPopover(this.globalHeaderHeightProvider.globalHeaderHeight, sheetConfig.position)
90+
);
8991
this.setWidth();
9092
this.navigationParams = sheetConfig.pageNavParams;
9193
this.rendererInjector = Injector.create({

‎projects/components/src/popover/popover-position-builder.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ConnectionPositionPair, GlobalPositionStrategy, Overlay, PositionStrategy } from '@angular/cdk/overlay';
2-
import { Inject, Injectable, Optional } from '@angular/core';
3-
import { assertUnreachable, GLOBAL_HEADER_HEIGHT } from '@hypertrace/common';
2+
import { Injectable } from '@angular/core';
3+
import { assertUnreachable, GlobalHeaderHeightProviderService } from '@hypertrace/common';
44
import {
55
PopoverFixedPosition,
66
PopoverFixedPositionLocation,
@@ -15,7 +15,7 @@ import { MousePositionStrategy } from './position-strategy/mouse-position-strate
1515
export class PopoverPositionBuilder {
1616
public constructor(
1717
private readonly overlay: Overlay,
18-
@Optional() @Inject(GLOBAL_HEADER_HEIGHT) private readonly headerHeight?: string
18+
private readonly headerHeightProvider: GlobalHeaderHeightProviderService
1919
) {}
2020

2121
public buildPositionStrategy(position: PopoverPosition): PositionStrategy | undefined {
@@ -116,7 +116,7 @@ export class PopoverPositionBuilder {
116116
.top(`${popoverPosition.customLocation!.y}px`);
117117
case PopoverFixedPositionLocation.RightUnderHeader:
118118
default:
119-
return globalPosition.right('0').top(this.headerHeight ?? '0');
119+
return globalPosition.right('0').top(this.headerHeightProvider.globalHeaderHeight ?? '0');
120120
}
121121
}
122122
}

‎src/app/config.module.ts‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { NgModule } from '@angular/core';
2-
import { ALTERNATE_COLOR_PALETTES, APP_TITLE, DEFAULT_COLOR_PALETTE, GLOBAL_HEADER_HEIGHT } from '@hypertrace/common';
2+
import { ALTERNATE_COLOR_PALETTES, APP_TITLE, DEFAULT_COLOR_PALETTE } from '@hypertrace/common';
33
import { GRAPHQL_OPTIONS } from '@hypertrace/graphql-client';
44
import { ENTITY_METADATA, RED_COLOR_PALETTE } from '@hypertrace/observability';
55
import { environment } from '../environments/environment';
@@ -16,10 +16,6 @@ import { FeatureResolverModule } from './shared/feature-resolver/feature-resolve
1616
batchSize: 5
1717
}
1818
},
19-
{
20-
provide: GLOBAL_HEADER_HEIGHT,
21-
useValue: '56px'
22-
},
2319
{
2420
provide: DEFAULT_COLOR_PALETTE,
2521
useValue: {

0 commit comments

Comments
 (0)