From 508ac4148b0fbbd92ff61eb44882ed5c764b083c Mon Sep 17 00:00:00 2001 From: Shivam Anand Date: Fri, 8 Apr 2022 16:54:28 +0530 Subject: [PATCH 1/2] feature/RMA-94761 : Custom theme Color Palette. --- package-lock.json | 8 ++ package.json | 1 + .../dxc-theme-palette.component.html | 89 ++++++++++++++----- .../dxc-theme-palette.component.scss | 11 ++- .../dxc-theme-palette.component.ts | 31 ++++++- .../dxc-theme-palette.module.ts | 4 +- .../lib/models/startup/configuration.model.ts | 2 +- 7 files changed, 118 insertions(+), 28 deletions(-) diff --git a/package-lock.json b/package-lock.json index 88e1f6aeb..13b87198a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13717,6 +13717,14 @@ "tslib": "^2.0.0" } }, + "ngx-color-picker": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-10.1.0.tgz", + "integrity": "sha512-Q3BILkQP+l+dcX0joe7+xuHDKydhGnG09sUG1FmlLZFYIEX4+AQqHULh+hUAci8kZlLZuOG+mB2Uq54QYadItw==", + "requires": { + "tslib": "^2.0.0" + } + }, "ngx-cookie-service": { "version": "10.1.1", "resolved": "https://registry.npmjs.org/ngx-cookie-service/-/ngx-cookie-service-10.1.1.tgz", diff --git a/package.json b/package.json index 045839868..254b9b7bb 100644 --- a/package.json +++ b/package.json @@ -64,6 +64,7 @@ "moment": "^2.24.0", "ng-packagr": "^10.1.0", "ng2-charts": "^2.4.3", + "ngx-color-picker": "^10.0.1", "ngx-cookie-service": "^10.0.1", "ngx-infinite-scroll": "^9.0.0", "ngx-material-timepicker": "^5.5.3", diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.html b/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.html index 9b82ab4aa..554641c39 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.html +++ b/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.html @@ -1,43 +1,49 @@
+ (keydown)="startKeyPress($event)" [attr.aria-label]="themePaletteLabel" role="{{enablePopupMode ? 'dialog' : 'region'" + #dialogstart> - - close - + [attr.aria-label]="closeLabel" class="mr-2 view-icon closeIcon menuclose float-right" [matTooltip]="closeLabel" + (click)="closeThemePalette()"> + + close +
- + wb_sunny - - + + + nightlight_round - + blur_off - + blur_on -
+

{{backgroundLabel}}

+ *ngFor="let bg of themeInfo.backgrounds; let i = index" (click)="changeBackground(i)" + (keyup.enter)="changeBackground(i)" class="theme-bg">
-

{{label}}

