2022-07-04 13:12:55 +02:00
< aside * ngIf = "draftCustomizationOptions" id = "sidebar_main" >
2022-07-13 19:26:10 +02:00
< div id = "sidebar_content" >
2022-07-27 13:44:41 +02:00
< div class = "menu_section uk-margin-top" style = "max-height: 10vh" >
2022-07-13 19:26:10 +02:00
< 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" >
2022-07-22 17:35:51 +02:00
< icon * ngIf = "menuSelected.id != 'home'" class = "menu-icon" name = "west" ratio = "2"
2022-07-13 19:26:10 +02:00
[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 >
2022-07-27 13:44:41 +02:00
< div class = "menu_section uk-margin-large-top uk-overflow-auto" style = "max-height: 75vh" >
2022-07-13 19:26:10 +02:00
< 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-width-expand uk-text-truncate uk-margin-small-left">
2022-07-04 13:12:55 +02:00
{{item.name}}
< / span >
2022-07-13 19:26:10 +02:00
< span uk-icon = "triangle-right" > < / span >
2022-06-29 16:30:53 +02:00
2019-10-07 16:36:53 +02:00
2022-07-13 19:26:10 +02:00
< / div >
< / a >
< / li >
< / ng-template >
2022-07-04 13:12:55 +02:00
2022-07-13 19:26:10 +02:00
< / ul >
2021-05-19 13:40:29 +02:00
2022-07-13 19:26:10 +02:00
< ng-container * ngIf = "menuSelected.id == 'identity'" >
< ng-container
*ngTemplateOutlet="identityOptions ; context: { }">< / ng-container >
< / ng-container >
< ng-container * ngIf = "menuSelected.id == 'backgrounds'" >
< ng-container
*ngTemplateOutlet="backgroundOptions ; context: { }">< / ng-container >
< / ng-container >
< ng-container * ngIf = "menuSelected.id == 'buttons'" >
< ng-container
*ngTemplateOutlet="buttonOptions ; context: { }">< / ng-container >
< / ng-container >
2022-07-04 13:12:55 +02:00
< / div >
2022-07-13 19:26:10 +02:00
< / div >
2022-07-04 13:12:55 +02:00
< / aside >
< div * ngIf = "draftCustomizationOptions" page-content >
2022-07-13 19:26:10 +02:00
< div actions >
< div class = "uk-section-small" >
< ng-container * ngTemplateOutlet = "applyResetButtons;" > < / ng-container >
2022-07-04 13:12:55 +02:00
< / div >
2022-07-13 19:26:10 +02:00
< / div >
< div inner >
< div class = "uk-section-small" >
< 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 >
2022-07-04 13:12:55 +02:00
2022-07-13 19:26:10 +02:00
< div class = "uk-margin-large-top uk-margin-small-bottom uk-h5" > Quick look
2022-07-04 13:12:55 +02:00
2022-07-13 19:26:10 +02:00
< / 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 >
2022-07-04 13:12:55 +02:00
2022-07-13 19:26:10 +02:00
< / div >
< / div >
< div * ngIf = "menuSelected.id == 'buttons'" class = " uk-padding-small " >
< div class = "customizationMenuItems uk-margin-small" >
< div class = "uk-h4" > Buttons< / div >
< div > Note: Custom background style settings will override any identity settings that effect the
visualisation of a background.
< / div >
2022-07-04 13:12:55 +02:00
2022-07-13 19:26:10 +02:00
< div class = "uk-margin-large-top uk-margin-small-bottom uk-h5" > Quick look
2022-07-04 13:12:55 +02:00
2022-07-13 19:26:10 +02:00
< / 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 >
2022-07-04 13:12:55 +02:00
2022-07-13 19:26:10 +02:00
< / div >
2022-07-04 13:12:55 +02:00
2022-07-13 19:26:10 +02:00
< / div >
< div * ngIf = "menuSelected.id == 'identity'" class = " uk-padding-small " >
< div class = " customizationMenuItems uk-margin-small" >
2022-07-04 13:12:55 +02:00
2022-07-13 19:26:10 +02:00
< 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 >
2022-07-04 13:12:55 +02:00
2022-07-13 19:26:10 +02:00
< / div >
< / div >
< div class = "uk-padding-small" >
< div class = "uk-margin-top uk-margin-small-bottom uk-h5" > See a preview< / div >
< div id = "container" class = " uk-flex uk-flex-center uk-flex-middle" >
< div id = "iframecontainer" class = "" >
< div class = "uk-height-1-1" >
2022-07-22 17:35:51 +02:00
< div * ngIf = "hasChanges(draftCustomizationOptions, appliedCustomizationOptions)"
class=" uk-width-1-1 refresh-indicator">
2022-07-13 19:26:10 +02:00
< 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 >
2022-07-04 13:12:55 +02:00
< / div >
2022-07-13 19:26:10 +02:00
< div class = "uk-margin-medium-top" > Style has been changed.< / div >
< div class = "uk-margin-top" > Click to refresh the view.< / div >
< / div >
2022-07-04 13:12:55 +02:00
< / div >
2022-07-13 19:26:10 +02:00
< / div >
< iframe * ngIf = "previewUrl" [ src ] = " previewUrl " class = "uk-width-1-1 "
style=" border-radius: 10px;"
>< / iframe >
2022-07-04 13:12:55 +02:00
< / div >
2022-07-13 19:26:10 +02:00
< / div >
2022-07-04 13:12:55 +02:00
< / div >
2022-07-13 19:26:10 +02:00
< / div >
2022-07-04 13:12:55 +02:00
< / div >
2022-07-13 19:26:10 +02:00
< / div >
2022-07-04 13:12:55 +02:00
< / div >
< ng-template # identityOptions >
2022-07-13 19:26:10 +02:00
< 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 =
2022-06-29 16:30:53 +02:00
!draftCustomizationOptions.identityIsCustom;
draftCustomizationOptions.identityIsCustom?'':this.resetIdentityToDefault();"
2022-07-13 19:26:10 +02:00
[attr.uk-tooltip]="'title:< div class = \'uk-padding-small uk-width-large \ ' > ' +
2022-06-29 16:30:53 +02:00
(draftCustomizationOptions.identityIsCustom?'Change to default identity values':'Customize identity colors')+'< / div > '"
2022-07-13 19:26:10 +02:00
>
< / mat-slide-toggle >
< / div >
< / div >
2022-07-27 13:44:41 +02:00
< div * ngIf = "draftCustomizationOptions.identityIsCustom" class = " uk-margin-large-top uk-margin-medium-bottom" >
2022-07-13 19:26:10 +02:00
< div class = " uk-margin-xsmall-bottom uk-text-uppercase uk-text-meta uk-text-bold" >
Colors
< a * ngIf = "hasChanges(publishedCustomizationOptions.identity, draftCustomizationOptions . identity ) & &
2022-06-29 16:30:53 +02:00
draftCustomizationOptions.identityIsCustom" class="uk-margin-small-left"
2022-07-13 19:26:10 +02:00
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 >
2022-07-04 13:12:55 +02:00
< / div >
2022-07-13 19:26:10 +02:00
< / div >
2022-07-04 13:12:55 +02:00
< / ng-template >
< ng-template # backgroundOptions >
2022-07-27 13:44:41 +02:00
< div class = "functionalities-container" >
2022-07-13 19:26:10 +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"
2022-07-04 13:12:55 +02:00
[checked]="draftCustomizationOptions.backgroundsIsCustom"
(change)="draftCustomizationOptions.backgroundsIsCustom=!draftCustomizationOptions.backgroundsIsCustom;
2022-07-28 14:51:11 +02:00
draftCustomizationOptions.backgroundsIsCustom?'':this.resetBackgroundsToDefault(); "
2022-06-29 16:30:53 +02:00
[attr.uk-tooltip]="'title:< div class = \'uk-padding-small uk-width-large \ ' > ' +
2022-07-04 13:12:55 +02:00
(draftCustomizationOptions.backgroundsIsCustom?'Change to default values produced based on the identity colors':'Customize options for background and buttons')+'< / div > '"
2022-06-29 16:30:53 +02:00
>
< / mat-slide-toggle >
< / span >
2022-07-13 19:26:10 +02:00
< / div >
2022-07-27 13:44:41 +02:00
< div * ngIf = "draftCustomizationOptions.backgroundsIsCustom" >
2019-10-07 16:36:53 +02:00
2022-07-13 19:26:10 +02:00
< div class = "uk-margin-xsmall-bottom uk-text-uppercase uk-text-meta uk-text-bold uk-margin-large-top" >
Colors
< a * ngIf = "(
2022-07-04 13:12:55 +02:00
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"
2022-07-13 19:26:10 +02:00
(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 >
< background label = "Dark" [ background ] = " draftCustomizationOptions . backgrounds . dark "
[light]="false">< / background >
< background label = "Light" [ background ] = " draftCustomizationOptions . backgrounds . light "
[light]="true">< / background >
2022-07-27 13:44:41 +02:00
< background label = "Hero" [ background ] = " draftCustomizationOptions . backgrounds . form "
2022-07-13 19:26:10 +02:00
[light]="true"
[oldBackground]="publishedCustomizationOptions.backgrounds.form"
[communityId]="communityId">< / background >
< div class = "uk-margin-xsmall-bottom uk-text-uppercase uk-text-meta uk-text-bold uk-margin-large-top" >
2022-07-27 13:44:41 +02:00
Hero Image
2022-07-13 19:26:10 +02:00
< a * ngIf = "(formHasChanges(publishedCustomizationOptions, draftCustomizationOptions ) )
2022-07-04 13:12:55 +02:00
& & draftCustomizationOptions.backgroundsIsCustom"
2022-07-13 19:26:10 +02:00
(click)="resetImageTo(publishedCustomizationOptions.backgrounds);" class="uk-margin-small-left"
uk-tooltip="title:< div class = 'uk-padding-small uk-width-large' > Reset to previously saved options< / div > "
>
< icon name = "reset" > < / icon >
< / a >
< / div >
2022-07-27 13:44:41 +02:00
< div class = "uk-margin-medium-bottom" >
2022-07-13 19:26:10 +02:00
< background-upload label = "Form" [ background ] = " draftCustomizationOptions . backgrounds . form "
[oldBackground]="publishedCustomizationOptions.backgrounds.form"
[communityId]="communityId">< / background-upload >
2022-07-27 13:44:41 +02:00
< / div >
2019-10-07 16:36:53 +02:00
< / div >
2022-07-13 19:26:10 +02:00
< / div >
2022-07-04 13:12:55 +02:00
< / ng-template >
< ng-template # buttonOptions >
2022-07-13 19:26:10 +02:00
< div class = "functionalities-container" >
< div class = "" >
< div class = "uk-margin-top uk-margin-large-bottom" >
< span > Custom style < / span >
< span >
< mat-slide-toggle class = "uk-margin-large-left"
[checked]="draftCustomizationOptions.buttonsIsCustom"
(change)="draftCustomizationOptions.buttonsIsCustom=!draftCustomizationOptions.buttonsIsCustom;
2022-07-28 14:51:11 +02:00
draftCustomizationOptions.buttonsIsCustom?'':this.resetButtonsToDefault(); "
2022-07-13 19:26:10 +02:00
[attr.uk-tooltip]="'title:< div class = \'uk-padding-small uk-width-large \ ' > ' +
(draftCustomizationOptions.buttonsIsCustom?'Change to default values produced based on the identity colors':'Customize options for background and buttons')+'< / div > '"
>
< / mat-slide-toggle >
< / span >
< / div >
< ng-container * ngIf = "draftCustomizationOptions.buttonsIsCustom" >
2022-07-04 13:12:55 +02:00
2022-07-13 19:26:10 +02:00
< 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'}]">
2019-10-07 16:36:53 +02:00
2022-07-13 19:26:10 +02:00
< / div >
2022-06-29 16:30:53 +02:00
< / div >
2022-07-28 14:51:11 +02:00
< div class = "functionalities-border uk-margin-medium-bottom" >
2022-07-13 19:26:10 +02:00
< ng-container * ngIf = "buttonsSelected == 'dark'" >
< customize-buttons
[buttons]="draftCustomizationOptions.buttons.darkBackground" [light]="true"
[buttonsPublished]="publishedCustomizationOptions.buttons.darkBackground"
>< / customize-buttons >
< / ng-container >
< ng-container * ngIf = "buttonsSelected == 'light'" >
< customize-buttons
[buttons]="draftCustomizationOptions.buttons.lightBackground" [light]="false"
[buttonsPublished]="publishedCustomizationOptions.buttons.lightBackground"
>< / customize-buttons >
< / ng-container >
< / div >
< / ng-container >
2021-05-19 13:40:29 +02:00
< / div >
2022-07-13 19:26:10 +02:00
< / div >
2022-07-04 13:12:55 +02:00
< / ng-template >
< ng-template # applyResetButtons >
2022-07-13 19:26:10 +02:00
< div class = "uk-flex uk-flex-center uk-flex-right@m" >
< button class = "uk-button uk-button-secondary"
2022-07-04 13:12:55 +02:00
[disabled]="!hasChanges(publishedCustomizationOptions, draftCustomizationOptions)"
2022-07-13 19:26:10 +02:00
[class.uk-disabled]="!hasChanges(publishedCustomizationOptions, draftCustomizationOptions)"
2022-07-04 13:12:55 +02:00
(click)="resetLayout()">
2019-10-10 17:17:43 +02:00
2022-07-13 19:26:10 +02:00
< span > Reset all< / span >
2022-07-04 13:12:55 +02:00
< / button >
2022-07-13 19:26:10 +02:00
< button class = "uk-button uk-margin-left uk-button-primary"
[disabled]="!hasChanges(publishedCustomizationOptions, draftCustomizationOptions)"
[class.uk-disabled]="!hasChanges(publishedCustomizationOptions, draftCustomizationOptions)"
[title]="(hasChanges(publishedCustomizationOptions, draftCustomizationOptions)?'Save changes':'No changes to save')"
(click)="saveLayout()">
Publish
< / button >
< / div >
2022-07-04 13:12:55 +02:00
< / ng-template >
2022-07-22 17:35:51 +02:00
< modal-alert # leaveModal [ overflowBody ] = " false " ( alertOutput ) = " confirmClose ( ) " > < / modal-alert >