2019-10-07 16:36:53 +02:00
< ng-template # applyResetButtons >
2022-06-29 16:30:53 +02:00
< 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 >
2021-05-19 13:40:29 +02:00
< 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 >
2019-10-07 16:36:53 +02:00
2022-06-29 16:30:53 +02:00
<!-- <div page - content class="admin - pages">
2021-05-19 13:40:29 +02:00
< div header >
< / div >
2022-06-29 16:30:53 +02:00
< 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 >
2021-05-19 13:40:29 +02:00
2022-06-29 16:30:53 +02:00
<!-- 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 >
2019-10-07 16:36:53 +02:00
< / div >
2022-06-29 16:30:53 +02:00
< 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 >
2019-10-07 16:36:53 +02:00
< / div >
2022-06-29 16:30:53 +02:00
< 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" >
2019-10-07 16:36:53 +02:00
2021-05-19 13:40:29 +02:00
< div class = "uk-margin-top" >
< span > Custom style < / span >
< span >
2022-06-29 16:30:53 +02:00
< 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 >
2019-10-07 16:36:53 +02:00
< / div >
2022-06-29 16:30:53 +02:00
<!-- <div *ngIf="!draftCustomizationOptions.backgroundsAndButtonsIsCustom" class="uk - margin - top uk - text - small"
2021-05-19 13:40:29 +02:00
style="font-style: italic">
Backgrounds and buttons are set in the default values.
2022-06-29 16:30:53 +02:00
< / div > -->
2019-10-07 16:36:53 +02:00
2022-06-29 16:30:53 +02:00
< 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 >
2021-05-19 13:40:29 +02:00
< 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 "
2021-11-26 13:45:12 +01:00
[light]="true"
2021-05-19 13:40:29 +02:00
[oldBackground]="publishedCustomizationOptions.backgrounds.form" [communityId]="communityId">< / background >
2022-06-29 16:30:53 +02:00
< 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 >
2021-11-26 13:45:12 +01:00
< background-upload label = "Form" [ background ] = " draftCustomizationOptions . backgrounds . form "
2022-06-29 16:30:53 +02:00
[oldBackground]="publishedCustomizationOptions.backgrounds.form" [communityId]="communityId">< / background-upload >
2019-10-07 16:36:53 +02:00
< / div >
2021-05-19 13:40:29 +02:00
< / div >
2022-06-29 16:30:53 +02:00
< 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 >
2021-05-19 13:40:29 +02:00
< / div >
2019-10-07 16:36:53 +02:00
< / div >
< / div >
2022-06-29 16:30:53 +02:00
< div * ngIf = "draftCustomizationOptions" class = "uk-width-expand" >
< div >
< div class = " uk-padding" >
< ng-container
*ngTemplateOutlet="applyResetButtons ; context: { }">< / ng-container >
2021-05-19 13:40:29 +02:00
< / div >
2022-06-29 16:30:53 +02:00
< / 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 >
2021-05-19 13:40:29 +02:00
< / div >
2022-06-29 16:30:53 +02:00
<!-- <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 >
2019-10-10 17:17:43 +02:00
< / div >
2022-06-29 16:30:53 +02:00
2019-10-07 16:36:53 +02:00
< / div >
2022-06-29 16:30:53 +02:00
< / 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 >
2019-10-07 16:36:53 +02:00
2022-06-29 16:30:53 +02:00
< / div >
2021-05-19 13:40:29 +02:00
< / div >
2022-06-29 16:30:53 +02:00
< 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 >
2021-05-19 13:40:29 +02:00
< / div >
< / div >
< / div >
< / div >
2022-06-29 16:30:53 +02:00
< / div >
2021-05-19 13:40:29 +02:00
< / div >
2022-06-29 16:30:53 +02:00
2021-05-19 13:40:29 +02:00
< / div >
2019-10-07 16:36:53 +02:00
< / div >
2021-05-19 13:40:29 +02:00
< / div >
2022-06-29 16:30:53 +02:00
<!-- </div>
< / div > -->
2019-10-10 17:17:43 +02:00