[Connect|Trunk]
Updated theme - changes regarding containers margin, headers, etc Customization: create Component create mock data build the css according to the input remove community-related css from connect custom css git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@56678 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki
parent
85176b59b0
commit
94d31ce14c
|
|
@ -10,8 +10,6 @@ import {ConnectHelper} from './openaireLibrary/connect/connectHelper';
|
|||
import {SubscribeService} from './openaireLibrary/utils/subscribe/subscribe.service';
|
||||
import {HelperFunctions} from "./openaireLibrary/utils/HelperFunctions.class";
|
||||
|
||||
// import {LayoutService} from "./openaireLibrary/services/layout.service";
|
||||
|
||||
@Component({
|
||||
//changeDetection: ChangeDetectionStrategy.Default,
|
||||
//encapsulation: ViewEncapsulation.Emulated,
|
||||
|
|
@ -24,6 +22,7 @@ import {HelperFunctions} from "./openaireLibrary/utils/HelperFunctions.class";
|
|||
[showMenu]=showMenu [properties]="properties" [showHomeMenuItem]="true"></navbar>
|
||||
<navbar *ngIf= "properties && showMenu && community" portal="connect" [onlyTop]=false [communityId]="community.id" [userMenuItems]=userMenuItems [menuItems]=menuItems
|
||||
[community]=community [showMenu]=showMenu [properties]="properties" [enableSearch]="true" [showHomeMenuItem]="true"></navbar>
|
||||
<customization *ngIf= "properties && community" ></customization>
|
||||
<div class="custom-main-content" >
|
||||
<main>
|
||||
<router-outlet></router-outlet>
|
||||
|
|
@ -57,12 +56,10 @@ export class AppComponent {
|
|||
communities = null;
|
||||
subscriberOfCommunities = false;
|
||||
managerOfCommunities = false;
|
||||
|
||||
// layout = null;
|
||||
// community: {id:string, name:string, logoUrl:string};
|
||||
constructor( private route: ActivatedRoute, private propertiesService:EnvironmentSpecificService,
|
||||
private _communitiesService:CommunitiesService, private _subscribeService: SubscribeService,
|
||||
private router: Router) {//, private _layoutService: LayoutService) {
|
||||
private router: Router) {
|
||||
router.events.forEach((event) => {
|
||||
if (event instanceof NavigationStart) {
|
||||
HelperFunctions.scroll();
|
||||
|
|
@ -132,15 +129,6 @@ export class AppComponent {
|
|||
|
||||
if(communityId && communityId!="" && com.communityId == communityId){
|
||||
community = com;
|
||||
document.documentElement.style.setProperty('--portal-main-color', "#4C9CD5");
|
||||
|
||||
// this._layoutService.getLayout(com.communityId,
|
||||
// this.properties.adminToolsAPIURL + '/').subscribe (
|
||||
// layout => {
|
||||
// this.layout = layout;
|
||||
// document.documentElement.style.setProperty('--portal-main-color', this.layout.color);
|
||||
// }
|
||||
// );
|
||||
let isCommunityManager: boolean = false;
|
||||
if(Session.isCommunityCurator() || Session.isPortalAdministrator()){
|
||||
isCommunityManager = true;
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ import {CommunitiesService} from './openaireLibrary/connect/communities/communit
|
|||
import {LayoutService} from "./openaireLibrary/services/layout.service";
|
||||
import {SubscribeModule} from './utils/subscribe/subscribe.module';
|
||||
import {ThemeComponent} from "./test/theme.component";
|
||||
import {CustomizationModule} from "./utils/customization/customization.module";
|
||||
|
||||
@NgModule({
|
||||
|
||||
|
|
@ -37,6 +38,7 @@ import {ThemeComponent} from "./test/theme.component";
|
|||
NavigationBarModule,
|
||||
BottomModule,
|
||||
CookieLawModule,
|
||||
CustomizationModule,
|
||||
SubscribeModule.forRoot(),
|
||||
BrowserModule.withServerTransition({appId: 'my-app'}),
|
||||
AppRoutingModule
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
<div class="uk-container uk-container-large uk-section">
|
||||
<div class="uk-grid">
|
||||
<div class="uk-width-1-2@m uk-width-1-1@s">
|
||||
<h1 class="font-41">Build an Open Research <b>Gateway</b> for your <b>Community</b></h1>
|
||||
<div class="uk-h1">Build an Open Research <b>Gateway</b> for your <b>Community</b></div>
|
||||
<h4 class="uk-margin-remove-top">Turn Open Science into practice</h4>
|
||||
<div class="uk-h5 uk-margin-top">Share and link your research results.<br>
|
||||
Across organizations, across borders.<br>Customized to your needs.</div>
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
</div>
|
||||
<div>
|
||||
<div class="uk-container uk-container-large uk-margin-large-top">
|
||||
<h1 class="uk-text-center uk-text-bold">Open and FAIR science is our mission</h1>
|
||||
<div class="uk-text-center uk-text-bold uk-h4">Open and FAIR science is our mission</div>
|
||||
<div class="uk-margin-medium-top" uk-height-match=".target">
|
||||
<div class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-match uk-grid-medium uk-grid-margin" uk-grid>
|
||||
<div>
|
||||
|
|
@ -205,7 +205,7 @@
|
|||
<div class="uk-animation-fade uk-margin-top uk-width-1-2" role="alert"><span class="loading-gif uk-align-center" ></span></div>
|
||||
</div>
|
||||
<div *ngIf= "!loading && researchCommunities.length > 0" class="uk-container uk-container-large uk-margin-large-top">
|
||||
<h1 class="uk-text-bold">Community Gateways in Action</h1>
|
||||
<div class="uk-text-bold uk-h4">Community Gateways in Action</div>
|
||||
<div [class]="'uk-margin-medium-top' + (researchCommunities.length <= 5 ? ' uk-margin-medium-bottom' : '')">
|
||||
|
||||
<div class="uk-grid-match uk-grid-medium uk-child-width-1-5@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community">
|
||||
|
|
@ -232,9 +232,9 @@
|
|||
<img width="237" height="250" src="assets/contact/1.png">
|
||||
</div>
|
||||
<div class="uk-width-expand">
|
||||
<h1 class="uk-text-bold">
|
||||
<div class="uk-text-bold uk-h4">
|
||||
<div>Let us help you develop a collaborative Open Science Gateway for your community. It is fast. It is reliable.</div>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="uk-margin-medium">Get in touch with our team to find out how.</div>
|
||||
<div class="uk-inline">
|
||||
<a class="uk-button portal-button" routerLink="/contact-us" routerLinkActive="router-link-active"> CONTACT
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div id="stickhere">
|
||||
</div>
|
||||
|
||||
<div *ngIf="communityInfo" class="uk-section uk-margin-top ">
|
||||
<div *ngIf="communityInfo" class="uk-section uk-padding-remove-top">
|
||||
<div class="communityPanelBackground uk-margin-top uk-padding-small">
|
||||
<div class="uk-container uk-margin-top uk-margin-bottom "
|
||||
*ngIf="communityId != null && communityId != '' && community != null">
|
||||
|
|
@ -264,7 +264,7 @@
|
|||
<li *ngFor="let chart of allowedCharts[entity]">
|
||||
|
||||
<div class=" iframeContainer uk-height-medium uk-margin-top">
|
||||
<div *ngIf="showChartTitle[chart]" class=" uk-h5 uk-text-muted">
|
||||
<div *ngIf="showChartTitle[chart]" class=" uk-h5 ">
|
||||
{{chartsInfoMap[chart].title}}</div>
|
||||
<iframe [src]=chartsInfoMap[chart].url scrolling="no"></iframe>
|
||||
</div>
|
||||
|
|
@ -299,7 +299,7 @@
|
|||
<div *ngFor="let chart of allowedCharts[entity]" class="uk-clearfix uk-margin-bottom">
|
||||
|
||||
<div class=" iframeContainer uk-height-large uk-margin-top">
|
||||
<div *ngIf="showChartTitle[chart]" class=" uk-h5 uk-text-muted">
|
||||
<div *ngIf="showChartTitle[chart]" class=" uk-h5 ">
|
||||
{{chartsInfoMap[chart].title}}</div>
|
||||
<iframe [src]=chartsInfoMap[chart].url scrolling="no" class=""></iframe>
|
||||
</div>
|
||||
|
|
@ -340,7 +340,7 @@
|
|||
<li *ngIf="isEntityEnabled('orp')" (click)="searchOrps()"><a href="#">other research products</a></li>
|
||||
</ul>
|
||||
|
||||
<ul id="resultTabs" class=" customTabsContent uk-switcher " style="min-height:450px;">
|
||||
<ul id="resultTabs" class=" communityBorder customTabsContent uk-switcher " style="min-height:450px;">
|
||||
<li *ngIf="isEntityEnabled('publication')" class="uk-padding">
|
||||
<div *ngIf="show=='overview'">
|
||||
<div *ngIf="statistics !=null && activeTab == 'publication'">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<ng-template #info>
|
||||
<helper *ngIf="pageContents && pageContents['right'] && pageContents['right'].length > 0" [texts]="pageContents['right']"></helper>
|
||||
<h1 class="uk-margin-auto-top uk-margin-remove-bottom uk-text-bold">OpenAIRE gives you the virtual environment and services designed for your community to:</h1>
|
||||
<div class="uk-margin-auto-top uk-margin-remove-bottom uk-text-bold uk-h4">OpenAIRE gives you the virtual
|
||||
environment and services designed for your community to:</div>
|
||||
<ul class="uk-list uk-list-divider uk-padding uk-padding-remove-left uk-margin-auto-top">
|
||||
<li><h5><span class="uk-text-bold">Create and Manage</span> your
|
||||
Community Gateway</h5></li>
|
||||
|
|
@ -9,7 +10,7 @@
|
|||
</ul>
|
||||
</ng-template>
|
||||
<div class="contact-background image-front-topbar uk-section-large uk-background-top-center uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color" uk-scrollspy="{"target":"[uk-scrollspy-class]","cls":"uk-animation-fade","delay":false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
|
||||
<div style=" min-height: 350px;" class="uk-section uk-flex uk-flex-middle">
|
||||
<div style=" min-height: 350px;" class="uk-section uk-flex uk-flex-middle uk-margin-top uk-padding-remove-top">
|
||||
<div class="uk-align-center">
|
||||
<div *ngIf="showLoading" class="uk-margin-large">
|
||||
<div class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert"><span class="loading-gif uk-align-center" ></span></div>
|
||||
|
|
@ -20,7 +21,7 @@
|
|||
<ng-container *ngTemplateOutlet="info"></ng-container>
|
||||
</div>
|
||||
<div class="uk-width-1-2@m uk-width-1-1@s">
|
||||
<h1 class="uk-margin-auto uk-text-bold">Contact us to create your Community Gateway</h1>
|
||||
<div class="uk-margin-auto uk-text-bold uk-h4">Contact us to create your Community Gateway</div>
|
||||
<div *ngIf="errorMessage" class="uk-width-1-1 uk-alert uk-alert-danger uk-text-center" role="alert">{{errorMessage}}</div>
|
||||
<div class="uk-margin-top" uk-grid>
|
||||
<div class="uk-margin-small uk-width-1-1 uk-text-danger uk-text-bold uk-margin-remove-bottom">* Required fields</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="uk-section uk-margin-top uk-padding-remove-bottom">
|
||||
<div class="uk-section uk-padding-remove-bottom uk-padding-remove-top">
|
||||
<div class="communityPanelBackground uk-margin-top uk-padding-small">
|
||||
<div class="uk-container uk-container-large uk-margin-top uk-margin-bottom">
|
||||
<ul class="uk-breadcrumb">
|
||||
|
|
@ -29,11 +29,11 @@
|
|||
</div>
|
||||
<div class="uk-width-expand">
|
||||
<h4 class="uk-comment-title uk-margin-remove ">
|
||||
<a *ngIf="masterZenodoCommunity.link" class="custom-external uk-text-primary uk-text-large uk-text-bold" target="_blank" href="{{masterZenodoCommunity.link}}">
|
||||
<a *ngIf="masterZenodoCommunity.link" class="custom-external uk-text-large uk-text-bold" target="_blank" href="{{masterZenodoCommunity.link}}">
|
||||
<span *ngIf="masterZenodoCommunity.title">{{masterZenodoCommunity.title}}</span>
|
||||
<span *ngIf="!masterZenodoCommunity.title">[no name available]</span>
|
||||
</a>
|
||||
<div *ngIf="!masterZenodoCommunity.link" class="uk-text-primary uk-text-large uk-text-bold">
|
||||
<div *ngIf="!masterZenodoCommunity.link" class=" uk-text-large uk-text-bold">
|
||||
<span *ngIf="masterZenodoCommunity.title">{{masterZenodoCommunity.title}}</span>
|
||||
<span *ngIf="!masterZenodoCommunity.title">[no name available]</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ import {HelperService} from "../openaireLibrary/utils/helper/helper.service";
|
|||
<div class="image-front-topbar" uk-scrollspy="{"target":"[uk-scrollspy-class]","cls":"uk-animation-fade","delay":false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
|
||||
<div style=" min-height: calc(7.89999px + 60vh);"
|
||||
class="about-background uk-section uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color" >
|
||||
<div class="uk-container uk-container-large uk-section">
|
||||
<div class="uk-container uk-container-large uk-section uk-margin-top uk-padding-remove-top">
|
||||
<div class="uk-margin-large-top uk-grid">
|
||||
<h1 class="uk-width-1-1 font-41 uk-text-bold">Learn the process</h1>
|
||||
<div class="uk-width-1-2@l uk-width-1-1@s uk-h5 uk-margin-top">Build a <b>Gateway to your community's</b> open and linked research outcomes. Customized to your needs.</div>
|
||||
|
|
@ -85,7 +85,7 @@ import {HelperService} from "../openaireLibrary/utils/helper/helper.service";
|
|||
<div class="uk-container uk-container-large uk-section">
|
||||
<div class="uk-flex uk-flex-middle uk-padding" uk-grid>
|
||||
<div class="uk-width-expand">
|
||||
<h1 class="uk-text-bold">We look forward to working together and helping you unlock the full potential of your research community through open science.</h1>
|
||||
<div class="uk-text-bold uk-h4">We look forward to working together and helping you unlock the full potential of your research community through open science.</div>
|
||||
<div class="uk-margin-medium">Get in touch with our team to find out how.</div>
|
||||
<div class="uk-inline">
|
||||
<a class="uk-button portal-button" routerLinkActive="router-link-active" routerLink="/contact-us"> CONTACT US</a>
|
||||
|
|
|
|||
|
|
@ -11,10 +11,10 @@ import {HelperService} from "../../openaireLibrary/utils/helper/helper.service";
|
|||
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0" [texts]="pageContents['top']"></helper>
|
||||
<div class="image-front-topbar uk-section-overlap uk-position-relative uk-preserve-color" uk-scrollspy="{"target":"[uk-scrollspy-class]","cls":"uk-animation-fade","delay":false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
|
||||
<div class="cloud-background uk-background-norepeat uk-background-cover uk-section uk-padding-remove-bottom" >
|
||||
<div class="uk-container uk-container-large uk-section">
|
||||
<div class="uk-container uk-container-large uk-section uk-margin-top uk-padding-remove-top">
|
||||
<div uk-grid>
|
||||
<div class="uk-margin-large-top uk-width-3-4@m uk-width-1-1@s">
|
||||
<h1 class="uk-width-3-4 font-41 uk-margin-medium-bottom">Let’s set up a Gateway for your Community <b>Together</b></h1>
|
||||
<h1 class="uk-width-3-4 uk-margin-medium-bottom">Let’s set up a Gateway for your Community <b>Together</b></h1>
|
||||
<div class="uk-width-4-5@m uk-width-1-1@s uk-h5">
|
||||
<div class="uk-margin-bottom">You don’t have to go alone.</div>
|
||||
<div>
|
||||
|
|
@ -41,7 +41,7 @@ import {HelperService} from "../../openaireLibrary/utils/helper/helper.service";
|
|||
<img src="assets/sketch_line_arrow.svg" class="uk-align-center">
|
||||
</div>
|
||||
<div class="uk-width-expand">
|
||||
<h1 class="uk-margin-medium uk-text-bold">1. Analyse your needs</h1>
|
||||
<div class="uk-margin-medium uk-text-bold uk-h4">1. Analyse your needs</div>
|
||||
<i>Identify the scope and goals. Understand open science practices within EOSC and the OpenAIRE services</i>
|
||||
|
||||
<p>
|
||||
|
|
@ -78,7 +78,7 @@ import {HelperService} from "../../openaireLibrary/utils/helper/helper.service";
|
|||
<img src="assets/sketch_line_arrow.svg" class="uk-align-center">
|
||||
</div>
|
||||
<div class="uk-width-expand">
|
||||
<h1 class="uk-margin-medium uk-text-bold">2. Develop a pilot</h1>
|
||||
<div class="uk-margin-medium uk-text-bold uk-h4">2. Develop a pilot</div>
|
||||
<i>We translate your needs into rules and processes and we configure operational OpenAIRE services.</i>
|
||||
|
||||
<p>
|
||||
|
|
@ -100,7 +100,7 @@ import {HelperService} from "../../openaireLibrary/utils/helper/helper.service";
|
|||
<img src="assets/sketch_line_arrow_large.svg" class="uk-align-center">
|
||||
</div>
|
||||
<div class="uk-width-expand">
|
||||
<h1 class="uk-margin-medium uk-text-bold">3. Test and Validate</h1>
|
||||
<div class="uk-margin-medium uk-text-bold uk-h4">3. Test and Validate</div>
|
||||
<i>You validate and test your new Community Gateway (portal). If needed, we further refine and adapt to your needs</i>
|
||||
|
||||
<p>
|
||||
|
|
@ -126,7 +126,7 @@ import {HelperService} from "../../openaireLibrary/utils/helper/helper.service";
|
|||
<img src="assets/about/4.png" class="uk-align-center" width="100px" height="100px">
|
||||
</div>
|
||||
<div class="uk-width-expand">
|
||||
<h1 class="uk-margin-medium uk-text-bold">4. Roll out the service</h1>
|
||||
<div class="uk-margin-medium uk-text-bold uk-h4">4. Roll out the service</div>
|
||||
<i>We jointly roll out your new portal. You take over the business operations and start engaging your researchers</i>
|
||||
|
||||
<p>
|
||||
|
|
@ -154,9 +154,9 @@ import {HelperService} from "../../openaireLibrary/utils/helper/helper.service";
|
|||
<img width="329" height="250" src="assets/contact/2.png">
|
||||
</div>
|
||||
<div class="uk-width-expand">
|
||||
<h1 class="uk-text-bold">
|
||||
<div class="uk-text-bold uk-h4">
|
||||
<div>Let us help you develop a collaborative Open Science Gateway for your community. It is fast. It is reliable.</div>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="uk-margin-medium">Get in touch with our team to find out how.</div>
|
||||
<div class="uk-inline">
|
||||
<a class="uk-button portal-button" routerLink="/contact-us" routerLinkActive="router-link-active"> CONTACT
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import {SearchResult} from "../../openaireLibrary/utils/entities/searchResult";
|
|||
@Component({
|
||||
selector: 'results-comp',
|
||||
template: `
|
||||
<div class="uk-h5 uk-text-bold uk-text-muted uk-margin-top uk-margin-remove-bottom">Recent research results</div>
|
||||
<div class="uk-h5 uk-text-bold uk-margin-top uk-margin-remove-bottom">Recent research results</div>
|
||||
<div *ngIf="!results && total != 0">
|
||||
<div *ngIf="!showLoading" class="uk-animation-fade uk-width-1-1" role="alert"><span class="loading-gif uk-align-center"></span></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -768,3 +768,31 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<div class="uk-container ">
|
||||
<button class="uk-button portal-button">Button</button>
|
||||
<div class="portal-color">portal-color</div>
|
||||
<div class="portal-secondary-color">portal-secondary-color</div>
|
||||
<div class="portal-background-color">portal-background-color</div>
|
||||
<a class="uk-link portal-link">portal-link</a>
|
||||
<div class="portal-box">portal-box</div>
|
||||
<div><span class="portal-icon-button uk-icon uk-icon-button" uk-icon="icon: check"></span> portal-icon-button
|
||||
uk-icon-button uk-icon</div>
|
||||
|
||||
</div>
|
||||
<div class="uk-container uk-container-small portal-box">
|
||||
<div class=" uk-text-large">small container</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="uk-container portal-box">
|
||||
<div class=" uk-text-large">large container</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="uk-container uk-container-large portal-box">
|
||||
<div class=" uk-text-large">large container</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,81 @@
|
|||
export class CustomizationOptions {
|
||||
mainColor: string;
|
||||
secondaryColor: string;
|
||||
panel: {
|
||||
background: {
|
||||
gradientDirection: string;
|
||||
borderStyle: string;
|
||||
borderColor: string;
|
||||
borderWidth: string;
|
||||
}, fonts: {
|
||||
color: string;
|
||||
family: string;
|
||||
size: string;
|
||||
},
|
||||
title: {
|
||||
color: string;
|
||||
family: string;
|
||||
size: string;
|
||||
},
|
||||
links: {
|
||||
color: string;
|
||||
family: string;
|
||||
size: string;
|
||||
decoration: string;
|
||||
onHover: {
|
||||
color: string;
|
||||
}
|
||||
};
|
||||
buttons: {
|
||||
backgroundColor: string;
|
||||
color: string;
|
||||
borderStyle: string;
|
||||
borderColor: string;
|
||||
borderWidth: string;
|
||||
borderRadius: string;
|
||||
onHover: {
|
||||
backgroundColor: string;
|
||||
color: string;
|
||||
borderColor: string;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
panelElements: {
|
||||
backgroundColor: string;
|
||||
borderColor: string;
|
||||
color: string;
|
||||
}
|
||||
};
|
||||
|
||||
box: {
|
||||
borderColor: string;
|
||||
borderStyle: string;
|
||||
borderWidth: string;
|
||||
borderRadius: string;
|
||||
}
|
||||
;
|
||||
links: {
|
||||
color: "";
|
||||
family: string;
|
||||
decoration: string;
|
||||
onHover: {
|
||||
color: string;
|
||||
};
|
||||
};
|
||||
|
||||
buttons: {
|
||||
backgroundColor: string;
|
||||
color: string;
|
||||
borderStyle: string;
|
||||
borderColor: string;
|
||||
borderWidth: string;
|
||||
borderRadius: string;
|
||||
onHover: {
|
||||
backgroundColor: string;
|
||||
color: string;
|
||||
borderColor: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,195 @@
|
|||
import {Component, Input} from '@angular/core';
|
||||
import {ActivatedRoute, Router} from '@angular/router';
|
||||
import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
|
||||
import {LayoutService} from "../../openaireLibrary/services/layout.service";
|
||||
import {CustomizationOptions} from "./CustomizationOptions";
|
||||
import {ConnectHelper} from "../../openaireLibrary/connect/connectHelper";
|
||||
import {PiwikHelper} from "../piwikHelper";
|
||||
import {StringUtils} from "../../openaireLibrary/utils/string-utils.class";
|
||||
|
||||
declare var appendCss: any;
|
||||
|
||||
@Component({
|
||||
selector: 'customization',
|
||||
template: `
|
||||
|
||||
<!-- <p>This is customizing layout component</p>-->
|
||||
`
|
||||
})
|
||||
|
||||
export class CustomizationComponent {
|
||||
@Input() communityId;
|
||||
layout: CustomizationOptions;
|
||||
|
||||
constructor(private route: ActivatedRoute,
|
||||
private router: Router, private _layoutService: LayoutService
|
||||
) {
|
||||
}
|
||||
|
||||
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(
|
||||
layout => {
|
||||
this.layout = layout;
|
||||
|
||||
this.buildCss();
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
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, .communityPanelBackground .uk-section-primary {
|
||||
background-image: linear-gradient(` +
|
||||
(this.layout.panel.background.gradientDirection != null ? this.layout.panel.background.gradientDirection : 'to right') + `,` +
|
||||
this.layout.mainColor + `,` +
|
||||
this.layout.secondaryColor + `);` +
|
||||
`
|
||||
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 : '1px') + `;
|
||||
}
|
||||
|
||||
/*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 + ' !important;') : '') +
|
||||
|
||||
`
|
||||
}
|
||||
|
||||
.communityPanelBackground .uk-h5:not(.ignoreCommunityPanelBackground) {
|
||||
color: ` + (this.layout.panel.title.color != null ? this.layout.panel.title.color : 'white') + ` !important;` +
|
||||
(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 + ' !important;') : '') +
|
||||
|
||||
`
|
||||
}
|
||||
|
||||
.communityPanelBackground .uk-link:not(.ignoreCommunityPanelBackground), .communityPanelBackground a:not(.uk-button):not(.uk-button-text):not(.ignoreCommunityPanelBackground), .portal-card a {
|
||||
color: `
|
||||
+ (this.layout.panel.links.color != null ? this.layout.panel.links.color : 'white') + ` !important;` +
|
||||
(this.layout.panel.links.family != null ? ('font-family: ' + this.layout.panel.links.family + ' !important;') : '') +
|
||||
(this.layout.panel.links.size != null ? ('font-size: ' + this.layout.panel.links.size + ' !important;') : '') +
|
||||
(this.layout.panel.links.decoration != null ? ('text-decoration: ' + this.layout.panel.links.decoration + ';') : '') +
|
||||
`
|
||||
}
|
||||
|
||||
.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.links.color != null ? this.layout.panel.links.color : `rgba(255, 255, 255, 0.8)`) + ` !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.color != null ? this.layout.links.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.onHover.color != null ? this.layout.links.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 : `2px`) + `;
|
||||
border-radius: ` + (this.layout.box.borderRadius != null ? this.layout.box.borderRadius : `6px`) + `;
|
||||
}
|
||||
|
||||
/*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-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)`) + `;
|
||||
}
|
||||
|
||||
|
||||
.uk-button:not(.uk-button-text), .portal-button {
|
||||
background-color:` + (this.layout.buttons.backgroundColor != null ? this.layout.buttons.backgroundColor : `var(--portal-main-color)`) + `;
|
||||
color: ` + (this.layout.buttons.color != null ? this.layout.buttons.color : `white`) + `;
|
||||
border-color: ` + (this.layout.buttons.borderColor != null ? this.layout.buttons.borderColor : `transparent`) + `;
|
||||
border-style: ` + (this.layout.buttons.borderStyle != null ? this.layout.buttons.borderStyle : `solid`) + `;
|
||||
border-width: ` + (this.layout.buttons.borderWidth != null ? this.layout.buttons.borderWidth : `1px`) + `;
|
||||
border-radius:` + (this.layout.buttons.borderRadius != null ? this.layout.buttons.borderRadius : `4px`) + `;
|
||||
|
||||
}
|
||||
|
||||
.uk-button:not(.uk-button-text):hover, .portal-button:hover {
|
||||
background-color: ` + (this.layout.buttons.onHover.backgroundColor != null ? this.layout.buttons.onHover.backgroundColor : `var(--portal-dark-color)`) + `;
|
||||
color: ` + (this.layout.buttons.onHover.color != null ? this.layout.buttons.onHover.color : `white`) + `;
|
||||
border-color: ` + (this.layout.buttons.onHover.color != null ? this.layout.buttons.onHover.color : `white`) + `;
|
||||
}
|
||||
|
||||
/*Buttons*/
|
||||
.communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground) {
|
||||
background-color: ` + (this.layout.panel.buttons.backgroundColor != null ? this.layout.panel.buttons.backgroundColor : `white`) + ` !important;
|
||||
color: ` + (this.layout.panel.buttons.color != null ? this.layout.panel.buttons.color : `var(--portal-main-color)`) + ` !important;
|
||||
border-color: ` + (this.layout.panel.buttons.borderColor != null ? this.layout.panel.buttons.borderColor : `transparent`) + ` !important;
|
||||
border-style: ` + (this.layout.panel.buttons.borderStyle != null ? this.layout.panel.buttons.borderStyle : `solid`) + ` !important;
|
||||
border-width: ` + (this.layout.panel.buttons.borderWidth != null ? this.layout.panel.buttons.borderWidth : `1px`) + ` !important;
|
||||
border-radius:` + (this.layout.panel.buttons.borderRadius != null ? this.layout.panel.buttons.borderRadius : `4px`) + ` !important;
|
||||
|
||||
}
|
||||
|
||||
.communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground):hover {
|
||||
background-color: ` + (this.layout.panel.buttons.onHover.backgroundColor != null ? this.layout.panel.buttons.onHover.backgroundColor : ` #eeeeee `) + ` !important;
|
||||
color: ` + (this.layout.panel.buttons.onHover.color != null ? this.layout.panel.buttons.onHover.color : ` var(--portal-main-color) `) + ` !important;
|
||||
border-color:` + (this.layout.panel.buttons.onHover.borderColor != null ? this.layout.panel.buttons.onHover.borderColor : `transparent`) + ` !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);
|
||||
}
|
||||
|
||||
|
||||
`
|
||||
appendCss(css);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import {ModuleWithProviders, NgModule} from '@angular/core';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {CustomizationComponent} from "./customization.component";
|
||||
import {LayoutService} from "../../openaireLibrary/services/layout.service";
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, RouterModule
|
||||
],
|
||||
declarations: [
|
||||
CustomizationComponent
|
||||
],
|
||||
exports: [
|
||||
CustomizationComponent
|
||||
]
|
||||
})
|
||||
export class CustomizationModule {
|
||||
static forRoot(): ModuleWithProviders {
|
||||
return {
|
||||
ngModule: CustomizationModule,
|
||||
providers: [
|
||||
LayoutService
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
--portal-main-color: #EBB13E;
|
||||
/* --portal-main-contrast: #2E2E2E; */
|
||||
--portal-main-contrast: white;
|
||||
--portal-dark-color: #4687E6;
|
||||
--portal-dark-color: #b48536;
|
||||
|
||||
--openaire-main-color: #313179;
|
||||
|
||||
|
|
@ -161,39 +161,20 @@
|
|||
border:0;
|
||||
}
|
||||
|
||||
|
||||
/* Community Page
|
||||
community_main_color
|
||||
community_secondary_color
|
||||
community_main_dark_color
|
||||
|
||||
*/
|
||||
|
||||
.communityPanelBackground,.communityPanelBackground .uk-section-primary {
|
||||
background-image: linear-gradient(to right, var(--community_main_color) , var(--community_secondary_color));
|
||||
color:white;
|
||||
}
|
||||
div:not(.connect_App) bottom .uk-totop{
|
||||
background-color: transparent !important;
|
||||
}
|
||||
/*div:not(.connectApp).uk-section-primary{
|
||||
background-image: linear-gradient(to right, var(--community_main_color) , var(--community_secondary_color)) !important;
|
||||
color:white !important;
|
||||
}*/
|
||||
|
||||
.communityPanelBackground .uk-h5:not(.ignoreCommunityPanelBackground), .communityPanelBackground .uk-link:not(.ignoreCommunityPanelBackground), .communityPanelBackground a:not(.uk-button):not(.ignoreCommunityPanelBackground){
|
||||
color:white;
|
||||
.communityPanelBackground .curator-photo{
|
||||
border:rgba(255, 255, 255, 0.5) 8px solid;
|
||||
}
|
||||
|
||||
.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);
|
||||
.communityRecentResults .search-results > li:nth-child(2){
|
||||
border-top: none !important;
|
||||
}
|
||||
.communityPanelBackground .uk-link:not(.ignoreCommunityPanelBackground):not(.license):not(.newsletter),
|
||||
.communityPanelBackground a:not(.uk-button):not(.ignoreCommunityPanelBackground):not(.uk-icon):not(.license):not(.newsletter):not(.breadcrumb)
|
||||
{
|
||||
/*text-decoration: underline;*/
|
||||
border-bottom: 1px solid white;
|
||||
.communityRecentResults .search-results > li:last-child {
|
||||
border-bottom: none !important;
|
||||
|
||||
}
|
||||
|
||||
.communityPanelBackground .uk-breadcrumb .active{
|
||||
|
|
@ -208,68 +189,8 @@ div:not(.connect_App) bottom .uk-totop{
|
|||
border-radius: 20px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.communityPanelBackground .lowOpacityColor:not(.ignoreCommunityPanelBackground){
|
||||
color:rgba(255,255,255,0.7);
|
||||
}
|
||||
.communityPanelBackground .curator-photo{
|
||||
border:rgba(255, 255, 255, 0.5) 10px solid
|
||||
}
|
||||
|
||||
.customTabs .customTabsTitle li {
|
||||
/*rgba(red(var(--community_main_color)), green(var(--community_main_color)), blue(var(--community_main_color)));*/
|
||||
background-color:rgba(var(--community_main_color_rgb), 0.6);
|
||||
color: white;
|
||||
border-top: var(--community_main_dark_color) 1px solid;
|
||||
border-left: var(--community_main_dark_color) 1px solid;
|
||||
}
|
||||
.customTabs .customTabsTitle li:last-child {
|
||||
|
||||
border-bottom: var(--community_main_dark_color) 1px solid;
|
||||
}
|
||||
.customTabs .customTabsTitle li a, .customTabs .customTabsTitle li a:hover{
|
||||
color: white !important;
|
||||
margin: 6px;
|
||||
border: none;
|
||||
}
|
||||
.customTabs .customTabsTitle li.uk-active {
|
||||
background-color: var(--community_main_color);
|
||||
opacity: 1;
|
||||
}
|
||||
.customTabs ul.customTabsContent {
|
||||
border:var(--community_main_dark_color) 1px solid;
|
||||
}
|
||||
|
||||
.communityRecentResults .search-results > li:nth-child(2){
|
||||
border-top: none !important;
|
||||
} .communityRecentResults .search-results > li:last-child {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.font-41 {
|
||||
font-size: 41px;
|
||||
}
|
||||
|
||||
.line-height-normal {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.border-grey {
|
||||
border: #EFEFEF;
|
||||
border-style: solid;
|
||||
border-width: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.communityPanelBackground .uk-grid-divider > :not(.uk-first-column)::before {
|
||||
border-left: 1px solid rgba(255, 255, 255, .2);
|
||||
}
|
||||
|
||||
/* NOT USED
|
||||
.sketch-line {
|
||||
height:80%;
|
||||
}
|
||||
|
||||
.img-sketch {
|
||||
height:20%;
|
||||
}
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -0,0 +1,81 @@
|
|||
{
|
||||
"mainColor": "#0080aa",
|
||||
"secondaryColor": "#005A77",
|
||||
"panel": {
|
||||
"background": {
|
||||
"gradientDirection": "to right",
|
||||
"borderStyle": null,
|
||||
"borderColor": null,
|
||||
"borderWidth": null
|
||||
}, "fonts": {
|
||||
"color": "white",
|
||||
"family": null,
|
||||
"size": null
|
||||
},
|
||||
"title": {
|
||||
"color": "white",
|
||||
"family": null,
|
||||
"size": null
|
||||
},
|
||||
"links": {
|
||||
"color": "rgba(255, 255, 255, 0.98)",
|
||||
"family": null,
|
||||
"size": null,
|
||||
"decoration": null,
|
||||
"onHover": {
|
||||
"color": "rgba(255, 255, 255, 0.8) "
|
||||
}
|
||||
},
|
||||
"buttons": {
|
||||
"backgroundColor": "white",
|
||||
"color": null,
|
||||
"borderStyle": null,
|
||||
"borderColor": null,
|
||||
"borderWidth": "1px",
|
||||
"borderRadius": "4px",
|
||||
"onHover": {
|
||||
"backgroundColor": "#eeeeee",
|
||||
"color": null,
|
||||
"borderColor": null
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
"panelElements": {
|
||||
"backgroundColor": "rgba(255, 255, 255, 0.5)",
|
||||
"borderColor": "rgba(255, 255, 255, 0.5)",
|
||||
"color": "white"
|
||||
}
|
||||
},
|
||||
|
||||
"box": {
|
||||
"borderColor": null,
|
||||
"borderStyle": "solid",
|
||||
"borderWidth": "2px",
|
||||
"borderRadius": "6px"
|
||||
},
|
||||
|
||||
"links": {
|
||||
"color": null,
|
||||
"family": null,
|
||||
"decoration": null,
|
||||
"onHover": {
|
||||
"color": null
|
||||
}
|
||||
},
|
||||
|
||||
"buttons": {
|
||||
"backgroundColor": null,
|
||||
"color": null,
|
||||
"borderStyle": null,
|
||||
"borderColor": null,
|
||||
"borderWidth": null,
|
||||
"borderRadius": null,
|
||||
"onHover": {
|
||||
"backgroundColor": null,
|
||||
"color": null,
|
||||
"borderColor": null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
|
||||
"cacheUrl" :"http://scoobydoo.di.uoa.gr:3000/get?url=",
|
||||
|
||||
"adminToolsAPIURL" :"http://mpagasas.di.uoa.gr:8080/uoa-admin-tools",
|
||||
"adminToolsAPIURL" :"http://duffy.di.uoa.gr:8080/uoa-admin-tools",
|
||||
|
||||
"adminToolsCommunity" :"connect",
|
||||
"datasourcesAPI": "https://beta.services.openaire.eu/openaire/ds/search/",
|
||||
|
|
|
|||
|
|
@ -92,6 +92,20 @@ $(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);
|
||||
});
|
||||
}
|
||||
/* 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