From 984e2a19fd6e3cb6fc1873f06a236de45a80b642 Mon Sep 17 00:00:00 2001 From: "argiro.kokogiannaki" Date: Thu, 16 Apr 2020 10:34:05 +0000 Subject: [PATCH] [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 --- .../customization/customization.component.ts | 17 +- src/assets/customization.css | 169 ++++++++++++++++++ src/index.html | 11 +- 3 files changed, 192 insertions(+), 5 deletions(-) create mode 100644 src/assets/customization.css diff --git a/src/app/utils/customization/customization.component.ts b/src/app/utils/customization/customization.component.ts index 3ee5cb2..b7ff930 100644 --- a/src/app/utils/customization/customization.component.ts +++ b/src/app/utils/customization/customization.component.ts @@ -12,7 +12,7 @@ declare var appendCss: any; template: ` - ` + `, }) 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); } } diff --git a/src/assets/customization.css b/src/assets/customization.css new file mode 100644 index 0000000..fc3e4c1 --- /dev/null +++ b/src/assets/customization.css @@ -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); +} + diff --git a/src/index.html b/src/index.html index 3079470..4906c30 100644 --- a/src/index.html +++ b/src/index.html @@ -96,13 +96,22 @@ $(document).ready(function(){ function appendCss(customData) { if (typeof customData != "undefined") $(document).ready(function () { - var link = $("