Skip to content

Commit f9af505

Browse files
anandtiwaryanandtiwary
authored
feat: adding an attachedTrigger with sheet overlay (#1382)
* feat: adding an attachedTrigger with sheet overlay * refactor: addressing review comments * refactor: setting default trigger collapsed view and updating width
1 parent f640c1a commit f9af505

File tree

5 files changed

+128
-50
lines changed

5 files changed

+128
-50
lines changed

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

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
@import 'color-palette';
22
@import 'font';
33

4+
$box-shadow: -3px 0px 24px rgba(0, 0, 0, 0.12), -1px 0px 8px rgba(0, 0, 0, 0.08);
5+
46
.sheet-overlay {
5-
box-shadow: -3px 1px 24px rgba(0, 0, 0, 0.12), -1px -1px 8px rgba(0, 0, 0, 0.08);
7+
box-shadow: $box-shadow;
68
border-radius: 16px 0 0 16px;
79
height: 100%;
10+
width: 100%;
811
overflow: hidden;
912

1013
padding: 24px;
@@ -13,26 +16,6 @@
1316
flex-direction: column;
1417
z-index: 1;
1518

16-
&.sheet-size-responsive-extra-large {
17-
width: 100%;
18-
}
19-
20-
&.sheet-size-small {
21-
width: 320px;
22-
}
23-
24-
&.sheet-size-medium {
25-
width: 600px;
26-
}
27-
28-
&.sheet-size-large {
29-
width: 840px;
30-
}
31-
32-
&.sheet-size-extra-large {
33-
width: 1280px;
34-
}
35-
3619
.header {
3720
display: flex;
3821
justify-content: space-between;
@@ -62,3 +45,24 @@
6245
}
6346
}
6447
}
48+
49+
.attached-trigger {
50+
cursor: pointer;
51+
box-shadow: $box-shadow;
52+
clip-path: inset(-20px -20px 0px -20px);
53+
background: white;
54+
width: 200px;
55+
height: 40px;
56+
transform: translate(calc(-50% - 20px), 0px) rotate(270deg);
57+
position: relative;
58+
top: -50%;
59+
border-radius: 6px;
60+
61+
display: flex;
62+
align-items: center;
63+
padding: 0px 12px;
64+
65+
.trigger-icon {
66+
margin-right: 14px;
67+
}
68+
}

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

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ describe('Sheet Overlay component', () => {
4848
provide: PopoverRef,
4949
useValue: {
5050
height: jest.fn(),
51+
width: jest.fn(),
5152
close: jest.fn()
5253
}
5354
},
@@ -86,11 +87,39 @@ describe('Sheet Overlay component', () => {
8687
expect(spectator.query('.header')).toHaveText('expected title');
8788
});
8889

89-
test('uses the requested size', () => {
90+
test('uses the requested size for small', () => {
91+
spectator = createConfiguredHost({
92+
size: SheetSize.Small
93+
});
94+
expect(spectator.inject(PopoverRef)?.width).toHaveBeenCalledWith('320px');
95+
});
96+
97+
test('uses the requested size for medium', () => {
98+
spectator = createConfiguredHost({
99+
size: SheetSize.Medium
100+
});
101+
expect(spectator.inject(PopoverRef)?.width).toHaveBeenCalledWith('600px');
102+
});
103+
104+
test('uses the requested size for large', () => {
90105
spectator = createConfiguredHost({
91106
size: SheetSize.Large
92107
});
93-
expect(spectator.query('.sheet-overlay')).toHaveClass('sheet-size-large');
108+
expect(spectator.inject(PopoverRef)?.width).toHaveBeenCalledWith('840px');
109+
});
110+
111+
test('uses the requested size for extra large', () => {
112+
spectator = createConfiguredHost({
113+
size: SheetSize.ExtraLarge
114+
});
115+
expect(spectator.inject(PopoverRef)?.width).toHaveBeenCalledWith('1280px');
116+
});
117+
118+
test('uses the requested size for responsive extra large', () => {
119+
spectator = createConfiguredHost({
120+
size: SheetSize.ResponsiveExtraLarge
121+
});
122+
expect(spectator.inject(PopoverRef)?.width).toHaveBeenCalledWith('60%');
94123
});
95124

96125
test('closes on close button click', () => {

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

Lines changed: 68 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, HostListener, Inject, Injector, Tem
22
import { IconType } from '@hypertrace/assets-library';
33
import { GLOBAL_HEADER_HEIGHT, LayoutChangeService } from '@hypertrace/common';
44
import { ButtonStyle } from '../../button/button';
5+
import { IconSize } from '../../icon/icon-size';
56
import { PopoverFixedPositionLocation, POPOVER_DATA } from '../../popover/popover';
67
import { PopoverRef } from '../../popover/popover-ref';
78
import { SheetConstructionData } from '../overlay.service';
@@ -12,29 +13,42 @@ import { SheetOverlayConfig, SheetSize } from './sheet';
1213
styleUrls: ['./sheet-overlay.component.scss'],
1314
changeDetection: ChangeDetectionStrategy.OnPush,
1415
template: `
15-
<div *ngIf="this.visible" class="sheet-overlay" [ngClass]="'sheet-size-' + this.size">
16-
<div *ngIf="this.showHeader" class="header">
17-
<h3 class="header-title">{{ sheetTitle }}</h3>
18-
<ht-button
19-
class="close-button"
20-
icon="${IconType.CloseCircle}"
21-
display="${ButtonStyle.Outlined}"
22-
htTooltip="Close Sheet"
23-
(click)="this.close()"
24-
>
25-
</ht-button>
16+
<ng-container *ngIf="this.visible">
17+
<div class="sheet-overlay">
18+
<ng-container *ngIf="!this.isViewCollapsed">
19+
<div *ngIf="this.showHeader" class="header">
20+
<h3 class="header-title">{{ sheetTitle }}</h3>
21+
<ht-button
22+
class="close-button"
23+
icon="${IconType.CloseCircle}"
24+
display="${ButtonStyle.Outlined}"
25+
htTooltip="Close Sheet"
26+
(click)="this.close()"
27+
>
28+
</ht-button>
29+
</div>
30+
<div class="content-wrapper">
31+
<div class="content">
32+
<ng-container *ngIf="this.isComponentSheet; else templateRenderer">
33+
<ng-container *ngComponentOutlet="this.renderer; injector: this.rendererInjector"></ng-container>
34+
</ng-container>
35+
<ng-template #templateRenderer>
36+
<ng-container *ngTemplateOutlet="this.renderer"></ng-container>
37+
</ng-template>
38+
</div>
39+
</div>
40+
</ng-container>
2641
</div>
27-
<div class="content-wrapper">
28-
<div class="content">
29-
<ng-container *ngIf="this.isComponentSheet; else templateRenderer">
30-
<ng-container *ngComponentOutlet="this.renderer; injector: this.rendererInjector"></ng-container>
31-
</ng-container>
32-
<ng-template #templateRenderer>
33-
<ng-container *ngTemplateOutlet="this.renderer"></ng-container>
34-
</ng-template>
35-
</div>
42+
<div class="attached-trigger" *ngIf="!!this.attachedTriggerTemplate" (click)="this.toggleCollapseExpand()">
43+
<ht-icon
44+
class="trigger-icon"
45+
icon="{{ this.isViewCollapsed ? '${IconType.ChevronUp}' : '${IconType.ChevronDown}' }}"
46+
size="${IconSize.Small}"
47+
htTooltip="{{ this.isViewCollapsed ? 'Expand Sheet' : 'Collapse Sheet' }}"
48+
></ht-icon>
49+
<ng-container *ngTemplateOutlet="this.attachedTriggerTemplate"></ng-container>
3650
</div>
37-
</div>
51+
</ng-container>
3852
`
3953
})
4054
export class SheetOverlayComponent {
@@ -46,6 +60,8 @@ export class SheetOverlayComponent {
4660
public readonly rendererInjector: Injector;
4761
public visible: boolean = true;
4862
public readonly closeOnEscape: boolean;
63+
public readonly attachedTriggerTemplate?: TemplateRef<unknown>;
64+
public isViewCollapsed: boolean;
4965

5066
public constructor(
5167
private readonly popoverRef: PopoverRef,
@@ -58,13 +74,13 @@ export class SheetOverlayComponent {
5874
this.sheetTitle = sheetConfig.title === undefined ? '' : sheetConfig.title;
5975
this.size = sheetConfig.size;
6076
this.closeOnEscape = sheetConfig.closeOnEscapeKey ?? true;
77+
this.attachedTriggerTemplate = sheetConfig.attachedTriggerTemplate;
78+
this.isViewCollapsed = !!this.attachedTriggerTemplate;
79+
6180
this.isComponentSheet = !(sheetConfig.content instanceof TemplateRef);
6281
this.renderer = sheetConfig.content;
6382
this.popoverRef.height(this.getHeightForPopover(globalHeaderHeight, sheetConfig.position));
64-
65-
if (this.size === SheetSize.ResponsiveExtraLarge) {
66-
this.popoverRef.width('60%');
67-
}
83+
this.setWidth();
6884

6985
this.rendererInjector = Injector.create({
7086
providers: [
@@ -89,6 +105,33 @@ export class SheetOverlayComponent {
89105
this.popoverRef.close();
90106
}
91107

108+
public toggleCollapseExpand(): void {
109+
this.isViewCollapsed = !this.isViewCollapsed;
110+
111+
this.setWidth();
112+
}
113+
114+
private setWidth(): void {
115+
this.popoverRef.width(this.isViewCollapsed ? '0px' : this.getWidthForPopover());
116+
}
117+
118+
private getWidthForPopover(): string {
119+
switch (this.size) {
120+
case SheetSize.Small:
121+
return '320px';
122+
case SheetSize.Medium:
123+
return '600px';
124+
case SheetSize.Large:
125+
return '840px';
126+
case SheetSize.ExtraLarge:
127+
return '1280px';
128+
case SheetSize.ResponsiveExtraLarge:
129+
return '60%';
130+
default:
131+
return '100%';
132+
}
133+
}
134+
92135
private getHeightForPopover(globalHeaderHeight: string, position?: PopoverFixedPositionLocation): string {
93136
return position === PopoverFixedPositionLocation.Right ? '100vh' : `calc(100vh - ${globalHeaderHeight})`;
94137
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import { CommonModule } from '@angular/common';
22
import { NgModule } from '@angular/core';
33
import { ButtonModule } from '../../button/button.module';
4+
import { IconModule } from '../../icon/icon.module';
45
import { TooltipModule } from '../../tooltip/tooltip.module';
56
import { SheetOverlayComponent } from './sheet-overlay.component';
67

78
@NgModule({
8-
imports: [CommonModule, ButtonModule, TooltipModule],
9+
imports: [CommonModule, ButtonModule, TooltipModule, IconModule],
910
declarations: [SheetOverlayComponent],
1011
exports: [SheetOverlayComponent]
1112
})

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { InjectionToken } from '@angular/core';
1+
import { InjectionToken, TemplateRef } from '@angular/core';
22
import { Observable } from 'rxjs';
33
import { PopoverFixedPositionLocation } from '../../popover/popover';
44
import { OverlayConfig } from './../overlay';
@@ -8,6 +8,7 @@ export interface SheetOverlayConfig<TData = unknown> extends OverlayConfig {
88
data?: TData;
99
position?: PopoverFixedPositionLocation.Right | PopoverFixedPositionLocation.RightUnderHeader;
1010
closeOnEscapeKey?: boolean;
11+
attachedTriggerTemplate?: TemplateRef<unknown>;
1112
}
1213

1314
export const enum SheetSize {

0 commit comments

Comments
 (0)