[Connect | Trunk]
Customization: updates according to admin UI git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@57275 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
parent
4558e11745
commit
c25dceee79
|
@ -58,7 +58,8 @@ export class CustomizationComponent {
|
|||
}
|
||||
|
||||
private buildCss() {
|
||||
// console.log(this.layout);
|
||||
console.log(this.layout);
|
||||
|
||||
document.documentElement.style.setProperty('--portal-main-color', this.layout.mainColor);
|
||||
document.documentElement.style.setProperty('--portal-dark-color', this.layout.secondaryColor);
|
||||
let css = `
|
||||
|
@ -66,10 +67,11 @@ export class CustomizationComponent {
|
|||
.communityPanelBackground:not(bottom) {
|
||||
border-style: ` + (this.layout.panel.background.borderStyle != null ? this.layout.panel.background.borderStyle : 'solid') + `;
|
||||
border-color:` + (this.layout.panel.background.borderColor != null ? this.layout.panel.background.borderColor : 'transparent') + `;
|
||||
border-width: ` + (this.layout.panel.background.borderWidth != null ? this.layout.panel.background.borderWidth : '1px') + `;`+`
|
||||
border-width: ` + (this.layout.panel.background.borderWidth != null ? this.layout.panel.background.borderWidth: '1') + `px;`+`
|
||||
|
||||
}
|
||||
.communityPanelBackground, .communityPanelBackground .uk-section-primary {
|
||||
background-color: ` + this.layout.mainColor + `;
|
||||
background-color: ` + (this.layout.panel.background.color?this.layout.panel.background.color:this.layout.mainColor) + `;
|
||||
}
|
||||
|
||||
/*Panel fonts*/
|
||||
|
@ -77,7 +79,8 @@ export class CustomizationComponent {
|
|||
.communityPanelBackground {
|
||||
color:` + (this.layout.panel.fonts.color != null ? this.layout.panel.fonts.color : 'white') + ` !important;` +
|
||||
(this.layout.panel.fonts.family != null ? ('font-family: ' + this.layout.panel.fonts.family + ' !important;') : '') +
|
||||
(this.layout.panel.fonts.size != null ? ('font-size: ' + this.layout.panel.fonts.size + ' !important;') : '') +
|
||||
(this.layout.panel.fonts.size != null ? ('font-size: ' + this.layout.panel.fonts.size + 'px !important;') : '') +
|
||||
(this.layout.panel.fonts.weight != null ? ('font-weight: ' + this.layout.panel.fonts.weight + '!important;') : '') +
|
||||
|
||||
`
|
||||
}
|
||||
|
@ -87,46 +90,47 @@ export class CustomizationComponent {
|
|||
|
||||
.communityPanelBackground .uk-h6:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h5:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h4:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h3:not(.ignoreCommunityPanelBackground), .communityPanelBackground .uk-h2:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h1:not(.ignoreCommunityPanelBackground) {
|
||||
color: ` + (this.layout.panel.title.color != null ? this.layout.panel.title.color : 'white') + ` !important;` +
|
||||
|
||||
(this.layout.panel.title.weight != null ? ('font-weight: ' + this.layout.panel.title.weight + '!important;') : '') +
|
||||
`
|
||||
}
|
||||
.communityPanelBackground .uk-h5:not(.ignoreCommunityPanelBackground){
|
||||
`+
|
||||
(this.layout.panel.title.family != null ? ('font-family: ' + this.layout.panel.title.family + ' !important;') : '') +
|
||||
(this.layout.panel.title.size != null ? ('font-size: ' + this.layout.panel.title.size + ' !important;') : '') +
|
||||
(this.layout.panel.title.size != null ? ('font-size: ' + this.layout.panel.title.size + 'px !important;') : '') +
|
||||
`
|
||||
}
|
||||
/* Panel links */
|
||||
.communityPanelBackground .uk-link:not(.ignoreCommunityPanelBackground), .communityPanelBackground a:not(.uk-button):not(.uk-button-text):not(.ignoreCommunityPanelBackground), .portal-card a {
|
||||
color: `
|
||||
+ (this.layout.panel.links.color != null ? this.layout.panel.links.color : 'white') + ` !important;` +
|
||||
(this.layout.panel.links.family != null ? ('font-family: ' + this.layout.panel.links.family + ' !important;') : '') +
|
||||
(this.layout.panel.links.size != null ? ('font-size: ' + this.layout.panel.links.size + ' !important;') : '') +
|
||||
`
|
||||
+ (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.color?this.layout.links.darkBackground.color:'white') :(this.layout.links.lightBackground.color?this.layout.links.lightBackground.color:'var(--portal-main-color)') ) + ` !important;`
|
||||
+ (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.family?('font-family: ' + this.layout.links.darkBackground.family + ' !important;') : '') :'' )
|
||||
+ (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.size?('font-size: ' + this.layout.links.darkBackground.size + 'px !important;') : '') :'' )
|
||||
+`
|
||||
}
|
||||
/* Panel links - hover */
|
||||
|
||||
.communityPanelBackground .uk-link:not(.ignoreCommunityPanelBackground):hover, .communityPanelBackground a:not(.uk-button):not(.uk-button-text):not(.ignoreCommunityPanelBackground):hover, .portal-card a:hover {
|
||||
color: `
|
||||
+ (this.layout.panel.links.onHover.color != null ? this.layout.panel.links.onHover.color : `rgba(255, 255, 255, 0.5)`) + ` !important;` + `
|
||||
+ (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.onHover.color?this.layout.links.darkBackground.onHover.color:`rgba(255, 255, 255, 0.5)`) :(this.layout.links.lightBackground.onHover.color?this.layout.links.lightBackground.onHover.color:'var(--portal-dark-color)') ) + ` !important;`
|
||||
+ `
|
||||
}
|
||||
|
||||
.uk-link, a:not(.uk-button), .uk-navbar-dropdown-nav > li > a, .uk-navbar-nav > li > a, .loginLink,
|
||||
.uk-tab > .uk-active > a, .uk-tab > * > a:focus, .uk-tab > * > a:hover {
|
||||
color:` + (this.layout.links.color != null ? this.layout.links.color : `var(--portal-main-color)`) + `
|
||||
color:` + (this.layout.links.lightBackground.color != null ? this.layout.links.lightBackground.color : `var(--portal-main-color)`) + `
|
||||
}
|
||||
|
||||
.uk-link:hover, a:not(.uk-button):hover,
|
||||
.uk-navbar-dropdown-nav > li > a:focus, .uk-navbar-dropdown-nav > li > a:hover, .uk-navbar-nav > li > a:hover, .uk-navbar-nav > li > a:focus, .uk-navbar-nav > li > a:active, .uk-navbar-nav > li:hover > a,
|
||||
.uk-navbar-dropdown-nav > li.uk-active > a, .uk-tab > .uk-active > a, .uk-navbar-nav > li.uk-active > a, .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav > li.uk-active > a {
|
||||
color:` + (this.layout.links.onHover.color != null ? this.layout.links.onHover.color : `var(--portal-dark-color)`) + `
|
||||
color:` + (this.layout.links.lightBackground.onHover.color != null ? this.layout.links.lightBackground.onHover.color : `var(--portal-dark-color)`) + `
|
||||
}
|
||||
|
||||
.communityBorder {
|
||||
border-color: ` + (this.layout.box.borderColor != null ? this.layout.box.borderColor : `var(--portal-main-color)`) + `;
|
||||
border-style: ` + (this.layout.box.borderStyle != null ? this.layout.box.borderStyle : `solid`) + `;
|
||||
border-width: ` + (this.layout.box.borderWidth != null ? this.layout.box.borderWidth : `2px`) + `;
|
||||
border-radius: ` + (this.layout.box.borderRadius != null ? this.layout.box.borderRadius : `6px`) + `;
|
||||
border-width: ` + (this.layout.box.borderWidth != null ? this.layout.box.borderWidth : `2`) + `px;
|
||||
border-radius: ` + (this.layout.box.borderRadius != null ? this.layout.box.borderRadius : `6`) + `px;
|
||||
}
|
||||
|
||||
/*Panel Elements & cards*/
|
||||
|
@ -135,11 +139,15 @@ export class CustomizationComponent {
|
|||
border-color: ` + (this.layout.panel.panelElements.borderColor != null ? this.layout.panel.panelElements.borderColor : `rgba(255, 255, 255, 0.5)`) + `;
|
||||
}
|
||||
.communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) a{
|
||||
border-color: ` + (this.layout.panel.links.color != null ? this.layout.panel.links.color : `rgba(255, 255, 255, 0.8)`) + `;
|
||||
border-color: ` +
|
||||
+ (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.color?this.layout.links.darkBackground.color:'rgba(255, 255, 255, 0.8)') :(this.layout.links.lightBackground.color?this.layout.links.lightBackground.color:'var(--portal-main-color)') ) +
|
||||
+ `;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
.communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) a:hover{
|
||||
border-color: ` + (this.layout.panel.links.onHover.color != null ? this.layout.panel.links.onHover.color : `rgba(255, 255, 255, 0.5)`) + `;
|
||||
border-color: ` +
|
||||
(this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.onHover.color?this.layout.links.darkBackground.onHover.color:'rgba(255, 255, 255, 0.5)') :(this.layout.links.lightBackground.onHover.color?this.layout.links.lightBackground.onHover.color:'var(--portal-dark-color)') )+
|
||||
+ `;
|
||||
}
|
||||
.communityPanelBackground .uk-card:not(.ignoreCommunityPanelBackground), .communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) {
|
||||
color: ` + (this.layout.panel.panelElements.color != null ? this.layout.panel.panelElements.color : `rgba(255, 255, 255, 0.5)`) + `;
|
||||
|
@ -147,40 +155,60 @@ export class CustomizationComponent {
|
|||
|
||||
|
||||
.uk-button:not(.uk-button-text){
|
||||
border-radius:` + (this.layout.buttons.borderRadius != null ? this.layout.buttons.borderRadius : `4px`) + `;
|
||||
border-radius:` + (this.layout.buttons.lightBackground.borderRadius != null ? this.layout.buttons.lightBackground.borderRadius : `4`) + `px;
|
||||
}
|
||||
.uk-button:not(.uk-button-text):not(.uk-button-default):not(.uk-button-primary), .portal-button {
|
||||
background-color:` + (this.layout.buttons.backgroundColor != null ? this.layout.buttons.backgroundColor : `#003052`) + `;
|
||||
color: ` + (this.layout.buttons.color != null ? this.layout.buttons.color : `white`) + `;
|
||||
border-color: ` + (this.layout.buttons.borderColor != null ? this.layout.buttons.borderColor : `transparent`) + `;
|
||||
border-style: ` + (this.layout.buttons.borderStyle != null ? this.layout.buttons.borderStyle : `solid`) + `;
|
||||
border-width: ` + (this.layout.buttons.borderWidth != null ? this.layout.buttons.borderWidth : `1px`) + `;
|
||||
background-color:` + (this.layout.buttons.lightBackground.backgroundColor != null ? this.layout.buttons.lightBackground.backgroundColor : `#003052`) + `;
|
||||
color: ` + (this.layout.buttons.lightBackground.color != null ? this.layout.buttons.lightBackground.color : `white`) + `;
|
||||
border-color: ` + (this.layout.buttons.lightBackground.borderColor != null ? this.layout.buttons.lightBackground.borderColor : `transparent`) + `;
|
||||
border-style: ` + (this.layout.buttons.lightBackground.borderStyle != null ? this.layout.buttons.lightBackground.borderStyle : `solid`) + `;
|
||||
border-width: ` + (this.layout.buttons.lightBackground.borderWidth != null ? this.layout.buttons.lightBackground.borderWidth : `1`) + `px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.uk-button:not(.uk-button-text):not(.uk-button-default):not(.uk-button-primary):hover, .portal-button:hover {
|
||||
background-color: ` + (this.layout.buttons.onHover.backgroundColor != null ? this.layout.buttons.onHover.backgroundColor : `#154B71`) + `;
|
||||
color: ` + (this.layout.buttons.onHover.color != null ? this.layout.buttons.onHover.color : `white`) + `;
|
||||
border-color: ` + (this.layout.buttons.onHover.color != null ? this.layout.buttons.onHover.color : `transparent`) + `;
|
||||
background-color: ` + (this.layout.buttons.lightBackground.onHover.backgroundColor != null ? this.layout.buttons.lightBackground.onHover.backgroundColor : `#154B71`) + `;
|
||||
color: ` + (this.layout.buttons.lightBackground.onHover.color != null ? this.layout.buttons.lightBackground.onHover.color : `white`) + `;
|
||||
border-color: ` + (this.layout.buttons.lightBackground.onHover.color != null ? this.layout.buttons.lightBackground.onHover.color : `transparent`) + `;
|
||||
}
|
||||
|
||||
/*Buttons*/
|
||||
.communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground) {
|
||||
background-color: ` + (this.layout.panel.buttons.backgroundColor != null ? this.layout.panel.buttons.backgroundColor : `white`) + ` !important;
|
||||
color: ` + (this.layout.panel.buttons.color != null ? this.layout.panel.buttons.color : `var(--portal-main-color)`) + ` !important;
|
||||
border-color: ` + (this.layout.panel.buttons.borderColor != null ? this.layout.panel.buttons.borderColor : `transparent`) + ` !important;
|
||||
border-style: ` + (this.layout.panel.buttons.borderStyle != null ? this.layout.panel.buttons.borderStyle : `solid`) + ` !important;
|
||||
border-width: ` + (this.layout.panel.buttons.borderWidth != null ? this.layout.panel.buttons.borderWidth : `1px`) + ` !important;
|
||||
border-radius:` + (this.layout.panel.buttons.borderRadius != null ? this.layout.panel.buttons.borderRadius : `4px`) + ` !important;
|
||||
font-weight:` + (this.layout.panel.buttons.fontWeight != null ? this.layout.panel.buttons.fontWeight : `600`) + `;
|
||||
|
||||
background-color: `
|
||||
+ (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.backgroundColor?this.layout.buttons.darkBackground.backgroundColor:'white') :(this.layout.buttons.lightBackground.backgroundColor?this.layout.buttons.lightBackground.backgroundColor:'var(--portal-main-color)') )
|
||||
+` !important;
|
||||
color: `
|
||||
+ (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.color?this.layout.buttons.darkBackground.color:'var(--portal-main-color)') :(this.layout.buttons.lightBackground.color?this.layout.buttons.lightBackground.color:'white') )
|
||||
+ ` !important;
|
||||
border-color: `
|
||||
+ (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.borderColor?this.layout.buttons.darkBackground.borderColor:'white') :(this.layout.buttons.lightBackground.borderColor?this.layout.buttons.lightBackground.borderColor:'var(--portal-main-color)') )
|
||||
+ ` !important;
|
||||
border-style: ` +
|
||||
(this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.borderStyle?this.layout.buttons.darkBackground.borderStyle:'solid') :(this.layout.buttons.lightBackground.borderStyle?this.layout.buttons.lightBackground.borderStyle:'solid') )
|
||||
+ ` !important;
|
||||
border-width: ` +
|
||||
(this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.borderWidth?this.layout.buttons.darkBackground.borderWidth:'1px') :(this.layout.buttons.lightBackground.borderWidth?this.layout.buttons.lightBackground.borderWidth:'1px') )
|
||||
+ ` !important;
|
||||
border-radius:` +
|
||||
(this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.borderRadius?this.layout.buttons.darkBackground.borderRadius:'4px') :(this.layout.buttons.lightBackground.borderRadius?this.layout.buttons.lightBackground.borderRadius:'4px') )+
|
||||
+ ` !important;
|
||||
font-weight:`
|
||||
// (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.fontWeight?this.layout.buttons.darkBackground.fontWeight:'4px') :(this.layout.buttons.lightBackground.borderRadius?this.layout.buttons.lightBackground.borderRadius:'4px') )+
|
||||
// (this.layout.panel.buttons.fontWeight != null ? this.layout.panel.buttons.fontWeight : `600`) + `;
|
||||
+`
|
||||
}
|
||||
|
||||
.communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground):hover {
|
||||
background-color: ` + (this.layout.panel.buttons.onHover.backgroundColor != null ? this.layout.panel.buttons.onHover.backgroundColor : ` #eeeeee `) + ` !important;
|
||||
color: ` + (this.layout.panel.buttons.onHover.color != null ? this.layout.panel.buttons.onHover.color : ` var(--portal-main-color) `) + ` !important;
|
||||
border-color:` + (this.layout.panel.buttons.onHover.borderColor != null ? this.layout.panel.buttons.onHover.borderColor : `transparent`) + ` !important;
|
||||
background-color: ` +
|
||||
(this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.onHover.backgroundColor?this.layout.buttons.darkBackground.onHover.backgroundColor:' #eeeeee') :(this.layout.buttons.lightBackground.onHover.backgroundColor?this.layout.buttons.lightBackground.onHover.backgroundColor:'var(--portal-dark-color)') )
|
||||
+ ` !important;
|
||||
color: ` +
|
||||
(this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.onHover.color?this.layout.buttons.darkBackground.onHover.color:' var(--portal-main-color) ') :(this.layout.buttons.lightBackground.onHover.color?this.layout.buttons.lightBackground.onHover.color:'white') )
|
||||
+ ` !important;
|
||||
border-color:`
|
||||
+(this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.onHover.borderColor?this.layout.buttons.darkBackground.onHover.borderColor:' #eeeeee ') :(this.layout.buttons.lightBackground.onHover.borderColor?this.layout.buttons.lightBackground.onHover.borderColor:'var(--portal-dark-color)') )
|
||||
+ ` !important;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -1,80 +1,81 @@
|
|||
{
|
||||
"mainColor": "#4C9CD5",
|
||||
"secondaryColor": "#24857F",
|
||||
"panel": {
|
||||
"background": {
|
||||
"borderStyle": null,
|
||||
"borderColor": null,
|
||||
"borderWidth": null
|
||||
}, "fonts": {
|
||||
"color": "white",
|
||||
"family": null,
|
||||
"size": null
|
||||
"mainColor":"#4C9CD5",
|
||||
"secondaryColor":"#24857F",
|
||||
"panel":{
|
||||
"onDarkBackground":true,
|
||||
"background":{
|
||||
"color":"#4C9CD5",
|
||||
"borderStyle":null,
|
||||
"borderColor":null,
|
||||
"borderWidth":"0"
|
||||
},
|
||||
"title": {
|
||||
"color": "white",
|
||||
"family": null,
|
||||
"size": null
|
||||
"fonts":{
|
||||
"color":"white",
|
||||
"family":null,
|
||||
"size":null,
|
||||
"weight":null
|
||||
},
|
||||
"links": {
|
||||
"color": "rgba(255, 255, 255, 0.98)",
|
||||
"family": null,
|
||||
"size": null,
|
||||
"onHover": {
|
||||
"color": null
|
||||
}
|
||||
"title":{
|
||||
"color":"white",
|
||||
"family":null,
|
||||
"size":null,
|
||||
"weight":null
|
||||
},
|
||||
"buttons": {
|
||||
"backgroundColor": "white",
|
||||
"fontWeight": null,
|
||||
"color": null,
|
||||
"borderStyle": null,
|
||||
"borderColor": null,
|
||||
"borderWidth": "1px",
|
||||
"borderRadius": "4px",
|
||||
"onHover": {
|
||||
"backgroundColor": "#eeeeee",
|
||||
"color": null,
|
||||
"borderColor": null
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
"panelElements": {
|
||||
"backgroundColor": "rgba(255, 255, 255, 0.5)",
|
||||
"borderColor": "rgba(255, 255, 255, 0.5)",
|
||||
"color": "white"
|
||||
"panelElements":{
|
||||
"backgroundColor":"rgba(255, 255, 255, 0.5)",
|
||||
"borderColor":"rgba(255, 255, 255, 0.5)",
|
||||
"color":"white"
|
||||
}
|
||||
},
|
||||
|
||||
"box": {
|
||||
"borderColor": null,
|
||||
"borderStyle": "solid",
|
||||
"borderWidth": "2px",
|
||||
"borderRadius": "6px"
|
||||
"box":{
|
||||
"borderColor":null,
|
||||
"borderStyle":"solid",
|
||||
"borderWidth":"2",
|
||||
"borderRadius":"6"
|
||||
},
|
||||
|
||||
"links": {
|
||||
"color": null,
|
||||
"family": null,
|
||||
"decoration": null,
|
||||
"onHover": {
|
||||
"color": null
|
||||
"links":{
|
||||
"darkBackground":{
|
||||
"family":null,
|
||||
"size":null,
|
||||
"weight":null,
|
||||
"color":"rgba(255, 255, 255, 0.98)",
|
||||
"onHover":{
|
||||
"color":"rgba(255, 255, 255, 0.5)"
|
||||
}
|
||||
},
|
||||
"lightBackground":{
|
||||
"color":"#4C9CD5",
|
||||
"onHover":{
|
||||
"color":"#24857F"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
"buttons": {
|
||||
"backgroundColor": null,
|
||||
"color": null,
|
||||
"borderStyle": null,
|
||||
"borderColor": null,
|
||||
"borderWidth": null,
|
||||
"borderRadius": null,
|
||||
"onHover": {
|
||||
"backgroundColor": null,
|
||||
"color": null,
|
||||
"borderColor": null
|
||||
"buttons":{
|
||||
"darkBackground":{
|
||||
"backgroundColor":"white",
|
||||
"color":"#4C9CD5",
|
||||
"borderStyle":"solid",
|
||||
"borderColor":"white",
|
||||
"borderWidth":"1",
|
||||
"borderRadius":"4",
|
||||
"onHover":{
|
||||
"backgroundColor":"#eeeeee",
|
||||
"color":"#4C9CD5",
|
||||
"borderColor":"#eeeeee"
|
||||
}
|
||||
},
|
||||
"lightBackground":{
|
||||
"backgroundColor":"#003052",
|
||||
"color":"white",
|
||||
"borderStyle":"solid",
|
||||
"borderColor":"#003052",
|
||||
"borderWidth":"1",
|
||||
"borderRadius":"4",
|
||||
"onHover":{
|
||||
"backgroundColor":"#154B71",
|
||||
"color":"white",
|
||||
"borderColor":"#154B71"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue