From 7e4b82772c01b191a6595d540ea693b5d126ce3e Mon Sep 17 00:00:00 2001 From: Arjunlal B Date: Tue, 25 Aug 2020 17:23:33 +0530 Subject: [PATCH 1/5] feat: add support for styling widgets --- .../assets/styles/_color-palette.scss | 4 ++++ .../layout/auto/auto-container-layout.model.ts | 1 + .../layout/container-layout.component.scss | 12 ++++++++++++ .../container/layout/container-layout.component.ts | 2 +- .../widgets/container/layout/container-layout.ts | 13 +++++++++++++ .../layout/custom/custom-container-layout.model.ts | 1 + .../src/widgets/container/layout/widget-theme.ts | 4 ++++ 7 files changed, 36 insertions(+), 1 deletion(-) create mode 100644 projects/dashboards/src/widgets/container/layout/widget-theme.ts diff --git a/projects/assets-library/assets/styles/_color-palette.scss b/projects/assets-library/assets/styles/_color-palette.scss index 0790ee0..795b921 100644 --- a/projects/assets-library/assets/styles/_color-palette.scss +++ b/projects/assets-library/assets/styles/_color-palette.scss @@ -116,3 +116,7 @@ $color-text-emphasis: $blue-5; // Elements $color-border: $gray-2; + +// Background colors for widgets +$widget-background-dark: linear-gradient(283.16deg, $gray-1 0%, rgba(244, 245, 245, 0.62) 100%);; +$widget-background-light : white; diff --git a/projects/dashboards/src/widgets/container/layout/auto/auto-container-layout.model.ts b/projects/dashboards/src/widgets/container/layout/auto/auto-container-layout.model.ts index fea1451..ea07c13 100644 --- a/projects/dashboards/src/widgets/container/layout/auto/auto-container-layout.model.ts +++ b/projects/dashboards/src/widgets/container/layout/auto/auto-container-layout.model.ts @@ -41,6 +41,7 @@ export class AutoContainerLayoutModel extends ContainerLayout { columns: `repeat(${gridDimension[1]}, minmax(${this.minColumnWidth}px, 1fr))`, gap: `${this.gridGap}`, enableStyle: this.enableStyle, + widgetTheme: this.widgetTheme, children: children.map(child => ({ model: child, areaSpan: '' })) }; } diff --git a/projects/dashboards/src/widgets/container/layout/container-layout.component.scss b/projects/dashboards/src/widgets/container/layout/container-layout.component.scss index 84f9d5b..4b93eaa 100644 --- a/projects/dashboards/src/widgets/container/layout/container-layout.component.scss +++ b/projects/dashboards/src/widgets/container/layout/container-layout.component.scss @@ -1,3 +1,5 @@ +@import 'color-palette'; + :host { width: 100%; height: 100%; @@ -9,3 +11,13 @@ box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.14), 0px 2px 2px rgba(0, 0, 0, 0.12), 0px 1px 3px rgba(0, 0, 0, 0.2); padding: 0 16px; } + +.dark { + background: $widget-background-dark; + border: 1px solid $gray-1; + box-shadow: inset 2px 2px 12px rgba(225, 228, 229, 0.24); +} + +.light { + background-color: $widget-background-light; +} diff --git a/projects/dashboards/src/widgets/container/layout/container-layout.component.ts b/projects/dashboards/src/widgets/container/layout/container-layout.component.ts index 3d6630a..00a3a3c 100644 --- a/projects/dashboards/src/widgets/container/layout/container-layout.component.ts +++ b/projects/dashboards/src/widgets/container/layout/container-layout.component.ts @@ -12,7 +12,7 @@ export const CONTAINER_LAYOUT = new InjectionToken('CONTAIN
diff --git a/projects/dashboards/src/widgets/container/layout/container-layout.ts b/projects/dashboards/src/widgets/container/layout/container-layout.ts index 977133a..abdab85 100644 --- a/projects/dashboards/src/widgets/container/layout/container-layout.ts +++ b/projects/dashboards/src/widgets/container/layout/container-layout.ts @@ -1,6 +1,8 @@ import { ComponentFactoryResolver, Injector, Type, ViewContainerRef } from '@angular/core'; import { BOOLEAN_PROPERTY, ModelProperty, STRING_PROPERTY } from '@hypertrace/hyperdash'; +import { EnumPropertyTypeInstance, ENUM_TYPE } from '../../../properties/enums/enum-property-type'; import { ContainerLayoutComponent, CONTAINER_LAYOUT } from './container-layout.component'; +import { WidgetTheme } from './widget-theme'; // Make abstract so it exists at runtime and can be used by the dashboard system export abstract class ContainerLayout { @@ -20,6 +22,16 @@ export abstract class ContainerLayout { }) public gridGap: string = '16px'; + @ModelProperty({ + key: 'widget-theme', + type: { + key: ENUM_TYPE.type, + values: [WidgetTheme.Dark, WidgetTheme.Light] + } as EnumPropertyTypeInstance, + required: false + }) + public widgetTheme: WidgetTheme = WidgetTheme.Light; + public abstract getContainerLayoutData(children: object[]): ContainerLayoutData; public draw(containerRef: ViewContainerRef, children: object[]): void { @@ -59,5 +71,6 @@ export interface ContainerLayoutData { rows?: string; columns: string; enableStyle: boolean; + widgetTheme: WidgetTheme; children: ContainerLayoutChildData[]; } diff --git a/projects/dashboards/src/widgets/container/layout/custom/custom-container-layout.model.ts b/projects/dashboards/src/widgets/container/layout/custom/custom-container-layout.model.ts index 3ddd1db..1cd694e 100644 --- a/projects/dashboards/src/widgets/container/layout/custom/custom-container-layout.model.ts +++ b/projects/dashboards/src/widgets/container/layout/custom/custom-container-layout.model.ts @@ -34,6 +34,7 @@ export class CustomContainerLayoutModel extends ContainerLayout { columns: this.getColumnStyles(), gap: `${this.gridGap}`, enableStyle: this.enableStyle, + widgetTheme: this.widgetTheme, children: this.getChildLayoutData(children) }; } diff --git a/projects/dashboards/src/widgets/container/layout/widget-theme.ts b/projects/dashboards/src/widgets/container/layout/widget-theme.ts new file mode 100644 index 0000000..fffe6a5 --- /dev/null +++ b/projects/dashboards/src/widgets/container/layout/widget-theme.ts @@ -0,0 +1,4 @@ +export enum WidgetTheme { + Dark = 'dark', + Light = 'light' +} From 20532a9e4e475d760643499b358f8c1fe239e4bc Mon Sep 17 00:00:00 2001 From: Arjunlal B Date: Tue, 25 Aug 2020 17:49:58 +0530 Subject: [PATCH 2/5] fix: fix lint error --- .../dashboards/src/widgets/container/layout/container-layout.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/dashboards/src/widgets/container/layout/container-layout.ts b/projects/dashboards/src/widgets/container/layout/container-layout.ts index abdab85..f2bc5f4 100644 --- a/projects/dashboards/src/widgets/container/layout/container-layout.ts +++ b/projects/dashboards/src/widgets/container/layout/container-layout.ts @@ -24,6 +24,7 @@ export abstract class ContainerLayout { @ModelProperty({ key: 'widget-theme', + // tslint:disable-next-line: no-object-literal-type-assertion type: { key: ENUM_TYPE.type, values: [WidgetTheme.Dark, WidgetTheme.Light] From cfd22360abab2a7fb16a7eed16367256800de003 Mon Sep 17 00:00:00 2001 From: Arjunlal B Date: Tue, 25 Aug 2020 17:56:10 +0530 Subject: [PATCH 3/5] fix: fix lint error in scss file --- projects/assets-library/assets/styles/_color-palette.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/assets-library/assets/styles/_color-palette.scss b/projects/assets-library/assets/styles/_color-palette.scss index 795b921..947723a 100644 --- a/projects/assets-library/assets/styles/_color-palette.scss +++ b/projects/assets-library/assets/styles/_color-palette.scss @@ -119,4 +119,4 @@ $color-border: $gray-2; // Background colors for widgets $widget-background-dark: linear-gradient(283.16deg, $gray-1 0%, rgba(244, 245, 245, 0.62) 100%);; -$widget-background-light : white; +$widget-background-light: white; From e5b18b47d028a7a55aaa31f70066d258ef87652f Mon Sep 17 00:00:00 2001 From: Arjunlal B Date: Tue, 25 Aug 2020 18:03:53 +0530 Subject: [PATCH 4/5] fix: use specific theme names instead of dark/light --- projects/assets-library/assets/styles/_color-palette.scss | 4 ++-- .../container/layout/container-layout.component.scss | 8 ++++---- .../src/widgets/container/layout/container-layout.ts | 4 ++-- .../src/widgets/container/layout/widget-theme.ts | 4 ++-- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/projects/assets-library/assets/styles/_color-palette.scss b/projects/assets-library/assets/styles/_color-palette.scss index 947723a..e38fe20 100644 --- a/projects/assets-library/assets/styles/_color-palette.scss +++ b/projects/assets-library/assets/styles/_color-palette.scss @@ -118,5 +118,5 @@ $color-text-emphasis: $blue-5; $color-border: $gray-2; // Background colors for widgets -$widget-background-dark: linear-gradient(283.16deg, $gray-1 0%, rgba(244, 245, 245, 0.62) 100%);; -$widget-background-light: white; +$widget-background-gray: linear-gradient(283.16deg, $gray-1 0%, rgba(244, 245, 245, 0.62) 100%);; +$widget-background-white: white; diff --git a/projects/dashboards/src/widgets/container/layout/container-layout.component.scss b/projects/dashboards/src/widgets/container/layout/container-layout.component.scss index 4b93eaa..24ea662 100644 --- a/projects/dashboards/src/widgets/container/layout/container-layout.component.scss +++ b/projects/dashboards/src/widgets/container/layout/container-layout.component.scss @@ -12,12 +12,12 @@ padding: 0 16px; } -.dark { - background: $widget-background-dark; +.gray { + background: $widget-background-gray; border: 1px solid $gray-1; box-shadow: inset 2px 2px 12px rgba(225, 228, 229, 0.24); } -.light { - background-color: $widget-background-light; +.white { + background-color: $widget-background-white; } diff --git a/projects/dashboards/src/widgets/container/layout/container-layout.ts b/projects/dashboards/src/widgets/container/layout/container-layout.ts index f2bc5f4..859530a 100644 --- a/projects/dashboards/src/widgets/container/layout/container-layout.ts +++ b/projects/dashboards/src/widgets/container/layout/container-layout.ts @@ -27,11 +27,11 @@ export abstract class ContainerLayout { // tslint:disable-next-line: no-object-literal-type-assertion type: { key: ENUM_TYPE.type, - values: [WidgetTheme.Dark, WidgetTheme.Light] + values: [WidgetTheme.Gray, WidgetTheme.White] } as EnumPropertyTypeInstance, required: false }) - public widgetTheme: WidgetTheme = WidgetTheme.Light; + public widgetTheme: WidgetTheme = WidgetTheme.White; public abstract getContainerLayoutData(children: object[]): ContainerLayoutData; diff --git a/projects/dashboards/src/widgets/container/layout/widget-theme.ts b/projects/dashboards/src/widgets/container/layout/widget-theme.ts index fffe6a5..cde5bdc 100644 --- a/projects/dashboards/src/widgets/container/layout/widget-theme.ts +++ b/projects/dashboards/src/widgets/container/layout/widget-theme.ts @@ -1,4 +1,4 @@ export enum WidgetTheme { - Dark = 'dark', - Light = 'light' + Gray = 'gray', + White = 'white' } From 465ea97b0d67713d60d5b5afadc241637e70df44 Mon Sep 17 00:00:00 2001 From: Arjunlal B Date: Tue, 25 Aug 2020 21:34:09 +0530 Subject: [PATCH 5/5] fix: lint error --- projects/assets-library/assets/styles/_color-palette.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/assets-library/assets/styles/_color-palette.scss b/projects/assets-library/assets/styles/_color-palette.scss index e38fe20..f828890 100644 --- a/projects/assets-library/assets/styles/_color-palette.scss +++ b/projects/assets-library/assets/styles/_color-palette.scss @@ -118,5 +118,5 @@ $color-text-emphasis: $blue-5; $color-border: $gray-2; // Background colors for widgets -$widget-background-gray: linear-gradient(283.16deg, $gray-1 0%, rgba(244, 245, 245, 0.62) 100%);; +$widget-background-gray: linear-gradient(283.16deg, $gray-1 0%, rgba(244, 245, 245, 0.62) 100%); $widget-background-white: white;