MaDgIK
/
connect-admin
13
0
Fork 0
Code Issues Pull Requests Projects Releases 9 Wiki Activity

[Admin tool| Trunk] 

Customization:
	lattest changes in customization
	include upload/download options


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-admin-portal/trunk@57995 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki 2020-01-20 14:33:36 +00:00
parent 81c6123d53
commit bcbc0c7b19
7 changed files with 187 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
deploy/beta-properties.json
View File

@ -93,6 +93,6 @@
"widgetLink" : "https://beta.openaire.eu/index.php?option=com_openaire&view=widget&format=raw&projectId=", "widgetLink" : "https://beta.openaire.eu/index.php?option=com_openaire&view=widget&format=raw&projectId=",
"claimsInformationLink": "https://beta.openaire.eu/linking", "claimsInformationLink": "https://beta.openaire.eu/linking",
"lastIndexUpdate": "2019-05-16", "lastIndexUpdate": "2019-11-01",
"indexInfoAPI": "http://beta.services.openaire.eu/openaire/info/" "indexInfoAPI": "http://beta.services.openaire.eu/openaire/info/"
} }

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

@ -40,7 +40,7 @@ export class AppComponent implements OnInit {
constructor(private route: ActivatedRoute, constructor(private route: ActivatedRoute,
private propertiesService: EnvironmentSpecificService, private propertiesService: EnvironmentSpecificService,
private _communitiesService: CommunitiesService, private _communitiesService: CommunitiesService,
private router: Router, public router: Router,
private userManagementService: UserManagementService) { private userManagementService: UserManagementService) {
this.router.events.forEach((event) => { this.router.events.forEach((event) => {
if (event instanceof NavigationStart) { if (event instanceof NavigationStart) {
@ -242,13 +242,11 @@ export class AppComponent implements OnInit {
'/organizations', false, [], [], {communityId: this.communityId}), '/organizations', false, [], [], {communityId: this.communityId}),
items: [] items: []
}); });
if(this.properties.environment == 'development') {
community.items.push({ community.items.push({
rootItem: new MenuItem('layout', 'Customize Layout', '/customize-layout', rootItem: new MenuItem('layout', 'Customize Layout', '/customize-layout',
'/customize-layout', false, [], [], {communityId: this.communityId}), '/customize-layout', false, [], [], {communityId: this.communityId}),
items: [] items: []
}); });
}
/*community.items.push({ /*community.items.push({
rootItem: new MenuItem('communityLayout', 'Community Layout', '/community-layout', rootItem: new MenuItem('communityLayout', 'Community Layout', '/community-layout',
'/community-layout', false, [], [], {communityId: this.communityId}), '/community-layout', false, [], [], {communityId: this.communityId}),

8
src/app/pages/customization/Color.component.ts
View File

@ -8,12 +8,8 @@ import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core';
<div class="uk-grid uk-flex uk-flex-middle uk-remove-margin"> <div class="uk-grid uk-flex uk-flex-middle uk-remove-margin">
<div class="uk-width-2-3"> {{label}}:</div> <div class="uk-width-2-3"> {{label}}:</div>
<div class="uk-width-1-3 uk-padding-remove-left"> <div class="uk-width-1-3 uk-padding-remove-left">
<button [(colorPicker)]="color" [style.background]="color" <input class="uk-margin-small-left uk-width-small " color-picker [colorPicker]="color" [style.background]="color"
id="color" class="uk-margin-small-left uk-icon-button" (colorPickerChange)="color=$event; colorChanged();"/>
(colorPickerChange)="color=$event; colorChanged();">
</button>
<!--<input class="uk-margin-small-left uk-width-small " color-picker [colorPicker]="color" [style.background]="color"
(colorPickerChange)="color=$event; colorChanged();"/>-->
</div> </div>
</div> </div>
</div> </div>

88
src/app/pages/customization/customization.component.html
View File

@ -9,17 +9,19 @@
<span> Reset</span> <span> Reset</span>
</button> </button>
<button class="uk-button uk-button-small uk-button-primary uk-float-right" <button class="uk-button uk-button-small uk-button-primary uk-float-right"
[disabled]="!hasChanges(draftCustomizationOptions, appliedCustomizationOptions)"
[title]="(hasChanges(draftCustomizationOptions, appliedCustomizationOptions)?'Apply changes to preview on the right':'No changes to apply')"
(click)="applyLayout();">Apply (click)="applyLayout();">Apply
</button> </button>
</div> </div>
</ng-template> </ng-template>
<div class="uk-grid uk-height-1-1" > <div class="uk-grid uk-height-1-1">
<div class="uk-width-1-5 uk-background-muted customizationMenuPanel uk-padding-small "> <div class="uk-width-1-5 uk-background-muted customizationMenuPanel uk-padding-small ">
<div *ngIf="menuSelected == 'main'" class=" "> <div *ngIf="menuSelected == 'main'" class=" ">
<div class="uk-background-primary uk-padding-small uk-light"> <div class="uk-background-primary uk-padding-small uk-light">
<a class="uk-margin-right uk-link " (click)="exit();" > <a class="uk-margin-right uk-link " (click)="exit();">
<span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="close"><path fill="none" stroke="#000" stroke-width="1.06" data-svg="close"><path fill="none" stroke="#000" stroke-width="1.06"
d="M16,16 L4,4"></path><path fill="none" stroke="#000" d="M16,16 L4,4"></path><path fill="none" stroke="#000"
@ -28,6 +30,20 @@
</a> </a>
<span> Customization</span> <span> Customization</span>
</div> </div>
<div class="uk-margin-small-top uk-alert uk-text-small uk-grid uk-margin-small-left uk-padding-small">
<div class="uk-padding-remove">Download the saved customization settings and upload a customization file:</div>
<div class="uk-width-1-2 uk-padding-remove"><a
(click)="downloadCustomization()" class="uk-link"
><span
uk-icon="icon: download; ratio:0.7"></span>Download </a>
</div>
<div class="js-upload uk-width-1-2 uk-text-right uk-float-right" uk-form-custom
>
<input id="exampleInputFile" class="uk-width-medium" type="file" (change)="fileChangeEvent($event)"/>
<span class="uk-link " style=""><span uk-icon="icon: upload; ratio:0.7"></span>Upload </span>
</div>
</div>
<div>{{errorMessage}}</div>
<div class=""> <div class="">
<div class="uk-h5 uk-margin-small-top"> <div class="uk-h5 uk-margin-small-top">
Style Style
@ -56,7 +72,7 @@
</div> </div>
<div class="uk-padding-small customizationMenuItems"> <div class="uk-padding-small customizationMenuItems">
<a [href]="communityUrl" target="_blank">Community Page</a> <a [href]="getCommunityUrl()" target="_blank">Community Page</a>
</div> </div>
</div> </div>
@ -74,7 +90,13 @@
<ng-container <ng-container
*ngTemplateOutlet="applyResetButtons ; context: { }"></ng-container> *ngTemplateOutlet="applyResetButtons ; context: { }"></ng-container>
<div class="uk-alert uk-alert-primary uk-text-small uk-padding-small"> Tooltip ....</div> <div class="uk-alert uk-text-small uk-padding-small">
<span class="uk-icon"><svg width="14" height="14" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="info"><path
d="M12.13,11.59 C11.97,12.84 10.35,14.12 9.1,14.16 C6.17,14.2 9.89,9.46 8.74,8.37 C9.3,8.16 10.62,7.83 10.62,8.81 C10.62,9.63 10.12,10.55 9.88,11.32 C8.66,15.16 12.13,11.15 12.14,11.18 C12.16,11.21 12.16,11.35 12.13,11.59 C12.08,11.95 12.16,11.35 12.13,11.59 L12.13,11.59 Z M11.56,5.67 C11.56,6.67 9.36,7.15 9.36,6.03 C9.36,5 11.56,4.54 11.56,5.67 L11.56,5.67 Z"></path><circle
fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg></span>
Set the banner background color and which fonts to be used (for dark or light background).
</div>
<div class="uk-padding-small customizationMenuItems uk-margin-small"> <div class="uk-padding-small customizationMenuItems uk-margin-small">
<ul uk-accordion> <ul uk-accordion>
<li class="uk-open"> <li class="uk-open">
@ -98,7 +120,7 @@
type="radio"/> for light background</label> type="radio"/> for light background</label>
</div> </div>
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold">QUICK LOOK <div class="uk-margin-top uk-margin-small-bottom uk-text-bold">QUICK LOOK
<span class="uk-icon uk-link " (click)="resetButtons()"> <span class="uk-icon uk-link " (click)="resetBackgrounds()">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1" data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"
d="M17.08,11.15 C17.09,11.31 17.1,11.47 17.1,11.64 C17.1,15.53 13.94,18.69 10.05,18.69 C6.16,18.68 3,15.53 3,11.63 C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 11.71,4.73 12.46,5"></path><polyline d="M17.08,11.15 C17.09,11.31 17.1,11.47 17.1,11.64 C17.1,15.53 13.94,18.69 10.05,18.69 C6.16,18.68 3,15.53 3,11.63 C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 11.71,4.73 12.46,5"></path><polyline
@ -166,7 +188,13 @@
</div> </div>
<ng-container <ng-container
*ngTemplateOutlet="applyResetButtons ; context: { }"></ng-container> *ngTemplateOutlet="applyResetButtons ; context: { }"></ng-container>
<div class="uk-alert uk-alert-primary uk-text-small uk-padding-small"> Tooltip ....</div> <div class="uk-alert uk-text-small uk-padding-small">
<span class="uk-icon"><svg width="14" height="14" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="info"><path
d="M12.13,11.59 C11.97,12.84 10.35,14.12 9.1,14.16 C6.17,14.2 9.89,9.46 8.74,8.37 C9.3,8.16 10.62,7.83 10.62,8.81 C10.62,9.63 10.12,10.55 9.88,11.32 C8.66,15.16 12.13,11.15 12.14,11.18 C12.16,11.21 12.16,11.35 12.13,11.59 C12.08,11.95 12.16,11.35 12.13,11.59 L12.13,11.59 Z M11.56,5.67 C11.56,6.67 9.36,7.15 9.36,6.03 C9.36,5 11.56,4.54 11.56,5.67 L11.56,5.67 Z"></path><circle
fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg></span>
Customize the banner fonts, and the links for dark and light background
</div>
<div class="uk-padding-small customizationMenuItems uk-margin-small"> <div class="uk-padding-small customizationMenuItems uk-margin-small">
<ul uk-accordion> <ul uk-accordion>
<li class="uk-open"> <li class="uk-open">
@ -183,8 +211,7 @@
(colorChange)= (colorChange)=
" draftCustomizationOptions.panel.title.color = $event;" [addMargin]="true"></color> " draftCustomizationOptions.panel.title.color = $event;" [addMargin]="true"></color>
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold">QUICK LOOK <div class="uk-margin-top uk-margin-small-bottom uk-text-bold">QUICK LOOK
<span class="uk-icon uk-link " (click)="draftCustomizationOptions.panel.title = <span class="uk-icon uk-link " (click)="resetFontsBig()">
copyObject(publishedCustomizationOptions.panel.title);">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1" data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"
d="M17.08,11.15 C17.09,11.31 17.1,11.47 17.1,11.64 C17.1,15.53 13.94,18.69 10.05,18.69 C6.16,18.68 3,15.53 3,11.63 C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 11.71,4.73 12.46,5"></path><polyline d="M17.08,11.15 C17.09,11.31 17.1,11.47 17.1,11.64 C17.1,15.53 13.94,18.69 10.05,18.69 C6.16,18.68 3,15.53 3,11.63 C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 11.71,4.73 12.46,5"></path><polyline
@ -325,7 +352,13 @@
</div> </div>
<ng-container <ng-container
*ngTemplateOutlet="applyResetButtons ; context: { }"></ng-container> *ngTemplateOutlet="applyResetButtons ; context: { }"></ng-container>
<div class="uk-alert uk-alert-primary uk-text-small uk-padding-small"> Tooltip ....</div> <div class="uk-alert uk-text-small uk-padding-small">
<span class="uk-icon"><svg width="14" height="14" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="info"><path
d="M12.13,11.59 C11.97,12.84 10.35,14.12 9.1,14.16 C6.17,14.2 9.89,9.46 8.74,8.37 C9.3,8.16 10.62,7.83 10.62,8.81 C10.62,9.63 10.12,10.55 9.88,11.32 C8.66,15.16 12.13,11.15 12.14,11.18 C12.16,11.21 12.16,11.35 12.13,11.59 C12.08,11.95 12.16,11.35 12.13,11.59 L12.13,11.59 Z M11.56,5.67 C11.56,6.67 9.36,7.15 9.36,6.03 C9.36,5 11.56,4.54 11.56,5.67 L11.56,5.67 Z"></path><circle
fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg></span>
Customize the layout of dashboard elements.
</div>
<div class="uk-padding-small customizationMenuItems uk-margin-small"> <div class="uk-padding-small customizationMenuItems uk-margin-small">
<ul uk-accordion> <ul uk-accordion>
<li class="uk-open"> <li class="uk-open">
@ -377,8 +410,12 @@
</div> </div>
<ng-container <ng-container
*ngTemplateOutlet="applyResetButtons ; context: { }"></ng-container> *ngTemplateOutlet="applyResetButtons ; context: { }"></ng-container>
<div class="uk-alert uk-alert-primary uk-text-small uk-padding-small">Identity colors are used in several <div class="uk-alert uk-text-small uk-padding-small">
points (e.g paging, accordions, tabs, etc) in your community RCD.<br> Hint: it can't be white! <span class="uk-icon"><svg width="14" height="14" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="info"><path
d="M12.13,11.59 C11.97,12.84 10.35,14.12 9.1,14.16 C6.17,14.2 9.89,9.46 8.74,8.37 C9.3,8.16 10.62,7.83 10.62,8.81 C10.62,9.63 10.12,10.55 9.88,11.32 C8.66,15.16 12.13,11.15 12.14,11.18 C12.16,11.21 12.16,11.35 12.13,11.59 C12.08,11.95 12.16,11.35 12.13,11.59 L12.13,11.59 Z M11.56,5.67 C11.56,6.67 9.36,7.15 9.36,6.03 C9.36,5 11.56,4.54 11.56,5.67 L11.56,5.67 Z"></path><circle
fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg></span>
Identity colors are used in several spots in your community Dashboard. Check the <b>quick look</b> section!
</div> </div>
<div class="uk-padding-small customizationMenuItems uk-margin-small"> <div class="uk-padding-small customizationMenuItems uk-margin-small">
<ul uk-accordion> <ul uk-accordion>
@ -492,7 +529,13 @@
</div> </div>
<ng-container <ng-container
*ngTemplateOutlet="applyResetButtons ; context: { }"></ng-container> *ngTemplateOutlet="applyResetButtons ; context: { }"></ng-container>
<div class="uk-alert uk-alert-primary uk-text-small uk-padding-small"> Tooltip ....</div> <div class="uk-alert uk-text-small uk-padding-small">
<span class="uk-icon"><svg width="14" height="14" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="info"><path
d="M12.13,11.59 C11.97,12.84 10.35,14.12 9.1,14.16 C6.17,14.2 9.89,9.46 8.74,8.37 C9.3,8.16 10.62,7.83 10.62,8.81 C10.62,9.63 10.12,10.55 9.88,11.32 C8.66,15.16 12.13,11.15 12.14,11.18 C12.16,11.21 12.16,11.35 12.13,11.59 C12.08,11.95 12.16,11.35 12.13,11.59 L12.13,11.59 Z M11.56,5.67 C11.56,6.67 9.36,7.15 9.36,6.03 C9.36,5 11.56,4.54 11.56,5.67 L11.56,5.67 Z"></path><circle
fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg></span>
Customize the buttons for dark and light backgrounds
</div>
<div class="uk-padding-small customizationMenuItems uk-margin-small"> <div class="uk-padding-small customizationMenuItems uk-margin-small">
<ul uk-accordion> <ul uk-accordion>
<li class="uk-open"> <li class="uk-open">
@ -605,24 +648,27 @@
</div> </div>
<div *ngIf="successfulSaveMessage.length > 0" class="uk-alert uk-alert-primary">{{successfulSaveMessage}}</div>
<div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger">{{errorMessage}}</div>
<button class="uk-button uk-margin uk-button-primary uk-button-small uk-align-right" <button class="uk-button uk-margin uk-button-primary uk-button-small uk-align-right"
[disabled]="!hasChanges(publishedCustomizationOptions, draftCustomizationOptions)"
[title]="(hasChanges(publishedCustomizationOptions, draftCustomizationOptions)?'Save changes':'No changes to save')"
(click)="saveLayout()"> (click)="saveLayout()">
Publish Publish
</button> </button>
</div> </div>
<div class="uk-width-4-5 uk-padding-remove-left"> <div class="uk-width-4-5 uk-padding-remove-left">
<iframe [src]="previewUrl" class="" width="100%" height="100%"></iframe> <!-- sandbox="allow-scripts allow-same-origin" -->
<iframe *ngIf="previewUrl" [src]="previewUrl" class="" width="100%" height="100%" ></iframe>
</div> </div>
</div> </div>
<modal-alert #backAlert (alertOutput)="resetToAppliedOptions()" > <modal-alert #backAlert (alertOutput)="resetToAppliedOptions()">
<div class="uk-text-bold uk-h5">If you leave that Page without applying or publishing, changes will be lost.</div> <div class="uk-text-bold uk-h5">If you leave that Page without applying or publishing, changes will be lost.</div>
<div> Are you sure that you want to proceed?</div> <div> Are you sure that you want to proceed?</div>
</modal-alert> </modal-alert>
<modal-alert #exitAlert (alertOutput)="exitCustomization()" > <modal-alert #exitAlert (alertOutput)="exitCustomization()">
<div class="uk-text-bold uk-h5">If you leave that Page without applying or publishing, changes will be lost.</div> <div class="uk-text-bold uk-h5">If you leave that Page without applying or publishing, changes will be lost.</div>
<div> Are you sure that you want to proceed?</div> <div> Are you sure that you want to proceed?</div>
</modal-alert> </modal-alert>

113
src/app/pages/customization/customization.component.ts
View File

@ -21,7 +21,6 @@ export class CustomizationComponent implements OnInit {
menuSelected = 'main'; menuSelected = 'main';
color = 'white'; color = 'white';
communityUrl = 'http://scoobydoo.di.uoa.gr:4200/?communityId=ee';
publishedCustomizationOptions: CustomizationOptions = null; publishedCustomizationOptions: CustomizationOptions = null;
draftCustomizationOptions: CustomizationOptions = null; draftCustomizationOptions: CustomizationOptions = null;
appliedCustomizationOptions: CustomizationOptions = null; appliedCustomizationOptions: CustomizationOptions = null;
@ -33,17 +32,14 @@ export class CustomizationComponent implements OnInit {
linkLightBackgroundPreview; linkLightBackgroundPreview;
hoveredText; hoveredText;
public showLoading = true; public showLoading = true;
public updateErrorMessage = ''; public errorMessage = '';
public successfulSaveMessage = ''; public successfulSaveMessage = '';
public communityId = null; public communityId = null;
public hasChanged = false;
public properties: EnvProperties = null; public properties: EnvProperties = null;
private file: File = null;
private maxsize: number = 200 * 1024;
public enabled = true; public enabled = true;
@ViewChild('backAlert') backAlert: AlertModal; @ViewChild('backAlert') backAlert: AlertModal;
@ViewChild('exitAlert') exitAlert: AlertModal; @ViewChild('exitAlert') exitAlert: AlertModal;
@ -67,25 +63,36 @@ export class CustomizationComponent implements OnInit {
this.route.queryParams.subscribe((params) => { this.route.queryParams.subscribe((params) => {
this.communityId = params['communityId']; this.communityId = params['communityId'];
this.showLoading = true; this.showLoading = true;
this.updateErrorMessage = ''; this.errorMessage = '';
this.successfulSaveMessage = '';
this.layoutService.getLayout(this.communityId, this.properties.adminToolsAPIURL + 'community/').subscribe(layout => { this.layoutService.getLayout(this.communityId, this.properties.adminToolsAPIURL + 'community/').subscribe(layout => {
this.publishedCustomizationOptions = layout; this.publishedCustomizationOptions = (layout?layout:new CustomizationOptions());
this.initializeCustomizationOptions(true); this.initializeCustomizationOptions(true);
}, error => { }, error => {
this.publishedCustomizationOptions = new CustomizationOptions(); this.publishedCustomizationOptions = new CustomizationOptions();
this.initializeCustomizationOptions(true); this.initializeCustomizationOptions(true);
this.errorMessage = "An error occured fetching customizations options"
}); });
}); });
} }
}); });
} }
hasChanges(object1,object2):boolean{
return JSON.stringify(object1) != JSON.stringify(object2);
}
saveLayout() { saveLayout() {
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
});
}
this.layoutService.saveLayout(this.communityId, this.properties.adminToolsAPIURL + 'community/', this.draftCustomizationOptions).subscribe(layout => { this.layoutService.saveLayout(this.communityId, this.properties.adminToolsAPIURL + 'community/', this.draftCustomizationOptions).subscribe(layout => {
this.publishedCustomizationOptions = layout; this.publishedCustomizationOptions = layout;
this.initializeCustomizationOptions(JSON.stringify(this.publishedCustomizationOptions) != this.previewCustomization); this.initializeCustomizationOptions(JSON.stringify(this.publishedCustomizationOptions) != this.previewCustomization);
this.successfulSaveMessage = "Customization Options saved!"
}, error => {
this.errorMessage = "An error occured on save"
}); });
} }
@ -168,6 +175,8 @@ export class CustomizationComponent implements OnInit {
this.draftCustomizationOptions.links.darkBackground = this.copyObject(this.publishedCustomizationOptions.links.darkBackground); this.draftCustomizationOptions.links.darkBackground = this.copyObject(this.publishedCustomizationOptions.links.darkBackground);
this.appliedCustomizationOptions.links.darkBackground = this.copyObject(this.publishedCustomizationOptions.links.darkBackground); this.appliedCustomizationOptions.links.darkBackground = this.copyObject(this.publishedCustomizationOptions.links.darkBackground);
this.linkDarkBackgroundPreview=this.changeFontsStyle(this.publishedCustomizationOptions.links.darkBackground, this.publishedCustomizationOptions.links.darkBackground.color);
} }
resetFontsLinksLight() { resetFontsLinksLight() {
@ -176,6 +185,8 @@ export class CustomizationComponent implements OnInit {
this.appliedCustomizationOptions.panel.title = this.copyObject(this.publishedCustomizationOptions.panel.title); this.appliedCustomizationOptions.panel.title = this.copyObject(this.publishedCustomizationOptions.panel.title);
this.appliedCustomizationOptions.links.lightBackground = this.copyObject(this.publishedCustomizationOptions.links.lightBackground); this.appliedCustomizationOptions.links.lightBackground = this.copyObject(this.publishedCustomizationOptions.links.lightBackground);
this.linkLightBackgroundPreview=this.changeFontsStyle(this.publishedCustomizationOptions.links.lightBackground, this.publishedCustomizationOptions.links.lightBackground.color);
} }
resetElements() { resetElements() {
@ -193,12 +204,16 @@ export class CustomizationComponent implements OnInit {
this.draftCustomizationOptions.buttons.darkBackground = this.copyObject(this.publishedCustomizationOptions.buttons.darkBackground); this.draftCustomizationOptions.buttons.darkBackground = this.copyObject(this.publishedCustomizationOptions.buttons.darkBackground);
this.appliedCustomizationOptions.buttons.darkBackground = this.copyObject(this.publishedCustomizationOptions.buttons.darkBackground); this.appliedCustomizationOptions.buttons.darkBackground = this.copyObject(this.publishedCustomizationOptions.buttons.darkBackground);
this.buttonDarkBackgroundPreview=this.changeStyle(this.publishedCustomizationOptions.buttons.darkBackground);
} }
resetButtonsLight() { resetButtonsLight() {
this.draftCustomizationOptions.buttons.lightBackground = this.copyObject(this.publishedCustomizationOptions.buttons.lightBackground); this.draftCustomizationOptions.buttons.lightBackground = this.copyObject(this.publishedCustomizationOptions.buttons.lightBackground);
this.appliedCustomizationOptions.buttons.lightBackground = this.copyObject(this.publishedCustomizationOptions.buttons.lightBackground); this.appliedCustomizationOptions.buttons.lightBackground = this.copyObject(this.publishedCustomizationOptions.buttons.lightBackground);
this.buttonLightBackgroundPreview=this.changeStyle(this.publishedCustomizationOptions.buttons.lightBackground);
} }
resetIdentity() { resetIdentity() {
@ -263,10 +278,13 @@ export class CustomizationComponent implements OnInit {
getCommunityUrlSatinized(layout: string) { getCommunityUrlSatinized(layout: string) {
return this.sanitizer.bypassSecurityTrustResourceUrl(this.getCommunityUrlNewLayout(layout)); return this.sanitizer.bypassSecurityTrustResourceUrl(this.getCommunityUrlNewLayout(layout));
} }
getCommunityUrl() {
return 'https://'+ (this.properties.environment == 'production'?'':'beta.')+this.communityId+'.openaire.eu';
}
getCommunityUrlNewLayout(layout: string) { getCommunityUrlNewLayout(layout: string) {
this.previewCustomization = layout; this.previewCustomization = layout;
return this.communityUrl + '&layout=' + StringUtils.URIEncode(layout); return this.getCommunityUrl()+'/?' + 'layout=' + StringUtils.URIEncode(layout);
} }
copyObject(obj) { copyObject(obj) {
@ -310,4 +328,79 @@ export class CustomizationComponent implements OnInit {
queryParams: {'communityId': this.communityId} queryParams: {'communityId': this.communityId}
}); });
} }
downloadCustomization(){
this.errorMessage = "";
let options= JSON.parse(JSON.stringify(this.publishedCustomizationOptions));
delete options['_id'];
console.info("Here!" +JSON.stringify(options));
if(typeof document !== 'undefined') {
let dataStr = JSON.stringify(options);
let dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr);
let exportFileDefaultName = 'layoutOptions.json';
let linkElement = document.createElement('a');
linkElement.setAttribute('href', dataUri);
linkElement.setAttribute('download', exportFileDefaultName);
linkElement.click();
}
}
fileChangeEvent(fileInput: any) {
this.errorMessage = "";
let filesToUpload = <Array<File>>fileInput.target.files;
if (filesToUpload.length == 0) {
this.errorMessage = "There is no selected file to upload.";
return;
} else {
if (filesToUpload[0].name.indexOf(".json") == -1 ||
(filesToUpload[0].type != "application/json" )) {
this.errorMessage = "No valid file type. The required type is json "+filesToUpload[0].type;
return;
}
}
this.makeFileRequest(this.properties.utilsService + '/upload?type=json', [], filesToUpload).then((result) => {
let layout:CustomizationOptions = JSON.parse(result.toString());
if( layout && layout.panel && layout.links && layout.buttons && layout.box){
this.draftCustomizationOptions = layout;
//put the same id to not have any difference
if(this.publishedCustomizationOptions['_id']){
this.draftCustomizationOptions['_id'] = this.publishedCustomizationOptions['_id'];
}
}else{
this.errorMessage = "No valid file";
}
}, (error) => {
this.errorMessage = "No valid file";
});
}
makeFileRequest(url: string, params: Array<string>, files: Array<File>) {
return new Promise((resolve, reject) => {
const formData: any = new FormData();
const xhr = new XMLHttpRequest();
for (let i = 0; i < files.length; i++) {
formData.append("uploads[]", files[i], files[i].name);
}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
resolve(xhr.response);
} else {
reject(xhr.response);
}
}
}
xhr.open("POST", url, true);
xhr.send(formData);
});
}
} }

4
src/app/pages/dashboard/dashboard.component.html
View File

@ -14,8 +14,8 @@
</div> </div>
<div> <div>
<a routerLink="/community-edit-form" [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">Community Profile</a><br> <a routerLink="/community-edit-form" [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">Community Profile</a><br>
<a routerLink="/organizations" [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">Organizations</a> <a routerLink="/organizations" [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">Organizations</a><br>
<a *ngIf="properties.environment == 'development'" routerLink="/customize-layout" <a routerLink="/customize-layout"
[queryParams]="{communityId: this.communityId}" [queryParams]="{communityId: this.communityId}"
class="uk-button uk-button-text">Customize Layout</a> class="uk-button uk-button-text">Customize Layout</a>
</div> </div>

12
src/index.html
View File

@ -27,13 +27,13 @@
<script src="assets/common-assets/common/jquery.js"></script> <script src="assets/common-assets/common/jquery.js"></script>
<script src="assets/common-assets/common/uikit.min.js?v=1"></script> <script src="assets/common-assets/common/uikit.min.js?v=2"></script>
<script src="assets/common-assets/common/uikit-icons.min.js?v=1"></script> <script src="assets/common-assets/common/uikit-icons.min.js?v=2"></script>
<!-- stylesheets --> <!-- stylesheets -->
<link rel="stylesheet" type="text/css" href="assets/common-assets/common/theme.css?v=1" /> <link rel="stylesheet" type="text/css" href="assets/common-assets/common/theme.css?v=2" />
<link rel="stylesheet" type="text/css" href="assets/common-assets/common/custom.css?v=1" /> <link rel="stylesheet" type="text/css" href="assets/common-assets/common/custom.css?v=2" />
<link rel="stylesheet" type="text/css" href="assets/common-assets/library.css?v=5" /> <link rel="stylesheet" type="text/css" href="assets/common-assets/library.css?v=6" />
<link rel="stylesheet" type="text/css" href="assets/css/connect-custom.css?v=6" /> <link rel="stylesheet" type="text/css" href="assets/css/connect-custom.css?v=7" />