Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/glass morphismlibchange #88

Merged
merged 2 commits into from
Jan 25, 2022
Merged

Feature/glass morphismlibchange #88

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
aba1d9f
Glassmorphism Changes
Shivam3266 Jan 11, 2022
660dfe0
feature/RMA-93183 glassmorphism theme color changes
Shivam3266 Jan 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions projects/dxc-ngx-cdk-examples/src/assets/themesProperties.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ export const darkTheme = {
'--border_color': '#666666',
'--search_font_color': '#ffffff',
'--icon_border_color': '#008ecc61',
'--icon_color': '#00a1c9',
'--icon_color': '#000000',
'--searchbackground': '#232223',
'--source-icon': '#00a1c9',
'--menupanel-arrowicon-color': '#444242',
Expand All @@ -214,7 +214,8 @@ export const darkTheme = {
'--landing_textcolor': '#fff',
'--button-secondaryOutlinedColor': '#008ecc',
'--button-secondaryHoverBackgroundColor': 'transparent',
'--button-secondaryActiveBackgroundColor': 'transparent'
'--button-secondaryActiveBackgroundColor': 'transparent',
'--selected-icon-color': '#000000'
}
};

Expand Down Expand Up @@ -415,7 +416,7 @@ export const lightTheme = {
'--border_color': '#D9D9D9',
'--search_font_color': '#666666',
'--icon_border_color': '#008ecc61',
'--icon_color': '#00a1c9',
'--icon_color': '#000000',
'--searchbackground': '#d7d7d7',
'--source-icon': '#00a1c9',
'--menupanel-arrowicon-color': '#c7bdbd',
Expand All @@ -434,6 +435,7 @@ export const lightTheme = {
'--landing_textcolor': '#000',
'--button-secondaryOutlinedColor': '#008ecc',
'--button-secondaryHoverBackgroundColor': 'transparent',
'--button-secondaryActiveBackgroundColor': 'transparent'
'--button-secondaryActiveBackgroundColor': 'transparent',
'--selected-icon-color': '#000000'
}
};
1 change: 1 addition & 0 deletions projects/dxc-ngx-cdk/src/lib/dxc-box/dxc-box.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ export class DxcBoxComponent implements OnInit {
border-radius: 4px;
overflow: hidden;
background-color: var(--box-backgroundColor);
backdrop-filter:blur(4px);
border-color: transparent;
color: "#000000";

Expand Down
2 changes: 1 addition & 1 deletion projects/dxc-ngx-cdk/src/lib/dxc-crud-table/dxc-crud-table.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ td {
}

.crud-scroll {
overflow: auto;
overflow: overlay;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
}

Expand Down
92 changes: 61 additions & 31 deletions projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,73 @@
<div class="menu-arrow-up" *ngIf="enablePopupMode"></div>
<div class="theme-colors theme-palette-border d-inline-block w-100" tabindex="{{disabled ? -1 : tabIndexValue}}"
<div class="theme-palette-border d-inline-block w-100" tabindex="{{disabled ? -1 : tabIndexValue}}"
(keydown)="startKeyPress($event)" [attr.aria-label]="themePaletteLabel" role="{{enablePopupMode ? 'dialog' : 'region'" #dialogstart>
<div class="container px-0 py-0">
<div>
<span class="float-left px-2" *ngIf="showThemeToggle">
<mat-icon [ngClass]="[isDarkMode ? 'mat-icon-no-color' : 'mat-icon-theme-color']" class="mat-icon material-icons float-left pt-3">
wb_sunny
</mat-icon>
<dxc-switch [checked]="isDarkMode" (onChange)="themeChange($event)" [ariaLabel]="switchLabel"></dxc-switch>
<mat-icon [ngClass]="[!isDarkMode ? 'mat-icon-no-color' : 'mat-icon-theme-color']" class="mat-icon material-icons float-right pt-3">
nightlight_round
</mat-icon>
</span>
<a href="javascript:void(0);" role="button" tabindex="{{disabled ? -1 : tabIndexValue}}" *ngIf="enablePopupMode"
<a href="javascript:void(0);" role="button" tabindex="{{disabled ? -1 : tabIndexValue}}" *ngIf="enablePopupMode"
[attr.aria-label]="closeLabel" class="mr-2 view-icon closeIcon menuclose float-right" [matTooltip]="closeLabel"
(click)="closeThemePalette()">
<mat-icon class="mat-icon material-icons mat-icon-no-color">
close
</mat-icon>
</a>
</div>
<div class="theme-colors float-left">
<div class="px-2 py-0">
<p class="text-muted mb-2">{{label}}</p>
<div class="d-flex flex-row justify-content-between mb-3 theme-palette pr-3">
<span [ngClass]="{ active: colors.active}" role="button" attr.aria-checked="{{colors.active}}" role="radio"
tabindex="{{disabled ? -1 : tabIndexValue}}" attr.aria-label="{{label + ' ' + colors.color}}"
*ngFor="let colors of themeColors" (click)="changeThemeColor(colors.color)"
(keyup.enter)="changeThemeColor(colors.color)"
[ngStyle]="{'background-color': colors.color, 'border-color': colors.color}" class="theme-color">
<i>
<mat-icon aria-hidden="true" class="mat-icon material-icons mat-icon-theme-color notranslate">
check</mat-icon>
</i>
<div class="container px-0 py-4">
<div class="w-100">
<span class="float-left px-2" *ngIf="showThemeToggle">
<mat-icon [ngClass]="[themeInfo.isDarkMode ? 'mat-icon-no-color' : 'mat-icon-theme-color']" class="mat-icon material-icons float-left pt-3">
wb_sunny
</mat-icon>
<dxc-switch [checked]="themeInfo.isDarkMode" (onChange)="themeChange($event)" [ariaLabel]="switchLabel"></dxc-switch>
<mat-icon [ngClass]="[!themeInfo.isDarkMode ? 'mat-icon-no-color' : 'mat-icon-theme-color']" class="mat-icon material-icons float-right pt-3">
nightlight_round
</mat-icon>
</span>
<span class="float-right px-2" *ngIf="showThemeToggle">
<mat-icon [ngClass]="[themeInfo.isTransparent ? 'mat-icon-no-color' : 'mat-icon-theme-color']" class="mat-icon material-icons float-left pt-3">
blur_off
</mat-icon>
<dxc-switch [checked]="themeInfo.isTransparent" (onChange)="transparencyChange($event)"
[ariaLabel]="backgroundSwitchLabel"></dxc-switch>
<mat-icon [ngClass]="[!themeInfo.isTransparent ? 'mat-icon-no-color' : 'mat-icon-theme-color']" class="mat-icon material-icons float-right pt-3">
blur_on
</mat-icon>
</span>
</div>
<div class="w-100 d-inline-block" *ngIf="themeInfo.isTransparent">
<div class="px-2 py-0">
<p class="text-muted mb-2">{{backgroundLabel}}</p>
<div class="theme-background w-100 theme-palette">
<div [ngClass]="{ active: bg.active}" role="button" attr.aria-checked="{{bg.active}}" role="radio"
tabindex="{{disabled ? -1 : tabIndexValue}}" attr.aria-label="{{backgroundLabel + ' ' + bg.title}}"
*ngFor="let bg of themeInfo.backgrounds; let i = index" (click)="changeBackground(i)" (keyup.enter)="changeBackground(i)"
class="theme-bg">
<span class="toggle-button m-2">
<i class="icon-container">
<mat-icon aria-hidden="true" class="mat-icon material-icons mat-icon-theme-selected-color notranslate">
check</mat-icon>
</i>
</span>
<span [innerHtml]="bg.background | safe:'html'"></span>
</div>
</div>
</div>
</div>
<div class="theme-colors d-inline-block w-100">
<div class="p-2">
<p class="text-muted mb-2">{{label}}</p>
<div class="d-flex flex-row justify-content-between theme-palette">
<span [ngClass]="{ active: colors.active}" role="button" attr.aria-checked="{{colors.active}}" role="radio"
tabindex="{{disabled ? -1 : tabIndexValue}}" attr.aria-label="{{label + ' ' + colors.color}}"
*ngFor="let colors of themeInfo.themeColors; let i = index" (click)="changeThemeColor(i)"
(keyup.enter)="changeThemeColor(i)"
[ngStyle]="{'background-color': colors.color?.primary, 'border-color': colors.color?.primary}"
class="theme-color">
<i>
<mat-icon aria-hidden="true" class="mat-icon material-icons mat-icon-theme-selected-color notranslate">
check</mat-icon>
</i>
</span>
</div>
</div>
<span #returntoend tabindex="-1" (onblur)="returnFocusOut($event)"></span>
<span #dialogend tabindex="{{enablePopupMode ? 0 : -1}}" (focus)="endFocus($event)"></span>
</div>
</div>
<span #returntoend tabindex="-1" (onblur)="returnFocusOut($event)"></span>
<span #dialogend tabindex="{{enablePopupMode ? 0 : -1}}" (focus)="endFocus($event)"></span>
</div>
</div>
</div>
53 changes: 48 additions & 5 deletions projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
.theme-colors {
width: 294px !important;
}

.theme-colors .theme-color {
width: 24px;
height: 24px;
Expand All @@ -18,6 +14,48 @@
border-color: transparent;
}

.theme-background .theme-bg {
height: 85px;
width: 132px;
box-shadow: 0px 0px 3px 0px var(--app-box-shadow-2);
border-radius: 0px;
margin: 5px;
float: left;
}

.theme-bg {
position: relative;
background-image: -webkit-repeating-linear-gradient(top, var(--glassmorphism-gradient-1) 0%, var(--glassmorphism-gradient-2) 100%) !important;
background-image: repeating-linear-gradient(to bottom, var(--glassmorphism-gradient-1) 0%, var(--glassmorphism-gradient-2) 100%) !important;
background-image: -ms-repeating-linear-gradient(top, var(--glassmorphism-gradient-1) 0%, var(--glassmorphism-gradient-2) 100%);

.icon-container {
height: 10px;
width: 10px;
font-size: 10px;
line-height: 10px;
position: relative;
}

.mat-icon {
height: 10px;
width: 10px;
font-size: 10px;
line-height: 10px;
position: absolute;
top: 0px;
}
}

.toggle-button {
position: absolute;
height: 10px;
width: 10px;
border-radius: 10px;
box-shadow: 0px 0px 3px 2px var(--app-box-shadow-2);
top: 0px;
right: 0px;
}

.menu-arrow-up {
right: 75px !important;
Expand All @@ -30,10 +68,15 @@
.theme-palette .active i {
display: block !important;
}
.mat-icon-no-color{

.mat-icon-no-color {
color: var(--gray-icon) !important;
}

.mat-icon-theme-color{
color: var(--icon_color) !important;
}
.mat-icon-theme-selected-color {
color: var(--selected-icon-color) !important;
}

59 changes: 42 additions & 17 deletions projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { ComplexThemeBindingStrategy } from '../theme/complexThemeBindingStrateg
import { css } from "emotion";
import { BehaviorSubject } from "rxjs";
import { CssUtils } from "../utils";
import { IThemeInfo } from '../models/startup/configuration.model';

@Component({
selector: 'dxc-theme-palette',
Expand All @@ -13,23 +14,32 @@ import { CssUtils } from "../utils";

export class DxcThemePaletteComponent implements OnInit, AfterViewInit, OnDestroy {
@Input('isThemeOpen') isThemeOpen: boolean = false;
@Input('themeColors') themeColors: Array<any> = [];
@Input('selectedThemeColor') selectedThemeColor: string = '';
@Input('isDarkMode') isDarkMode: 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;
//@Input('isDarkMode') isDarkMode: boolean = false;
//@Input('enableTransparency') enableTransparency: boolean = false;
@Input('themeInfo') themeInfo: IThemeInfo = null;

@Input('enablePopupMode') enablePopupMode: boolean = true;
@Input('tabIndexValue') tabIndexValue: number = 0;
@Input('showThemeToggle') showThemeToggle: boolean = true;
@Input('label') label: string = '';
@Input('backgroundLabel') backgroundLabel: string = '';
@Input('switchLabel') switchLabel: string = '';
@Input('backgroundSwitchLabel') backgroundSwitchLabel: string = '';
@Input('themePaletteLabel') themePaletteLabel: string = '';
@Input('closeLabel') closeLabel: string = '';
@Input('colorShades') colorShades: Array<number> = [];
@Input() border: boolean = false;
@Input() public disabled: boolean = false;

@Output() themeChanged: EventEmitter<{ 'themeInfo': IThemeInfo, 'shades': any[] }> = new EventEmitter<{ 'themeInfo': IThemeInfo, 'shades': any[] }>();
@Output() themeOpenChanged: EventEmitter<boolean> = new EventEmitter<boolean>();
@Output() themeModeChanged: EventEmitter<any> = new EventEmitter<any>();
@Output() themeColorChanged: EventEmitter<any> = new EventEmitter<any>();
// @Output() transparencyModeChanged: EventEmitter<any> = new EventEmitter<any>();
// @Output() backgroundChange: EventEmitter<any> = new EventEmitter<any>();
// @Output() themeColorChanged: EventEmitter<any> = new EventEmitter<any>();

@ViewChild('dialogstart', { read: ElementRef, static: false }) dialogstart: ElementRef;
@ViewChild('returntoend', { read: ElementRef, static: false }) returntoend: ElementRef;
Expand Down Expand Up @@ -67,8 +77,8 @@ export class DxcThemePaletteComponent implements OnInit, AfterViewInit, OnDestro
constructor(private utils: CssUtils, private ref: ChangeDetectorRef, private complexThemeBindingStrategy: ComplexThemeBindingStrategy) { }

ngOnInit(): void {
let selectedThemeColor = this.themeColors.filter((colors) => { return colors.active == true; });
this.selectedThemeColor = selectedThemeColor.length > 0 ? selectedThemeColor[0].color : '';
// let selectedThemeColor = this.themeColors.filter((colors) => { return colors.active == true; });
// this.selectedThemeColor = selectedThemeColor.length > 0 ? selectedThemeColor[0].color : '';
}

public ngOnChanges(changes: SimpleChanges): void {
Expand Down Expand Up @@ -96,13 +106,25 @@ export class DxcThemePaletteComponent implements OnInit, AfterViewInit, OnDestro
}

themeChange(event) {
this.isDarkMode = event;
this.emitEvent(this.themeModeChanged);
this.themeInfo.isDarkMode = event;
this.emitEvent();
}

transparencyChange(event) {
this.themeInfo.isTransparent = event;
this.emitEvent();
}

changeThemeColor = (color) => {
this.selectedThemeColor = color;
this.emitEvent(this.themeColorChanged);
changeThemeColor = (index) => {
this.themeInfo.themeColors.forEach(color => color.active = false);
this.themeInfo.themeColors[index].active = true;
this.emitEvent();
}

changeBackground = (index) => {
this.themeInfo.backgrounds.forEach(color => color.active = false);
this.themeInfo.backgrounds[index].active = true;
this.emitEvent();
}

startKeyPress($event: any) {
Expand Down Expand Up @@ -144,11 +166,14 @@ export class DxcThemePaletteComponent implements OnInit, AfterViewInit, OnDestro
`;
}

emitEvent(eventToEmit) {
emitEvent() {
let colorShadesList = [];
this.colorShades.forEach((shadesPoint) => {
colorShadesList.push(this.complexThemeBindingStrategy.setOpacity(this.selectedThemeColor, shadesPoint));
});
eventToEmit.emit({ 'color': this.selectedThemeColor, 'shades': colorShadesList, 'isDarkMode': this.isDarkMode });
let selectedThemeColor = this.themeInfo.themeColors.filter(color => color.active == true);
if (selectedThemeColor.length > 0) {
this.colorShades.forEach((shadesPoint) => {
colorShadesList.push(this.complexThemeBindingStrategy.setOpacity(selectedThemeColor[0].color?.primary, shadesPoint));
});
}
this.themeChanged.emit({ 'themeInfo': this.themeInfo, 'shades': colorShadesList });
}
}
5 changes: 3 additions & 2 deletions projects/dxc-ngx-cdk/src/lib/dxc-theme-palette/dxc-theme-palette.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,15 @@ import { DxcThemePaletteComponent } from './dxc-theme-palette.component';
import { DxcSwitchModule } from '../dxc-switch/dxc-switch.module';
import { MatTooltipModule } from '@angular/material/tooltip'
import { MatIconModule } from '@angular/material/icon'

import { DxcSafeModule } from '../directives/pipes/safe/dxc-safe.module'
@NgModule({
declarations: [DxcThemePaletteComponent],
imports: [
CommonModule,
DxcSwitchModule,
MatTooltipModule,
MatIconModule
MatIconModule,
DxcSafeModule
],
exports: [DxcThemePaletteComponent]
})
Expand Down
16 changes: 13 additions & 3 deletions projects/dxc-ngx-cdk/src/lib/models/startup/configuration.model.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,14 @@ import { List } from 'immutable';
import { ELookupType, Mode, GridMode } from '../lookup/lookup';
import { FormGroup } from '@angular/forms';
import { EUserLookupOptions } from '../lookup/lookup'
import { BehaviorSubject } from 'rxjs';

export interface IThemeInfo {
"isDarkMode": boolean,
"isTransparent": boolean,
"themeColors": { 'color': { 'primary': string, 'effect': string }, active: boolean } [],
"backgrounds": { 'id': string, 'title': string, 'background': string, 'active': boolean } []
}

export interface IConfig {
SERVER: { [key: string]: string };
Expand All @@ -12,10 +20,12 @@ export interface IConfig {
HELPLINK: string;
REQUIRED: RequiredFormat;
ButtonIcon: { [key: string]: string };
Settings: { [key: string]: string };
Settings: { [key: string]: any };
Resources: { [key: string]: { description: string, type: string } };
ThemeColors?: Array<any>;
ThemeMode?: string;
ThemeInfo?: BehaviorSubject<IThemeInfo>;
// ;
// ThemeColors?: Array<{ [key: string]: any }>;
// ThemeMode?: string;
}


Expand Down
Loading