[Library|Trunk]
CustomizationOptions.ts: update customizations based on new UI. git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60796 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki
parent
47635b5a0a
commit
98ec296077
|
|
@ -1,174 +1,50 @@
|
|||
export class CustomizationOptions {
|
||||
identity: {
|
||||
isDefault: boolean;
|
||||
mainColor: string;
|
||||
secondaryColor: string;
|
||||
};
|
||||
backgrounds: {
|
||||
panels: {
|
||||
onDarkBackground: boolean,
|
||||
background: {
|
||||
isDefault:boolean,
|
||||
dark: {
|
||||
isDefault:boolean,
|
||||
color: string; //background
|
||||
borderStyle: string;
|
||||
borderColor: string;
|
||||
borderWidth: number;
|
||||
}
|
||||
}
|
||||
homeBanner:{
|
||||
onDarkBackground: boolean,
|
||||
background: {
|
||||
light: {
|
||||
isDefault:boolean,
|
||||
color: string; //background
|
||||
borderStyle: string;
|
||||
borderColor: string;
|
||||
borderWidth: number;
|
||||
}
|
||||
}
|
||||
lightPageBackground:{
|
||||
background: {
|
||||
color: string; //background
|
||||
borderStyle: string;
|
||||
borderColor: string;
|
||||
borderWidth: number;
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
panel: {
|
||||
onDarkBackground: boolean,
|
||||
background: {
|
||||
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(mainColor: string = null, secondaryColor: string = null) {
|
||||
|
||||
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'
|
||||
}*/
|
||||
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)',
|
||||
},
|
||||
},
|
||||
lightBackground: {
|
||||
color: '#4687E6',
|
||||
onHover: {
|
||||
color: '#2D72D6'
|
||||
this.backgrounds={
|
||||
isDefault: true,
|
||||
dark : {
|
||||
isDefault: true,
|
||||
color: this.identity.mainColor,
|
||||
},
|
||||
light : {
|
||||
isDefault: true,
|
||||
color: CustomizationOptions.getRGBA(this.identity.mainColor,0.1),
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
this.buttons = {
|
||||
isDefault: true,
|
||||
darkBackground: {
|
||||
isDefault:true,
|
||||
backgroundColor: "#ffffff",
|
||||
color: "#000000",
|
||||
borderStyle: "solid",
|
||||
|
|
@ -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;
|
||||
};
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue