387 lines
23 KiB
HTML
387 lines
23 KiB
HTML
<ng-template #applyResetButtons>
|
|
<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>
|
|
<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>
|
|
|
|
<!-- 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>
|
|
</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 =
|
|
!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>
|
|
<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>
|
|
|
|
</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>
|
|
</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 >
|
|
<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=" 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>
|
|
|
|
</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>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
<!-- </div>
|
|
</div>-->
|
|
|
|
|