322 lines
18 KiB
HTML
322 lines
18 KiB
HTML
<div *ngIf="draftCustomizationOptions" class="uk-flex">
|
|
<aside id="sidebar_main" class="uk-sticky" uk-sticky="start: 0; end: .sidebar_main_swipe">
|
|
<div sidebar-content>
|
|
<div class="back">
|
|
<a (click)="close()" class="uk-flex uk-flex-middle uk-flex-center">
|
|
<div class="uk-width-auto">
|
|
<icon *ngIf="menuSelected.id != 'home'" name="west" ratio="1.3"
|
|
[flex]="true"></icon>
|
|
<icon *ngIf="menuSelected.id == 'home'" name="close" ratio="1.3"
|
|
[flex]="true"></icon>
|
|
</div>
|
|
<span class="uk-width-expand uk-text-truncate uk-margin-left hide-on-close">{{menuSelected.name}}</span>
|
|
</a>
|
|
</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-width-expand uk-text-truncate uk-margin-small-left hide-on-close">
|
|
{{item.name}}
|
|
</span>
|
|
<span uk-icon="triangle-right"></span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ng-template>
|
|
</ul>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<div page-content class="uk-width-1-1">
|
|
<div actions>
|
|
<div class="uk-section-small">
|
|
<ng-container *ngTemplateOutlet="applyResetButtons;"></ng-container>
|
|
</div>
|
|
</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>
|
|
|
|
<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 *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>
|
|
|
|
<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.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="container" class=" uk-flex uk-flex-center uk-flex-middle">
|
|
<div id="iframecontainer" class="">
|
|
<div class="uk-height-1-1">
|
|
<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=" border-radius: 10px;"
|
|
></iframe>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ng-template #identityOptions>
|
|
<div class="functionalities-container uk-text-small">
|
|
<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-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 uk-margin-medium-bottom">
|
|
<div class=" uk-margin-xsmall-bottom uk-text-uppercase uk-text-meta uk-text-bold uk-flex uk-flex-middle">
|
|
Colors
|
|
<a *ngIf="hasChanges(publishedCustomizationOptions.identity, draftCustomizationOptions.identity) &&
|
|
draftCustomizationOptions.identityIsCustom" class="uk-margin-small-left uk-button-link"
|
|
uk-tooltip="title:<div class='uk-width-large'>Reset to previously saved options</div>"
|
|
(click)="resetIdentityToPublished();">
|
|
<icon name="settings_backup_restore" flex="true"></icon>
|
|
</a>
|
|
</div>
|
|
<color [color]="draftCustomizationOptions.identity.mainColor" [light]="false" (colorChange)=
|
|
" draftCustomizationOptions.identity.mainColor= $event; ; updateBackgroundsBasedOnIdentity(); updateButtonsBasedOnIdentity()"
|
|
label="Primary"></color>
|
|
<color [color]="draftCustomizationOptions.identity.secondaryColor" [light]="false" (colorChange)=
|
|
" draftCustomizationOptions.identity.secondaryColor= $event; updateBackgroundsBasedOnIdentity(); updateButtonsBasedOnIdentity()"
|
|
label="Secondary"></color>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
<ng-template #backgroundOptions>
|
|
<div class="functionalities-container uk-text-small" >
|
|
<div class="uk-margin-top">
|
|
<span>Custom style </span>
|
|
<span>
|
|
<mat-slide-toggle class="uk-margin-large-left"
|
|
[checked]="draftCustomizationOptions.backgroundsIsCustom"
|
|
(change)="draftCustomizationOptions.backgroundsIsCustom=!draftCustomizationOptions.backgroundsIsCustom;
|
|
draftCustomizationOptions.backgroundsIsCustom?'':this.resetBackgroundsToDefault(); "
|
|
[attr.uk-tooltip]="'title:<div class=\'uk-width-large\'>' +
|
|
(draftCustomizationOptions.backgroundsIsCustom?'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.backgroundsIsCustom" >
|
|
|
|
<div class="uk-margin-xsmall-bottom uk-text-uppercase uk-text-meta uk-text-bold uk-margin-large-top uk-flex uk-flex-middle">
|
|
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-button-link"
|
|
uk-tooltip="title:<div class='uk-width-large'>Reset to previously saved options</div>"
|
|
>
|
|
<icon name="settings_backup_restore" flex="true"></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="Hero section" [background]="draftCustomizationOptions.backgrounds.form"
|
|
[light]="draftCustomizationOptions.backgrounds.form.fontsDarkMode"
|
|
[oldBackground]="publishedCustomizationOptions.backgrounds.form"
|
|
[communityId]="communityId" description="The area under menu"></background>
|
|
<div class="uk-margin-xsmall-bottom uk-text-uppercase uk-text-meta uk-text-bold uk-margin-large-top uk-flex uk-flex-middle uk-heading-divider">
|
|
Hero section
|
|
</div>
|
|
<div class="uk-margin-xsmall-bottom uk-text-uppercase uk-text-meta uk-text-bold uk-margin-medium-top uk-flex uk-flex-middle">
|
|
Fonts
|
|
<a *ngIf="( publishedCustomizationOptions.backgrounds.form.fontsDarkMode != draftCustomizationOptions.backgrounds.form.fontsDarkMode )
|
|
&& draftCustomizationOptions.backgroundsIsCustom"
|
|
(click)="draftCustomizationOptions.backgrounds.form.fontsDarkMode=publishedCustomizationOptions.backgrounds.form.fontsDarkMode;" class="uk-margin-small-left uk-button-link"
|
|
uk-tooltip="title:<div class='uk-width-large'>Reset to previously saved options</div>">
|
|
<icon name="settings_backup_restore" flex="true"></icon>
|
|
</a>
|
|
</div>
|
|
<div class="uk-margin-small-top">
|
|
<span>Dark mode </span>
|
|
<span>
|
|
<mat-slide-toggle class="uk-margin-large-left"
|
|
[checked]="draftCustomizationOptions.backgrounds.form.fontsDarkMode"
|
|
(change)="draftCustomizationOptions.backgrounds.form.fontsDarkMode=!draftCustomizationOptions.backgrounds.form.fontsDarkMode;"
|
|
[attr.uk-tooltip]="'title:<div class=\'uk-width-large\'>' +
|
|
(draftCustomizationOptions.backgrounds.form.fontsDarkMode?'Change to light color mode if the hero section background is dark':'Change to dark mode if the hero section background is light')+'</div>'"
|
|
>
|
|
</mat-slide-toggle>
|
|
</span>
|
|
</div>
|
|
<div class="uk-margin-xsmall-bottom uk-text-uppercase uk-text-meta uk-text-bold uk-margin-medium-top uk-flex uk-flex-middle">
|
|
Image
|
|
<a *ngIf="(formHasChanges(publishedCustomizationOptions, draftCustomizationOptions) )
|
|
&& draftCustomizationOptions.backgroundsIsCustom"
|
|
(click)="resetImageTo(publishedCustomizationOptions.backgrounds);" class="uk-margin-small-left uk-button-link"
|
|
uk-tooltip="title:<div class='uk-width-large'>Reset to previously saved options</div>">
|
|
<icon name="settings_backup_restore" flex="true"></icon>
|
|
</a>
|
|
</div>
|
|
<div class="uk-margin-medium-bottom">
|
|
<background-upload label="Form" [background]="draftCustomizationOptions.backgrounds.form"
|
|
[oldBackground]="publishedCustomizationOptions.backgrounds.form"
|
|
[communityId]="communityId" [light]="draftCustomizationOptions.backgrounds.form.fontsDarkMode" ></background-upload>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
<ng-template #buttonOptions>
|
|
<div class="functionalities-container uk-text-small">
|
|
<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;
|
|
draftCustomizationOptions.buttonsIsCustom?'':this.resetButtonsToDefault(); "
|
|
[attr.uk-tooltip]="'title:<div class=\'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">
|
|
<customize-buttons
|
|
[buttons]="draftCustomizationOptions.buttons.lightBackground" [light]="false"
|
|
[buttonsPublished]="publishedCustomizationOptions.buttons.lightBackground" [onlyBorder]="true"
|
|
></customize-buttons>
|
|
<div class="uk-margin-top uk-margin-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="flat x-small" input type="select"
|
|
[(value)]="buttonsSelected"
|
|
[options]="[{value: 'dark',label:'Dark BG'},{value: 'light',label:'Light BG'}]">
|
|
|
|
</div>
|
|
</div>
|
|
<div class="functionalities-border uk-margin-medium-bottom">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
<ng-template #applyResetButtons>
|
|
<div class="uk-flex uk-flex-center uk-flex-right@m">
|
|
<button class="uk-button uk-button-secondary"
|
|
[disabled]="!hasChanges(publishedCustomizationOptions, draftCustomizationOptions)"
|
|
[class.uk-disabled]="!hasChanges(publishedCustomizationOptions, draftCustomizationOptions)"
|
|
(click)="resetLayout()">
|
|
|
|
<span>Reset all</span>
|
|
</button>
|
|
<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>
|
|
</ng-template>
|
|
<modal-alert #leaveModal [overflowBody]="false" (alertOutput)="confirmClose()"></modal-alert>
|