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

Updates in customization: upload an image as background for the search form

This commit is contained in:
argirok 2021-11-26 14:45:12 +02:00
parent 66f9320d9e
commit eaed74b858
7 changed files with 212 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,8 +13,8 @@ import {CustomizationOptions} from '../../openaireLibrary/connect/community/Cust
</div>
<div class="uk-margin-small-left"> {{label}}</div>
</div>
<span class="uk-text-warning uk-text-small uk-margin-small-left" *ngIf="warningForContrast(color)">Contrast ratio may be too low.</span>
</div>
<div class="uk-text-warning uk-text-small uk-margin-small-left" *ngIf="warningForContrast(color)">Contrast ratio may be too low.</div>
`
})

166
src/app/pages/customization/background-upload.component.ts Normal file
View File

@ -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: `
<input #file id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/>
<!-- <span class="uk-text-middle">Attach binaries by dropping them here or</span>-->
<div *ngIf="!background.imageFile" class=" uk-placeholder uk-text-center uk-height-small">
<span uk-icon="icon: cloud-upload"></span>
<div uk-form-custom>
<span class="uk-link uk-margin-small-left" (click)="file.click()">upload an image</span>
</div>
</div>
<!-- <input #file id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/>-->
<!--<div *ngIf="!background.imageFile" class=" uk-width-1-1"
style="margin-top: 7px;">
<div class="uk-grid uk-flex uk-flex-middle" uk-grid>
<div class=" uk-width-1-1 uk-flex uk-flex-center">
<button class="uk-button uk-button-secondary uk-flex uk-flex-middle uk-flex-wrap"
(click)="file.click()">
<icon name="cloud_upload" [flex]="true"></icon>
<span class="uk-margin-small-left">Upload a file</span>
</button>
</div>
</div>
</div>-->
<div *ngIf="background.imageFile" class="uk-width-1-1 uk-flex uk-flex-middle ">
<div class="uk-card uk-card-default uk-text-center uk-width-expand">
<img class="uk-height-small uk-width-expand" [src]="background.imageFile.indexOf('data:')==-1?(properties.utilsService + '/download/'+background.imageFile):background.imageFile">
</div>
<div class="uk-margin-left">
<button (click)="removePhoto()" uk-tooltip="Remove" class="uk-button-secondary outlined uk-icon-button">
<icon name="remove"></icon>
</button>
</div>
<div class="uk-margin-small-left">
<button class="uk-button-secondary uk-icon-button" (click)="file.click()" uk-tooltip="Edit">
<icon name="edit"></icon>
</button>
</div>
</div>
<div class="uk-margin-medium-top">
<div class="uk-text-bold uk-form-label uk-margin-small-bottom"> Position</div>
<!-- <div class="uk-margin-bottom uk-form-hint "> hint</div>-->
<div class="input-box ">
<mat-form-field class="uk-width-1-1">
<!-- (ngModelChange)="positionChanged()"-->
<mat-select class="" [(ngModel)]="background.position" name="{{'select_type_'}}"
[disableOptionCentering]="true"
panelClass="">
<mat-option [value]="'top'">Top</mat-option>
<mat-option [value]="'center'">Center</mat-option>
<mat-option [value]="'bottom'">Bottom</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
`
})
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') {
(<HTMLInputElement>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'
});
}));
}
}
}

118
src/app/pages/customization/background.component.ts
View File

@ -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;"></color>
<div *ngIf="upload" >
<input #file id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/>
<div *ngIf="!background.imageFile" class=" uk-width-1-1"
style="margin-top: 7px;">
<div class="uk-grid uk-flex uk-flex-middle" uk-grid>
<div class=" uk-width-1-1 uk-flex uk-flex-center">
<button class="uk-button uk-button-secondary uk-flex uk-flex-middle uk-flex-wrap"
(click)="file.click()">
<icon name="cloud_upload" [flex]="true"></icon>
<span class="uk-margin-small-left">Upload a file</span>
</button>
</div>
</div>
</div>
<div *ngIf="background.imageFile" class="uk-width-1-1 uk-flex uk-flex-middle">
<div class="uk-card uk-card-default uk-text-center ">
<img class="" [src]="background.imageFile.indexOf('data:')==-1?(properties.utilsService + '/download/'+background.imageFile):background.imageFile">
</div>
<div class="uk-margin-left">
<button (click)="removePhoto()" uk-tooltip="Remove" class="uk-button-secondary outlined uk-icon-button">
<icon name="remove"></icon>
</button>
</div>
<div class="uk-margin-small-left">
<button class="uk-button-secondary uk-icon-button" (click)="file.click()" uk-tooltip="Edit">
<icon name="edit"></icon>
</button>
</div>
</div>
</div>
`
})
@ -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') {
(<HTMLInputElement>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'
});
}));
}
}
}

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

