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

[Connect|Trunk] 

Add customization css as css file (ignore saved layout)



git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@58505 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki 2020-04-16 10:34:05 +00:00
parent d105c6aa91
commit 984e2a19fd
3 changed files with 192 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,7 +12,7 @@ declare var appendCss: any;
template: `
<!-- <p>This is customizing layout component</p>-->
`
`,
})
export class CustomizationComponent {
@ -27,7 +27,7 @@ export class CustomizationComponent {
public ngOnInit() {
this.route.queryParams.subscribe(params => {
/* this.route.queryParams.subscribe(params => {
if(params['layout']) {
this.layout = JSON.parse(StringUtils.URIDecode(params['layout']));
@ -52,7 +52,15 @@ export class CustomizationComponent {
});
});*/
// TODO When customization is updated remove trhe followin and update appendCss in index.html
appendCss("");
if(typeof document === 'undefined') {
return;
}
document.documentElement.style.setProperty('--portal-main-color', '#4C9CD5');
document.documentElement.style.setProperty('--portal-dark-color', '#24857F');
}
@ -164,7 +172,7 @@ export class CustomizationComponent {
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-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(' }');
@ -235,6 +243,7 @@ export class CustomizationComponent {
`;
css = css.concat(css1);
console.log(css);
appendCss(css);
}
}

169
src/assets/customization.css Normal file
View File

@ -0,0 +1,169 @@
.communityPanelBackground:not(bottom) {
border-style: solid;
border-color: #4C9CD5;
border-width: 0px;
}
.communityPanelBackground,
.communityPanelBackground .uk-section-primary {
background-color: #4C9CD5;
}
.communityPanelBackground {
color: #ffffff !important;
font-family: Open Sans !important;
font-size: 14px !important;
font-weight: 400!important;
}
.communityPanelBackground svg .stroke_line {
stroke: #ffffff !important;
}
.communityPanelBackground svg .fill_text {
fill: #ffffff !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: #ffffff !important;
}
.communityPanelBackground .uk-h5:not(.ignoreCommunityPanelBackground) {
font-family: Open Sans !important;
font-size: 18px !important;
font-weight: 700!important;
}
.communityPanelBackground .uk-link:not(.ignoreCommunityPanelBackground),
.communityPanelBackground a:not(.uk-button):not(.uk-button-text):not(.ignoreCommunityPanelBackground),
.portal-card a {
color: rgba(255, 255, 255, 0.98) !important;
font-family: Open Sans !important;
font-size: 14px !important;
}
.communityPanelBackground .uk-link:not(.ignoreCommunityPanelBackground):hover,
.communityPanelBackground a:not(.uk-button):not(.uk-button-text):not(.ignoreCommunityPanelBackground):hover,
.portal-card a:hover {
color: rgba(255, 255, 255, 0.5) !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: #4C9CD5;
}
.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: #24857F;
}
.communityBorder {
border-color: #4C9CD5;
border-style: solid;
border-width: 2px;
border-radius: 6px;
}
.communityPanelBackground .uk-card:not(.ignoreCommunityPanelBackground),
.communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) {
background-color: rgba(255, 255, 255, 0.5);
border-color: rgba(255, 255, 255, 0.5);
}
.communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) a {
border-color: rgba(255, 255, 255, 0.98);
border-bottom: 1px solid;
}
.communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) a:hover {
border-color: rgba(255, 255, 255, 0.5);
}
.communityPanelBackground .uk-card:not(.ignoreCommunityPanelBackground),
.communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) {
color: #ffffff;
}
.uk-button:not(.uk-button-text) {
border-radius: 4px;
}
.uk-button:not(.uk-button-text):not(.uk-button-default):not(.uk-button-primary),
.portal-button {
background-color: #003052;
color: #ffffff;
border-color:#003052;
border-style: solid;
border-width: 1px;
}
.uk-button:not(.uk-button-text):not(.uk-button-default):not(.uk-button-primary):hover,
.portal-button:hover {
background-color: #154B71;
color: #ffffff;
border-color: #ffffff;
}
.communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground) {
background-color: #ffffff !important;
color: #4C9CD5 !important;
border-color: #ffffff !important;
border-style: solid !important;
border-width: 1px !important;
border-radius: 4px !important;
}
.communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground):hover {
background-color: #eeeeee !important;
color: #4C9CD5 !important;
border-color: #eeeeee !important;
}
.uk-navbar-dropdown {
background-color: white;
color: #666;
box-shadow: 0 5px 12px rgba(0, 0, 0, .15);
/*border:var(--portal-main-color) 1px solid;*/
}
.customTabs .uk-tab>.uk-active>a {
border-color: var(--portal-main-color);
}
.customTabs .uk-tab>.uk-active>a {
border-color: var(--portal-main-color);
}
.uk-tab>*>a:focus,
.uk-tab>*>a:hover {
border-color: var(--portal-dark-color);
}

11
src/index.html
View File

@ -96,13 +96,22 @@ $(document).ready(function(){
function appendCss(customData) {
if (typeof customData != "undefined")
$(document).ready(function () {
var link = $("<style>");
/* var link = $("<style>");
link.attr({
type: 'text/css',
rel: 'stylesheet',
id: "customCss",
});
$("head").append(link);
$("#customCss").append(customData);*/
//TODO uncomment above and remove the following once customization is up to date
var link = $("<link>");
link.attr({
rel: 'stylesheet',
id: "customCss",
href:"/assets/customization.css"
});
$("head").append(link);
$("#customCss").append(customData);
});
}