From 754aaaf2d2f6d419304d0b50a1ddd7b8e30151ad Mon Sep 17 00:00:00 2001 From: anandtiwary <52081890+anandtiwary@users.noreply.github.com> Date: Tue, 18 Jan 2022 12:38:23 -0800 Subject: [PATCH 1/3] feat: adding an attachedTrigger with sheet overlay --- .../sheet/sheet-overlay.component.scss | 35 ++++---- .../sheet/sheet-overlay.component.test.ts | 33 +++++++- .../overlay/sheet/sheet-overlay.component.ts | 81 +++++++++++++------ .../components/src/overlay/sheet/sheet.ts | 3 +- 4 files changed, 104 insertions(+), 48 deletions(-) diff --git a/projects/components/src/overlay/sheet/sheet-overlay.component.scss b/projects/components/src/overlay/sheet/sheet-overlay.component.scss index f0301234c..ec4f34fad 100644 --- a/projects/components/src/overlay/sheet/sheet-overlay.component.scss +++ b/projects/components/src/overlay/sheet/sheet-overlay.component.scss @@ -5,6 +5,7 @@ box-shadow: -3px 1px 24px rgba(0, 0, 0, 0.12), -1px -1px 8px rgba(0, 0, 0, 0.08); border-radius: 16px 0 0 16px; height: 100%; + width: 100%; overflow: hidden; padding: 24px; @@ -13,26 +14,6 @@ flex-direction: column; z-index: 1; - &.sheet-size-responsive-extra-large { - width: 100%; - } - - &.sheet-size-small { - width: 320px; - } - - &.sheet-size-medium { - width: 600px; - } - - &.sheet-size-large { - width: 840px; - } - - &.sheet-size-extra-large { - width: 1280px; - } - .header { display: flex; justify-content: space-between; @@ -62,3 +43,17 @@ } } } + +.attached-trigger { + cursor: pointer; + background: white; + width: 200px; + height: 40px; + transform: translate(calc(-50% - 20px), 0px) rotate(270deg); + position: relative; + top: -50%; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; +} diff --git a/projects/components/src/overlay/sheet/sheet-overlay.component.test.ts b/projects/components/src/overlay/sheet/sheet-overlay.component.test.ts index 5692f2d0c..1e4e18b70 100644 --- a/projects/components/src/overlay/sheet/sheet-overlay.component.test.ts +++ b/projects/components/src/overlay/sheet/sheet-overlay.component.test.ts @@ -48,6 +48,7 @@ describe('Sheet Overlay component', () => { provide: PopoverRef, useValue: { height: jest.fn(), + width: jest.fn(), close: jest.fn() } }, @@ -86,11 +87,39 @@ describe('Sheet Overlay component', () => { expect(spectator.query('.header')).toHaveText('expected title'); }); - test('uses the requested size', () => { + test('uses the requested size for small', () => { + spectator = createConfiguredHost({ + size: SheetSize.Small + }); + expect(spectator.inject(PopoverRef)?.width).toHaveBeenCalledWith('320px'); + }); + + test('uses the requested size for medium', () => { + spectator = createConfiguredHost({ + size: SheetSize.Medium + }); + expect(spectator.inject(PopoverRef)?.width).toHaveBeenCalledWith('600px'); + }); + + test('uses the requested size for large', () => { spectator = createConfiguredHost({ size: SheetSize.Large }); - expect(spectator.query('.sheet-overlay')).toHaveClass('sheet-size-large'); + expect(spectator.inject(PopoverRef)?.width).toHaveBeenCalledWith('840px'); + }); + + test('uses the requested size for extra large', () => { + spectator = createConfiguredHost({ + size: SheetSize.ExtraLarge + }); + expect(spectator.inject(PopoverRef)?.width).toHaveBeenCalledWith('1280px'); + }); + + test('uses the requested size for responsive extra large', () => { + spectator = createConfiguredHost({ + size: SheetSize.ResponsiveExtraLarge + }); + expect(spectator.inject(PopoverRef)?.width).toHaveBeenCalledWith('60%'); }); test('closes on close button click', () => { diff --git a/projects/components/src/overlay/sheet/sheet-overlay.component.ts b/projects/components/src/overlay/sheet/sheet-overlay.component.ts index f9f2e3937..cefd2945f 100644 --- a/projects/components/src/overlay/sheet/sheet-overlay.component.ts +++ b/projects/components/src/overlay/sheet/sheet-overlay.component.ts @@ -12,29 +12,36 @@ import { SheetOverlayConfig, SheetSize } from './sheet'; styleUrls: ['./sheet-overlay.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, template: ` -
-
-

{{ sheetTitle }}

- - + +
+ +
+

{{ sheetTitle }}

+ + +
+
+
+ + + + + + +
+
+
-
-
- - - - - - -
+
+
-
+ ` }) export class SheetOverlayComponent { @@ -46,6 +53,8 @@ export class SheetOverlayComponent { public readonly rendererInjector: Injector; public visible: boolean = true; public readonly closeOnEscape: boolean; + public readonly attachedTriggerTemplate?: TemplateRef; + public isViewCollapsed: boolean = false; public constructor( private readonly popoverRef: PopoverRef, @@ -58,13 +67,12 @@ export class SheetOverlayComponent { this.sheetTitle = sheetConfig.title === undefined ? '' : sheetConfig.title; this.size = sheetConfig.size; this.closeOnEscape = sheetConfig.closeOnEscapeKey ?? true; + this.attachedTriggerTemplate = sheetConfig.attachedTriggerTemplate; + this.isComponentSheet = !(sheetConfig.content instanceof TemplateRef); this.renderer = sheetConfig.content; this.popoverRef.height(this.getHeightForPopover(globalHeaderHeight, sheetConfig.position)); - - if (this.size === SheetSize.ResponsiveExtraLarge) { - this.popoverRef.width('60%'); - } + this.popoverRef.width(this.getWidthForPopover()); this.rendererInjector = Injector.create({ providers: [ @@ -89,6 +97,29 @@ export class SheetOverlayComponent { this.popoverRef.close(); } + public toggleCollapseExpand(): void { + this.isViewCollapsed = !this.isViewCollapsed; + + this.popoverRef.width(this.isViewCollapsed ? '0px' : this.getWidthForPopover()); + } + + private getWidthForPopover(): string { + switch (this.size) { + case SheetSize.Small: + return '320px'; + case SheetSize.Medium: + return '600px'; + case SheetSize.Large: + return '840px'; + case SheetSize.ExtraLarge: + return '1280px'; + case SheetSize.ResponsiveExtraLarge: + return '60%'; + default: + return '100%'; + } + } + private getHeightForPopover(globalHeaderHeight: string, position?: PopoverFixedPositionLocation): string { return position === PopoverFixedPositionLocation.Right ? '100vh' : `calc(100vh - ${globalHeaderHeight})`; } diff --git a/projects/components/src/overlay/sheet/sheet.ts b/projects/components/src/overlay/sheet/sheet.ts index c76cc2bf5..b6cf343ba 100644 --- a/projects/components/src/overlay/sheet/sheet.ts +++ b/projects/components/src/overlay/sheet/sheet.ts @@ -1,4 +1,4 @@ -import { InjectionToken } from '@angular/core'; +import { InjectionToken, TemplateRef } from '@angular/core'; import { Observable } from 'rxjs'; import { PopoverFixedPositionLocation } from '../../popover/popover'; import { OverlayConfig } from './../overlay'; @@ -8,6 +8,7 @@ export interface SheetOverlayConfig extends OverlayConfig { data?: TData; position?: PopoverFixedPositionLocation.Right | PopoverFixedPositionLocation.RightUnderHeader; closeOnEscapeKey?: boolean; + attachedTriggerTemplate?: TemplateRef; } export const enum SheetSize { From 5fc65089fd6e07601431db5488bfae70d1e416e3 Mon Sep 17 00:00:00 2001 From: anandtiwary <52081890+anandtiwary@users.noreply.github.com> Date: Tue, 18 Jan 2022 22:57:52 -0800 Subject: [PATCH 2/3] refactor: addressing review comments --- .../overlay/sheet/sheet-overlay.component.scss | 15 ++++++++++++--- .../src/overlay/sheet/sheet-overlay.component.ts | 7 +++++++ .../src/overlay/sheet/sheet-overlay.module.ts | 3 ++- 3 files changed, 21 insertions(+), 4 deletions(-) diff --git a/projects/components/src/overlay/sheet/sheet-overlay.component.scss b/projects/components/src/overlay/sheet/sheet-overlay.component.scss index ec4f34fad..35bee4c58 100644 --- a/projects/components/src/overlay/sheet/sheet-overlay.component.scss +++ b/projects/components/src/overlay/sheet/sheet-overlay.component.scss @@ -1,8 +1,10 @@ @import 'color-palette'; @import 'font'; +$box-shadow: -3px 0px 24px rgba(0, 0, 0, 0.12), -1px 0px 8px rgba(0, 0, 0, 0.08); + .sheet-overlay { - box-shadow: -3px 1px 24px rgba(0, 0, 0, 0.12), -1px -1px 8px rgba(0, 0, 0, 0.08); + box-shadow: $box-shadow; border-radius: 16px 0 0 16px; height: 100%; width: 100%; @@ -46,14 +48,21 @@ .attached-trigger { cursor: pointer; + box-shadow: $box-shadow; + clip-path: inset(-20px -20px 0px -20px); background: white; width: 200px; height: 40px; transform: translate(calc(-50% - 20px), 0px) rotate(270deg); position: relative; top: -50%; - border-radius: 4px; + border-radius: 6px; + display: flex; align-items: center; - justify-content: center; + padding: 0px 12px; + + .trigger-icon { + margin-right: 14px; + } } diff --git a/projects/components/src/overlay/sheet/sheet-overlay.component.ts b/projects/components/src/overlay/sheet/sheet-overlay.component.ts index cefd2945f..3199d7fea 100644 --- a/projects/components/src/overlay/sheet/sheet-overlay.component.ts +++ b/projects/components/src/overlay/sheet/sheet-overlay.component.ts @@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, HostListener, Inject, Injector, Tem import { IconType } from '@hypertrace/assets-library'; import { GLOBAL_HEADER_HEIGHT, LayoutChangeService } from '@hypertrace/common'; import { ButtonStyle } from '../../button/button'; +import { IconSize } from '../../icon/icon-size'; import { PopoverFixedPositionLocation, POPOVER_DATA } from '../../popover/popover'; import { PopoverRef } from '../../popover/popover-ref'; import { SheetConstructionData } from '../overlay.service'; @@ -39,6 +40,12 @@ import { SheetOverlayConfig, SheetSize } from './sheet';
+
diff --git a/projects/components/src/overlay/sheet/sheet-overlay.module.ts b/projects/components/src/overlay/sheet/sheet-overlay.module.ts index b3cb5887a..2a1d466eb 100644 --- a/projects/components/src/overlay/sheet/sheet-overlay.module.ts +++ b/projects/components/src/overlay/sheet/sheet-overlay.module.ts @@ -1,11 +1,12 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { ButtonModule } from '../../button/button.module'; +import { IconModule } from '../../icon/icon.module'; import { TooltipModule } from '../../tooltip/tooltip.module'; import { SheetOverlayComponent } from './sheet-overlay.component'; @NgModule({ - imports: [CommonModule, ButtonModule, TooltipModule], + imports: [CommonModule, ButtonModule, TooltipModule, IconModule], declarations: [SheetOverlayComponent], exports: [SheetOverlayComponent] }) From d60e6f792653e9151d65eec06d88769efbdade00 Mon Sep 17 00:00:00 2001 From: anandtiwary <52081890+anandtiwary@users.noreply.github.com> Date: Tue, 18 Jan 2022 23:38:57 -0800 Subject: [PATCH 3/3] refactor: setting default trigger collapsed view and updating width --- .../src/overlay/sheet/sheet-overlay.component.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/projects/components/src/overlay/sheet/sheet-overlay.component.ts b/projects/components/src/overlay/sheet/sheet-overlay.component.ts index 3199d7fea..29c4ae51f 100644 --- a/projects/components/src/overlay/sheet/sheet-overlay.component.ts +++ b/projects/components/src/overlay/sheet/sheet-overlay.component.ts @@ -61,7 +61,7 @@ export class SheetOverlayComponent { public visible: boolean = true; public readonly closeOnEscape: boolean; public readonly attachedTriggerTemplate?: TemplateRef; - public isViewCollapsed: boolean = false; + public isViewCollapsed: boolean; public constructor( private readonly popoverRef: PopoverRef, @@ -75,11 +75,12 @@ export class SheetOverlayComponent { this.size = sheetConfig.size; this.closeOnEscape = sheetConfig.closeOnEscapeKey ?? true; this.attachedTriggerTemplate = sheetConfig.attachedTriggerTemplate; + this.isViewCollapsed = !!this.attachedTriggerTemplate; this.isComponentSheet = !(sheetConfig.content instanceof TemplateRef); this.renderer = sheetConfig.content; this.popoverRef.height(this.getHeightForPopover(globalHeaderHeight, sheetConfig.position)); - this.popoverRef.width(this.getWidthForPopover()); + this.setWidth(); this.rendererInjector = Injector.create({ providers: [ @@ -107,6 +108,10 @@ export class SheetOverlayComponent { public toggleCollapseExpand(): void { this.isViewCollapsed = !this.isViewCollapsed; + this.setWidth(); + } + + private setWidth(): void { this.popoverRef.width(this.isViewCollapsed ? '0px' : this.getWidthForPopover()); }