-
+ {{labelDefault}} + + + {{labelCustom}} +
+ [hidden]="colors.color?.custom == true" class="theme-color">
+ + +
+ + + + + + + + + + + + +
+ +
- -
-
-
+
\ No newline at end of file diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.scss b/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.scss index a0188f827..5af01521f 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.scss +++ b/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.scss @@ -79,4 +79,13 @@ .mat-icon-theme-selected-color { color: var(--selected-icon-color) !important; } - \ No newline at end of file + +.space-span { + margin-left:10px; +} + +.set-circle{ + justify-content: center; +} + + diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.ts index b2f9d4f0a..bb6bd448f 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.ts @@ -14,7 +14,7 @@ import { IThemeInfo } from '../models/startup/configuration.model'; export class DxcThemePaletteComponent implements OnInit, AfterViewInit, OnDestroy { @Input('isThemeOpen') isThemeOpen: boolean = false; - + //@Input('themeColors') themeColors: { 'color': { 'primary': string, 'effect': string }, active: boolean }[] = null; //@Input('selectedThemeColor') selectedThemeColor: { [key: string]: any } = {}; //@Input('themeBackgrounds') themeBackgrounds: { 'id': string, 'title': string, 'background': string, 'active': boolean }[] = null; @@ -25,7 +25,8 @@ export class DxcThemePaletteComponent implements OnInit, AfterViewInit, OnDestro @Input('enablePopupMode') enablePopupMode: boolean = true; @Input('tabIndexValue') tabIndexValue: number = 0; @Input('showThemeToggle') showThemeToggle: boolean = true; - @Input('label') label: string = ''; + @Input('labelDefault') labelDefault: string = ''; + @Input('labelCustom') labelCustom: string = ''; @Input('backgroundLabel') backgroundLabel: string = ''; @Input('switchLabel') switchLabel: string = ''; @Input('backgroundSwitchLabel') backgroundSwitchLabel: string = ''; @@ -34,9 +35,12 @@ export class DxcThemePaletteComponent implements OnInit, AfterViewInit, OnDestro @Input('colorShades') colorShades: Array = []; @Input() border: boolean = false; @Input() public disabled: boolean = false; - + // isCustomMode: boolean = false; + colorIndex: number = 0; @Output() themeChanged: EventEmitter<{ 'themeInfo': IThemeInfo, 'shades': any[] }> = new EventEmitter<{ 'themeInfo': IThemeInfo, 'shades': any[] }>(); @Output() themeOpenChanged: EventEmitter = new EventEmitter(); + @Output() customThemeSelected: EventEmitter = new EventEmitter(); + @Input() isCustomThemeSelected:boolean = false; // @Output() transparencyModeChanged: EventEmitter = new EventEmitter(); // @Output() backgroundChange: EventEmitter = new EventEmitter(); // @Output() themeColorChanged: EventEmitter = new EventEmitter(); @@ -138,6 +142,27 @@ export class DxcThemePaletteComponent implements OnInit, AfterViewInit, OnDestro } } + customColor(event) { + this.colorIndex = event == true ? this.themeInfo.themeColors.findIndex(colorsObj => colorsObj.active == true) : this.colorIndex; + this.isCustomThemeSelected = event; + this.themeInfo.themeColors.forEach((colorObj, index) => { + colorObj.active = this.isCustomThemeSelected == true && colorObj.color?.custom == true ? true : this.isCustomThemeSelected != true && index == this.colorIndex ? true : false; + }); + this.customThemeSelected.emit(this.isCustomThemeSelected); + this.emitEvent(); + } + + onPrimaryColor(index: any, event: any): void { + this.themeInfo.themeColors[index].color.primary = event?.color; + this.themeInfo.themeColors[index].color.effect = this.complexThemeBindingStrategy.setOpacity(event?.color, 0.4); + this.emitEvent(); + } + + onEffectColor(index: any, event: any): void { + this.themeInfo.themeColors[index].color.effect = event?.color; + this.emitEvent(); + } + endFocus($event: any) { if (this.enablePopupMode) { if (this.dialogstart.nativeElement.focus) diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.module.ts b/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.module.ts index edfc72dfa..ac65fefdc 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.module.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.module.ts @@ -2,6 +2,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { DxcThemePaletteComponent } from './dxc-theme-palette.component'; import { DxcSwitchModule } from '../dxc-switch/dxc-switch.module'; +import { ColorPickerModule } from 'ngx-color-picker'; import { MatTooltipModule } from '@angular/material/tooltip' import { MatIconModule } from '@angular/material/icon' import { DxcSafeModule } from '../directives/pipes/safe/dxc-safe.module' @@ -12,7 +13,8 @@ import { DxcSafeModule } from '../directives/pipes/safe/dxc-safe.module' DxcSwitchModule, MatTooltipModule, MatIconModule, - DxcSafeModule + DxcSafeModule, + ColorPickerModule ], exports: [DxcThemePaletteComponent] }) diff --git a/projects/dxc-ngx-cdk/src/lib/models/startup/configuration.model.ts b/projects/dxc-ngx-cdk/src/lib/models/startup/configuration.model.ts index dad5784aa..c25ae6742 100644 --- a/projects/dxc-ngx-cdk/src/lib/models/startup/configuration.model.ts +++ b/projects/dxc-ngx-cdk/src/lib/models/startup/configuration.model.ts @@ -9,7 +9,7 @@ import { BehaviorSubject } from 'rxjs'; export interface IThemeInfo { "isDarkMode": boolean, "isTransparent": boolean, - "themeColors": { 'color': { 'primary': string, 'effect': string }, active: boolean } [], + "themeColors": { 'color': { 'primary': string, 'effect': string, 'custom'?: boolean}, active: boolean} [], "backgrounds": { 'id': string, 'title': string, 'background': string, 'active': boolean } [] } From 1ea6e51209e219ca532c55c88734928eec4a46fc Mon Sep 17 00:00:00 2001 From: Shivam Anand Date: Wed, 20 Apr 2022 18:11:50 +0530 Subject: [PATCH 2/2] issues fixed --- .../dxc-theme-palette.component.html | 15 +++--- .../dxc-theme-palette.component.scss | 1 + .../dxc-theme-palette.component.ts | 48 +++++++++++++++---- .../lib/models/startup/configuration.model.ts | 2 +- 4 files changed, 49 insertions(+), 17 deletions(-) diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.html b/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.html index 554641c39..51f25c566 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.html +++ b/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.html @@ -57,8 +57,8 @@
- {{labelDefault}} - + {{labelDefault}} + {{labelCustom}}
@@ -74,10 +74,8 @@
- -
- + - -
+ +
\ No newline at end of file diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.scss b/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.scss index 5af01521f..164bf935a 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.scss +++ b/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.scss @@ -80,6 +80,7 @@ color: var(--selected-icon-color) !important; } + .space-span { margin-left:10px; } diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.ts index bb6bd448f..9392c94a2 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.ts @@ -1,4 +1,4 @@ -import { Component, Inject, OnInit, Output, EventEmitter, Input, ViewChild, ElementRef, AfterViewInit, HostListener, HostBinding, ChangeDetectorRef, OnDestroy, SimpleChanges } from '@angular/core'; +import { Component, Inject, OnInit, Output, EventEmitter, Input, ViewChild, ElementRef, AfterViewInit, HostListener, HostBinding, ChangeDetectorRef, OnDestroy, SimpleChanges, OnChanges } from '@angular/core'; import { ComplexThemeBindingStrategy } from '../theme/complexThemeBindingStrategy'; import { css } from "emotion"; import { BehaviorSubject } from "rxjs"; @@ -12,7 +12,7 @@ import { IThemeInfo } from '../models/startup/configuration.model'; providers: [CssUtils, ComplexThemeBindingStrategy] }) -export class DxcThemePaletteComponent implements OnInit, AfterViewInit, OnDestroy { +export class DxcThemePaletteComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges { @Input('isThemeOpen') isThemeOpen: boolean = false; //@Input('themeColors') themeColors: { 'color': { 'primary': string, 'effect': string }, active: boolean }[] = null; @@ -25,22 +25,25 @@ export class DxcThemePaletteComponent implements OnInit, AfterViewInit, OnDestro @Input('enablePopupMode') enablePopupMode: boolean = true; @Input('tabIndexValue') tabIndexValue: number = 0; @Input('showThemeToggle') showThemeToggle: boolean = true; + @Input('label') label: string = ''; @Input('labelDefault') labelDefault: string = ''; @Input('labelCustom') labelCustom: string = ''; @Input('backgroundLabel') backgroundLabel: string = ''; @Input('switchLabel') switchLabel: string = ''; + @Input('colorLabel') colorLabel: string = ''; @Input('backgroundSwitchLabel') backgroundSwitchLabel: string = ''; @Input('themePaletteLabel') themePaletteLabel: string = ''; @Input('closeLabel') closeLabel: string = ''; @Input('colorShades') colorShades: Array = []; @Input() border: boolean = false; @Input() public disabled: boolean = false; - // isCustomMode: boolean = false; + + // isCustomMode: boolean = false; colorIndex: number = 0; @Output() themeChanged: EventEmitter<{ 'themeInfo': IThemeInfo, 'shades': any[] }> = new EventEmitter<{ 'themeInfo': IThemeInfo, 'shades': any[] }>(); @Output() themeOpenChanged: EventEmitter = new EventEmitter(); @Output() customThemeSelected: EventEmitter = new EventEmitter(); - @Input() isCustomThemeSelected:boolean = false; + // @Input() isCustomThemeSelected:boolean = false; // @Output() transparencyModeChanged: EventEmitter = new EventEmitter(); // @Output() backgroundChange: EventEmitter = new EventEmitter(); // @Output() themeColorChanged: EventEmitter = new EventEmitter(); @@ -56,7 +59,7 @@ export class DxcThemePaletteComponent implements OnInit, AfterViewInit, OnDestro if (this.enablePopupMode) this.closeThemePalette(); } - + isCustomThemeSelected: boolean = false; defaultInputs = new BehaviorSubject({ value: null, checked: false, @@ -83,6 +86,7 @@ export class DxcThemePaletteComponent implements OnInit, AfterViewInit, OnDestro ngOnInit(): void { // let selectedThemeColor = this.themeColors.filter((colors) => { return colors.active == true; }); // this.selectedThemeColor = selectedThemeColor.length > 0 ? selectedThemeColor[0].color : ''; + this.setCustomTheme(this.themeInfo); } public ngOnChanges(changes: SimpleChanges): void { @@ -92,6 +96,19 @@ export class DxcThemePaletteComponent implements OnInit, AfterViewInit, OnDestro }, {}); this.defaultInputs.next({ ...this.defaultInputs.getValue(), ...inputs }); this.className = `${this.getDynamicStyle(this.defaultInputs.getValue())}`; + if (JSON.stringify(changes.themeInfo?.currentValue) != JSON.stringify(changes.themeInfo?.previousValue)) { + this.setCustomTheme(changes.themeInfo?.currentValue); + } + } + + private setCustomTheme(themeInfo: IThemeInfo) { + let customColorIndex = themeInfo.themeColors.findIndex(colorsObj => colorsObj?.color?.custom == true); + let selectedColorIndex = themeInfo.themeColors.findIndex(colorsObj => colorsObj.active == true); + if (customColorIndex == selectedColorIndex && customColorIndex != -1) { + this.isCustomThemeSelected = true; + } else { + this.colorIndex = selectedColorIndex; + } } ngOnDestroy(): void { @@ -121,7 +138,9 @@ export class DxcThemePaletteComponent implements OnInit, AfterViewInit, OnDestro changeThemeColor = (index) => { this.themeInfo.themeColors.forEach(color => color.active = false); + let customColorIndex = this.themeInfo.themeColors.findIndex(colorsObj => colorsObj?.color?.custom == true); this.themeInfo.themeColors[index].active = true; + this.colorIndex = customColorIndex != index ? index : this.colorIndex; this.emitEvent(); } @@ -143,18 +162,18 @@ export class DxcThemePaletteComponent implements OnInit, AfterViewInit, OnDestro } customColor(event) { - this.colorIndex = event == true ? this.themeInfo.themeColors.findIndex(colorsObj => colorsObj.active == true) : this.colorIndex; + let selectedColorIndex = this.themeInfo.themeColors.findIndex(colorsObj => colorsObj?.color?.custom != true && colorsObj.active == true); + this.colorIndex = event != true && selectedColorIndex > 0 ? selectedColorIndex : this.colorIndex; this.isCustomThemeSelected = event; this.themeInfo.themeColors.forEach((colorObj, index) => { colorObj.active = this.isCustomThemeSelected == true && colorObj.color?.custom == true ? true : this.isCustomThemeSelected != true && index == this.colorIndex ? true : false; }); - this.customThemeSelected.emit(this.isCustomThemeSelected); this.emitEvent(); } onPrimaryColor(index: any, event: any): void { this.themeInfo.themeColors[index].color.primary = event?.color; - this.themeInfo.themeColors[index].color.effect = this.complexThemeBindingStrategy.setOpacity(event?.color, 0.4); + this.themeInfo.themeColors[index].color.effect = this.hexToRgb(this.complexThemeBindingStrategy.setOpacity(event?.color, 0.4), 0.4); this.emitEvent(); } @@ -163,6 +182,8 @@ export class DxcThemePaletteComponent implements OnInit, AfterViewInit, OnDestro this.emitEvent(); } + + endFocus($event: any) { if (this.enablePopupMode) { if (this.dialogstart.nativeElement.focus) @@ -201,4 +222,15 @@ export class DxcThemePaletteComponent implements OnInit, AfterViewInit, OnDestro } this.themeChanged.emit({ 'themeInfo': this.themeInfo, 'shades': colorShadesList }); } + + private hexToRgb = (hex, opacity) => { + var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex.substring(0, 7)); + if(result){ + var r= parseInt(result[1], 16); + var g= parseInt(result[2], 16); + var b= parseInt(result[3], 16); + return `rgba(${r}, ${g}, ${b}, ${opacity})`; + } + return '#fffff'; + } } diff --git a/projects/dxc-ngx-cdk/src/lib/models/startup/configuration.model.ts b/projects/dxc-ngx-cdk/src/lib/models/startup/configuration.model.ts index c25ae6742..9d33d13fe 100644 --- a/projects/dxc-ngx-cdk/src/lib/models/startup/configuration.model.ts +++ b/projects/dxc-ngx-cdk/src/lib/models/startup/configuration.model.ts @@ -9,7 +9,7 @@ import { BehaviorSubject } from 'rxjs'; export interface IThemeInfo { "isDarkMode": boolean, "isTransparent": boolean, - "themeColors": { 'color': { 'primary': string, 'effect': string, 'custom'?: boolean}, active: boolean} [], + "themeColors": { 'color': { 'primary': string, 'effect': string, 'custom': boolean}, active: boolean} [], "backgrounds": { 'id': string, 'title': string, 'background': string, 'active': boolean } [] }