@ -44,7 +44,7 @@
<div class="customizationMenuItems uk-margin-small">
<div class="uk-grid">
<div class="uk-width-2-3@m uk-width-1-1@s">
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold"> Quick look
<div class="uk-margin-top uk-margin-small-bottom uk-h4"> Quick look
<!--<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"
data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"
@ -54,6 +54,7 @@
</div>
<quick-look-backgrounds [darkBackgroundColor]="draftCustomizationOptions.backgrounds.dark.color "
[lightBackgroundColor]="draftCustomizationOptions.backgrounds.light.color "
[formBackgroundColor]="draftCustomizationOptions.backgrounds.form.color"
[primaryColor]="draftCustomizationOptions.identity.mainColor"
[secondaryColor]="draftCustomizationOptions.identity.secondaryColor"
[buttonsOnDark]="draftCustomizationOptions.buttons.darkBackground"
@ -63,7 +64,7 @@
</div>
<div class="uk-width-1-3@m uk-width-1-1@s">
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold" >Backgrounds & Buttons
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold uk-h4" >Backgrounds & Buttons
<a *ngIf="(hasChanges(publishedCustomizationOptions.backgrounds, draftCustomizationOptions.backgrounds)
|| hasChanges(publishedCustomizationOptions.buttons, draftCustomizationOptions.buttons) )
&& draftCustomizationOptions.backgroundsAndButtonsIsCustom"
@ -91,21 +92,24 @@
</div>
<div *ngIf="draftCustomizationOptions.backgroundsAndButtonsIsCustom" class=" uk-margin-large-top">
<div class="uk-margin-small-bottom uk-text-uppercase">Background Colors</div>
<div class="uk-margin-medium-bottom uk-text-uppercase uk-h5">Backgrounds</div>
<div class="uk-margin-small-bottom uk-text-bold">Colors</div>
<background label="Dark" [background]="draftCustomizationOptions.backgrounds.dark"
[light]="false"></background>
<background label="Light" [background]="draftCustomizationOptions.backgrounds.light"
[light]="true"></background>
<background label="Form" [background]="draftCustomizationOptions.backgrounds.form"
[light]="true" [upload]="properties.environment == 'development'"
[light]="true"
[oldBackground]="publishedCustomizationOptions.backgrounds.form" [communityId]="communityId"></background>
<div class="uk-margin-large-top uk-text-uppercase">Buttons </div>
<ul class="uk-tab" uk-switcher>
<div class="uk-margin-medium-top uk-margin-small-bottom uk-text-bold">Form Background image</div>
<background-upload label="Form" [background]="draftCustomizationOptions.backgrounds.form"
[oldBackground]="publishedCustomizationOptions.backgrounds.form" [communityId]="communityId"></background-upload>
<div class="uk-margin-xlarge-top uk-text-uppercase uk-h5">Buttons </div>
<ul class="uk-tab uk-margin-medium-top" uk-switcher>
<li><a href="#">On dark background</a></li>
<li><a href="#">On light background</a></li>
</ul>
<ul class="uk-switcher uk-margin">
<ul class="uk-switcher uk-margin-medium-top uk-margin">
<li>
<customize-buttons
[buttons]="draftCustomizationOptions.buttons.darkBackground" [light]="true"
@ -131,7 +135,7 @@
<div class="uk-grid">
<div class="uk-width-2-3@m uk-width-1-1@s">
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold">Quick look
<div class="uk-margin-top uk-margin-small-bottom uk-h4">Quick look
</div>
<div style="border-radius: 6px;" class="uk-alert uk-padding-small">
<quick-look [primaryColor]="draftCustomizationOptions.identity.mainColor"
@ -140,7 +144,7 @@
</div>
<div class="uk-width-1-3@m uk-width-1-1@s">
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold" > Identity
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold uk-h4" > Identity
<a *ngIf="hasChanges(publishedCustomizationOptions.identity, draftCustomizationOptions.identity) &&
draftCustomizationOptions.identityIsCustom" class="uk-margin-small-left"
uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
@ -165,7 +169,7 @@
</div>
</div>
<div *ngIf="draftCustomizationOptions.identityIsCustom" class=" uk-margin-large-top">
<div class=" uk-margin-small-bottom uk-text-uppercase uk-margin-small-left">Colors</div>
<div class=" uk-margin-medium-bottom uk-text-uppercase uk-h5">Colors</div>
<color [color]="draftCustomizationOptions.identity.mainColor" [light]="false" (colorChange)=
" draftCustomizationOptions.identity.mainColor= $event; updateBackgroundsAndButtonsBasedOnIdentity()"
label="Primary"></color>

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

