diff --git a/connect/community/CustomizationOptions.ts b/connect/community/CustomizationOptions.ts index 93535151..7baf54df 100644 --- a/connect/community/CustomizationOptions.ts +++ b/connect/community/CustomizationOptions.ts @@ -1,177 +1,53 @@ export class CustomizationOptions { - mainColor: string; - secondaryColor: string; - backgrounds:{ - panels: { - onDarkBackground: boolean, - background: { - color: string; //background - borderStyle: string; - borderColor: string; - borderWidth: number; - } - } - homeBanner:{ - onDarkBackground: boolean, - background: { - color: string; //background - borderStyle: string; - borderColor: string; - borderWidth: number; - } - } - lightPageBackground:{ - background: { - color: string; //background - borderStyle: string; - borderColor: string; - borderWidth: number; - } - } - + identity: { + isDefault: boolean; + mainColor: string; + secondaryColor: string; }; - panel: { - onDarkBackground: boolean, - background: { + backgrounds: { + isDefault:boolean, + dark: { + isDefault:boolean, + color: string; //background + } + light: { + isDefault:boolean, color: string; //background - borderStyle: string; - borderColor: string; - borderWidth: number; } - , fonts: { - color: string; - family: string; - size: number; - weight: number; - }, - title: { - color: string; - family: string; - size: number; - weight: number; - }, -/* panelElements: { - backgroundColor: string; - borderColor: string; - color: string; - }*/ - }; - - /* box: { - borderColor: string; - borderStyle: string; - borderWidth: number; - borderRadius: number; - } - ;*/ - links: { - darkBackground: { - family: string; - size: number; - weight: number; - color: string; - - onHover: { - color: string; - }; - }; - lightBackground: { - color: string; - onHover: { - color: string; - }; - }; }; buttons: { - darkBackground: { - backgroundColor: string; - color: string; - borderStyle: string; - borderColor: string; - borderWidth: number; - borderRadius: number; - onHover: { - backgroundColor: string; - color: string; - borderColor: string; - }; - }; - lightBackground: { - backgroundColor: string; - color: string; - borderStyle: string; - borderColor: string; - borderWidth: number; - borderRadius: number; - onHover: { - backgroundColor: string; - color: string; - borderColor: string; - }; - }; + isDefault:boolean, + darkBackground: ButtonsCustomization; + lightBackground: ButtonsCustomization; }; - - constructor() { - - this.mainColor = '#4687E6'; - this.secondaryColor = '#2D72D6'; - this.panel = { - onDarkBackground: true, - background: { - color: '#4687E6', - borderStyle: 'solid', - borderColor: "#4687E6", - borderWidth: 0 - }, fonts: { - color: '#ffffff', - family: 'Open Sans', - size: 14, - weight: 400 - }, - title: { - color: '#ffffff', - family: 'Open Sans', - size: 18, - weight: 700 - }, - - /* panelElements: { - backgroundColor: 'rgba(255, 255, 255, 0.5)', - borderColor: 'rgba(255, 255, 255, 0.5)', - color: '#ffffff' - }*/ + constructor(mainColor: string = null, secondaryColor: string = null) { + + this.identity= { + mainColor: mainColor ? mainColor : CustomizationOptions.getIdentity().mainColor, + secondaryColor : secondaryColor ? secondaryColor : CustomizationOptions.getIdentity().secondaryColor, + isDefault : true }; - - /* this.box = { - borderColor: '#4C9CD5', - borderStyle: 'solid', - borderWidth: 2, - borderRadius: 6, - };*/ - this.links = { - darkBackground: { - family: 'Open Sans', - size: 14, - weight: 400, - color: 'rgba(255, 255, 255, 0.98)', - onHover: { - color: 'rgba(255, 255, 255, 0.5)', - }, + this.backgrounds={ + isDefault: true, + dark : { + isDefault: true, + color: this.identity.mainColor, }, - lightBackground: { - color: '#4687E6', - onHover: { - color: '#2D72D6' - }, + light : { + isDefault: true, + color: CustomizationOptions.getRGBA(this.identity.mainColor,0.1), } }; + this.buttons = { + isDefault: true, darkBackground: { + isDefault:true, backgroundColor: "#ffffff", - color:"#000000", - borderStyle:"solid", + color: "#000000", + borderStyle: "solid", borderColor: "#ffffff", borderWidth: 1, borderRadius: 500, @@ -182,20 +58,58 @@ export class CustomizationOptions { } }, lightBackground: { - backgroundColor: '#4687E6', + isDefault:true, + backgroundColor: this.identity.mainColor, color: '#ffffff', borderStyle: "solid", - borderColor: "#4687E6", + borderColor: this.identity.mainColor, borderWidth: 1, borderRadius: 500, onHover: { - backgroundColor: '#2D72D6', + backgroundColor: this.identity.secondaryColor, color: '#ffffff', - borderColor: "#2D72D6", + borderColor: this.identity.secondaryColor, } } }; } + public static getIdentity(community:string=null){ + let COLORS= { + default:{ + mainColor:'#4687E6', + secondaryColor: '#2D72D6' + }, + "covid-19":{ + mainColor:"#03ADEE", + secondaryColor: "#F15157" + } + }; + 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+')'; + } + return color; + } + } +export class ButtonsCustomization{ + isDefault:boolean; + backgroundColor: string; + color: string; + borderStyle: string; + borderColor: string; + borderWidth: number; + borderRadius: number; + onHover: { + backgroundColor: string; + color: string; + borderColor: string; + }; +}