[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
2019-10-07 07:00:19 +00:00 · 2019-10-07 07:00:19 +00:00 · c25dceee79
parent 4558e11745
commit c25dceee79
2 changed files with 134 additions and 105 deletions
--- a/src/app/utils/customization/customization.component.ts
+++ b/src/app/utils/customization/customization.component.ts
@ -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;
 }


--- a/src/assets/customizationOptions.json
+++ b/src/assets/customizationOptions.json
@ -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"
+      }
    }
  }
 }