diff --git a/src/app/pages/community-routing.module.ts b/src/app/pages/community-routing.module.ts index db7d597..e4a67fc 100644 --- a/src/app/pages/community-routing.module.ts +++ b/src/app/pages/community-routing.module.ts @@ -31,6 +31,7 @@ import {ConnectRIGuard} from "../openaireLibrary/connect/communityGuard/connectR { path: 'customize-layout', loadChildren: () => import('./customization/customization.module').then(m => m.CustomizationModule), + data: {hasSidebar: true, hasHeader: false} }, { path: 'user-info', diff --git a/src/app/pages/customization/background-upload.component.ts b/src/app/pages/customization/background-upload.component.ts index a17bb3e..d2daddd 100644 --- a/src/app/pages/customization/background-upload.component.ts +++ b/src/app/pages/customization/background-upload.component.ts @@ -9,61 +9,37 @@ declare var UIkit; selector: 'background-upload', template: ` - -
+
- upload an image -
-
- - -
-
- -
-
- -
-
- -
-
-
-
Image position
- -
- - - - Top - Center - Bottom - - - + upload image
- ` +
+
+ + + + + +
+
+
+
position
+
+
+ +
+ + `, + styles:[` + .upload{ + border: 1px dotted grey; + } + `] }) export class BackgroundUploadComponent implements OnInit { @@ -163,4 +139,10 @@ export class BackgroundUploadComponent implements OnInit { })); } } + + getUrl() + { + return "url('" +(this.background.imageFile.indexOf('data:')==-1?(this.properties.utilsService + + '/download/'+this.background.imageFile):this.background.imageFile) +"')"; + } } diff --git a/src/app/pages/customization/border.component.ts b/src/app/pages/customization/border.component.ts index 2d808bf..548728b 100644 --- a/src/app/pages/customization/border.component.ts +++ b/src/app/pages/customization/border.component.ts @@ -4,37 +4,37 @@ import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core'; @Component({ selector: 'border', template: ` -
+
-
Border radius (px)
- +
Border radius (px) + + +
- +
-
-
Border width (px)
- +
+
Border width (px) + +
- +
-
-
-
Border style
- -
- - - solid - dotted - dashed - - - +
+
+
Border style +
+
+
` @@ -44,14 +44,14 @@ export class BorderComponent implements OnInit { @Input() radius: number = 0; @Input() width: number = 0; @Input() style = 'solid'; - // @Input() addMargin: boolean = false; + @Input() radiusPublished: number = 0; + @Input() widthPublished: number = 0; + @Input() stylePublished = 'solid'; @Output() borderChange = new EventEmitter(); constructor() { } - - ngOnInit() { } @@ -59,6 +59,4 @@ export class BorderComponent implements OnInit { console.log(this.radius); this.borderChange.emit({radius: this.radius, width: this.width, style: this.style}); } - - } diff --git a/src/app/pages/customization/customization.component.html b/src/app/pages/customization/customization.component.html index c33c6fc..dfa78e8 100644 --- a/src/app/pages/customization/customization.component.html +++ b/src/app/pages/customization/customization.component.html @@ -1,386 +1,307 @@ - - - - - - -
-
- -
-
-
- -
Customization - (Unsaved changes)
+
+ + + - -
- -
Identity - - + + + + + + + + + + + +
+ +
+ +
+
+
+ +
+
+
+
+ + +
+
+
Backgrounds
+
Note: Custom background style settings will override any identity settings that effect the + visualisation of a background. +
+ +
Quick look + +
+ + +
-
- - -
-
- Custom style - +
+
Buttons
+
Note: Custom background style settings will override any identity settings that effect the + visualisation of a background. +
+ +
Quick look + +
+ + +
+ +
+ +
+
+ +
Identity
+
Note: Custom identity style settings will effect the visualisation of the whole gateway. That + includes buttons, links, tabs, backgrounds, etc.
+ +
+
+ +
+
See a preview
+
+
+
+
+
+
+
+ +
+
Style has been changed.
+
Click to refresh the view.
+
+
+
+ + +
+
+
+
+
+
+
+ + +
+
+
+ Custom style + ' + (draftCustomizationOptions.identityIsCustom?'Change to default identity values':'Customize identity colors')+'
'" - > - -
-
-
-
- Colors - +
+ Colors + -
- - -
- -
-
Background - - -
-
- - -
- Custom style - - - - -
- - -
- -
Colors - - -
- - - -
- Image - - -
- - + (click)="resetIdentityToPublished();"> + +
-
-
Buttons - - -
-
- - - -
    -
  • - -
    • -
  • - -
    • -
-
+ +
-
-
-
-
- - - -
-
-
- - -
-
-
Backgrounds
-
Note: Custom background style settings will override any identity settings that effect the visualisation of a background.
- - -
Quick look - -
- - -
-
-
-
-
Buttons
-
Note: Custom background style settings will override any identity settings that effect the visualisation of a background.
- -
Quick look - -
- +
+
+ Colors + + +
- -
- -
-
- -
Identity
-
Note: Custom identity style settings will effect the visualisation of the whole gateway. That - includes buttons, links, tabs, backgrounds, etc.
- - - -
+ + + +
+ Image + + + +
+ +
- -
-
See a preview
-
-
-
-
-
-
-
- -
-
Style has been changed.
-
Click to refresh the view.
+
+ + +
+
+
+ Custom style + + + + +
+ + +
+
style on
+
+
-
- - -
-
-
+
+ + + + + + +
+
-
-
-
-
-
- + + + + + diff --git a/src/app/pages/customization/customization.component.ts b/src/app/pages/customization/customization.component.ts index b3f8504..f9ded2c 100644 --- a/src/app/pages/customization/customization.component.ts +++ b/src/app/pages/customization/customization.component.ts @@ -13,6 +13,8 @@ import {properties} from '../../../environments/environment'; import {UtilitiesService} from '../../openaireLibrary/services/utilities.service'; import {Subscription} from 'rxjs'; import {FullScreenModalComponent} from "../../openaireLibrary/utils/modal/full-screen-modal/full-screen-modal.component"; +import {UserManagementService} from "../../openaireLibrary/services/user-management.service"; +import {MenuItem} from "../../openaireLibrary/sharedComponents/menu"; declare var UIkit; @@ -20,12 +22,15 @@ declare var UIkit; selector: 'customization', templateUrl: './customization.component.html', styles:[` - - .functionalities-panel{ + .functionalities-container{ + padding-left:15px; + } + .functionalities-border{ border-left: 1px solid #EAEAEA; padding: 5px 10px; margin: 25px 0px; } + .refresh-indicator { background-color: rgba(0, 0, 0, 0.50); border-radius: 4px; @@ -46,12 +51,16 @@ declare var UIkit; height: 64%; width: 73%; } + .uk-nav-sub{ + padding-left: 25px; + } `] }) export class CustomizationComponent implements OnInit { - - menuSelected: 'home' | 'identity' | 'backgrounds' | 'buttons' = 'home'; + homeMenu = {name:"Customization", id : "home", icon: "" } + menuSelected = this.homeMenu; + buttonsSelected = 'light'; color = 'white'; defaultCustomizationOptions:CustomizationOptions = new CustomizationOptions(); publishedLayout: Layout = null; @@ -65,7 +74,9 @@ export class CustomizationComponent implements OnInit { public properties: EnvProperties = null; private subscriptions: any[] = []; public enabled = true; - // @ViewChild('fsModal', { static: true }) fullscreen: FullScreenModalComponent; +sidebarItems = [{name:"Identity", id : "identity", icon: "desktop_windows" }, + {name:"Backgrounds", id : "backgrounds", icon: "wallpaper" }, + {name:"Buttons", id : "buttons", icon: "smart_button" }] constructor(private element: ElementRef, private route: ActivatedRoute, @@ -73,7 +84,8 @@ export class CustomizationComponent implements OnInit { private title: Title, private sanitizer: DomSanitizer, private layoutService: LayoutService, - private utilsService: UtilitiesService) { + private utilsService: UtilitiesService, + private userManagementService: UserManagementService) { } ngOnDestroy() { @@ -88,43 +100,48 @@ export class CustomizationComponent implements OnInit { }); } ngOnInit() { -/* console.log(" open") - this.fullscreen.title = "Search and Add Projects"; - this.fullscreen.okButtonText = "Done"; - this.fullscreen.okButton = true; - this.fullscreen.open(); - console.log(this.fullscreen)*/ this.properties = properties; - if (!Session.isLoggedIn()) { - this._router.navigate(['/user-info'], { - queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url} - }); - } else { - this.subscriptions.push(this.route.params.subscribe((params) => { - this.communityId = params['community']; - if(this.communityId == "covid-19"){ - this.defaultCustomizationOptions= new CustomizationOptions(CustomizationOptions.getIdentity(this.communityId).mainColor,CustomizationOptions.getIdentity(this.communityId).secondaryColor); - } - this.title.setTitle('Administration Dashboard | Customization'); - this.showLoading = true; - this.subscriptions.push(this.layoutService.getLayout(this.properties, this.communityId).subscribe(layout => { - this.publishedLayout = (layout?layout:new Layout(this.communityId,this.defaultCustomizationOptions)); - this.publishedCustomizationOptions = (layout?CustomizationOptions.checkForObsoleteVersion(layout.layoutOptions,this.communityId):Object.assign({},this.defaultCustomizationOptions)); - this.initializeCustomizationOptions(true); - }, error => { - this.publishedCustomizationOptions = new CustomizationOptions(CustomizationOptions.getIdentity(this.communityId).mainColor,CustomizationOptions.getIdentity(this.communityId).secondaryColor); - this.initializeCustomizationOptions(true); - UIkit.notification("An error occured fetching customizations options", { - status: 'danger', - timeout: 6000, - pos: 'bottom-right' - }); - })); + this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => { + if (!user) { + this._router.navigate(['/user-info'], { + queryParams: { + "errorCode": LoginErrorCodes.NOT_VALID, + "redirectUrl": this._router.url + } + }); + } + })); + + this.subscriptions.push(this.route.params.subscribe((params) => { + this.communityId = params['community']; + if(this.communityId == "covid-19"){ + this.defaultCustomizationOptions= new CustomizationOptions(CustomizationOptions.getIdentity(this.communityId).mainColor,CustomizationOptions.getIdentity(this.communityId).secondaryColor); + } + this.title.setTitle('Administration Dashboard | Customization'); + this.showLoading = true; + this.subscriptions.push(this.layoutService.getLayout(this.properties, this.communityId).subscribe(layout => { + this.publishedLayout = (layout?layout:new Layout(this.communityId,this.defaultCustomizationOptions)); + this.publishedCustomizationOptions = (layout?CustomizationOptions.checkForObsoleteVersion(layout.layoutOptions,this.communityId):Object.assign({},this.defaultCustomizationOptions)); + this.initializeCustomizationOptions(true); + }, error => { + this.publishedCustomizationOptions = new CustomizationOptions(CustomizationOptions.getIdentity(this.communityId).mainColor,CustomizationOptions.getIdentity(this.communityId).secondaryColor); + this.initializeCustomizationOptions(true); + UIkit.notification("An error occured fetching customizations options", { + status: 'danger', + timeout: 6000, + pos: 'bottom-right' + }); })); - } + })); + + } + formHasChanges(obj1:CustomizationOptions, obj2:CustomizationOptions){ + return obj1.backgrounds.form.imageUrl != obj2.backgrounds.form.imageUrl || + obj1.backgrounds.form.imageFile != obj2.backgrounds.form.imageFile || + obj1.backgrounds.form.position != obj2.backgrounds.form.position; } hasChanges(object1,object2):boolean{ return JSON.stringify(object1) != JSON.stringify(object2); @@ -200,6 +217,12 @@ export class CustomizationComponent implements OnInit { this.draftCustomizationOptions.backgrounds.form.color = backgrounds.form.color; } + resetImageTo(backgrounds) { + this.deleteDraftImages(); + this.draftCustomizationOptions.backgrounds.form.imageUrl = backgrounds.form.imageUrl; + this.draftCustomizationOptions.backgrounds.form.imageFile = backgrounds.form.imageFile; + this.draftCustomizationOptions.backgrounds.form.position = backgrounds.form.position; + } resetBackgroundsAndButtonsTo(c:CustomizationOptions){ this.resetBackgroundsTo(c.backgrounds); @@ -232,9 +255,12 @@ export class CustomizationComponent implements OnInit { } updateBackgroundsAndButtonsBasedOnIdentity(){ - if(!this.draftCustomizationOptions.backgroundsAndButtonsIsCustom){ - let tmp = new CustomizationOptions(this.draftCustomizationOptions.identity.mainColor, this.draftCustomizationOptions.identity.secondaryColor); - this.resetBackgroundsAndButtonsTo(tmp); + let tmp = new CustomizationOptions(this.draftCustomizationOptions.identity.mainColor, this.draftCustomizationOptions.identity.secondaryColor); + if(!this.draftCustomizationOptions.backgroundsIsCustom) { + this.resetBackgroundsTo(tmp.backgrounds); + } + if(!this.draftCustomizationOptions.buttonsIsCustom) { + this.resetButtonsTo(tmp.buttons); } } getCommunityUrlSatinized(layout: string) { @@ -253,10 +279,18 @@ export class CustomizationComponent implements OnInit { return JSON.parse(JSON.stringify(obj)); } - changeMenu( menuSelected: 'home' | 'identity' | 'backgrounds' | 'buttons' = 'home'){ - this.menuSelected = (this.menuSelected == menuSelected)?'home':menuSelected; + changeMenu( menuSelected){ + this.menuSelected = menuSelected; } close(){ - this._router.navigate(["../info/profile"], {relativeTo:this.route}); + if(this.menuSelected.id !='home'){ + this.menuSelected = this.homeMenu; + return; + } + if(!this.hasChanges(this.publishedCustomizationOptions, this.draftCustomizationOptions)) { + this._router.navigate(["../info/profile"], {relativeTo: this.route}); + }else{ + alert("TODO " + "Changes that you made may not be saved."+" Με buttons από κάτω cancel (αριστερά) και leave (δεξιά)"); + } } } diff --git a/src/app/pages/customization/customization.module.ts b/src/app/pages/customization/customization.module.ts index ad06ee0..33d064b 100644 --- a/src/app/pages/customization/customization.module.ts +++ b/src/app/pages/customization/customization.module.ts @@ -27,10 +27,11 @@ import {BackgroundComponent} from './background.component'; import {InputModule} from '../../openaireLibrary/sharedComponents/input/input.module'; import {BackgroundUploadComponent} from "./background-upload.component"; import {FullScreenModalModule} from "../../openaireLibrary/utils/modal/full-screen-modal/full-screen-modal.module"; +import {SideBarModule} from "../../openaireLibrary/dashboard/sharedComponents/sidebar/sideBar.module"; @NgModule({ imports: [ - CustomizationRoutingModule, CommonModule, FormsModule, RouterModule, ColorPickerModule, AlertModalModule, PageContentModule, MatFormFieldModule, MatSelectModule, MatSlideToggleModule, IconsModule, InputModule, FullScreenModalModule + CustomizationRoutingModule, CommonModule, FormsModule, RouterModule, ColorPickerModule, AlertModalModule, PageContentModule, MatFormFieldModule, MatSelectModule, MatSlideToggleModule, IconsModule, InputModule, FullScreenModalModule, SideBarModule ], declarations: [ CustomizationComponent, FontSizeComponent, ColorComponent, BorderComponent, QuickLookComponent, QuickLookBackgroundsComponent, QuickLookButtonsComponent, CustomizeButtonsComponent, BackgroundComponent, BackgroundUploadComponent diff --git a/src/app/pages/customization/customize-buttons.component.ts b/src/app/pages/customization/customize-buttons.component.ts index 5f74e86..40c5b02 100644 --- a/src/app/pages/customization/customize-buttons.component.ts +++ b/src/app/pages/customization/customize-buttons.component.ts @@ -12,10 +12,18 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust "buttons.borderRadius" (borderChange)= " buttons.borderStyle = $event.style; buttons.borderRadius = $event.radius; - buttons.borderWidth = $event.width; "> -
+ buttons.borderWidth = $event.width; " + [stylePublished]="buttonsPublished.borderStyle" + [widthPublished]="buttonsPublished.borderWidth" + [radiusPublished]="buttonsPublished.borderRadius" + > +
-
Colors
+
Colors + +
-
-
Colors on hover
+
+
Colors on hover + +
+
Dark background
- -
+

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis velit ornare, auctor lectus at, rutrum magna. Aenean vehicula elementum lacinia.
@@ -20,14 +19,11 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust -
-
-
Light background
-

Heading

@@ -35,7 +31,6 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust Link
-