2019-10-07 16:36:53 +02:00
< ng-template # applyResetButtons >
2021-05-19 13:40:29 +02:00
<!-- <div class="uk - margin - small"> -->
< 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 >
< button class = "uk-float-right uk-button uk-margin-left uk-button-secondary outlined" [ disabled ] = " ! hasChanges ( publishedCustomizationOptions , draftCustomizationOptions ) "
2019-10-10 17:17:43 +02:00
(click)="resetLayout()">
2019-10-07 16:36:53 +02:00
2021-05-19 13:40:29 +02:00
< span > Reset all< / span >
< / button >
2019-10-07 16:36:53 +02:00
2021-05-19 13:40:29 +02:00
< / ng-template >
2019-10-07 16:36:53 +02:00
2021-05-19 13:40:29 +02:00
< div page-content class = "admin-pages" >
< div header >
< / div >
< div inner >
< div class = "" >
< div * ngIf = "draftCustomizationOptions" class = "uk-card-default uk-card" >
< div class = "uk-card-header" style = "z-index: 2" uk-sticky = "offset:100" >
< div class = " uk-margin-small-top uk-margin-small-bottom" >
2019-10-07 16:36:53 +02:00
2021-05-19 13:40:29 +02:00
< ng-container
*ngTemplateOutlet="applyResetButtons ; context: { }">< / ng-container >
< div > Customization < span * ngIf = "hasChanges(publishedCustomizationOptions, draftCustomizationOptions)" > (Unsaved changes)< / span > < / div >
2019-10-07 16:36:53 +02:00
< / div >
< / div >
2021-05-19 13:40:29 +02:00
< 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-grid" >
< div class = "uk-width-2-3@m uk-width-1-1@s" >
< div class = "uk-margin-top uk-margin-small-bottom uk-text-bold" > 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 > -->
2019-10-07 16:36:53 +02:00
< / div >
2021-05-19 13:40:29 +02:00
< quick-look-backgrounds [ darkBackgroundColor ] = " draftCustomizationOptions . backgrounds . dark . color "
[lightBackgroundColor]="draftCustomizationOptions.backgrounds.light.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" > 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 >
2019-10-07 16:36:53 +02:00
< / div >
2021-05-19 13:40:29 +02:00
< 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 >
2019-10-07 16:36:53 +02:00
< / span >
< / div >
2021-05-19 13:40:29 +02:00
< 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 >
2019-10-07 16:36:53 +02:00
2021-05-19 13:40:29 +02:00
< div * ngIf = "draftCustomizationOptions.backgroundsAndButtonsIsCustom" class = " uk-margin-large-top" >
< div class = "uk-margin-small-bottom uk-text-uppercase" > Background 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" [upload]="properties.environment == 'development'"
[oldBackground]="publishedCustomizationOptions.backgrounds.form" [communityId]="communityId">< / background >
< div class = "uk-margin-large-top uk-text-uppercase" > Buttons < / div >
< ul class = "uk-tab" uk-switcher >
< li > < a href = "#" > On dark background< / a > < / li >
< li > < a href = "#" > On light background< / a > < / li >
2019-10-07 16:36:53 +02:00
< / ul >
< ul class = "uk-switcher uk-margin" >
< li >
2021-05-19 13:40:29 +02:00
< customize-buttons
[buttons]="draftCustomizationOptions.buttons.darkBackground" [light]="true"
>< / customize-buttons >
2019-10-07 16:36:53 +02:00
< / li >
< li >
2021-05-19 13:40:29 +02:00
< customize-buttons
[buttons]="draftCustomizationOptions.buttons.lightBackground" [light]="false"
>< / customize-buttons >
2019-10-07 16:36:53 +02:00
< / li >
< / ul >
< / div >
2021-05-19 13:40:29 +02:00
< / div >
2019-10-07 16:36:53 +02:00
2021-05-19 13:40:29 +02:00
< / div >
2019-10-07 16:36:53 +02:00
< / div >
< / div >
2019-10-10 17:17:43 +02:00
2021-05-19 13:40:29 +02:00
< div * ngIf = "menuSelected == 'identity'" class = " uk-padding-small " >
< div class = " customizationMenuItems uk-margin-small" >
2019-10-10 17:17:43 +02:00
2021-05-19 13:40:29 +02:00
< 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-text-bold" > 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" > 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.
2019-10-10 17:17:43 +02:00
< / div >
2019-10-07 16:36:53 +02:00
< / div >
2021-05-19 13:40:29 +02:00
< div * ngIf = "draftCustomizationOptions.identityIsCustom" class = " uk-margin-large-top" >
< div class = " uk-margin-small-bottom uk-text-uppercase uk-margin-small-left" > 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 >
2019-10-07 16:36:53 +02:00
2021-05-19 13:40:29 +02:00
< / div >
2019-10-07 16:36:53 +02:00
2020-01-20 15:33:36 +01:00
< / div >
2019-10-07 16:36:53 +02:00
< / div >
2021-05-19 13:40:29 +02:00
< / div >
2019-10-07 16:36:53 +02:00
2021-05-19 13:40:29 +02:00
< div class = " uk-padding-small " >
< div class = "uk-margin-top uk-margin-small-bottom uk-text-bold" > Preview< / div >
< div
class="uk-margin-medium-top uk-position-relative uk-width-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 "
>< / iframe >
< / div >
2019-10-07 16:36:53 +02:00
< / div >
2021-05-19 13:40:29 +02:00
< / div >
2019-10-07 16:36:53 +02:00
< / div >
< / div >
2021-05-19 13:40:29 +02:00
< / div >
< / div >
2019-10-10 17:17:43 +02:00