From ebd74a7630fe6bcb3f79352395dc6ca843938f84 Mon Sep 17 00:00:00 2001 From: FaithDaka Date: Wed, 18 Dec 2024 10:09:05 +0300 Subject: [PATCH 1/4] feat: handle pop up variant --- .../template/components/layout/popup/popup.component.html | 1 + .../template/components/layout/popup/popup.component.ts | 2 ++ .../components/template/services/template-nav.service.ts | 3 +++ 3 files changed, 6 insertions(+) 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 31958a5cfa..35b028640b 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 be72440925..aba38cab27 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 63307406a3..f909c8fb7e 100644 --- a/src/app/shared/components/template/services/template-nav.service.ts +++ b/src/app/shared/components/template/services/template-nav.service.ts @@ -212,6 +212,7 @@ 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) { @@ -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" }); } @@ -384,4 +386,5 @@ export interface INavQueryParams { popup_child?: string; // popup_parent?: string; popup_parent_triggered_by?: string; // + popup_variant?: string; } From 1a6fcc78b25c66de2c689734525c974f8ece84d5 Mon Sep 17 00:00:00 2001 From: FaithDaka Date: Wed, 18 Dec 2024 10:09:19 +0300 Subject: [PATCH 2/4] styling: init --- src/theme/themes/plh_kids_kw/_overrides.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss index 330df60667..4f444ca537 100644 --- a/src/theme/themes/plh_kids_kw/_overrides.scss +++ b/src/theme/themes/plh_kids_kw/_overrides.scss @@ -723,4 +723,11 @@ body[data-theme="plh_kids_kw"] { } } } + + // Pop Up + .popup-backdrop { + &[data-variant~="plh_completion"] { + border: 1px solid red !important; + } + } } From 127c29f2b39ad15f3610da5cc4af986bb48e4c5b Mon Sep 17 00:00:00 2001 From: Johnny McQuade Date: Wed, 18 Dec 2024 12:16:08 +0000 Subject: [PATCH 3/4] chore: handle pop-up variant --- .../template/services/template-nav.service.ts | 25 ++++++++++++------- src/theme/themes/plh_kids_kw/_overrides.scss | 6 +++++ 2 files changed, 22 insertions(+), 9 deletions(-) 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 f909c8fb7e..0b509786d5 100644 --- a/src/app/shared/components/template/services/template-nav.service.ts +++ b/src/app/shared/components/template/services/template-nav.service.ts @@ -212,12 +212,12 @@ export class TemplateNavService extends SyncServiceBase { container?: TemplateContainerComponent ) { const templatename = action.args[0]; - const variant = action.params.variant; + 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; @@ -236,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 }); @@ -276,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(); @@ -298,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" }); } @@ -316,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, @@ -333,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]; diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss index 4f444ca537..b9d6f25bdc 100644 --- a/src/theme/themes/plh_kids_kw/_overrides.scss +++ b/src/theme/themes/plh_kids_kw/_overrides.scss @@ -728,6 +728,12 @@ body[data-theme="plh_kids_kw"] { .popup-backdrop { &[data-variant~="plh_completion"] { border: 1px solid red !important; + + .popup-container { + .popup-content { + background-color: red; + } + } } } } From 656080e9f1a62df0f56dfe1e919b3e87de91ab8b Mon Sep 17 00:00:00 2001 From: FaithDaka Date: Thu, 19 Dec 2024 12:13:17 +0300 Subject: [PATCH 4/4] styling: completion pop-up --- src/theme/themes/plh_kids_kw/_overrides.scss | 41 ++++++++++++++++++-- 1 file changed, 38 insertions(+), 3 deletions(-) diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss index b9d6f25bdc..d55684fc3c 100644 --- a/src/theme/themes/plh_kids_kw/_overrides.scss +++ b/src/theme/themes/plh_kids_kw/_overrides.scss @@ -727,11 +727,46 @@ body[data-theme="plh_kids_kw"] { // Pop Up .popup-backdrop { &[data-variant~="plh_completion"] { - border: 1px solid red !important; - .popup-container { + min-height: 70vh; + padding: 0 1.4rem; + margin-top: -28px; .popup-content { - background-color: red; + 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); } } }