From aef5531945ac8c57b5e98e2af3695c5d23e08686 Mon Sep 17 00:00:00 2001 From: "argiro.kokogiannaki" Date: Mon, 7 Oct 2019 14:36:53 +0000 Subject: [PATCH] [Admin tool|Trunk] Customization: initial customzation form, preview, actions - no api calls yet git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-admin-portal/trunk@57298 d315682c-612b-4755-9ff5-7f18f6832af3 --- .../pages/customization/Border.component.ts | 56 ++ .../pages/customization/Color.component.ts | 38 ++ .../pages/customization/FontSize.component.ts | 60 ++ .../customization-routing.module.ts | 14 + .../customization.component.html | 561 ++++++++++++++++++ .../customization/customization.component.ts | 158 +++++ .../customization/customization.module.ts | 30 + 7 files changed, 917 insertions(+) create mode 100644 src/app/pages/customization/Border.component.ts create mode 100644 src/app/pages/customization/Color.component.ts create mode 100644 src/app/pages/customization/FontSize.component.ts create mode 100644 src/app/pages/customization/customization-routing.module.ts create mode 100644 src/app/pages/customization/customization.component.html create mode 100644 src/app/pages/customization/customization.component.ts create mode 100644 src/app/pages/customization/customization.module.ts diff --git a/src/app/pages/customization/Border.component.ts b/src/app/pages/customization/Border.component.ts new file mode 100644 index 0000000..03949b1 --- /dev/null +++ b/src/app/pages/customization/Border.component.ts @@ -0,0 +1,56 @@ +import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core'; + + +@Component({ + selector: 'border', + template: ` +
+
Radius:
+
+ +
+
+
+
Width:
+
+ +
+
+
+
Style:
+
+ + + + +
+
+ ` +}) + +export class BorderComponent implements OnInit { + @Input() radius:number =0; + @Input() width:number =0; + @Input() style = 'solid'; + // @Input() addMargin: boolean = false; + @Output() borderChange = new EventEmitter(); + + + constructor() { + } + + + ngOnInit() { + } + + borderChanged() { + this.borderChange.emit({radius:this.radius, width:this.width, style:this.style}); + } + + +} diff --git a/src/app/pages/customization/Color.component.ts b/src/app/pages/customization/Color.component.ts new file mode 100644 index 0000000..b83d8e9 --- /dev/null +++ b/src/app/pages/customization/Color.component.ts @@ -0,0 +1,38 @@ +import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core'; + + +@Component({ + selector: 'color', + template: ` +
+
+
{{label}}:
+
+ +
+
+
+ ` +}) + +export class ColorComponent implements OnInit { + @Input() color = 'white'; + @Input() label = 'Color'; + @Input() addMargin: boolean = false; + @Output() colorChange = new EventEmitter(); + + + constructor() { + } + + + ngOnInit() { + } + + colorChanged() { + this.colorChange.emit(this.color); + } + + +} diff --git a/src/app/pages/customization/FontSize.component.ts b/src/app/pages/customization/FontSize.component.ts new file mode 100644 index 0000000..dcb069e --- /dev/null +++ b/src/app/pages/customization/FontSize.component.ts @@ -0,0 +1,60 @@ +import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core'; + + +@Component({ + selector: 'font-size', + template: ` +
+
Font:
+
+ + +
+
+
+
Size:
+
+ +
+
+
+
Weight:
+
+ +
+
+ + ` +}) + +export class FontSizeComponent implements OnInit { + @Input() font=""; + @Input() size:number; + @Input() weight:number; + @Output() fontChange = new EventEmitter(); + + + constructor( ) { + } + + + ngOnInit() { + + + } + + fontChanged() { + console.log({font:this.font, size:this.size, weight:this.weight}); + this.fontChange.emit({font:this.font, size:this.size, weight:this.weight}); + } + + +} diff --git a/src/app/pages/customization/customization-routing.module.ts b/src/app/pages/customization/customization-routing.module.ts new file mode 100644 index 0000000..38ace2d --- /dev/null +++ b/src/app/pages/customization/customization-routing.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import {RouterModule} from '@angular/router'; +import {CustomizationComponent} from './customization.component'; +import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard'; +import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard'; + +@NgModule({ + imports: [ + RouterModule.forChild([ + { path: '', canActivate: [/*IsCommunity, ConnectAdminLoginGuard*/], component: CustomizationComponent} + ]) + ] +}) +export class CustomizationRoutingModule { } diff --git a/src/app/pages/customization/customization.component.html b/src/app/pages/customization/customization.component.html new file mode 100644 index 0000000..aa845dc --- /dev/null +++ b/src/app/pages/customization/customization.component.html @@ -0,0 +1,561 @@ + +
+ + +
+ + + +
+
+
+
+ + + + Customization +
+
+
+ Style + +
+
+ +
+ +
+ View + +
+
+ Preview page +
+
+ + Go to + +
+
+ Community Page + +
+
+
+
+
+ + + + Backgrounds +
+ + +
Tooltip ....
+
+
    +
  • + Banners + +
    + + + + +
    BUTTONS & LINKS
    +
    + + +
    +
    QUICK LOOK + + + +
    +
    +
    Banner Big Text +
    +
    Banner Small Text +
    +
    + Link +
    + Button + +
    +
    + + Link +
    + + Button + +
    + + +
    + +
    +
    • +
+ + +
+ + +
+ +
+
+ + + + Fonts +
+ +
Tooltip ....
+
+
    +
  • + Banner Big Text +
    + + + +
    QUICK LOOK + + + +
    +
    +
    Banner Big Text +
    +
    +
    +
    • +
+
+
+
    +
  • + Banner Small Text +
    + + + + +
    QUICK LOOK + + + +
    +
    +
    Banner Small Text +
    +
    + +
    +
    • +
+
+
+ +
+ +
+ +
+
+ + + Elements +
+ +
Tooltip ....
+
+ +
+ + +
+ +
+
+ + + Identity +
+ +
Tooltip ....
+
+ +
+ + +
+
+
+ + + Buttons +
+ +
Tooltip ....
+
+ +
+ + +
+ + +
+
+ +
+ + +
diff --git a/src/app/pages/customization/customization.component.ts b/src/app/pages/customization/customization.component.ts new file mode 100644 index 0000000..aca7f76 --- /dev/null +++ b/src/app/pages/customization/customization.component.ts @@ -0,0 +1,158 @@ +import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; +import {ActivatedRoute, Router} from '@angular/router'; + +import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties'; + +import {Session} from '../../openaireLibrary/login/utils/helper.class'; +import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class'; +import {Curator} from '../../openaireLibrary/utils/entities/CuratorInfo'; +import {DomSanitizer} from '@angular/platform-browser'; +import {CustomizationOptions} from '../../openaireLibrary/connect/community/CustomizationOptions'; +import {StringUtils} from '../../openaireLibrary/utils/string-utils.class'; + +@Component({ + selector: 'customization', + templateUrl: './customization.component.html', +}) + +export class CustomizationComponent implements OnInit { + + menuSelected = 'main'; + color = 'white'; + communityUrl = 'http://scoobydoo.di.uoa.gr:4200/?communityId=ee'; + customizationOptions: CustomizationOptions = new CustomizationOptions(); + appliedCustomizationOptions: CustomizationOptions = this.copyObject(this.customizationOptions); + previewUrl = this.getCommunityUrlSatinized(this.appliedCustomizationOptions); + buttonDarkBackgroundPreview; + buttonLightBackgroundPreview; + linkDarkBackgroundPreview; + linkLightBackgroundPreview; + public showLoading = true; + public updateErrorMessage = ''; + public successfulSaveMessage = ''; + + public curatorsEnabled; + public newCurator; + + public communityId = null; + + public affiliationsChanged = false; + public hasChanged = false; + public curatorId = null; + public curator: Curator = null; + public photo: any = null; + public properties: EnvProperties = null; + + private file: File = null; + private maxsize: number = 200 * 1024; + public enabled = true; + private deletePhoto = false; + + + constructor(private element: ElementRef, + private route: ActivatedRoute, + private _router: Router, + private sanitizer: DomSanitizer) { + } + + + ngOnInit() { + this.initializeCustomizationOptions(); + this.route.data.subscribe((data: { envSpecific: EnvProperties }) => { + this.properties = data.envSpecific; + if (!Session.isLoggedIn()) { + this._router.navigate(['/user-info'], { + queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url} + }); + } else { + this.route.queryParams.subscribe((params) => { + this.communityId = params['communityId']; + this.showLoading = true; + this.updateErrorMessage = ''; + // this.curatorId = Session.getUser().id; + + }); + } + }); + + } + + initializeCustomizationOptions() { + this.buttonDarkBackgroundPreview = this.changeStyle(this.appliedCustomizationOptions.buttons.darkBackground); + this.buttonLightBackgroundPreview = this.changeStyle(this.appliedCustomizationOptions.buttons.lightBackground); + this.linkDarkBackgroundPreview = this.changeFontsStyle(this.appliedCustomizationOptions.links.darkBackground, this.appliedCustomizationOptions.links.darkBackground.color); + this.linkLightBackgroundPreview = this.changeStyle(this.appliedCustomizationOptions.links.lightBackground, this.appliedCustomizationOptions.links.lightBackground.color); + // this.previewUrl = this.getCommunityUrlSatinized(this.appliedCustomizationOptions); + } + + changeStyle(colorOptions, borderOptions=null) { + let style = ''; + if(!borderOptions){ + borderOptions = colorOptions; + } + if (colorOptions.color) { + style += '; color:' + colorOptions.color; + } + if (colorOptions.backgroundColor) { + style += '; background-color:' + colorOptions.backgroundColor; + } + if (colorOptions.borderColor) { + style += '; border-color:' + colorOptions.borderColor; + } + if (borderOptions.borderStyle) { + style += '; border-style:' + borderOptions.borderStyle; + } + if (borderOptions.borderWidth) { + style += '; border-width:' + borderOptions.borderWidth+'px'; + } + if (borderOptions.borderRadius) { + style += '; border-radius:' + borderOptions.borderRadius+'px'; + } + + return this.sanitizer.bypassSecurityTrustStyle(style); + } + + + changeFontsStyle(options, color=null) { + let style = ''; + + + if (options.family) { + style += '; font-family:' + options.family; + } + + if (options.size) { + style += '; font-size:' + options.size+'px'; + } + + if (options.weight) { + style += '; font-weight:' + options.weight; + } + + if (color) { + style += '; color:' + color; + } + + return this.sanitizer.bypassSecurityTrustStyle(style); + } + + getCommunityUrlSatinized(customization: CustomizationOptions) { + return this.sanitizer.bypassSecurityTrustResourceUrl(this.getCommunityUrlNewLayout(customization)); + } + + getCommunityUrlNewLayout(customization: CustomizationOptions) { + // console.log("here!"); + let layout = JSON.stringify(customization); + // console.log(layout); + return this.communityUrl + '&layout=' + StringUtils.URIEncode(layout); + } +copyObject(obj){ + return JSON.parse(JSON.stringify(obj)); +} + +resetBackgroundsBanners(){ + this.appliedCustomizationOptions.panel.onDarkBackground = this.customizationOptions.panel.onDarkBackground; + this.appliedCustomizationOptions.panel.background.color = this.customizationOptions.panel.background.color; +} + +} diff --git a/src/app/pages/customization/customization.module.ts b/src/app/pages/customization/customization.module.ts new file mode 100644 index 0000000..7bb2c46 --- /dev/null +++ b/src/app/pages/customization/customization.module.ts @@ -0,0 +1,30 @@ +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {FormsModule} from '@angular/forms'; +import {RouterModule} from '@angular/router'; + +import {CustomizationComponent} from './customization.component'; + +import {CustomizationRoutingModule} from './customization-routing.module'; +// import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard'; +// import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard'; + +import { ColorPickerModule } from 'ngx-color-picker'; +import {FontSizeComponent} from './FontSize.component'; +import {ColorComponent} from './Color.component'; +import {BorderComponent} from './Border.component'; +@NgModule({ + imports: [ + CustomizationRoutingModule, CommonModule, FormsModule, RouterModule, ColorPickerModule + ], + declarations: [ + CustomizationComponent, FontSizeComponent, ColorComponent, BorderComponent + ], + providers: [ + + ], + exports: [ + CustomizationComponent + ] +}) +export class CustomizationModule { }