MaDgIK
/
connect
13
0
Fork 0
Code Issues Pull Requests Projects Releases 12 Wiki Activity

[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 2019-10-09 15:54:01 +00:00
parent f3da2f0482
commit f4a4025fc4
3 changed files with 150 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app.component.ts
View File

@ -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>

286
src/app/utils/customization/customization.component.ts
View File

@ -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);
}
}

21
src/index.html
View File

@ -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-->