Customization: more changes for the new mocks
This commit is contained in:
parent
048f159f5d
commit
dc2aa3b764
|
@ -31,6 +31,7 @@ import {ConnectRIGuard} from "../openaireLibrary/connect/communityGuard/connectR
|
||||||
{
|
{
|
||||||
path: 'customize-layout',
|
path: 'customize-layout',
|
||||||
loadChildren: () => import('./customization/customization.module').then(m => m.CustomizationModule),
|
loadChildren: () => import('./customization/customization.module').then(m => m.CustomizationModule),
|
||||||
|
data: {hasSidebar: true, hasHeader: false}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'user-info',
|
path: 'user-info',
|
||||||
|
|
|
@ -9,61 +9,37 @@ declare var UIkit;
|
||||||
selector: 'background-upload',
|
selector: 'background-upload',
|
||||||
template: `
|
template: `
|
||||||
<input #file id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/>
|
<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=" upload uk-text-center uk-height-small uk-flex uk-flex-middle uk-flex-center uk-text-uppercase">
|
||||||
<div *ngIf="!background.imageFile" class=" uk-placeholder uk-text-center uk-height-small">
|
|
||||||
<span uk-icon="icon: cloud-upload"></span>
|
<span uk-icon="icon: cloud-upload"></span>
|
||||||
<div uk-form-custom>
|
<div uk-form-custom>
|
||||||
<span class="uk-link uk-margin-small-left" (click)="file.click()">upload an image</span>
|
<span class="uk-link uk-margin-small-left" (click)="file.click()">upload 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>
|
|
||||||
</div>
|
</div>
|
||||||
</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 {
|
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({
|
@Component({
|
||||||
selector: 'border',
|
selector: 'border',
|
||||||
template: `
|
template: `
|
||||||
<div class="uk-grid uk-child-width-1-2">
|
<div class="uk-grid ">
|
||||||
<div class="uk-margin-remove">
|
<div class="uk-margin-remove">
|
||||||
<div class="uk-text-bold uk-form-label uk-margin-small-bottom"> Border radius (px)</div>
|
<div class="uk-text-bold uk-margin-small-bottom uk-text-uppercase uk-text-meta"> Border radius (px)
|
||||||
<!-- <div class="uk-margin-bottom uk-form-hint ">hint</div>-->
|
<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">
|
<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>
|
</div>
|
||||||
<div class="uk-margin-remove">
|
<div class="uk-margin-top">
|
||||||
<div class="uk-text-bold uk-form-label uk-margin-small-bottom"> Border width (px)</div>
|
<div class="uk-text-bold uk-text-uppercase uk-text-meta"> Border width (px)
|
||||||
<!-- <div class="uk-margin-bottom uk-form-hint "> hint</div>-->
|
<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">
|
<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>
|
</div>
|
||||||
<div class="uk-margin-small-top">
|
<div class="uk-margin-top uk-width-1-1">
|
||||||
<div class="uk-text-bold uk-form-label uk-margin-small-bottom"> Border style</div>
|
<div class="uk-text-bold uk-text-uppercase uk-text-meta"> Border style
|
||||||
<!-- <div class="uk-margin-bottom uk-form-hint "> hint</div>-->
|
<a *ngIf="style != stylePublished" class="uk-margin-small-left"
|
||||||
<div class="input-box ">
|
uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
|
||||||
<mat-form-field class="uk-width-1-1">
|
(click)="style = stylePublished;borderChanged()"> <icon name="reset"></icon></a>
|
||||||
<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>
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
|
@ -44,14 +44,14 @@ export class BorderComponent implements OnInit {
|
||||||
@Input() radius: number = 0;
|
@Input() radius: number = 0;
|
||||||
@Input() width: number = 0;
|
@Input() width: number = 0;
|
||||||
@Input() style = 'solid';
|
@Input() style = 'solid';
|
||||||
// @Input() addMargin: boolean = false;
|
@Input() radiusPublished: number = 0;
|
||||||
|
@Input() widthPublished: number = 0;
|
||||||
|
@Input() stylePublished = 'solid';
|
||||||
@Output() borderChange = new EventEmitter();
|
@Output() borderChange = new EventEmitter();
|
||||||
|
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -59,6 +59,4 @@ export class BorderComponent implements OnInit {
|
||||||
console.log(this.radius);
|
console.log(this.radius);
|
||||||
this.borderChange.emit({radius: this.radius, width: this.width, style: this.style});
|
this.borderChange.emit({radius: this.radius, width: this.width, style: this.style});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,386 +1,307 @@
|
||||||
<ng-template #applyResetButtons>
|
<aside *ngIf="draftCustomizationOptions" id="sidebar_main">
|
||||||
<button class="uk-float-right uk-button uk-margin-left uk-button-secondary outlined" [disabled]="!hasChanges(publishedCustomizationOptions, draftCustomizationOptions)"
|
<div id="sidebar_content">
|
||||||
(click)="resetLayout()">
|
<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>
|
||||||
<div header>
|
</a>
|
||||||
</div>
|
</li>
|
||||||
<div inner>-->
|
</ng-template>
|
||||||
<!--(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>
|
|
||||||
|
|
||||||
<!-- Options-->
|
</ul>
|
||||||
<div class="uk-margin-large-top">
|
|
||||||
<!-- identity -->
|
<ng-container *ngIf="menuSelected.id == 'identity'">
|
||||||
<div [class.active]="menuSelected == 'identity'"
|
<ng-container
|
||||||
(click)="changeMenu('identity')">Identity
|
*ngTemplateOutlet="identityOptions ; context: { }"></ng-container>
|
||||||
<span *ngIf="menuSelected == 'identity'" uk-icon="triangle-up"></span>
|
</ng-container>
|
||||||
<span *ngIf="menuSelected != 'identity'" uk-icon="triangle-down"></span>
|
<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>
|
||||||
<div *ngIf="menuSelected == 'identity'" class="functionalities-panel">
|
<div *ngIf="menuSelected.id == 'buttons'" class=" uk-padding-small ">
|
||||||
|
<div class="customizationMenuItems uk-margin-small">
|
||||||
|
<div class="uk-h4">Buttons</div>
|
||||||
<div class="uk-margin-top">
|
<div>Note: Custom background style settings will override any identity settings that effect the
|
||||||
<div class="">
|
visualisation of a background.
|
||||||
<span>Custom style</span>
|
</div>
|
||||||
<mat-slide-toggle class="uk-margin-large-left"
|
|
||||||
[checked]="draftCustomizationOptions.identityIsCustom"
|
<div class="uk-margin-large-top uk-margin-small-bottom uk-h5"> Quick look
|
||||||
(change)="draftCustomizationOptions.identityIsCustom =
|
|
||||||
|
</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;
|
||||||
draftCustomizationOptions.identityIsCustom?'':this.resetIdentityToDefault();"
|
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>'"
|
(draftCustomizationOptions.identityIsCustom?'Change to default identity values':'Customize identity colors')+'</div>'"
|
||||||
>
|
>
|
||||||
</mat-slide-toggle>
|
</mat-slide-toggle>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="draftCustomizationOptions.identityIsCustom" class=" uk-margin-large-top">
|
<div *ngIf="draftCustomizationOptions.identityIsCustom" class=" uk-margin-large-top">
|
||||||
<div class=" uk-margin-medium-bottom uk-text-uppercase uk-text-meta uk-text-bold">
|
<div class=" uk-margin-medium-bottom uk-text-uppercase uk-text-meta uk-text-bold">
|
||||||
Colors
|
Colors
|
||||||
<a *ngIf="hasChanges(publishedCustomizationOptions.identity, draftCustomizationOptions.identity) &&
|
<a *ngIf="hasChanges(publishedCustomizationOptions.identity, draftCustomizationOptions.identity) &&
|
||||||
draftCustomizationOptions.identityIsCustom" class="uk-margin-small-left"
|
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>"
|
uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
|
||||||
> <icon name="reset"></icon></a>
|
(click)="resetIdentityToPublished();">
|
||||||
</div>
|
<icon name="reset"></icon>
|
||||||
<background label="Dark" [background]="draftCustomizationOptions.backgrounds.dark"
|
</a>
|
||||||
[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>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<color [color]="draftCustomizationOptions.identity.mainColor" [light]="false" (colorChange)=
|
||||||
<div [class.active]="menuSelected == 'buttons'"
|
" draftCustomizationOptions.identity.mainColor= $event; updateBackgroundsAndButtonsBasedOnIdentity()"
|
||||||
(click)="changeMenu('buttons')">Buttons
|
label="Primary"></color>
|
||||||
<span *ngIf="menuSelected == 'buttons'" uk-icon="triangle-up"></span>
|
<color [color]="draftCustomizationOptions.identity.secondaryColor" [light]="false" (colorChange)=
|
||||||
<span *ngIf="menuSelected != 'buttons'" uk-icon="triangle-down"></span>
|
" draftCustomizationOptions.identity.secondaryColor= $event; updateBackgroundsAndButtonsBasedOnIdentity()"
|
||||||
</div>
|
label="Secondary"></color>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="draftCustomizationOptions" class="uk-width-expand">
|
</ng-template>
|
||||||
<div >
|
<ng-template #backgroundOptions>
|
||||||
<div class = " uk-padding">
|
<div class="functionalities-container">
|
||||||
|
<div class="uk-margin-top">
|
||||||
<ng-container
|
<span>Custom style </span>
|
||||||
*ngTemplateOutlet="applyResetButtons ; context: { }"></ng-container>
|
<span>
|
||||||
|
|
||||||
</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 >
|
|
||||||
<mat-slide-toggle class="uk-margin-large-left"
|
<mat-slide-toggle class="uk-margin-large-left"
|
||||||
[checked]="draftCustomizationOptions.backgroundsAndButtonsIsCustom"
|
[checked]="draftCustomizationOptions.backgroundsIsCustom"
|
||||||
(change)="draftCustomizationOptions.backgroundsAndButtonsIsCustom=!draftCustomizationOptions.backgroundsAndButtonsIsCustom;
|
(change)="draftCustomizationOptions.backgroundsIsCustom=!draftCustomizationOptions.backgroundsIsCustom;
|
||||||
draftCustomizationOptions.backgroundsAndButtonsIsCustom?'':this.resetBackgroundsAndButtonsToDefault(); "
|
draftCustomizationOptions.backgroundsIsCustom?'':this.resetBackgroundsAndButtonsToDefault(); "
|
||||||
[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.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>
|
</mat-slide-toggle>
|
||||||
</span>
|
</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>
|
||||||
<div *ngIf="menuSelected == 'buttons'" class=" uk-padding-small ">
|
<div *ngIf="draftCustomizationOptions.backgroundsIsCustom" class="">
|
||||||
<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 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>
|
||||||
|
<background label="Dark" [background]="draftCustomizationOptions.backgrounds.dark"
|
||||||
</div>
|
[light]="false"></background>
|
||||||
|
<background label="Light" [background]="draftCustomizationOptions.backgrounds.light"
|
||||||
<div *ngIf="menuSelected == 'identity'" class=" uk-padding-small ">
|
[light]="true"></background>
|
||||||
<div class=" customizationMenuItems uk-margin-small">
|
<background label="Form" [background]="draftCustomizationOptions.backgrounds.form"
|
||||||
|
[light]="true"
|
||||||
<div class="uk-h4">Identity</div>
|
[oldBackground]="publishedCustomizationOptions.backgrounds.form"
|
||||||
<div>Note: Custom identity style settings will effect the visualisation of the whole gateway. That
|
[communityId]="communityId"></background>
|
||||||
includes <span class="uk-text-bold">buttons, links, tabs, backgrounds, etc.</span></div>
|
<div class="uk-margin-medium-bottom uk-text-uppercase uk-text-meta uk-text-bold uk-margin-large-top">
|
||||||
<!--<div class="uk-grid">
|
Image
|
||||||
<div class="uk-width-2-3@m uk-width-1-1@s">
|
<a *ngIf="(formHasChanges(publishedCustomizationOptions, draftCustomizationOptions) )
|
||||||
<div class="uk-margin-top uk-margin-small-bottom uk-h4">Quick look
|
&& draftCustomizationOptions.backgroundsIsCustom"
|
||||||
</div>
|
(click)="resetImageTo(publishedCustomizationOptions.backgrounds);" class="uk-margin-small-left"
|
||||||
<div style="border-radius: 6px;" class="uk-alert uk-padding-small">
|
uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
|
||||||
<quick-look [primaryColor]="draftCustomizationOptions.identity.mainColor"
|
>
|
||||||
[secondaryColor]="draftCustomizationOptions.identity.secondaryColor" preview="identity"></quick-look>
|
<icon name="reset"></icon>
|
||||||
</div>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="uk-width-1-3@m uk-width-1-1@s">
|
<background-upload label="Form" [background]="draftCustomizationOptions.backgrounds.form"
|
||||||
|
[oldBackground]="publishedCustomizationOptions.backgrounds.form"
|
||||||
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold uk-h4" > Identity
|
[communityId]="communityId"></background-upload>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class=" uk-padding-small ">
|
</ng-template>
|
||||||
<div class="uk-margin-top uk-margin-small-bottom uk-h5">See a preview</div>
|
<ng-template #buttonOptions>
|
||||||
<div id="ipadcontainer" class=" uk-flex uk-flex-center uk-flex-middle">
|
<div class="functionalities-container">
|
||||||
<div id="iframecontainer" class="">
|
<div class="">
|
||||||
<div
|
<div class="uk-margin-top uk-margin-large-bottom">
|
||||||
class="uk-margin-medium-top uk-position-relative uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center">
|
<span>Custom style </span>
|
||||||
<div *ngIf="hasChanges(draftCustomizationOptions, appliedCustomizationOptions)"
|
<span>
|
||||||
class=" uk-width-1-1 refresh-indicator" >
|
<mat-slide-toggle class="uk-margin-large-left"
|
||||||
<div class="uk-position-relative uk-height-1-1">
|
[checked]="draftCustomizationOptions.buttonsIsCustom"
|
||||||
<div class="uk-position-center uk-text-center clickable uk-h3" style="color:white"
|
(change)="draftCustomizationOptions.buttonsIsCustom=!draftCustomizationOptions.buttonsIsCustom;
|
||||||
(click)="applyLayout()">
|
draftCustomizationOptions.buttonsIsCustom?'':this.resetBackgroundsAndButtonsToDefault(); "
|
||||||
<div>
|
[attr.uk-tooltip]="'title:<div class=\'uk-padding-small uk-width-large\'>' +
|
||||||
<icon name="refresh" ratio="2.5"></icon>
|
(draftCustomizationOptions.buttonsIsCustom?'Change to default values produced based on the identity colors':'Customize options for background and buttons')+'</div>'"
|
||||||
</div>
|
>
|
||||||
<div class="uk-margin-medium-top">Style has been changed.</div>
|
</mat-slide-toggle>
|
||||||
<div class="uk-margin-top"> Click to refresh the view.</div>
|
</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>
|
|
||||||
</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;"
|
<div class="functionalities-border">
|
||||||
></iframe>
|
<ng-container *ngIf="buttonsSelected == 'dark'">
|
||||||
|
<customize-buttons
|
||||||
</div>
|
[buttons]="draftCustomizationOptions.buttons.darkBackground" [light]="true"
|
||||||
</div>
|
[buttonsPublished]="publishedCustomizationOptions.buttons.darkBackground"
|
||||||
</div>
|
></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>
|
</ng-template>
|
||||||
</div>
|
<ng-template #applyResetButtons>
|
||||||
<!-- </div>
|
<button class="uk-float-right uk-button uk-margin-left uk-button-primary "
|
||||||
</div>-->
|
[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 {UtilitiesService} from '../../openaireLibrary/services/utilities.service';
|
||||||
import {Subscription} from 'rxjs';
|
import {Subscription} from 'rxjs';
|
||||||
import {FullScreenModalComponent} from "../../openaireLibrary/utils/modal/full-screen-modal/full-screen-modal.component";
|
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;
|
declare var UIkit;
|
||||||
|
|
||||||
|
@ -20,12 +22,15 @@ declare var UIkit;
|
||||||
selector: 'customization',
|
selector: 'customization',
|
||||||
templateUrl: './customization.component.html',
|
templateUrl: './customization.component.html',
|
||||||
styles:[`
|
styles:[`
|
||||||
|
.functionalities-container{
|
||||||
.functionalities-panel{
|
padding-left:15px;
|
||||||
|
}
|
||||||
|
.functionalities-border{
|
||||||
border-left: 1px solid #EAEAEA;
|
border-left: 1px solid #EAEAEA;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
margin: 25px 0px;
|
margin: 25px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.refresh-indicator {
|
.refresh-indicator {
|
||||||
background-color: rgba(0, 0, 0, 0.50);
|
background-color: rgba(0, 0, 0, 0.50);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
@ -46,12 +51,16 @@ declare var UIkit;
|
||||||
height: 64%;
|
height: 64%;
|
||||||
width: 73%;
|
width: 73%;
|
||||||
}
|
}
|
||||||
|
.uk-nav-sub{
|
||||||
|
padding-left: 25px;
|
||||||
|
}
|
||||||
`]
|
`]
|
||||||
})
|
})
|
||||||
|
|
||||||
export class CustomizationComponent implements OnInit {
|
export class CustomizationComponent implements OnInit {
|
||||||
|
homeMenu = {name:"Customization", id : "home", icon: "" }
|
||||||
menuSelected: 'home' | 'identity' | 'backgrounds' | 'buttons' = 'home';
|
menuSelected = this.homeMenu;
|
||||||
|
buttonsSelected = 'light';
|
||||||
color = 'white';
|
color = 'white';
|
||||||
defaultCustomizationOptions:CustomizationOptions = new CustomizationOptions();
|
defaultCustomizationOptions:CustomizationOptions = new CustomizationOptions();
|
||||||
publishedLayout: Layout = null;
|
publishedLayout: Layout = null;
|
||||||
|
@ -65,7 +74,9 @@ export class CustomizationComponent implements OnInit {
|
||||||
public properties: EnvProperties = null;
|
public properties: EnvProperties = null;
|
||||||
private subscriptions: any[] = [];
|
private subscriptions: any[] = [];
|
||||||
public enabled = true;
|
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,
|
constructor(private element: ElementRef,
|
||||||
private route: ActivatedRoute,
|
private route: ActivatedRoute,
|
||||||
|
@ -73,7 +84,8 @@ export class CustomizationComponent implements OnInit {
|
||||||
private title: Title,
|
private title: Title,
|
||||||
private sanitizer: DomSanitizer,
|
private sanitizer: DomSanitizer,
|
||||||
private layoutService: LayoutService,
|
private layoutService: LayoutService,
|
||||||
private utilsService: UtilitiesService) {
|
private utilsService: UtilitiesService,
|
||||||
|
private userManagementService: UserManagementService) {
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnDestroy() {
|
ngOnDestroy() {
|
||||||
|
@ -88,43 +100,48 @@ export class CustomizationComponent implements OnInit {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
ngOnInit() {
|
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;
|
this.properties = properties;
|
||||||
if (!Session.isLoggedIn()) {
|
this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
|
||||||
this._router.navigate(['/user-info'], {
|
if (!user) {
|
||||||
queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
|
this._router.navigate(['/user-info'], {
|
||||||
});
|
queryParams: {
|
||||||
} else {
|
"errorCode": LoginErrorCodes.NOT_VALID,
|
||||||
this.subscriptions.push(this.route.params.subscribe((params) => {
|
"redirectUrl": this._router.url
|
||||||
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.route.params.subscribe((params) => {
|
||||||
this.subscriptions.push(this.layoutService.getLayout(this.properties, this.communityId).subscribe(layout => {
|
this.communityId = params['community'];
|
||||||
this.publishedLayout = (layout?layout:new Layout(this.communityId,this.defaultCustomizationOptions));
|
if(this.communityId == "covid-19"){
|
||||||
this.publishedCustomizationOptions = (layout?CustomizationOptions.checkForObsoleteVersion(layout.layoutOptions,this.communityId):Object.assign({},this.defaultCustomizationOptions));
|
this.defaultCustomizationOptions= new CustomizationOptions(CustomizationOptions.getIdentity(this.communityId).mainColor,CustomizationOptions.getIdentity(this.communityId).secondaryColor);
|
||||||
this.initializeCustomizationOptions(true);
|
}
|
||||||
}, error => {
|
this.title.setTitle('Administration Dashboard | Customization');
|
||||||
this.publishedCustomizationOptions = new CustomizationOptions(CustomizationOptions.getIdentity(this.communityId).mainColor,CustomizationOptions.getIdentity(this.communityId).secondaryColor);
|
this.showLoading = true;
|
||||||
this.initializeCustomizationOptions(true);
|
this.subscriptions.push(this.layoutService.getLayout(this.properties, this.communityId).subscribe(layout => {
|
||||||
UIkit.notification("An error occured fetching customizations options", {
|
this.publishedLayout = (layout?layout:new Layout(this.communityId,this.defaultCustomizationOptions));
|
||||||
status: 'danger',
|
this.publishedCustomizationOptions = (layout?CustomizationOptions.checkForObsoleteVersion(layout.layoutOptions,this.communityId):Object.assign({},this.defaultCustomizationOptions));
|
||||||
timeout: 6000,
|
this.initializeCustomizationOptions(true);
|
||||||
pos: 'bottom-right'
|
}, 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{
|
hasChanges(object1,object2):boolean{
|
||||||
return JSON.stringify(object1) != JSON.stringify(object2);
|
return JSON.stringify(object1) != JSON.stringify(object2);
|
||||||
|
@ -200,6 +217,12 @@ export class CustomizationComponent implements OnInit {
|
||||||
this.draftCustomizationOptions.backgrounds.form.color = backgrounds.form.color;
|
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){
|
resetBackgroundsAndButtonsTo(c:CustomizationOptions){
|
||||||
this.resetBackgroundsTo(c.backgrounds);
|
this.resetBackgroundsTo(c.backgrounds);
|
||||||
|
@ -232,9 +255,12 @@ export class CustomizationComponent implements OnInit {
|
||||||
|
|
||||||
}
|
}
|
||||||
updateBackgroundsAndButtonsBasedOnIdentity(){
|
updateBackgroundsAndButtonsBasedOnIdentity(){
|
||||||
if(!this.draftCustomizationOptions.backgroundsAndButtonsIsCustom){
|
let tmp = new CustomizationOptions(this.draftCustomizationOptions.identity.mainColor, this.draftCustomizationOptions.identity.secondaryColor);
|
||||||
let tmp = new CustomizationOptions(this.draftCustomizationOptions.identity.mainColor, this.draftCustomizationOptions.identity.secondaryColor);
|
if(!this.draftCustomizationOptions.backgroundsIsCustom) {
|
||||||
this.resetBackgroundsAndButtonsTo(tmp);
|
this.resetBackgroundsTo(tmp.backgrounds);
|
||||||
|
}
|
||||||
|
if(!this.draftCustomizationOptions.buttonsIsCustom) {
|
||||||
|
this.resetButtonsTo(tmp.buttons);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
getCommunityUrlSatinized(layout: string) {
|
getCommunityUrlSatinized(layout: string) {
|
||||||
|
@ -253,10 +279,18 @@ export class CustomizationComponent implements OnInit {
|
||||||
return JSON.parse(JSON.stringify(obj));
|
return JSON.parse(JSON.stringify(obj));
|
||||||
}
|
}
|
||||||
|
|
||||||
changeMenu( menuSelected: 'home' | 'identity' | 'backgrounds' | 'buttons' = 'home'){
|
changeMenu( menuSelected){
|
||||||
this.menuSelected = (this.menuSelected == menuSelected)?'home':menuSelected;
|
this.menuSelected = menuSelected;
|
||||||
}
|
}
|
||||||
close(){
|
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 {InputModule} from '../../openaireLibrary/sharedComponents/input/input.module';
|
||||||
import {BackgroundUploadComponent} from "./background-upload.component";
|
import {BackgroundUploadComponent} from "./background-upload.component";
|
||||||
import {FullScreenModalModule} from "../../openaireLibrary/utils/modal/full-screen-modal/full-screen-modal.module";
|
import {FullScreenModalModule} from "../../openaireLibrary/utils/modal/full-screen-modal/full-screen-modal.module";
|
||||||
|
import {SideBarModule} from "../../openaireLibrary/dashboard/sharedComponents/sidebar/sideBar.module";
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
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: [
|
declarations: [
|
||||||
CustomizationComponent, FontSizeComponent, ColorComponent, BorderComponent, QuickLookComponent, QuickLookBackgroundsComponent, QuickLookButtonsComponent, CustomizeButtonsComponent, BackgroundComponent, BackgroundUploadComponent
|
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.borderRadius" (borderChange)=
|
||||||
" buttons.borderStyle = $event.style;
|
" buttons.borderStyle = $event.style;
|
||||||
buttons.borderRadius = $event.radius;
|
buttons.borderRadius = $event.radius;
|
||||||
buttons.borderWidth = $event.width; "></border>
|
buttons.borderWidth = $event.width; "
|
||||||
<div class="uk-grid uk-child-width-1-2 uk-margin-top" >
|
[stylePublished]="buttonsPublished.borderStyle"
|
||||||
|
[widthPublished]="buttonsPublished.borderWidth"
|
||||||
|
[radiusPublished]="buttonsPublished.borderRadius"
|
||||||
|
></border>
|
||||||
|
<div class="uk-grid uk-margin-top" >
|
||||||
<div class="">
|
<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)=
|
<color [color]="buttons.color" (colorChange)=
|
||||||
" buttons.color = $event; "
|
" buttons.color = $event; "
|
||||||
label="Fonts" [light]="!light"
|
label="Fonts" [light]="!light"
|
||||||
|
@ -29,8 +37,13 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust
|
||||||
|
|
||||||
></color>
|
></color>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="uk-margin-top">
|
||||||
<div class=" uk-margin-small-bottom uk-text-bold uk-margin-small-left">Colors on hover</div>
|
<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="">
|
<div class="">
|
||||||
<color [color]="buttons.onHover.color" (colorChange)=
|
<color [color]="buttons.onHover.color" (colorChange)=
|
||||||
" buttons.onHover.color = $event;" label="Fonts" [light]="!light"
|
" buttons.onHover.color = $event;" label="Fonts" [light]="!light"
|
||||||
|
@ -55,8 +68,11 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust
|
||||||
|
|
||||||
export class CustomizeButtonsComponent {
|
export class CustomizeButtonsComponent {
|
||||||
@Input() buttons:ButtonsCustomization;
|
@Input() buttons:ButtonsCustomization;
|
||||||
|
@Input() buttonsPublished:ButtonsCustomization;
|
||||||
@Input() light:boolean;
|
@Input() light:boolean;
|
||||||
constructor() {
|
constructor() {
|
||||||
}
|
}
|
||||||
|
hasChanges(object1,object2):boolean{
|
||||||
|
return JSON.stringify(object1) != JSON.stringify(object2);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,12 +6,11 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'quick-look-backgrounds',
|
selector: 'quick-look-backgrounds',
|
||||||
template: `
|
template: `
|
||||||
<div class="uk-grid" [class.uk-child-width-1-2]="buttonView">
|
<div class="uk-grid uk-child-width-1-2" >
|
||||||
<div>
|
<div>
|
||||||
<div class="uk-margin-large-top uk-margin-medium-bottom uk-text-large">Dark background</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' + (buttonView?' uk-flex uk-flex-middle uk-flex-center':'') "
|
||||||
<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" >
|
||||||
[class.uk-height-small]="buttonView" [class.uk-height-medium]="!buttonView">
|
|
||||||
<div *ngIf="!buttonView">
|
<div *ngIf="!buttonView">
|
||||||
<h1 >Heading</h1>
|
<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>
|
<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
|
<quick-look-buttons
|
||||||
[buttons]="buttonsOnDark"
|
[buttons]="buttonsOnDark"
|
||||||
></quick-look-buttons>
|
></quick-look-buttons>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div [class.uk-margin-top]="!buttonView">
|
<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-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">
|
[class.uk-height-small]="buttonView" [class.uk-height-medium]="!buttonView">
|
||||||
<div *ngIf="!buttonView">
|
<div *ngIf="!buttonView">
|
||||||
<h1 >Heading</h1>
|
<h1 >Heading</h1>
|
||||||
|
@ -35,7 +31,6 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust
|
||||||
<a class="portal-link">Link</a>
|
<a class="portal-link">Link</a>
|
||||||
<br>
|
<br>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<quick-look-buttons
|
<quick-look-buttons
|
||||||
[buttons]="buttonsOnLight" ></quick-look-buttons>
|
[buttons]="buttonsOnLight" ></quick-look-buttons>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue