Customization: more changes for the new mocks
This commit is contained in:
argirok
parent
048f159f5d
commit
dc2aa3b764
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -9,61 +9,37 @@ declare var UIkit;
|
|||
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">
|
||||
<div *ngIf="!background.imageFile" class=" upload uk-text-center uk-height-small uk-flex uk-flex-middle uk-flex-center uk-text-uppercase">
|
||||
<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 *ngIf="background.imageFile" class="uk-margin-top">
|
||||
<div class="uk-text-bold uk-form-label uk-margin-small-bottom uk-margin-large-top">Image 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>
|
||||
<span class="uk-link uk-margin-small-left" (click)="file.click()">upload image</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
`
|
||||
<div *ngIf="background.imageFile" class="uk-width-1-1 uk-flex uk-flex-middle uk-heading-small ">
|
||||
<div class="uk-width-1-1 uk-height-small" style = "background-size:cover"
|
||||
[style.background-image]=" getUrl()">
|
||||
|
||||
|
||||
<a (click)="removePhoto()" uk-tooltip="Remove" class="uk-float-right uk-padding-small uk-background-muted">
|
||||
<icon name="remove" [defaultSize]="true" [flex]="true"></icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="background.imageFile" class="uk-margin-top">
|
||||
<div class="uk-text-bold uk-text-uppercase uk-text-meta uk-margin-small-bottom uk-margin-large-top">position</div>
|
||||
<div class="uk-width-expand uk-padding-remove-left" input type="select" inputClass="inner x-small" [(value)]="background.position"
|
||||
[options]="['top','center','bottom']" >
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
`,
|
||||
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) +"')";
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,37 +4,37 @@ import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core';
|
|||
@Component({
|
||||
selector: 'border',
|
||||
template: `
|
||||
<div class="uk-grid uk-child-width-1-2">
|
||||
<div class="uk-grid ">
|
||||
<div class="uk-margin-remove">
|
||||
<div class="uk-text-bold uk-form-label uk-margin-small-bottom"> Border radius (px)</div>
|
||||
<!-- <div class="uk-margin-bottom uk-form-hint ">hint</div>-->
|
||||
<div class="uk-text-bold uk-margin-small-bottom uk-text-uppercase uk-text-meta"> Border radius (px)
|
||||
<a *ngIf="radius != radiusPublished" class="uk-margin-small-left"
|
||||
uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
|
||||
(click)="radius = radiusPublished;borderChanged()"> <icon name="reset"></icon></a>
|
||||
|
||||
</div>
|
||||
<div class="input-box">
|
||||
<input class="uk-input" [(ngModel)]="radius" (input)="borderChanged()" type="number" min="0"/>
|
||||
<div input inputClass="inner x-small" [(value)]="radius" (valueChange)="borderChanged()" type="text" ></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-margin-remove">
|
||||
<div class="uk-text-bold uk-form-label uk-margin-small-bottom"> Border width (px)</div>
|
||||
<!-- <div class="uk-margin-bottom uk-form-hint "> hint</div>-->
|
||||
<div class="uk-margin-top">
|
||||
<div class="uk-text-bold uk-text-uppercase uk-text-meta"> Border width (px)
|
||||
<a *ngIf="width != widthPublished" class="uk-margin-small-left"
|
||||
uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
|
||||
(click)="width = widthPublished; borderChanged()"> <icon name="reset"></icon></a>
|
||||
</div>
|
||||
<div class="input-box">
|
||||
<input class="uk-input" [(ngModel)]="width" (input)="borderChanged()" type="number" min="0"/>
|
||||
<div input inputClass="inner x-small" [(value)]="width" (valueChange)="borderChanged()" type="text" ></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-margin-small-top">
|
||||
<div class="uk-text-bold uk-form-label uk-margin-small-bottom"> Border style</div>
|
||||
<!-- <div class="uk-margin-bottom uk-form-hint "> hint</div>-->
|
||||
<div class="input-box ">
|
||||
<mat-form-field class="uk-width-1-1">
|
||||
<mat-select class="" [(ngModel)]="style" name="{{'select_type_'}}"
|
||||
(ngModelChange)="borderChanged()"
|
||||
[disableOptionCentering]="true"
|
||||
panelClass="">
|
||||
<mat-option [value]="'solid'">solid</mat-option>
|
||||
<mat-option [value]="'dotted'">dotted</mat-option>
|
||||
<mat-option [value]="'dashed'">dashed</mat-option>
|
||||
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="uk-margin-top uk-width-1-1">
|
||||
<div class="uk-text-bold uk-text-uppercase uk-text-meta"> Border style
|
||||
<a *ngIf="style != stylePublished" class="uk-margin-small-left"
|
||||
uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
|
||||
(click)="style = stylePublished;borderChanged()"> <icon name="reset"></icon></a>
|
||||
</div>
|
||||
<div class="uk-width-expand uk-padding-remove-left" input inputClass="inner x-small" type="select" [(value)]="style" (valueChange)="borderChanged()"
|
||||
[options]="['solid','dotted','dashed']" >
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
|
|
@ -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});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,386 +1,307 @@
|
|||
<ng-template #applyResetButtons>
|
||||
<button class="uk-float-right uk-button uk-margin-left uk-button-secondary outlined" [disabled]="!hasChanges(publishedCustomizationOptions, draftCustomizationOptions)"
|
||||
(click)="resetLayout()">
|
||||
<aside *ngIf="draftCustomizationOptions" id="sidebar_main">
|
||||
<div id="sidebar_content">
|
||||
<div class="menu_section uk-margin-top">
|
||||
<ul class="uk-list uk-nav uk-nav-default" uk-nav>
|
||||
<li>
|
||||
<a>
|
||||
<div (click)="close()" class="uk-flex uk-flex-middle uk-flex-center">
|
||||
<div class="uk-width-auto">
|
||||
<icon *ngIf="menuSelected.id != 'home'" class="menu-icon" name="west" ratio="2"
|
||||
[flex]="true"></icon>
|
||||
<icon *ngIf="menuSelected.id == 'home'" class="menu-icon" name="close" ratio="2"
|
||||
[flex]="true"></icon>
|
||||
</div>
|
||||
<span
|
||||
class="uk-width-expand uk-text-truncate uk-margin-small-left uk-text-large">{{menuSelected.name}}</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="menu_section uk-margin-large-top">
|
||||
<ul *ngIf="menuSelected.id == 'home'" class="uk-list uk-nav uk-nav-default" uk-nav>
|
||||
<ng-template ngFor [ngForOf]="sidebarItems" let-item let-i="index">
|
||||
<li class="uk-visible-toggle" [class.uk-active]="menuSelected.id == item.id">
|
||||
<a (click)="changeMenu(item)"
|
||||
[title]="item.name">
|
||||
<div class="uk-flex uk-flex-middle uk-flex-center">
|
||||
<div *ngIf="item.icon" class="uk-width-auto">
|
||||
<icon class="menu-icon" [name]="item.icon" [flex]="true"></icon>
|
||||
</div>
|
||||
<span [class.uk-text-small]="item.id != menuSelected.id"
|
||||
class="uk-width-expand uk-text-truncate uk-margin-small-left">
|
||||
{{item.name}}
|
||||
</span>
|
||||
<span uk-icon="triangle-right"></span>
|
||||
|
||||
<span>Reset all</span>
|
||||
</button>
|
||||
<button class="uk-float-right uk-button uk-margin-left uk-button-secondary "
|
||||
[disabled]="!hasChanges(publishedCustomizationOptions, draftCustomizationOptions)"
|
||||
[title]="(hasChanges(publishedCustomizationOptions, draftCustomizationOptions)?'Save changes':'No changes to save')"
|
||||
(click)="saveLayout()">
|
||||
Publish
|
||||
</button>
|
||||
</ng-template>
|
||||
|
||||
<!--<div page-content class="admin-pages">
|
||||
<div header>
|
||||
</div>
|
||||
<div inner>-->
|
||||
<!--(cancelEmitter)="toggleAction()"-->
|
||||
<div class="uk-modal-full uk-open" style = " display: block" uk-modal>
|
||||
<div class="uk-modal-dialog">
|
||||
<!--<button class="uk-modal-close-full uk-close-large" type="button" uk-close></button>-->
|
||||
<div class="uk-grid ">
|
||||
<div class="uk-width-medium">
|
||||
<div class=" uk-margin-left uk-margin-top">
|
||||
|
||||
<div class="uk-text-large" ><button class=" uk-close-large uk-margin-right" type="button" uk-close
|
||||
(click)="close()"
|
||||
></button> Customization
|
||||
<span *ngIf="hasChanges(publishedCustomizationOptions, draftCustomizationOptions)">(Unsaved changes)</span></div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ng-template>
|
||||
|
||||
<!-- Options-->
|
||||
<div class="uk-margin-large-top">
|
||||
<!-- identity -->
|
||||
<div [class.active]="menuSelected == 'identity'"
|
||||
(click)="changeMenu('identity')">Identity
|
||||
<span *ngIf="menuSelected == 'identity'" uk-icon="triangle-up"></span>
|
||||
<span *ngIf="menuSelected != 'identity'" uk-icon="triangle-down"></span>
|
||||
</ul>
|
||||
|
||||
<ng-container *ngIf="menuSelected.id == 'identity'">
|
||||
<ng-container
|
||||
*ngTemplateOutlet="identityOptions ; context: { }"></ng-container>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="menuSelected.id == 'backgrounds'">
|
||||
<ng-container
|
||||
*ngTemplateOutlet="backgroundOptions ; context: { }"></ng-container>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="menuSelected.id == 'buttons'">
|
||||
<ng-container
|
||||
*ngTemplateOutlet="buttonOptions ; context: { }"></ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
<div *ngIf="draftCustomizationOptions" page-content>
|
||||
<div header>
|
||||
<div class="uk-padding uk-margin-bottom">
|
||||
<ng-container
|
||||
*ngTemplateOutlet="applyResetButtons ; context: { }"></ng-container>
|
||||
</div>
|
||||
</div>
|
||||
<div inner>
|
||||
<div class="uk-padding">
|
||||
|
||||
|
||||
<div *ngIf="menuSelected.id == 'backgrounds'" class=" uk-padding-small ">
|
||||
<div class="customizationMenuItems uk-margin-small">
|
||||
<div class="uk-h4">Backgrounds</div>
|
||||
<div>Note: Custom background style settings will override any identity settings that effect the
|
||||
visualisation of a background.
|
||||
</div>
|
||||
|
||||
<div class="uk-margin-large-top uk-margin-small-bottom uk-h5"> Quick look
|
||||
|
||||
</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"
|
||||
[buttonsOnLight]="draftCustomizationOptions.buttons.lightBackground"
|
||||
></quick-look-backgrounds>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="menuSelected == 'identity'" class="functionalities-panel">
|
||||
|
||||
|
||||
<div class="uk-margin-top">
|
||||
<div class="">
|
||||
<span>Custom style</span>
|
||||
<mat-slide-toggle class="uk-margin-large-left"
|
||||
[checked]="draftCustomizationOptions.identityIsCustom"
|
||||
(change)="draftCustomizationOptions.identityIsCustom =
|
||||
<div *ngIf="menuSelected.id == 'buttons'" class=" uk-padding-small ">
|
||||
<div class="customizationMenuItems uk-margin-small">
|
||||
<div class="uk-h4">Buttons</div>
|
||||
<div>Note: Custom background style settings will override any identity settings that effect the
|
||||
visualisation of a background.
|
||||
</div>
|
||||
|
||||
<div class="uk-margin-large-top uk-margin-small-bottom uk-h5"> Quick look
|
||||
|
||||
</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"
|
||||
[buttonsOnLight]="draftCustomizationOptions.buttons.lightBackground"
|
||||
[buttonView]="true"
|
||||
></quick-look-backgrounds>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div *ngIf="menuSelected.id == 'identity'" class=" uk-padding-small ">
|
||||
<div class=" customizationMenuItems uk-margin-small">
|
||||
|
||||
<div class="uk-h4">Identity</div>
|
||||
<div>Note: Custom identity style settings will effect the visualisation of the whole gateway. That
|
||||
includes <span class="uk-text-bold">buttons, links, tabs, backgrounds, etc.</span></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class=" uk-padding-small ">
|
||||
<div class="uk-margin-top uk-margin-small-bottom uk-h5">See a preview</div>
|
||||
<div id="ipadcontainer" class=" uk-flex uk-flex-center uk-flex-middle">
|
||||
<div id="iframecontainer" class="">
|
||||
<div
|
||||
class="uk-margin-medium-top uk-position-relative uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center">
|
||||
<div *ngIf="hasChanges(draftCustomizationOptions, appliedCustomizationOptions)"
|
||||
class=" uk-width-1-1 refresh-indicator">
|
||||
<div class="uk-position-relative uk-height-1-1">
|
||||
<div class="uk-position-center uk-text-center clickable uk-h3" style="color:white"
|
||||
(click)="applyLayout()">
|
||||
<div>
|
||||
<icon name="refresh" ratio="2.5"></icon>
|
||||
</div>
|
||||
<div class="uk-margin-medium-top">Style has been changed.</div>
|
||||
<div class="uk-margin-top"> Click to refresh the view.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<iframe *ngIf="previewUrl" [src]="previewUrl" class="uk-width-1-1 "
|
||||
style="transform: scale(0.28,0.28) translate(1258px,-865px);width: 1000px;height: 700px;border-radius: 50px;"
|
||||
></iframe>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ng-template #identityOptions>
|
||||
<div class="functionalities-container">
|
||||
<div class="uk-margin-top">
|
||||
<div class="">
|
||||
<span>Custom style</span>
|
||||
<mat-slide-toggle class="uk-margin-large-left"
|
||||
[checked]="draftCustomizationOptions.identityIsCustom"
|
||||
(change)="draftCustomizationOptions.identityIsCustom =
|
||||
!draftCustomizationOptions.identityIsCustom;
|
||||
draftCustomizationOptions.identityIsCustom?'':this.resetIdentityToDefault();"
|
||||
[attr.uk-tooltip]="'title:<div class=\'uk-padding-small uk-width-large\'>' +
|
||||
[attr.uk-tooltip]="'title:<div class=\'uk-padding-small uk-width-large\'>' +
|
||||
(draftCustomizationOptions.identityIsCustom?'Change to default identity values':'Customize identity colors')+'</div>'"
|
||||
>
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="draftCustomizationOptions.identityIsCustom" class=" uk-margin-large-top">
|
||||
<div class=" uk-margin-medium-bottom uk-text-uppercase uk-text-meta uk-text-bold">
|
||||
Colors
|
||||
<a *ngIf="hasChanges(publishedCustomizationOptions.identity, draftCustomizationOptions.identity) &&
|
||||
>
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="draftCustomizationOptions.identityIsCustom" class=" uk-margin-large-top">
|
||||
<div class=" uk-margin-medium-bottom uk-text-uppercase uk-text-meta uk-text-bold">
|
||||
Colors
|
||||
<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>"
|
||||
(click)="resetIdentityToPublished();"> <icon name="reset"></icon></a>
|
||||
</div>
|
||||
<color [color]="draftCustomizationOptions.identity.mainColor" [light]="false" (colorChange)=
|
||||
" draftCustomizationOptions.identity.mainColor= $event; updateBackgroundsAndButtonsBasedOnIdentity()"
|
||||
label="Primary"></color>
|
||||
<color [color]="draftCustomizationOptions.identity.secondaryColor" [light]="false" (colorChange)=
|
||||
" draftCustomizationOptions.identity.secondaryColor= $event; updateBackgroundsAndButtonsBasedOnIdentity()" label="Secondary"></color>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div [class.active]="menuSelected == 'backgrounds'"
|
||||
(click)="changeMenu('backgrounds')">Background
|
||||
<span *ngIf="menuSelected == 'backgrounds'" uk-icon="triangle-up"></span>
|
||||
<span *ngIf="menuSelected != 'backgrounds'" uk-icon="triangle-down"></span>
|
||||
</div>
|
||||
<div *ngIf="menuSelected == 'backgrounds'" class="functionalities-panel">
|
||||
|
||||
|
||||
<div class="uk-margin-top">
|
||||
<span>Custom style </span>
|
||||
<span >
|
||||
<mat-slide-toggle class="uk-margin-large-left"
|
||||
[checked]="draftCustomizationOptions.backgroundsAndButtonsIsCustom"
|
||||
(change)="draftCustomizationOptions.backgroundsAndButtonsIsCustom=!draftCustomizationOptions.backgroundsAndButtonsIsCustom;
|
||||
draftCustomizationOptions.backgroundsAndButtonsIsCustom?'':this.resetBackgroundsAndButtonsToDefault(); "
|
||||
[attr.uk-tooltip]="'title:<div class=\'uk-padding-small uk-width-large\'>' +
|
||||
(draftCustomizationOptions.backgroundsAndButtonsIsCustom?'Change to default values produced based on the identity colors':'Customize options for background and buttons')+'</div>'"
|
||||
>
|
||||
</mat-slide-toggle>
|
||||
</span>
|
||||
</div>
|
||||
<!-- <div *ngIf="!draftCustomizationOptions.backgroundsAndButtonsIsCustom" class="uk-margin-top uk-text-small"
|
||||
style="font-style: italic">
|
||||
Backgrounds and buttons are set in the default values.
|
||||
</div>-->
|
||||
|
||||
<div *ngIf="draftCustomizationOptions.backgroundsAndButtonsIsCustom" class="">
|
||||
|
||||
<div class="uk-margin-medium-bottom uk-text-uppercase uk-text-meta uk-text-bold uk-margin-large-top">Colors
|
||||
<!-- TODO reset only background colors-->
|
||||
<a *ngIf="(hasChanges(publishedCustomizationOptions.backgrounds, draftCustomizationOptions.backgrounds)
|
||||
|| hasChanges(publishedCustomizationOptions.buttons, draftCustomizationOptions.buttons) )
|
||||
&& draftCustomizationOptions.backgroundsAndButtonsIsCustom"
|
||||
(click)="resetBackgroundsAndButtonsToPublished();" class="uk-margin-small-left"
|
||||
uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
|
||||
> <icon name="reset"></icon></a>
|
||||
</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"
|
||||
[oldBackground]="publishedCustomizationOptions.backgrounds.form" [communityId]="communityId"></background>
|
||||
<div class="uk-margin-medium-bottom uk-text-uppercase uk-text-meta uk-text-bold uk-margin-large-top">
|
||||
Image
|
||||
<!-- TODO reset only image-->
|
||||
<a *ngIf="(hasChanges(publishedCustomizationOptions.backgrounds, draftCustomizationOptions.backgrounds)
|
||||
|| hasChanges(publishedCustomizationOptions.buttons, draftCustomizationOptions.buttons) )
|
||||
&& draftCustomizationOptions.backgroundsAndButtonsIsCustom"
|
||||
(click)="resetBackgroundsAndButtonsToPublished();" class="uk-margin-small-left"
|
||||
uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
|
||||
> <icon name="reset"></icon></a>
|
||||
</div>
|
||||
<background-upload label="Form" [background]="draftCustomizationOptions.backgrounds.form"
|
||||
[oldBackground]="publishedCustomizationOptions.backgrounds.form" [communityId]="communityId"></background-upload>
|
||||
|
||||
(click)="resetIdentityToPublished();">
|
||||
<icon name="reset"></icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div [class.active]="menuSelected == 'buttons'"
|
||||
(click)="changeMenu('buttons')">Buttons
|
||||
<span *ngIf="menuSelected == 'buttons'" uk-icon="triangle-up"></span>
|
||||
<span *ngIf="menuSelected != 'buttons'" uk-icon="triangle-down"></span>
|
||||
</div>
|
||||
<div *ngIf="menuSelected == 'buttons'" class="functionalities-panel">
|
||||
<!--<div class="uk-margin-medium-bottom uk-text-uppercase uk-text-meta uk-text-bold">Buttons </div>-->
|
||||
<!-- TODO dropdown -->
|
||||
<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-medium-top uk-margin">
|
||||
<li>
|
||||
<customize-buttons
|
||||
[buttons]="draftCustomizationOptions.buttons.darkBackground" [light]="true"
|
||||
></customize-buttons>
|
||||
</li>
|
||||
<li>
|
||||
<customize-buttons
|
||||
[buttons]="draftCustomizationOptions.buttons.lightBackground" [light]="false"
|
||||
></customize-buttons>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<color [color]="draftCustomizationOptions.identity.mainColor" [light]="false" (colorChange)=
|
||||
" draftCustomizationOptions.identity.mainColor= $event; updateBackgroundsAndButtonsBasedOnIdentity()"
|
||||
label="Primary"></color>
|
||||
<color [color]="draftCustomizationOptions.identity.secondaryColor" [light]="false" (colorChange)=
|
||||
" draftCustomizationOptions.identity.secondaryColor= $event; updateBackgroundsAndButtonsBasedOnIdentity()"
|
||||
label="Secondary"></color>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="draftCustomizationOptions" class="uk-width-expand">
|
||||
<div >
|
||||
<div class = " uk-padding">
|
||||
|
||||
<ng-container
|
||||
*ngTemplateOutlet="applyResetButtons ; context: { }"></ng-container>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-padding">
|
||||
<!--<ul class="uk-tab customTabs admin uk-flex uk-flex-center uk-flex-left@m" uk-tab >
|
||||
<li [class.uk-active]="menuSelected === 'identity'"
|
||||
uk-tooltip="title:<div class='uk-padding-small uk-width-large'><b>Identity colors</b> are used in several places in your community Dashboard and they are the default colors used for the backgrounds and buttons.</div>"
|
||||
><a
|
||||
(click)="menuSelected = 'identity'" ><span class="title">Identity</span></a></li>
|
||||
<li [class.uk-active]="menuSelected === 'backgrounds'"><a (click)="menuSelected = 'backgrounds'"><span
|
||||
class="title">Backgrounds & buttons
|
||||
</span></a></li>
|
||||
|
||||
</ul>-->
|
||||
|
||||
<div *ngIf="menuSelected == 'backgrounds'" class=" uk-padding-small ">
|
||||
<div class="customizationMenuItems uk-margin-small">
|
||||
<div class="uk-h4">Backgrounds</div>
|
||||
<div>Note: Custom background style settings will override any identity settings that effect the visualisation of a background.</div>
|
||||
<!-- <div class="uk-grid">-->
|
||||
<!-- <div class="uk-width-2-3@m uk-width-1-1@s">-->
|
||||
<div class="uk-margin-large-top uk-margin-small-bottom uk-h5"> 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"
|
||||
d="M17.08,11.15 C17.09,11.31 17.1,11.47 17.1,11.64 C17.1,15.53 13.94,18.69 10.05,18.69 C6.16,18.68 3,15.53 3,11.63 C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 11.71,4.73 12.46,5"></path><polyline
|
||||
fill="none" stroke="#000" points="9.9 2 12.79 4.89 9.79 7.9"></polyline></svg>
|
||||
</span>-->
|
||||
</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"
|
||||
[buttonsOnLight]="draftCustomizationOptions.buttons.lightBackground"
|
||||
></quick-look-backgrounds>
|
||||
|
||||
</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 uk-h4" >Backgrounds & Buttons
|
||||
<a *ngIf="(hasChanges(publishedCustomizationOptions.backgrounds, draftCustomizationOptions.backgrounds)
|
||||
|| hasChanges(publishedCustomizationOptions.buttons, draftCustomizationOptions.buttons) )
|
||||
&& draftCustomizationOptions.backgroundsAndButtonsIsCustom"
|
||||
(click)="resetBackgroundsAndButtonsToPublished();" class="uk-margin-small-left"
|
||||
uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
|
||||
> <icon name="reset"></icon></a>
|
||||
</div>
|
||||
|
||||
<div class="uk-margin-top">
|
||||
<span>Custom style </span>
|
||||
<span >
|
||||
</ng-template>
|
||||
<ng-template #backgroundOptions>
|
||||
<div class="functionalities-container">
|
||||
<div class="uk-margin-top">
|
||||
<span>Custom style </span>
|
||||
<span>
|
||||
<mat-slide-toggle class="uk-margin-large-left"
|
||||
[checked]="draftCustomizationOptions.backgroundsAndButtonsIsCustom"
|
||||
(change)="draftCustomizationOptions.backgroundsAndButtonsIsCustom=!draftCustomizationOptions.backgroundsAndButtonsIsCustom;
|
||||
draftCustomizationOptions.backgroundsAndButtonsIsCustom?'':this.resetBackgroundsAndButtonsToDefault(); "
|
||||
[checked]="draftCustomizationOptions.backgroundsIsCustom"
|
||||
(change)="draftCustomizationOptions.backgroundsIsCustom=!draftCustomizationOptions.backgroundsIsCustom;
|
||||
draftCustomizationOptions.backgroundsIsCustom?'':this.resetBackgroundsAndButtonsToDefault(); "
|
||||
[attr.uk-tooltip]="'title:<div class=\'uk-padding-small uk-width-large\'>' +
|
||||
(draftCustomizationOptions.backgroundsAndButtonsIsCustom?'Change to default values produced based on the identity colors':'Customize options for background and buttons')+'</div>'"
|
||||
(draftCustomizationOptions.backgroundsIsCustom?'Change to default values produced based on the identity colors':'Customize options for background and buttons')+'</div>'"
|
||||
>
|
||||
</mat-slide-toggle>
|
||||
</span>
|
||||
</div>
|
||||
<div *ngIf="!draftCustomizationOptions.backgroundsAndButtonsIsCustom" class="uk-margin-top uk-text-small"
|
||||
style="font-style: italic">
|
||||
Backgrounds and buttons are set in the default values.
|
||||
</div>
|
||||
|
||||
<div *ngIf="draftCustomizationOptions.backgroundsAndButtonsIsCustom" class=" uk-margin-large-top">
|
||||
<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"
|
||||
[oldBackground]="publishedCustomizationOptions.backgrounds.form" [communityId]="communityId"></background>
|
||||
<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-medium-top uk-margin">
|
||||
<li>
|
||||
<customize-buttons
|
||||
[buttons]="draftCustomizationOptions.buttons.darkBackground" [light]="true"
|
||||
></customize-buttons>
|
||||
</li>
|
||||
<li>
|
||||
<customize-buttons
|
||||
[buttons]="draftCustomizationOptions.buttons.lightBackground" [light]="false"
|
||||
></customize-buttons>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
<div *ngIf="menuSelected == 'buttons'" class=" uk-padding-small ">
|
||||
<div class="customizationMenuItems uk-margin-small">
|
||||
<div class="uk-h4">Buttons</div>
|
||||
<div>Note: Custom background style settings will override any identity settings that effect the visualisation of a background.</div>
|
||||
|
||||
<div class="uk-margin-large-top uk-margin-small-bottom uk-h5"> Quick look
|
||||
|
||||
</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"
|
||||
[buttonsOnLight]="draftCustomizationOptions.buttons.lightBackground"
|
||||
[buttonView]="true"
|
||||
></quick-look-backgrounds>
|
||||
<div *ngIf="draftCustomizationOptions.backgroundsIsCustom" class="">
|
||||
|
||||
<div class="uk-margin-medium-bottom uk-text-uppercase uk-text-meta uk-text-bold uk-margin-large-top">
|
||||
Colors
|
||||
<a *ngIf="(
|
||||
hasChanges(publishedCustomizationOptions.backgrounds.light, draftCustomizationOptions.backgrounds.light)||
|
||||
hasChanges(publishedCustomizationOptions.backgrounds.dark, draftCustomizationOptions.backgrounds.dark)||
|
||||
hasChanges(publishedCustomizationOptions.backgrounds.form.color, draftCustomizationOptions.backgrounds.form.color))
|
||||
&& draftCustomizationOptions.backgroundsIsCustom"
|
||||
(click)="resetBackgroundsTo(publishedCustomizationOptions.backgrounds);"
|
||||
class="uk-margin-small-left"
|
||||
uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
|
||||
>
|
||||
<icon name="reset"></icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div *ngIf="menuSelected == 'identity'" class=" uk-padding-small ">
|
||||
<div class=" customizationMenuItems uk-margin-small">
|
||||
|
||||
<div class="uk-h4">Identity</div>
|
||||
<div>Note: Custom identity style settings will effect the visualisation of the whole gateway. That
|
||||
includes <span class="uk-text-bold">buttons, links, tabs, backgrounds, etc.</span></div>
|
||||
<!--<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-h4">Quick look
|
||||
</div>
|
||||
<div style="border-radius: 6px;" class="uk-alert uk-padding-small">
|
||||
<quick-look [primaryColor]="draftCustomizationOptions.identity.mainColor"
|
||||
[secondaryColor]="draftCustomizationOptions.identity.secondaryColor" preview="identity"></quick-look>
|
||||
</div>
|
||||
</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 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>"
|
||||
(click)="resetIdentityToPublished();"> <icon name="reset"></icon></a></div>
|
||||
|
||||
<div class="uk-margin-top">
|
||||
<div class="">
|
||||
<span>Custom style</span>
|
||||
<mat-slide-toggle class="uk-margin-large-left"
|
||||
[checked]="draftCustomizationOptions.identityIsCustom"
|
||||
(change)="draftCustomizationOptions.identityIsCustom =
|
||||
!draftCustomizationOptions.identityIsCustom;
|
||||
draftCustomizationOptions.identityIsCustom?'':this.resetIdentityToDefault();"
|
||||
[attr.uk-tooltip]="'title:<div class=\'uk-padding-small uk-width-large\'>' +
|
||||
(draftCustomizationOptions.identityIsCustom?'Change to default identity values':'Customize identity colors')+'</div>'"
|
||||
>
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
<div *ngIf="!draftCustomizationOptions.identityIsCustom" class="uk-margin-top uk-text-small"
|
||||
style="font-style: italic">
|
||||
Identity is set in the default values.
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="draftCustomizationOptions.identityIsCustom" class=" uk-margin-large-top">
|
||||
<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>
|
||||
<color [color]="draftCustomizationOptions.identity.secondaryColor" [light]="false" (colorChange)=
|
||||
" draftCustomizationOptions.identity.secondaryColor= $event; updateBackgroundsAndButtonsBasedOnIdentity()" label="Secondary"></color>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>-->
|
||||
|
||||
|
||||
</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"
|
||||
[oldBackground]="publishedCustomizationOptions.backgrounds.form"
|
||||
[communityId]="communityId"></background>
|
||||
<div class="uk-margin-medium-bottom uk-text-uppercase uk-text-meta uk-text-bold uk-margin-large-top">
|
||||
Image
|
||||
<a *ngIf="(formHasChanges(publishedCustomizationOptions, draftCustomizationOptions) )
|
||||
&& draftCustomizationOptions.backgroundsIsCustom"
|
||||
(click)="resetImageTo(publishedCustomizationOptions.backgrounds);" class="uk-margin-small-left"
|
||||
uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
|
||||
>
|
||||
<icon name="reset"></icon>
|
||||
</a>
|
||||
</div>
|
||||
<background-upload label="Form" [background]="draftCustomizationOptions.backgrounds.form"
|
||||
[oldBackground]="publishedCustomizationOptions.backgrounds.form"
|
||||
[communityId]="communityId"></background-upload>
|
||||
|
||||
</div>
|
||||
|
||||
<div class=" uk-padding-small ">
|
||||
<div class="uk-margin-top uk-margin-small-bottom uk-h5">See a preview</div>
|
||||
<div id="ipadcontainer" class=" uk-flex uk-flex-center uk-flex-middle">
|
||||
<div id="iframecontainer" class="">
|
||||
<div
|
||||
class="uk-margin-medium-top uk-position-relative uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center">
|
||||
<div *ngIf="hasChanges(draftCustomizationOptions, appliedCustomizationOptions)"
|
||||
class=" uk-width-1-1 refresh-indicator" >
|
||||
<div class="uk-position-relative uk-height-1-1">
|
||||
<div class="uk-position-center uk-text-center clickable uk-h3" style="color:white"
|
||||
(click)="applyLayout()">
|
||||
<div>
|
||||
<icon name="refresh" ratio="2.5"></icon>
|
||||
</div>
|
||||
<div class="uk-margin-medium-top">Style has been changed.</div>
|
||||
<div class="uk-margin-top"> Click to refresh the view.</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #buttonOptions>
|
||||
<div class="functionalities-container">
|
||||
<div class="">
|
||||
<div class="uk-margin-top uk-margin-large-bottom">
|
||||
<span>Custom style </span>
|
||||
<span>
|
||||
<mat-slide-toggle class="uk-margin-large-left"
|
||||
[checked]="draftCustomizationOptions.buttonsIsCustom"
|
||||
(change)="draftCustomizationOptions.buttonsIsCustom=!draftCustomizationOptions.buttonsIsCustom;
|
||||
draftCustomizationOptions.buttonsIsCustom?'':this.resetBackgroundsAndButtonsToDefault(); "
|
||||
[attr.uk-tooltip]="'title:<div class=\'uk-padding-small uk-width-large\'>' +
|
||||
(draftCustomizationOptions.buttonsIsCustom?'Change to default values produced based on the identity colors':'Customize options for background and buttons')+'</div>'"
|
||||
>
|
||||
</mat-slide-toggle>
|
||||
</span>
|
||||
</div>
|
||||
<ng-container *ngIf="draftCustomizationOptions.buttonsIsCustom">
|
||||
|
||||
<div class="uk-margin-top uk-margin-large-bottom uk-grid uk-flex uk-flex-middle">
|
||||
<div class="uk-text-uppercase uk-text-bold uk-text-meta uk-margin-right">style on</div>
|
||||
<div class="uk-width-expand uk-padding-remove-left " inputClass="inner x-small" input type="select"
|
||||
[(value)]="buttonsSelected"
|
||||
[options]="[{value: 'dark',label:'Dark BG'},{value: 'light',label:'Light BG'}]">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<iframe *ngIf="previewUrl" [src]="previewUrl" class="uk-width-1-1 " style="transform: scale(0.28,0.28) translate(1258px,-865px);width: 1000px;height: 700px;border-radius: 50px;"
|
||||
></iframe>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="functionalities-border">
|
||||
<ng-container *ngIf="buttonsSelected == 'dark'">
|
||||
<customize-buttons
|
||||
[buttons]="draftCustomizationOptions.buttons.darkBackground" [light]="true"
|
||||
[buttonsPublished]="publishedCustomizationOptions.buttons.darkBackground"
|
||||
></customize-buttons>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="buttonsSelected == 'light'">
|
||||
<customize-buttons
|
||||
[buttons]="draftCustomizationOptions.buttons.lightBackground" [light]="false"
|
||||
[buttonsPublished]="publishedCustomizationOptions.buttons.lightBackground"
|
||||
></customize-buttons>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div>
|
||||
</div>-->
|
||||
</ng-template>
|
||||
<ng-template #applyResetButtons>
|
||||
<button class="uk-float-right uk-button uk-margin-left uk-button-primary "
|
||||
[disabled]="!hasChanges(publishedCustomizationOptions, draftCustomizationOptions)"
|
||||
[title]="(hasChanges(publishedCustomizationOptions, draftCustomizationOptions)?'Save changes':'No changes to save')"
|
||||
(click)="saveLayout()">
|
||||
Publish
|
||||
</button>
|
||||
<button class="uk-float-right uk-button uk-margin-left uk-button-secondary outlined"
|
||||
[disabled]="!hasChanges(publishedCustomizationOptions, draftCustomizationOptions)"
|
||||
(click)="resetLayout()">
|
||||
|
||||
<span>Reset all</span>
|
||||
</button>
|
||||
|
||||
</ng-template>
|
||||
|
|
|
|||
|
|
@ -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 (δεξιά)");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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; "></border>
|
||||
<div class="uk-grid uk-child-width-1-2 uk-margin-top" >
|
||||
buttons.borderWidth = $event.width; "
|
||||
[stylePublished]="buttonsPublished.borderStyle"
|
||||
[widthPublished]="buttonsPublished.borderWidth"
|
||||
[radiusPublished]="buttonsPublished.borderRadius"
|
||||
></border>
|
||||
<div class="uk-grid uk-margin-top" >
|
||||
<div class="">
|
||||
<div class=" uk-margin-small-bottom uk-text-bold uk-margin-small-left">Colors</div>
|
||||
<div class=" uk-margin-small-bottom uk-text-bold uk-margin-small-left uk-text-meta uk-text-uppercase">Colors
|
||||
<a *ngIf="buttons.color !=buttonsPublished.color || buttons.backgroundColor != buttonsPublished.backgroundColor || buttons.borderColor !=buttonsPublished.borderColor " class="uk-margin-small-left"
|
||||
uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
|
||||
(click)="buttons.color =buttonsPublished.color; buttons.backgroundColor = buttonsPublished.backgroundColor ; buttons.borderColor =buttonsPublished.borderColor "> <icon name="reset"></icon></a>
|
||||
</div>
|
||||
<color [color]="buttons.color" (colorChange)=
|
||||
" buttons.color = $event; "
|
||||
label="Fonts" [light]="!light"
|
||||
|
|
@ -29,8 +37,13 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust
|
|||
|
||||
></color>
|
||||
</div>
|
||||
<div>
|
||||
<div class=" uk-margin-small-bottom uk-text-bold uk-margin-small-left">Colors on hover</div>
|
||||
<div class="uk-margin-top">
|
||||
<div class=" uk-margin-small-bottom uk-text-bold uk-margin-small-left uk-text-meta uk-text-uppercase">Colors on hover
|
||||
<a *ngIf="hasChanges(buttons.onHover,buttonsPublished.onHover)" class="uk-margin-small-left"
|
||||
uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
|
||||
(click)="buttons.onHover.color =buttonsPublished.onHover.color; buttons.onHover.backgroundColor = buttonsPublished.onHover.backgroundColor ;
|
||||
buttons.onHover.borderColor = buttonsPublished.onHover.borderColor"> <icon name="reset"></icon></a>
|
||||
</div>
|
||||
<div class="">
|
||||
<color [color]="buttons.onHover.color" (colorChange)=
|
||||
" buttons.onHover.color = $event;" label="Fonts" [light]="!light"
|
||||
|
|
@ -55,8 +68,11 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust
|
|||
|
||||
export class CustomizeButtonsComponent {
|
||||
@Input() buttons:ButtonsCustomization;
|
||||
@Input() buttonsPublished:ButtonsCustomization;
|
||||
@Input() light:boolean;
|
||||
constructor() {
|
||||
}
|
||||
|
||||
hasChanges(object1,object2):boolean{
|
||||
return JSON.stringify(object1) != JSON.stringify(object2);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,12 +6,11 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust
|
|||
@Component({
|
||||
selector: 'quick-look-backgrounds',
|
||||
template: `
|
||||
<div class="uk-grid" [class.uk-child-width-1-2]="buttonView">
|
||||
<div class="uk-grid uk-child-width-1-2" >
|
||||
<div>
|
||||
<div class="uk-margin-large-top uk-margin-medium-bottom uk-text-large">Dark background</div>
|
||||
|
||||
<div class="uk-padding-small uk-text-center darkBackground uk-light uk-flex uk-flex-center uk-flex-middle"
|
||||
[class.uk-height-small]="buttonView" [class.uk-height-medium]="!buttonView">
|
||||
<div [class]="'uk-padding-small uk-text-center darkBackground uk-light' + (buttonView?' uk-flex uk-flex-middle uk-flex-center':'') "
|
||||
[class.uk-height-small]="buttonView" [class.uk-height-medium]="!buttonView" >
|
||||
<div *ngIf="!buttonView">
|
||||
<h1 >Heading</h1>
|
||||
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis velit ornare, auctor lectus at, rutrum magna. Aenean vehicula elementum lacinia.</div>
|
||||
|
|
@ -20,14 +19,11 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust
|
|||
<quick-look-buttons
|
||||
[buttons]="buttonsOnDark"
|
||||
></quick-look-buttons>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div [class.uk-margin-top]="!buttonView">
|
||||
|
||||
<div class="uk-margin-large-top uk-margin-medium-bottom uk-text-large">Light background</div>
|
||||
<div class="uk-padding-small uk-text-center uk-width-1-1 uk-height-medium lightBackground uk-flex uk-flex-center uk-flex-middle"
|
||||
<div [class]="'uk-padding-small uk-text-center uk-width-1-1 uk-height-medium lightBackground' + (buttonView?' uk-flex uk-flex-middle uk-flex-center':'') "
|
||||
[class.uk-height-small]="buttonView" [class.uk-height-medium]="!buttonView">
|
||||
<div *ngIf="!buttonView">
|
||||
<h1 >Heading</h1>
|
||||
|
|
@ -35,7 +31,6 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust
|
|||
<a class="portal-link">Link</a>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<quick-look-buttons
|
||||
[buttons]="buttonsOnLight" ></quick-look-buttons>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue