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
|
@ -5,6 +5,7 @@ export class Layout {
|
||||||
portalPid: string;
|
portalPid: string;
|
||||||
layoutOptions: CustomizationOptions;
|
layoutOptions: CustomizationOptions;
|
||||||
date;
|
date;
|
||||||
|
|
||||||
constructor(community, options: CustomizationOptions) {
|
constructor(community, options: CustomizationOptions) {
|
||||||
this.portalPid = community;
|
this.portalPid = community;
|
||||||
this.layoutOptions = options;
|
this.layoutOptions = options;
|
||||||
|
@ -14,12 +15,12 @@ export class Layout {
|
||||||
if (options) {
|
if (options) {
|
||||||
let variables = {};
|
let variables = {};
|
||||||
if (options.identity) {
|
if (options.identity) {
|
||||||
variables['@global-primary-background'] = options.identity.mainColor;
|
variables['@global-primary-background'] = Layout.convertRGBAtoRGB(options.identity.mainColor);
|
||||||
variables['@global-secondary-background'] = options.identity.secondaryColor;
|
variables['@global-secondary-background'] = Layout.convertRGBAtoRGB(options.identity.secondaryColor);
|
||||||
}
|
}
|
||||||
if (options.backgrounds) {
|
if (options.backgrounds) {
|
||||||
variables['@general-search-form-background'] = options.backgrounds.form.color;
|
variables['@general-search-form-background'] = Layout.convertRGBAtoRGB(options.backgrounds.form.color);
|
||||||
variables['@base-body-background'] = options.backgrounds.light.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-image'] = (options.backgrounds.form.imageFile ? (this.getUrl(properties.utilsService + '/download/' + options.backgrounds.form.imageFile)) : 'none');
|
||||||
variables['@hero-background-position'] = options.backgrounds.form.position;
|
variables['@hero-background-position'] = options.backgrounds.form.position;
|
||||||
}
|
}
|
||||||
|
@ -28,48 +29,63 @@ export class Layout {
|
||||||
variables['@button-border-width'] = options.buttons.lightBackground.borderWidth + "px";
|
variables['@button-border-width'] = options.buttons.lightBackground.borderWidth + "px";
|
||||||
variables['@button-border-radius'] = options.buttons.lightBackground.borderRadius + "px";
|
variables['@button-border-radius'] = options.buttons.lightBackground.borderRadius + "px";
|
||||||
// default -> on dark background todo check again when we have sucj=h buttons
|
// default -> on dark background todo check again when we have sucj=h buttons
|
||||||
variables['@button-default-background'] = options.buttons.darkBackground.backgroundColor;
|
variables['@button-default-background'] = Layout.convertRGBAtoRGB(options.buttons.darkBackground.backgroundColor);
|
||||||
variables['@button-default-color'] = options.buttons.darkBackground.color;
|
variables['@button-default-color'] = Layout.convertRGBAtoRGB(options.buttons.darkBackground.color);
|
||||||
variables['@button-default-border'] = options.buttons.darkBackground.borderColor;
|
variables['@button-default-border'] = Layout.convertRGBAtoRGB(options.buttons.darkBackground.borderColor);
|
||||||
variables['@button-default-hover-background'] = options.buttons.darkBackground.onHover.backgroundColor;
|
variables['@button-default-hover-background'] = Layout.convertRGBAtoRGB(options.buttons.darkBackground.onHover.backgroundColor);
|
||||||
variables['@button-default-hover-color'] = options.buttons.darkBackground.onHover.color;
|
variables['@button-default-hover-color'] = Layout.convertRGBAtoRGB(options.buttons.darkBackground.onHover.color);
|
||||||
variables['@button-default-hover-border'] = options.buttons.darkBackground.onHover.borderColor;
|
variables['@button-default-hover-border'] = Layout.convertRGBAtoRGB(options.buttons.darkBackground.onHover.borderColor);
|
||||||
variables['@button-default-active-background'] = options.buttons.darkBackground.onHover.backgroundColor;
|
variables['@button-default-active-background'] = Layout.convertRGBAtoRGB(options.buttons.darkBackground.onHover.backgroundColor);
|
||||||
variables['@button-default-active-color'] = options.buttons.darkBackground.onHover.color;
|
variables['@button-default-active-color'] = Layout.convertRGBAtoRGB(options.buttons.darkBackground.onHover.color);
|
||||||
variables['@button-default-active-border'] = options.buttons.darkBackground.onHover.borderColor;
|
variables['@button-default-active-border'] = Layout.convertRGBAtoRGB(options.buttons.darkBackground.onHover.borderColor);
|
||||||
|
|
||||||
// primary
|
// primary
|
||||||
variables['@button-primary-background'] = options.buttons.lightBackground.backgroundColor;
|
variables['@button-primary-background'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.backgroundColor);
|
||||||
variables['@button-primary-color'] = options.buttons.lightBackground.color;
|
variables['@button-primary-color'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.color);
|
||||||
variables['@button-primary-border'] = options.buttons.lightBackground.borderColor;
|
variables['@button-primary-border'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.borderColor);
|
||||||
variables['@button-primary-hover-background'] = options.buttons.lightBackground.onHover.backgroundColor;
|
variables['@button-primary-hover-background'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.onHover.backgroundColor);
|
||||||
variables['@button-primary-hover-color'] = options.buttons.lightBackground.onHover.color;
|
variables['@button-primary-hover-color'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.onHover.color);
|
||||||
variables['@button-primary-hover-border'] = options.buttons.lightBackground.onHover.borderColor;
|
variables['@button-primary-hover-border'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.onHover.borderColor);
|
||||||
variables['@button-primary-active-background'] = options.buttons.lightBackground.onHover.backgroundColor;
|
variables['@button-primary-active-background'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.onHover.backgroundColor);
|
||||||
variables['@button-primary-active-color'] = options.buttons.lightBackground.onHover.color;
|
variables['@button-primary-active-color'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.onHover.color);
|
||||||
variables['@button-primary-active-border'] = options.buttons.lightBackground.onHover.borderColor;
|
variables['@button-primary-active-border'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.onHover.borderColor);
|
||||||
|
|
||||||
// secondary
|
// secondary
|
||||||
variables['@button-secondary-background'] = options.buttons.lightBackground.color;
|
variables['@button-secondary-background'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.color);
|
||||||
variables['@button-secondary-color'] = options.buttons.lightBackground.backgroundColor;
|
variables['@button-secondary-color'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.backgroundColor);
|
||||||
variables['@button-secondary-border'] = options.buttons.lightBackground.backgroundColor;
|
variables['@button-secondary-border'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.backgroundColor);
|
||||||
variables['@button-secondary-hover-background'] = options.buttons.lightBackground.backgroundColor;
|
variables['@button-secondary-hover-background'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.backgroundColor);
|
||||||
variables['@button-secondary-hover-color'] = options.buttons.lightBackground.color;
|
variables['@button-secondary-hover-color'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.color);
|
||||||
variables['@button-secondary-hover-border'] = options.buttons.lightBackground.borderColor;
|
variables['@button-secondary-hover-border'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.borderColor);
|
||||||
variables['@button-secondary-active-background'] = options.buttons.lightBackground.backgroundColor;
|
variables['@button-secondary-active-background'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.backgroundColor);
|
||||||
variables['@button-secondary-active-color'] = options.buttons.lightBackground.color;
|
variables['@button-secondary-active-color'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.color);
|
||||||
variables['@button-secondary-active-border'] = options.buttons.lightBackground.borderColor;
|
variables['@button-secondary-active-border'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.borderColor);
|
||||||
|
|
||||||
}
|
}
|
||||||
return variables;
|
return variables;
|
||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
public static getUrl(url) {
|
public static getUrl(url) {
|
||||||
return 'url("' + 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 {
|
export class CustomizationOptions {
|
||||||
identity: {
|
identity: {
|
||||||
mainColor: string;
|
mainColor: string;
|
||||||
|
@ -153,6 +169,7 @@ export class CustomizationOptions {
|
||||||
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
public static checkForObsoleteVersion(current: CustomizationOptions, communityId: string) {
|
public static checkForObsoleteVersion(current: CustomizationOptions, communityId: string) {
|
||||||
let defaultCO = new CustomizationOptions(CustomizationOptions.getIdentity(communityId).mainColor, CustomizationOptions.getIdentity(communityId).secondaryColor);
|
let defaultCO = new CustomizationOptions(CustomizationOptions.getIdentity(communityId).mainColor, CustomizationOptions.getIdentity(communityId).secondaryColor);
|
||||||
let updated = Object.assign({}, defaultCO);
|
let updated = Object.assign({}, defaultCO);
|
||||||
|
@ -198,6 +215,7 @@ export class CustomizationOptions {
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public static getIdentity(community: string = null) {
|
public static getIdentity(community: string = null) {
|
||||||
let COLORS = {
|
let COLORS = {
|
||||||
default: {
|
default: {
|
||||||
|
@ -214,6 +232,7 @@ export class CustomizationOptions {
|
||||||
}
|
}
|
||||||
return COLORS.default;
|
return COLORS.default;
|
||||||
}
|
}
|
||||||
|
|
||||||
public static getRGBA(color, A) {
|
public static getRGBA(color, A) {
|
||||||
if (color.indexOf("#") != -1) {
|
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 'rgba(' + parseInt(color.substring(1, 3), 16) + ',' + parseInt(color.substring(3, 5), 16) + ',' + parseInt(color.substring(5, 7), 16) + ',' + A + ')';
|
||||||
|
@ -258,6 +277,7 @@ export class CustomizationOptions {
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export class ButtonsCustomization {
|
export class ButtonsCustomization {
|
||||||
isDefault: boolean;
|
isDefault: boolean;
|
||||||
backgroundColor: string;
|
backgroundColor: string;
|
||||||
|
|
Loading…
Reference in New Issue