Change base-background to global-backround. Add method to convert rgba to rgb in order to avoid different colors when elements stacks.
This commit is contained in:
parent
ddcdd79204
commit
63cf1b09da
|
|
@ -1,86 +1,102 @@
|
|||
import {properties} from "../../../../environments/environment";
|
||||
|
||||
export class Layout {
|
||||
_id:string;
|
||||
portalPid:string;
|
||||
layoutOptions:CustomizationOptions;
|
||||
_id: string;
|
||||
portalPid: string;
|
||||
layoutOptions: CustomizationOptions;
|
||||
date;
|
||||
constructor(community, options:CustomizationOptions){
|
||||
|
||||
constructor(community, options: CustomizationOptions) {
|
||||
this.portalPid = community;
|
||||
this.layoutOptions = options;
|
||||
}
|
||||
|
||||
public static getVariables(options: CustomizationOptions): {} | null {
|
||||
if(options) {
|
||||
if (options) {
|
||||
let variables = {};
|
||||
if(options.identity) {
|
||||
variables['@global-primary-background'] = options.identity.mainColor;
|
||||
variables['@global-secondary-background'] = options.identity.secondaryColor;
|
||||
if (options.identity) {
|
||||
variables['@global-primary-background'] = Layout.convertRGBAtoRGB(options.identity.mainColor);
|
||||
variables['@global-secondary-background'] = Layout.convertRGBAtoRGB(options.identity.secondaryColor);
|
||||
}
|
||||
if(options.backgrounds){
|
||||
variables['@general-search-form-background'] = options.backgrounds.form.color;
|
||||
variables['@base-body-background'] = options.backgrounds.light.color;
|
||||
variables['@hero-background-image'] = (options.backgrounds.form.imageFile?(this.getUrl(properties.utilsService + '/download/' +options.backgrounds.form.imageFile)): 'none') ;
|
||||
if (options.backgrounds) {
|
||||
variables['@general-search-form-background'] = Layout.convertRGBAtoRGB(options.backgrounds.form.color);
|
||||
variables['@global-background'] = Layout.convertRGBAtoRGB(options.backgrounds.light.color);
|
||||
variables['@hero-background-image'] = (options.backgrounds.form.imageFile ? (this.getUrl(properties.utilsService + '/download/' + options.backgrounds.form.imageFile)) : 'none');
|
||||
variables['@hero-background-position'] = options.backgrounds.form.position;
|
||||
}
|
||||
if(options.buttons){
|
||||
if (options.buttons) {
|
||||
//general
|
||||
variables['@button-border-width'] = options.buttons.lightBackground.borderWidth + "px";
|
||||
variables['@button-border-radius'] = options.buttons.lightBackground.borderRadius + "px";
|
||||
// default -> on dark background todo check again when we have sucj=h buttons
|
||||
variables['@button-default-background'] = options.buttons.darkBackground.backgroundColor;
|
||||
variables['@button-default-color'] = options.buttons.darkBackground.color;
|
||||
variables['@button-default-border'] = options.buttons.darkBackground.borderColor;
|
||||
variables['@button-default-hover-background'] = options.buttons.darkBackground.onHover.backgroundColor;
|
||||
variables['@button-default-hover-color'] = options.buttons.darkBackground.onHover.color;
|
||||
variables['@button-default-hover-border'] = options.buttons.darkBackground.onHover.borderColor;
|
||||
variables['@button-default-active-background'] = options.buttons.darkBackground.onHover.backgroundColor;
|
||||
variables['@button-default-active-color'] = options.buttons.darkBackground.onHover.color;
|
||||
variables['@button-default-active-border'] = options.buttons.darkBackground.onHover.borderColor;
|
||||
variables['@button-default-background'] = Layout.convertRGBAtoRGB(options.buttons.darkBackground.backgroundColor);
|
||||
variables['@button-default-color'] = Layout.convertRGBAtoRGB(options.buttons.darkBackground.color);
|
||||
variables['@button-default-border'] = Layout.convertRGBAtoRGB(options.buttons.darkBackground.borderColor);
|
||||
variables['@button-default-hover-background'] = Layout.convertRGBAtoRGB(options.buttons.darkBackground.onHover.backgroundColor);
|
||||
variables['@button-default-hover-color'] = Layout.convertRGBAtoRGB(options.buttons.darkBackground.onHover.color);
|
||||
variables['@button-default-hover-border'] = Layout.convertRGBAtoRGB(options.buttons.darkBackground.onHover.borderColor);
|
||||
variables['@button-default-active-background'] = Layout.convertRGBAtoRGB(options.buttons.darkBackground.onHover.backgroundColor);
|
||||
variables['@button-default-active-color'] = Layout.convertRGBAtoRGB(options.buttons.darkBackground.onHover.color);
|
||||
variables['@button-default-active-border'] = Layout.convertRGBAtoRGB(options.buttons.darkBackground.onHover.borderColor);
|
||||
|
||||
// primary
|
||||
variables['@button-primary-background'] = options.buttons.lightBackground.backgroundColor;
|
||||
variables['@button-primary-color'] = options.buttons.lightBackground.color;
|
||||
variables['@button-primary-border'] = options.buttons.lightBackground.borderColor;
|
||||
variables['@button-primary-hover-background'] = options.buttons.lightBackground.onHover.backgroundColor;
|
||||
variables['@button-primary-hover-color'] = options.buttons.lightBackground.onHover.color;
|
||||
variables['@button-primary-hover-border'] = options.buttons.lightBackground.onHover.borderColor;
|
||||
variables['@button-primary-active-background'] = options.buttons.lightBackground.onHover.backgroundColor;
|
||||
variables['@button-primary-active-color'] = options.buttons.lightBackground.onHover.color;
|
||||
variables['@button-primary-active-border'] = options.buttons.lightBackground.onHover.borderColor;
|
||||
variables['@button-primary-background'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.backgroundColor);
|
||||
variables['@button-primary-color'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.color);
|
||||
variables['@button-primary-border'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.borderColor);
|
||||
variables['@button-primary-hover-background'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.onHover.backgroundColor);
|
||||
variables['@button-primary-hover-color'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.onHover.color);
|
||||
variables['@button-primary-hover-border'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.onHover.borderColor);
|
||||
variables['@button-primary-active-background'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.onHover.backgroundColor);
|
||||
variables['@button-primary-active-color'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.onHover.color);
|
||||
variables['@button-primary-active-border'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.onHover.borderColor);
|
||||
|
||||
// secondary
|
||||
variables['@button-secondary-background'] = options.buttons.lightBackground.color;
|
||||
variables['@button-secondary-color'] = options.buttons.lightBackground.backgroundColor;
|
||||
variables['@button-secondary-border'] = options.buttons.lightBackground.backgroundColor;
|
||||
variables['@button-secondary-hover-background'] = options.buttons.lightBackground.backgroundColor;
|
||||
variables['@button-secondary-hover-color'] = options.buttons.lightBackground.color;
|
||||
variables['@button-secondary-hover-border'] = options.buttons.lightBackground.borderColor;
|
||||
variables['@button-secondary-active-background'] = options.buttons.lightBackground.backgroundColor;
|
||||
variables['@button-secondary-active-color'] = options.buttons.lightBackground.color;
|
||||
variables['@button-secondary-active-border'] = options.buttons.lightBackground.borderColor;
|
||||
|
||||
variables['@button-secondary-background'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.color);
|
||||
variables['@button-secondary-color'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.backgroundColor);
|
||||
variables['@button-secondary-border'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.backgroundColor);
|
||||
variables['@button-secondary-hover-background'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.backgroundColor);
|
||||
variables['@button-secondary-hover-color'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.color);
|
||||
variables['@button-secondary-hover-border'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.borderColor);
|
||||
variables['@button-secondary-active-background'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.backgroundColor);
|
||||
variables['@button-secondary-active-color'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.color);
|
||||
variables['@button-secondary-active-border'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.borderColor);
|
||||
|
||||
}
|
||||
return variables;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
public static getUrl(url){
|
||||
|
||||
public static getUrl(url) {
|
||||
return 'url("' + url + '")';
|
||||
}
|
||||
|
||||
|
||||
public static convertRGBAtoRGB(color: string): string {
|
||||
if(color.includes('rgba')) {
|
||||
const regexPattern = /rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/;
|
||||
const matches = color.match(regexPattern);
|
||||
const [, r, g, b, a] = matches;
|
||||
let R = parseInt(r)*parseFloat(a) + (1 - parseFloat(a))*255;
|
||||
let G = parseInt(g)*parseFloat(a) + (1 - parseFloat(a))*255;
|
||||
let B = parseInt(b)*parseFloat(a) + (1 - parseFloat(a))*255;
|
||||
return 'rgb(' + R + ',' + G + ',' + B + ',' + ')';
|
||||
} else {
|
||||
return color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class CustomizationOptions {
|
||||
identity: {
|
||||
mainColor: string;
|
||||
secondaryColor: string;
|
||||
};
|
||||
identityIsCustom:boolean;
|
||||
backgroundsIsCustom:boolean;
|
||||
buttonsIsCustom:boolean;
|
||||
identityIsCustom: boolean;
|
||||
backgroundsIsCustom: boolean;
|
||||
buttonsIsCustom: boolean;
|
||||
backgrounds: {
|
||||
dark: {
|
||||
color: string; //background
|
||||
color: string; //background
|
||||
}
|
||||
light: {
|
||||
color: string; //background
|
||||
|
|
@ -89,41 +105,41 @@ export class CustomizationOptions {
|
|||
color: string; //background
|
||||
imageUrl: string;
|
||||
imageFile: string;
|
||||
position:string;
|
||||
position: string;
|
||||
}
|
||||
};
|
||||
buttons: {
|
||||
darkBackground: ButtonsCustomization;
|
||||
lightBackground: ButtonsCustomization;
|
||||
};
|
||||
|
||||
|
||||
constructor(mainColor: string = null, secondaryColor: string = null) {
|
||||
this.identity= {
|
||||
this.identity = {
|
||||
mainColor: mainColor ? mainColor : CustomizationOptions.getIdentity().mainColor,
|
||||
secondaryColor : secondaryColor ? secondaryColor : CustomizationOptions.getIdentity().secondaryColor,
|
||||
secondaryColor: secondaryColor ? secondaryColor : CustomizationOptions.getIdentity().secondaryColor,
|
||||
};
|
||||
this.identityIsCustom = false;
|
||||
this.backgroundsIsCustom = false;
|
||||
this.buttonsIsCustom = false;
|
||||
this.backgrounds={
|
||||
dark : {
|
||||
this.backgrounds = {
|
||||
dark: {
|
||||
color: this.identity.mainColor,
|
||||
},
|
||||
light : {
|
||||
light: {
|
||||
color: "#f9f9f9" //CustomizationOptions.getRGBA(this.identity.mainColor,0.05),
|
||||
},
|
||||
form : {
|
||||
color: CustomizationOptions.getRGBA(this.identity.mainColor,0.15),
|
||||
imageUrl : null,
|
||||
imageFile : null,
|
||||
form: {
|
||||
color: CustomizationOptions.getRGBA(this.identity.mainColor, 0.15),
|
||||
imageUrl: null,
|
||||
imageFile: null,
|
||||
position: null
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
this.buttons = {
|
||||
darkBackground: {
|
||||
isDefault:true,
|
||||
isDefault: true,
|
||||
backgroundColor: "#ffffff",
|
||||
color: "#000000",
|
||||
borderStyle: "solid",
|
||||
|
|
@ -137,7 +153,7 @@ export class CustomizationOptions {
|
|||
}
|
||||
},
|
||||
lightBackground: {
|
||||
isDefault:true,
|
||||
isDefault: true,
|
||||
backgroundColor: this.identity.mainColor,
|
||||
color: '#ffffff',
|
||||
borderStyle: "solid",
|
||||
|
|
@ -150,15 +166,16 @@ export class CustomizationOptions {
|
|||
borderColor: this.identity.secondaryColor,
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
}
|
||||
public static checkForObsoleteVersion(current:CustomizationOptions, communityId:string){
|
||||
let defaultCO = new CustomizationOptions(CustomizationOptions.getIdentity(communityId).mainColor,CustomizationOptions.getIdentity(communityId).secondaryColor);
|
||||
|
||||
public static checkForObsoleteVersion(current: CustomizationOptions, communityId: string) {
|
||||
let defaultCO = new CustomizationOptions(CustomizationOptions.getIdentity(communityId).mainColor, CustomizationOptions.getIdentity(communityId).secondaryColor);
|
||||
let updated = Object.assign({}, defaultCO);
|
||||
if(!current){
|
||||
if (!current) {
|
||||
current = Object.assign({}, defaultCO);
|
||||
}else {
|
||||
} else {
|
||||
if (current.identity && current.identity.mainColor && current.identity.secondaryColor) {
|
||||
updated = new CustomizationOptions(current.identity.mainColor, current.identity.secondaryColor);
|
||||
}
|
||||
|
|
@ -195,53 +212,55 @@ export class CustomizationOptions {
|
|||
}
|
||||
}
|
||||
return current;
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
public static getIdentity(community:string=null){
|
||||
let COLORS= {
|
||||
default:{
|
||||
mainColor:'#4687E6',
|
||||
|
||||
public static getIdentity(community: string = null) {
|
||||
let COLORS = {
|
||||
default: {
|
||||
mainColor: '#4687E6',
|
||||
secondaryColor: '#2D72D6'
|
||||
},
|
||||
"covid-19":{
|
||||
mainColor:"#03ADEE",
|
||||
"covid-19": {
|
||||
mainColor: "#03ADEE",
|
||||
secondaryColor: "#F15157"
|
||||
}
|
||||
};
|
||||
if(community && COLORS[community]){
|
||||
if (community && COLORS[community]) {
|
||||
return COLORS[community];
|
||||
}
|
||||
return COLORS.default;
|
||||
}
|
||||
public static getRGBA(color, A){
|
||||
if(color.indexOf("#")!=-1){
|
||||
return 'rgba('+parseInt(color.substring(1,3),16)+','+parseInt(color.substring(3,5),16)+','+parseInt(color.substring(5,7),16)+','+A+')';
|
||||
|
||||
public static getRGBA(color, A) {
|
||||
if (color.indexOf("#") != -1) {
|
||||
return 'rgba(' + parseInt(color.substring(1, 3), 16) + ',' + parseInt(color.substring(3, 5), 16) + ',' + parseInt(color.substring(5, 7), 16) + ',' + A + ')';
|
||||
}
|
||||
return color;
|
||||
}
|
||||
|
||||
public static isForLightBackground(color:string){
|
||||
|
||||
public static isForLightBackground(color: string) {
|
||||
let L, r, g, b, a = 1;
|
||||
if(color.length == 7 || color.length == 9) {
|
||||
if (color.length == 7 || color.length == 9) {
|
||||
r = parseInt(color.substring(1, 3), 16);
|
||||
g = parseInt(color.substring(3, 5), 16);
|
||||
b = parseInt(color.substring(5, 7), 16);
|
||||
if(color.length == 9) {
|
||||
a = parseInt(color.substring(7, 9), 16);
|
||||
if (color.length == 9) {
|
||||
a = parseInt(color.substring(7, 9), 16);
|
||||
}
|
||||
}else if(color.length > 9){
|
||||
} else if (color.length > 9) {
|
||||
let array = color.split("rgba(")[1].split(")")[0].split(",");
|
||||
r = parseInt(array[0]);
|
||||
g = parseInt(array[1]);
|
||||
b = parseInt(array[2]);
|
||||
a = +array[3];
|
||||
|
||||
|
||||
}
|
||||
const brightness = r* 0.299 + g * 0.587 + b * 0.114 + (1 - a) * 255;
|
||||
|
||||
const brightness = r * 0.299 + g * 0.587 + b * 0.114 + (1 - a) * 255;
|
||||
|
||||
return (brightness < 186)
|
||||
|
||||
|
||||
// return !(r*0.299 + g*0.587 + b*0.114 > 186);
|
||||
/*for(let c of [r,g,b]){
|
||||
c = c / 255.0;
|
||||
|
|
@ -255,11 +274,12 @@ export class CustomizationOptions {
|
|||
return L > 0.179// (L + 0.05) / (0.05) > (1.0 + 0.05) / (L + 0.05); //use #000000 else use #ffffff
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
export class ButtonsCustomization{
|
||||
isDefault:boolean;
|
||||
|
||||
export class ButtonsCustomization {
|
||||
isDefault: boolean;
|
||||
backgroundColor: string;
|
||||
color: string;
|
||||
borderStyle: string;
|
||||
|
|
|
|||
Loading…
Reference in New Issue