diff --git a/src/app/pages/customization/Color.component.ts b/src/app/pages/customization/Color.component.ts index 596e92c..9bc1512 100644 --- a/src/app/pages/customization/Color.component.ts +++ b/src/app/pages/customization/Color.component.ts @@ -13,8 +13,8 @@ import {CustomizationOptions} from '../../openaireLibrary/connect/community/Cust
{{label}}
- Contrast ratio may be too low. +
Contrast ratio may be too low.
` }) diff --git a/src/app/pages/customization/background-upload.component.ts b/src/app/pages/customization/background-upload.component.ts new file mode 100644 index 0000000..635a60f --- /dev/null +++ b/src/app/pages/customization/background-upload.component.ts @@ -0,0 +1,166 @@ +import {Component, Input, OnInit} from '@angular/core'; +import {properties} from '../../../environments/environment'; +import {UtilitiesService} from '../../openaireLibrary/services/utilities.service'; +import {Subscription} from 'rxjs'; + +declare var UIkit; + +@Component({ + selector: 'background-upload', + template: ` + + +
+ +
+ upload an image +
+
+ + +
+
+ +
+
+ +
+
+ +
+
+
+
Position
+ +
+ + + + Top + Center + Bottom + + + +
+
+ + ` +}) + +export class BackgroundUploadComponent implements OnInit { + @Input() label:string = ""; + @Input() background; + @Input() oldBackground; + // @Input() light:boolean; + @Input() communityId:string = ""; + + public file: File; + // public photo: string | ArrayBuffer; + private maxsize: number = 2000 * 1024; + properties; + private subscriptions: any[] = []; + + + constructor(private utilsService: UtilitiesService) { + } + + + ngOnInit() { + this.properties = properties; + } + ngOnDestroy() { + this.subscriptions.forEach(subscription => { + if (subscription instanceof Subscription) { + subscription.unsubscribe(); + } + }); + } + + removePhoto() { + + if (typeof document != 'undefined') { + (document.getElementById("photo")).value = ""; + } + // this.initPhoto(); + console.log(this.background.imageFile + " " + this.oldBackground.imageFile) + if(this.background.imageFile != this.oldBackground.imageFile){ + this.deletePhoto(); + } + this.background.imageFile = null; + this.file = null; + + } + + + + public deletePhoto() { + if (this.background.imageFile) { + this.subscriptions.push(this.utilsService.deletePhoto(properties.utilsService + '/delete/community/' + this.communityId + "/" +this.background.imageFile).subscribe()); + } + } + + fileChangeEvent(event) { + if (event.target.files && event.target.files[0]) { + this.file = event.target.files[0]; + if (this.file.type !== 'image/png' && this.file.type !== 'image/jpeg') { + UIkit.notification('You must choose a file with type: image/png or image/jpeg!', { + status: 'danger', + timeout: 6000, + pos: 'bottom-right' + }); + this.removePhoto(); + } else if (this.file.size > this.maxsize) { + UIkit.notification('File exceeds size\'s limit ('+this.maxsize/1024+'KB)! ', { + status: 'danger', + timeout: 6000, + pos: 'bottom-right' + }); + this.removePhoto(); + } else { + /*const reader = new FileReader(); + reader.readAsDataURL(this.file); + reader.onload = () => { + this.background.imageFile = reader.result; + + };*/ + this.save(); + } + } + } + + public save() { + if (this.file) { + this.subscriptions.push(this.utilsService.uploadPhoto(this.properties.utilsService + "/upload/community/"+ this.communityId + "/" + encodeURIComponent(this.communityId+"-"+this.label)+"?big=1", this.file).subscribe(res => { + this.deletePhoto(); + this.removePhoto(); + this.background.imageFile = res.filename; + + }, error => { + UIkit.notification("An error has been occurred during upload your image. Try again later", { + status: 'danger', + timeout: 6000, + pos: 'bottom-right' + }); + })); + } + } +} diff --git a/src/app/pages/customization/background.component.ts b/src/app/pages/customization/background.component.ts index bf0f794..8867c80 100644 --- a/src/app/pages/customization/background.component.ts +++ b/src/app/pages/customization/background.component.ts @@ -1,8 +1,5 @@ import {Component, Input, OnInit} from '@angular/core'; -import {CustomizationOptions} from '../../openaireLibrary/connect/community/CustomizationOptions'; import {properties} from '../../../environments/environment'; -import {UtilitiesService} from '../../openaireLibrary/services/utilities.service'; -import {Subscription} from 'rxjs'; declare var UIkit; @@ -13,37 +10,6 @@ declare var UIkit; [label]="label" [light]="light" (colorChange)= " background.color = $event;"> -
- -
-
-
- -
- -
-
-
-
- -
-
- -
-
- -
-
-
` }) @@ -52,98 +18,16 @@ export class BackgroundComponent implements OnInit { @Input() background; @Input() oldBackground; @Input() light:boolean; - @Input() upload:boolean = false; @Input() communityId:string = ""; public file: File; - // public photo: string | ArrayBuffer; - private maxsize: number = 200 * 1024; properties; - private subscriptions: any[] = []; - constructor(private utilsService: UtilitiesService) { + constructor() { } ngOnInit() { this.properties = properties; } - ngOnDestroy() { - this.subscriptions.forEach(subscription => { - if (subscription instanceof Subscription) { - subscription.unsubscribe(); - } - }); - } - - removePhoto() { - - if (typeof document != 'undefined') { - (document.getElementById("photo")).value = ""; - } - // this.initPhoto(); - console.log(this.background.imageFile + " " + this.oldBackground.imageFile) - if(this.background.imageFile != this.oldBackground.imageFile){ - this.deletePhoto(); - } - this.background.imageFile = null; - this.file = null; - - } - - - - public deletePhoto() { - console.log("deletePhoto") - if (this.background.imageFile) { - console.log("deletePhoto@@") - this.subscriptions.push(this.utilsService.deletePhoto(properties.utilsService + '/delete/stakeholder/' +this.background.imageFile).subscribe()); - } - } - - fileChangeEvent(event) { - if (event.target.files && event.target.files[0]) { - this.file = event.target.files[0]; - if (this.file.type !== 'image/png' && this.file.type !== 'image/jpeg') { - UIkit.notification('You must choose a file with type: image/png or image/jpeg!', { - status: 'danger', - timeout: 6000, - pos: 'bottom-right' - }); - this.removePhoto(); - } else if (this.file.size > this.maxsize) { - UIkit.notification('File exceeds size\'s limit ('+this.maxsize/1024+'KB)! ', { - status: 'danger', - timeout: 6000, - pos: 'bottom-right' - }); - this.removePhoto(); - } else { - /*const reader = new FileReader(); - reader.readAsDataURL(this.file); - reader.onload = () => { - this.background.imageFile = reader.result; - - };*/ - this.save(); - } - } - } - - public save() { - if (this.file) { - this.subscriptions.push(this.utilsService.uploadPhoto(this.properties.utilsService + "/upload/stakeholder/" + encodeURIComponent(this.communityId+"-"+this.label), this.file).subscribe(res => { - this.deletePhoto(); - this.removePhoto(); - this.background.imageFile = res.filename; - - }, error => { - UIkit.notification("An error has been occurred during upload your image. Try again later", { - status: 'danger', - timeout: 6000, - pos: 'bottom-right' - }); - })); - } - } } diff --git a/src/app/pages/customization/customization.component.html b/src/app/pages/customization/customization.component.html index 670e4b1..7fe08c5 100644 --- a/src/app/pages/customization/customization.component.html +++ b/src/app/pages/customization/customization.component.html @@ -44,7 +44,7 @@
-
Quick look +
Quick look
Dark background
@@ -40,7 +51,15 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust } .lightBackground{ background-color: var(--background-low-color); - } + } + .searchForm { + background: var(--svgURL) transparent no-repeat center bottom; + + + background-size: auto; + background-size: cover !important; + height: inherit; + } `] }) @@ -50,6 +69,7 @@ export class QuickLookBackgroundsComponent { @Input() secondaryColor; @Input() darkBackgroundColor; @Input() lightBackgroundColor; + @Input() formBackgroundColor; @Input() buttonsOnDark:ButtonsCustomization; @Input() buttonsOnLight:ButtonsCustomization; constructor( private sanitizer: DomSanitizer) { @@ -57,7 +77,9 @@ export class QuickLookBackgroundsComponent { @HostBinding("attr.style") public get valueAsStyle(): any { + let search = `Asset 3`; + let svg = 'data:image/svg+xml,' + (search.replace('{{color}}', this.formBackgroundColor)); return this.sanitizer.bypassSecurityTrustStyle(`--portal-main-color: ${this.primaryColor}; --portal-dark-color: ${this.secondaryColor}; - --background-dark-color: ${this.darkBackgroundColor}; --background-low-color: ${this.lightBackgroundColor};`); + --background-dark-color: ${this.darkBackgroundColor}; --background-low-color: ${this.lightBackgroundColor}; --svgURL: url('${svg}');`); } }