@ -141,11 +141,9 @@ export class CustomizationComponent implements OnInit {
}
}
private deleteDraftImages( ) {
console.log("delete drafr images")
if( this.draftCustomizationOptions.backgrounds.form.imageFile && this.draftCustomizationOptions.backgrounds.form.imageFile !=this.publishedCustomizationOptions.backgrounds.form.imageFile){
this.subscriptions.push(this.utilsService.deletePhoto(this.properties.utilsService + '/delete/stakeholder/' + this.draftCustomizationOptions.backgrounds.form.imageFile).subscribe(
re => {
console.log("delete!!!!!!!!")
this.cleanUp()
}
));
@ -173,6 +171,7 @@ export class CustomizationComponent implements OnInit {
}
resetLayout() {
this.deleteDraftImages();
this.initializeCustomizationOptions(JSON.stringify(this.publishedCustomizationOptions) != this.previewCustomization);
}
resetBackgroundsTo(backgrounds) {
@ -222,9 +221,6 @@ export class CustomizationComponent implements OnInit {
return this.sanitizer.bypassSecurityTrustResourceUrl(this.getCommunityUrlNewLayout(layout));
}
getCommunityUrl() {
/* if(this.properties.environment == "development") {
return 'http://spitoo.di.uoa.gr:4200';
}*/
return 'https://'+ (this.properties.environment == 'production'?'':'beta.')+this.communityId+'.openaire.eu';
}

7
src/app/pages/customization/customization.module.ts
View File

@ -25,14 +25,15 @@ import {IconsService} from '../../openaireLibrary/utils/icons/icons.service';
import {refresh, reset} from '../../openaireLibrary/utils/icons/icons';
import {BackgroundComponent} from './background.component';
import {InputModule} from '../../openaireLibrary/sharedComponents/input/input.module';
import {BackgroundUploadComponent} from "./background-upload.component";
@NgModule({
imports: [
CustomizationRoutingModule, CommonModule, FormsModule, RouterModule, ColorPickerModule, AlertModalModule, PageContentModule, MatFormFieldModule, MatSelectModule, MatSlideToggleModule, IconsModule, InputModule
],
declarations: [
CustomizationComponent, FontSizeComponent, ColorComponent, BorderComponent, QuickLookComponent, QuickLookBackgroundsComponent, QuickLookButtonsComponent, CustomizeButtonsComponent, BackgroundComponent
],
declarations: [
CustomizationComponent, FontSizeComponent, ColorComponent, BorderComponent, QuickLookComponent, QuickLookBackgroundsComponent, QuickLookButtonsComponent, CustomizeButtonsComponent, BackgroundComponent, BackgroundUploadComponent
],
providers: [
LayoutService
],

26
src/app/pages/customization/quickLook-backgrounds.component.ts
View File

@ -6,6 +6,17 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust
@Component({
selector: 'quick-look-backgrounds',
template: `
<!-- <div class="uk-margin-top uk-margin-small-bottom uk-text-bold uk-text-large">Search background</div>
<div class="uk-padding-small uk-text-center searchForm uk-height-medium uk-flex uk-flex-center uk-flex-middle" >
<div>
<h1 >Heading</h1>
<input placeholder="Search for...">
<quick-look-buttons
[buttons]="buttonsOnLight"
></quick-look-buttons>
</div>
</div>-->
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold uk-text-large">Dark background</div>
<div class="uk-padding-small uk-text-center darkBackground uk-height-medium uk-light uk-flex uk-flex-center uk-flex-middle" >
@ -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 = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 532"><defs><style>.cls-1{isolation:isolate;}.cls-2{fill:{{color}};mix-blend-mode:multiply;}</style></defs><title>Asset 3</title><g class="cls-1"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-2" d="M0,431s362,109,841,62,632,68,1159-9V0H0Z"/><path class="cls-2" d="M0,514s1401,71,2000-69V0H0Z"/></g></g></g></svg>`;
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}');`);
}
}