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

src/app/pages/customization/Color.component.ts

@@ -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>
   `
 })
 

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: `
+    <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'
+        });
+      }));
+    }
+  }
+}

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;"></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'
-        });
-      }));
-    }
-  }
 }

src/app/pages/customization/customization.component.html

@@ -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-medium-top uk-margin-small-bottom uk-text-bold">Form Background image</div>
-              <div class="uk-margin-large-top uk-text-uppercase">Buttons </div>
+              <background-upload label="Form" [background]="draftCustomizationOptions.backgrounds.form"
-              <ul   class="uk-tab" uk-switcher>
+                            [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>

src/app/pages/customization/customization.component.ts

@@ -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';
   }
 

src/app/pages/customization/customization.module.ts

@@ -25,13 +25,14 @@ 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
+        CustomizationComponent, FontSizeComponent, ColorComponent, BorderComponent, QuickLookComponent, QuickLookBackgroundsComponent, QuickLookButtonsComponent, CustomizeButtonsComponent, BackgroundComponent, BackgroundUploadComponent
     ],
   providers: [
     LayoutService

src/app/pages/customization/quickLook-backgrounds.component.ts

@@ -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"  >
@@ -41,6 +52,14 @@ 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}');`);
   }
 }