[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
This commit is contained in:
argiro.kokogiannaki
parent
f3da2f0482
commit
f4a4025fc4
|
|
@ -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"></navbar>
|
||||
<customization *ngIf="properties && community"></customization>
|
||||
<customization *ngIf="properties && community" [properties]="properties" [communityId]="community.id"></customization>
|
||||
<div class="custom-main-content">
|
||||
<main>
|
||||
<router-outlet></router-outlet>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@
|
|||
<script src="assets/common-assets/citeproc.js"></script>
|
||||
<script src="assets/common-assets/common/uikit.min.js?v=1"></script>
|
||||
<script src="assets/common-assets/common/uikit-icons.min.js?v=1"></script>
|
||||
<script src="https://cdn.ckeditor.com/4.5.11/full-all/ckeditor.js"></script>
|
||||
<script src="https://cdn.ckeditor.com/4.5.11/full-all/ckeditor.js"></script>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
console.log("Is ready - load uikit ***")
|
||||
|
|
@ -92,20 +92,21 @@ $(document).ready(function(){
|
|||
var d="createElement",c="getElementsByTagName",m="setAttribute",n=document.getElementById(e);
|
||||
return n&&n.parentNode&&n.parentNode.removeChild(n),n=document[d+"NS"]&&document.documentElement.namespaceURI,n=n?document[d+"NS"](n,"script"):document[d]("script"),n[m]("id",e),n[m]("src",t),(document[c]("head")[0]||document[c]("body")[0]).appendChild(n),n=new Image,void n[m]("src","https://d1uo4w7k31k5mn.cloudfront.net/donut/0.png")
|
||||
};
|
||||
|
||||
function appendCss(customData) {
|
||||
if (typeof customData != "undefined")
|
||||
$(document).ready(function () {
|
||||
$("style").append(customData);
|
||||
var link = $("<style>");
|
||||
link.attr({
|
||||
type: 'text/css',
|
||||
rel: 'stylesheet',
|
||||
id: "customCss",
|
||||
});
|
||||
$("head").append(link);
|
||||
$("#customCss").append(customData);
|
||||
});
|
||||
}
|
||||
/* console.log("here!");
|
||||
var fileref=document.createElement("link");
|
||||
fileref.setAttribute("rel", "stylesheet");
|
||||
fileref.setAttribute("type", "text/css");
|
||||
fileref.setAttribute("href", "assets/customization.css");
|
||||
if (typeof fileref!="undefined")
|
||||
document.getElementsByTagName("head")[0].appendChild(fileref)
|
||||
}*/
|
||||
|
||||
</script>
|
||||
<!-- Go to www.addthis.com/dashboard to customize your tools -->
|
||||
<!-- to update addThis: https://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-559d24521cd8c080-->
|
||||
|
|
|
|||
Loading…
Reference in New Issue