diff --git a/src/app/shared/components/template/components/layout/popup/popup.component.html b/src/app/shared/components/template/components/layout/popup/popup.component.html index 31958a5cf..35b028640 100644 --- a/src/app/shared/components/template/components/layout/popup/popup.component.html +++ b/src/app/shared/components/template/components/layout/popup/popup.component.html @@ -2,6 +2,7 @@ class="popup-backdrop" (click)="dismissOnBackdrop($event)" [attr.data-fullscreen]="props.fullscreen ? true : null" + [attr.data-variant]="props.variant ? props.variant : null" >
diff --git a/src/app/shared/components/template/components/layout/popup/popup.component.ts b/src/app/shared/components/template/components/layout/popup/popup.component.ts index be7244092..aba38cab2 100644 --- a/src/app/shared/components/template/components/layout/popup/popup.component.ts +++ b/src/app/shared/components/template/components/layout/popup/popup.component.ts @@ -59,4 +59,6 @@ export interface ITemplatePopupComponentProps extends IContainerProps { fullscreen?: boolean; /** Pass text only to render that text in a popup, bypassing any templates */ popupText?: string; + /** Template Parameter: "variant". Defines style and use of pop up */ + variant?: string; } diff --git a/src/app/shared/components/template/services/template-nav.service.ts b/src/app/shared/components/template/services/template-nav.service.ts index 63307406a..0b509786d 100644 --- a/src/app/shared/components/template/services/template-nav.service.ts +++ b/src/app/shared/components/template/services/template-nav.service.ts @@ -212,11 +212,12 @@ export class TemplateNavService extends SyncServiceBase { container?: TemplateContainerComponent ) { const templatename = action.args[0]; + const variant = action.params?.variant; // if triggered outside templating system (e.g. via notification action) still enable // popup creation and dismiss on nav changes if (!container) { this.router.events.pipe(first()).subscribe(() => this.dismissPopup(templatename)); - return this.createPopupAndWaitForDismiss(templatename, null); + return this.createPopupAndWaitForDismiss(templatename, null, variant); } const { name } = container; @@ -226,6 +227,7 @@ export class TemplateNavService extends SyncServiceBase { popup_child: templatename, popup_parent: name, popup_parent_triggered_by: action._triggeredBy?.name || null, + popup_variant: variant, }; this.router.navigate([], { queryParams, replaceUrl: true, queryParamsHandling: "merge" }); } @@ -234,7 +236,7 @@ export class TemplateNavService extends SyncServiceBase { params: INavQueryParams, container: TemplateContainerComponent ) { - const { popup_child, nav_child_emit, popup_parent_triggered_by } = params; + const { popup_child, nav_child_emit, popup_parent_triggered_by, popup_variant } = params; const { template } = container; const existingPopup = this.openPopupsByName[popup_child]; log("[Popup] - parent", { params, parent: container.name }); @@ -274,15 +276,16 @@ export class TemplateNavService extends SyncServiceBase { } // If no popup already exists, create, present, and react to dismiss else { - await this.createPopupAndWaitForDismiss(popup_child, container); + await this.createPopupAndWaitForDismiss(popup_child, container, popup_variant); } } private async createPopupAndWaitForDismiss( popup_child: string, - container: TemplateContainerComponent + container: TemplateContainerComponent, + variant: string ) { - const childTemplateModal = await this.createChildPopupModal(popup_child, container); + const childTemplateModal = await this.createChildPopupModal(popup_child, container, variant); if (childTemplateModal) { await childTemplateModal.present(); const { data } = await childTemplateModal.onDidDismiss(); @@ -296,6 +299,7 @@ export class TemplateNavService extends SyncServiceBase { popup_child: null, popup_parent: null, popup_parent_triggered_by: null, + popup_variant: null, }; this.router.navigate([], { queryParams, replaceUrl: true, queryParamsHandling: "merge" }); } @@ -314,16 +318,20 @@ export class TemplateNavService extends SyncServiceBase { container: TemplateContainerComponent ) { // Hide any open popup that was trigggered on a previous page prior to navigation (unless new popup) - const { popup_child } = params; + const { popup_child, popup_variant } = params; const existingPopup = this.openPopupsByName[popup_child]; if (existingPopup) { existingPopup.modal.classList.add("hide-popup-on-template"); } else { - this.createPopupAndWaitForDismiss(params.popup_child, container); + this.createPopupAndWaitForDismiss(params.popup_child, container, popup_variant); } } - private async createChildPopupModal(popup_child: string, container: TemplateContainerComponent) { + private async createChildPopupModal( + popup_child: string, + container: TemplateContainerComponent, + variant?: string + ) { const childContainerProps: ITemplatePopupComponentProps = { // make the popup share the same name as the container so that nav events return to parent container page name: popup_child, @@ -331,6 +339,7 @@ export class TemplateNavService extends SyncServiceBase { parent: container, showCloseButton: true, dismissOnEmit: true, + variant, }; // If trying to recreate a popup that already exists simply mark as visible const existingPopup = this.openPopupsByName[popup_child]; @@ -384,4 +393,5 @@ export interface INavQueryParams { popup_child?: string; // popup_parent?: string; popup_parent_triggered_by?: string; // + popup_variant?: string; } diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss index e69693b40..f0040b88f 100644 --- a/src/theme/themes/plh_kids_kw/_overrides.scss +++ b/src/theme/themes/plh_kids_kw/_overrides.scss @@ -974,4 +974,52 @@ body[data-theme="plh_kids_kw"] { } } } + + // Pop Up + .popup-backdrop { + &[data-variant~="plh_completion"] { + .popup-container { + min-height: 70vh; + padding: 0 1.4rem; + margin-top: -28px; + .popup-content { + background: linear-gradient( + 310deg, + var(--color-secondary-blue-50), + var(--color-secondary-blue-80) + ); + border-radius: 40px; + border: none !important; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100%; + } + plh-template-container { + display: flex; + align-items: center; + justify-content: center; + font-family: var(--ion-font-family); + } + plh-tmpl-text p, + plh-tmpl-text h1, + plh-tmpl-title p, + plh-tmpl-title h1 { + text-align: center; + color: var(--color-surface-white); + } + plh-tmpl-title { + div.title-wrapper { + align-items: center; + justify-content: center; + } + } + .close-button { + border: 0.8px solid var(--color-secondary-blue-80); + color: var(--color-secondary-blue-50); + } + } + } + } }