From f4a4025fc491e3a9837b70be6cea4d157faa8ac2 Mon Sep 17 00:00:00 2001 From: "argiro.kokogiannaki" Date: Wed, 9 Oct 2019 15:54:01 +0000 Subject: [PATCH] [Connect|Trunk] Customization: append css only once - use html id request the API for saved layout options default options using the constructor of CustomizationOptions class use string concat methods to create the build the css git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@57332 d315682c-612b-4755-9ff5-7f18f6832af3 --- src/app/app.component.ts | 2 +- .../customization/customization.component.ts | 286 +++++++++--------- src/index.html | 21 +- 3 files changed, 150 insertions(+), 159 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 23e82c2..44de09a 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -26,7 +26,7 @@ import {UserManagementService} from "./openaireLibrary/services/user-management. [userMenuItems]=userMenuItems [menuItems]=menuItems [user]="user" [community]=community [showMenu]=showMenu [properties]="properties" [enableSearch]="true" [showHomeMenuItem]="true"> - +
diff --git a/src/app/utils/customization/customization.component.ts b/src/app/utils/customization/customization.component.ts index 2ed8168..2829177 100644 --- a/src/app/utils/customization/customization.component.ts +++ b/src/app/utils/customization/customization.component.ts @@ -3,8 +3,6 @@ import {ActivatedRoute, Router} from '@angular/router'; import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties'; import {LayoutService} from "../../openaireLibrary/services/layout.service"; import {CustomizationOptions} from "../../openaireLibrary/connect/community/CustomizationOptions"; -import {ConnectHelper} from "../../openaireLibrary/connect/connectHelper"; -import {PiwikHelper} from "../piwikHelper"; import {StringUtils} from "../../openaireLibrary/utils/string-utils.class"; declare var appendCss: any; @@ -20,6 +18,7 @@ declare var appendCss: any; export class CustomizationComponent { @Input() communityId; layout: CustomizationOptions; + @Input() properties:EnvProperties; constructor(private route: ActivatedRoute, private router: Router, private _layoutService: LayoutService @@ -27,28 +26,29 @@ export class CustomizationComponent { } public ngOnInit() { - this.route.data - .subscribe((data: { envSpecific: EnvProperties }) => { + this.route.queryParams.subscribe(params => { if(params['layout']) { this.layout = JSON.parse(StringUtils.URIDecode(params['layout'])); this.buildCss(); }else{ - // this.properties = data.envSpecific; -//com.communityId, -// data.envSpecific.adminToolsAPIURL + '/' - - this._layoutService.mockLayout().subscribe( + this._layoutService.getLayout(this.communityId, this.properties.adminToolsAPIURL+"/community/").subscribe( layout => { this.layout = layout; - + if(!layout){ + this.layout = new CustomizationOptions(); + } + this.buildCss(); + }, + error => { + console.log(" Layout not found - use default"); + this.layout = new CustomizationOptions(); this.buildCss(); } ); } - }); @@ -58,160 +58,149 @@ export class CustomizationComponent { } private buildCss() { - 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 = ` - /*Panel background*/ -.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: '1') + `px;`+` + let css:string = ""; + //Panel background + css = css.concat(' .communityPanelBackground:not(bottom) { '); + css = css.concat(' border-style: ' + (this.layout.panel.background.borderStyle != null ? this.layout.panel.background.borderStyle : 'solid') + ';'); + css = css.concat(' border-color: ' + (this.layout.panel.background.borderColor != null ? this.layout.panel.background.borderColor : 'transparent') + ';'); + css = css.concat(' border-width: ' + (this.layout.panel.background.borderWidth != null ? this.layout.panel.background.borderWidth : '1') + 'px;'); + css = css.concat(' }'); + css = css.concat(' .communityPanelBackground, .communityPanelBackground .uk-section-primary {'); + css = css.concat(' background-color: '+ (this.layout.panel.background.color?this.layout.panel.background.color:this.layout.mainColor) + ';}') +//PAnel fonts + css = css.concat(' .communityPanelBackground {'); + css = css.concat(' color:' + (this.layout.panel.fonts.color != null ? this.layout.panel.fonts.color : 'white') + ' !important;'); + + css = css.concat(this.layout.panel.fonts.family != null ? ('font-family: ' + this.layout.panel.fonts.family + ' !important;') : ''); + css = css.concat((this.layout.panel.fonts.size != null ? ('font-size: ' + this.layout.panel.fonts.size + 'px !important;') : '')); + css = css.concat(this.layout.panel.fonts.weight != null ? ('font-weight: ' + this.layout.panel.fonts.weight + '!important;') : ''); + css = css.concat(' }'); + + css = css.concat(' .communityPanelBackground div.uk-modal{color:#666 !important;}'); + + css = css.concat(' .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) {') + css = css.concat(' color: ' + (this.layout.panel.title.color != null ? this.layout.panel.title.color : 'white') + ' !important;' ); + css = css.concat((this.layout.panel.title.weight != null ? ('font-weight: ' + this.layout.panel.title.weight + '!important;') : '')); + css = css.concat(' }'); + + css = css.concat(' .communityPanelBackground .uk-h5:not(.ignoreCommunityPanelBackground){'); + css = css.concat((this.layout.panel.title.family != null ? ('font-family: ' + this.layout.panel.title.family + ' !important;') : '')); + css = css.concat((this.layout.panel.title.size != null ? ('font-size: ' + this.layout.panel.title.size + 'px !important;') : '')); + css = css.concat(' }'); + + //Panel links + + css = css.concat(' .communityPanelBackground .uk-link:not(.ignoreCommunityPanelBackground), .communityPanelBackground a:not(.uk-button):not(.uk-button-text):not(.ignoreCommunityPanelBackground), .portal-card a {'); + css = css.concat(' color:'+(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;'); + css = css.concat((this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.family?('font-family: ' + this.layout.links.darkBackground.family + ' !important;') : '') :'' )); + css = css.concat((this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.size?('font-size: ' + this.layout.links.darkBackground.size + 'px !important;') : '') :'' )); + css = css.concat(' }'); + +//Panel links - hover + css = css.concat(' .communityPanelBackground .uk-link:not(.ignoreCommunityPanelBackground):hover, .communityPanelBackground a:not(.uk-button):not(.uk-button-text):not(.ignoreCommunityPanelBackground):hover, .portal-card a:hover {'); + css = css.concat(' 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)') ) + ' !important;'); + css = css.concat(); + css = css.concat(' }'); + + + + css = css.concat(' .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{'); + css = css.concat(' color:' + (this.layout.links.lightBackground.color != null ? this.layout.links.lightBackground.color : `var(--portal-main-color)`)+';'); + css = css.concat(' }'); + + css = css.concat(' .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{'); + css = css.concat(' color:' + (this.layout.links.lightBackground.onHover.color != null ? this.layout.links.lightBackground.onHover.color : `var(--portal-dark-color)`)+';'); + css = css.concat(' }'); + + + css = css.concat(' .communityBorder {'); + css = css.concat(' border-color: ' + (this.layout.box.borderColor != null ? this.layout.box.borderColor : 'var(--portal-main-color)') + ';'); + css = css.concat(' border-style: ' + (this.layout.box.borderStyle != null ? this.layout.box.borderStyle : 'solid') + ';'); + css = css.concat(' border-width: ' + (this.layout.box.borderWidth != null ? this.layout.box.borderWidth : '2') + 'px;'); + css = css.concat(' border-radius: ' + (this.layout.box.borderRadius != null ? this.layout.box.borderRadius : '6') + 'px;'); + css = css.concat(' }'); + + /*Panel Elements & cards*/ + css = css.concat(' .communityPanelBackground .uk-card:not(.ignoreCommunityPanelBackground), .communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) {'); + css = css.concat(' background-color: ' + (this.layout.panel.panelElements.backgroundColor != null ? this.layout.panel.panelElements.backgroundColor : 'rgba(255, 255, 255, 0.5)') + ';'); + css = css.concat( 'border-color: ' + (this.layout.panel.panelElements.borderColor != null ? this.layout.panel.panelElements.borderColor : 'rgba(255, 255, 255, 0.5)') + ';'); + css = css.concat(' }'); + + css = css.concat(' .communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) a{'); + css = css.concat( '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)') ) +';' ); + css = css.concat(' border-bottom: 1px solid;'); + css = css.concat(' }'); + + css = css.concat(' .communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) a:hover{'); + css = css.concat(' 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)') )+';'); + css = css.concat(' }'); -} -.communityPanelBackground, .communityPanelBackground .uk-section-primary { - background-color: ` + (this.layout.panel.background.color?this.layout.panel.background.color:this.layout.mainColor) + `; -} + + css = css.concat(' .communityPanelBackground .uk-card:not(.ignoreCommunityPanelBackground), .communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) {'); + css = css.concat(' color:'+(this.layout.panel.panelElements.color != null ? this.layout.panel.panelElements.color : 'rgba(255, 255, 255, 0.5)')+';'); + css = css.concat(); + css = css.concat(' }'); -/*Panel fonts*/ - -.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 + 'px !important;') : '') + - (this.layout.panel.fonts.weight != null ? ('font-weight: ' + this.layout.panel.fonts.weight + '!important;') : '') + - - ` -} - .communityPanelBackground div.uk-modal { - color:#666 !important; -} - -.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 + '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.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.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.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.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 : `2`) + `px; - border-radius: ` + (this.layout.box.borderRadius != null ? this.layout.box.borderRadius : `6`) + `px; -} - -/*Panel Elements & cards*/ -.communityPanelBackground .uk-card:not(.ignoreCommunityPanelBackground), .communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) { - background-color: ` + (this.layout.panel.panelElements.backgroundColor != null ? this.layout.panel.panelElements.backgroundColor : `rgba(255, 255, 255, 0.5)`) + `; - 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.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.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)`) + `; -} + css = css.concat(' .uk-button:not(.uk-button-text){'); + css = css.concat(' border-radius:' + (this.layout.buttons.lightBackground.borderRadius != null ? this.layout.buttons.lightBackground.borderRadius : '4') + 'px;'); + css = css.concat(' }'); -.uk-button:not(.uk-button-text){ - 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.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; - + css = css.concat(' .uk-button:not(.uk-button-text):not(.uk-button-default):not(.uk-button-primary), .portal-button {'); + css = css.concat(' background-color:' + (this.layout.buttons.lightBackground.backgroundColor != null ? this.layout.buttons.lightBackground.backgroundColor : `#003052`) + ';'); + css = css.concat(' color: ' + (this.layout.buttons.lightBackground.color != null ? this.layout.buttons.lightBackground.color : `white`) + ';'); + css = css.concat(+'border-color: ' + (this.layout.buttons.lightBackground.borderColor != null ? this.layout.buttons.lightBackground.borderColor : `transparent`) + ';'); + css = css.concat(' border-style: ' + (this.layout.buttons.lightBackground.borderStyle != null ? this.layout.buttons.lightBackground.borderStyle : `solid`) + ';'); + css = css.concat(' border-width: ' + (this.layout.buttons.lightBackground.borderWidth != null ? this.layout.buttons.lightBackground.borderWidth : `1`) + 'px;'); + css = css.concat(' }'); -} -.uk-button:not(.uk-button-text):not(.uk-button-default):not(.uk-button-primary):hover, .portal-button:hover { - 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.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: ` + css = css.concat(' .uk-button:not(.uk-button-text):not(.uk-button-default):not(.uk-button-primary):hover, .portal-button:hover {'); + css = css.concat(' background-color:' + (this.layout.buttons.lightBackground.onHover.backgroundColor != null ? this.layout.buttons.lightBackground.onHover.backgroundColor : '#154B71') + ';'); + css = css.concat(' color: '+ (this.layout.buttons.lightBackground.onHover.color != null ? this.layout.buttons.lightBackground.onHover.color : 'white') + ';'); + css = css.concat(' border-color: ' + (this.layout.buttons.lightBackground.onHover.color != null ? this.layout.buttons.lightBackground.onHover.color : 'transparent') + ';'); + css = css.concat(' }'); + /*Buttons*/ + css = css.concat(' .communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground) {'); + css = css.concat( '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;'); + css = css.concat(' 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: ` + + ' !important;'); + css = css.concat(' 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: ` + + + ' !important;'); + css = css.concat(' 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`) + `; -+` -} + + ' !important;'); + css = css.concat( 'border-width: ' + + (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.borderWidth?this.layout.buttons.darkBackground.borderWidth:'1') :(this.layout.buttons.lightBackground.borderWidth?this.layout.buttons.lightBackground.borderWidth:'1') ) + + 'px !important;'); + css = css.concat( 'border-radius:' + + (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.borderRadius?this.layout.buttons.darkBackground.borderRadius:'4') :(this.layout.buttons.lightBackground.borderRadius?this.layout.buttons.lightBackground.borderRadius:'4') ) + + 'px !important;'); -.communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground):hover { - background-color: ` + + css = css.concat(' }'); + + + css = css.concat(' .communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground):hover {'); + css = css.concat(' 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: ` + + + ' !important;'); + css = css.concat( '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:` + + ' !important;'); + css = css.concat( '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; -} - + + ' !important;'); + css = css.concat(' }'); + let css1 = ` + .uk-navbar-dropdown { background-color: white; color: #666; @@ -233,6 +222,7 @@ export class CustomizationComponent { ` + css = css.concat(css1); appendCss(css); } } diff --git a/src/index.html b/src/index.html index b791017..3079470 100644 --- a/src/index.html +++ b/src/index.html @@ -59,7 +59,7 @@ - +