Skip to content

Commit

Permalink
Merge branch 'master' into feat/set-data-action-operators
Browse files Browse the repository at this point in the history
  • Loading branch information
chrismclarke authored Dec 17, 2024
2 parents 48c2d50 + 048a4b0 commit 069eded
Show file tree
Hide file tree
Showing 9 changed files with 263 additions and 23 deletions.
4 changes: 4 additions & 0 deletions packages/components/plh/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,28 @@ import { PlhParentPointCounterComponent } from "./parent-point-counter/parent-po
import { PlhParentPointBoxComponent } from "./parent-point-box/parent-point-box.component";
import { PlhModuleListItemComponent } from "./plh-kids-kw/components/module-list-item/module-list-item.component";
import { PlhCompletionModalComponent } from "./plh-kids-kw/components/completion-modal/completion-modal.component";
import { PlhModuleDetailsHeaderComponent } from "./plh-kids-kw/components/module-details-header/module-details-header.component";

export {
PlhParentPointCounterComponent,
PlhParentPointBoxComponent,
PlhModuleListItemComponent,
PlhCompletionModalComponent,
PlhModuleDetailsHeaderComponent,
};

export const PLH_COMPONENTS = [
PlhParentPointCounterComponent,
PlhParentPointBoxComponent,
PlhModuleListItemComponent,
PlhCompletionModalComponent,
PlhModuleDetailsHeaderComponent,
];

export const PLH_COMPONENT_MAPPING = {
parent_point_counter: PlhParentPointCounterComponent,
parent_point_box: PlhParentPointBoxComponent,
plh_module_details_header: PlhModuleDetailsHeaderComponent,
plh_module_list_item: PlhModuleListItemComponent,
plh_completion_modal: PlhCompletionModalComponent,
};
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<div class="module-header">
<div
class="wrapper"
[attr.data-language-direction]="templateTranslateService.languageDirection()"
>
@if (!this.params.hideBackButton) {
<div class="back-button">
<ion-button size="small" (click)="handleBackButtonClick()">
<ion-icon slot="icon-only" name="chevron-back-outline"></ion-icon>
</ion-button>
</div>
}
<div class="image">
@if (params.moduleImageAsset) {
<div
class="module-illustration"
[style.backgroundImage]="'url(' + (params.backgroundImageAsset | plhAsset) + ')'"
>
<img [src]="params.moduleImageAsset | plhAsset" class="module-image" />
</div>
}
</div>
@if (_row.value) {
<div class="module-title">
<h2>{{ _row.value }}</h2>
</div>
}
</div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.back-button {
position: absolute;
ion-button {
margin: var(--regular-margin);
--box-shadow: none;
--border-radius: var(--ion-border-radius-standard);
--padding-top: 8px;
--padding-bottom: 8px;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
import { IonicModule } from "@ionic/angular";

import { PlhModuleDetailsHeaderComponent } from "./module-details-header.component";

describe("ModuleDetailsHeaderComponent", () => {
let component: PlhModuleDetailsHeaderComponent;
let fixture: ComponentFixture<PlhModuleDetailsHeaderComponent>;

beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [PlhModuleDetailsHeaderComponent],
imports: [IonicModule.forRoot()],
}).compileComponents();

fixture = TestBed.createComponent(PlhModuleDetailsHeaderComponent);
component = fixture.componentInstance;
fixture.detectChanges();
}));

it("should create", () => {
expect(component).toBeTruthy();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { Location } from "@angular/common";
import { Component, OnInit } from "@angular/core";
import { TemplateBaseComponent } from "src/app/shared/components/template/components/base";
import { TemplateTranslateService } from "src/app/shared/components/template/services/template-translate.service";
import {
getBooleanParamFromTemplateRow,
getStringParamFromTemplateRow,
} from "src/app/shared/utils";

interface IModuleHeaderParams {
backgroundImageAsset?: string;
moduleImageAsset?: string;
hideBackButton?: boolean;
}
@Component({
selector: "plh-module-details-header",
templateUrl: "./module-details-header.component.html",
styleUrls: ["./module-details-header.component.scss"],
})
export class PlhModuleDetailsHeaderComponent extends TemplateBaseComponent implements OnInit {
params: Partial<IModuleHeaderParams> = {};

constructor(
public templateTranslateService: TemplateTranslateService,
private location: Location
) {
super();
}

ngOnInit() {
this.getParams();
}

public handleBackButtonClick() {
this.location.back();
}

private getParams() {
this.params.backgroundImageAsset = getStringParamFromTemplateRow(
this._row,
"background_image_asset",
null
);
this.params.moduleImageAsset = getStringParamFromTemplateRow(
this._row,
"module_image_asset",
null
);
this.params.hideBackButton = getBooleanParamFromTemplateRow(
this._row,
"hide_back_button",
false
);
}
}
Original file line number Diff line number Diff line change
@@ -1,13 +1,24 @@
<div class="radio-grid" [ngStyle]="gridStyle">
<div
*ngFor="let item of radioItems"
class="item"
(click)="handleItemClick(item)"
[attr.data-selected]="item.name === _row.value"
>
<div class="item-image-container" *ngIf="item.image">
<img class="item-image" [src]="item.image | plhAsset" />
<div class="radio-grid" [ngStyle]="gridStyle" [attr.data-variant]="parameter_list.variant">
@for (item of radioItems; track $index) {
<div
class="item"
(click)="handleItemClick(item)"
[attr.data-selected]="item.name === _row.value"
>
@if (item.image) {
<div class="item-image-container">
<img
class="item-image"
[src]="
(item.name === _row.value && item.image_checked ? item.image_checked : item.image)
| plhAsset
"
/>
</div>
}
@if (item.text) {
<div class="item-text">{{ item.text }}</div>
}
</div>
<div class="item-text">{{ item.text }}</div>
</div>
}
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -28,3 +28,52 @@ $text-color: var(--radio-button-font-color, var(--ion-color-primary));
font-size: $text-size;
color: $text-color;
}

.radio-grid[data-variant="circle-icon"] {
display: grid;

.item {
border: none;
padding: 0px;
box-shadow: none;

display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
background: transparent;
}
.item-image-container {
background: var(--ion-color-primary-50);
border: 1px solid var(--ion-color-primary-200);
border-radius: 50%;

width: 86px;
height: 86px;

padding: 16px;

display: flex;
justify-content: center;
align-items: center;
img {
width: 48px;
}
}
.item-text {
font-size: large;
color: var(--ion-color-gray-800);
margin-top: 6px;
}

.item[data-selected="true"] {
background: unset;
.item-image-container {
border: 2px solid var(--ion-color-primary-300);
background: var(--ion-color-primary-200);
}
.item-text {
font-weight: bold;
}
}
}
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
import { Component, Input } from "@angular/core";
import { TemplateBaseComponent } from "../base";
import { FlowTypes, ITemplateRowProps } from "../../models";
import { getAnswerListParamFromTemplateRow, IAnswerListItem } from "src/app/shared/utils";
import {
getAnswerListParamFromTemplateRow,
getStringParamFromTemplateRow,
IAnswerListItem,
} from "src/app/shared/utils";

interface IRadioButtonGridParams {
/** List of options presented as radio items */
Expand All @@ -21,6 +25,8 @@ interface IRadioButtonGridParams {
* Default '16px'
**/
grid_gap: string;
/* TEMPLATE PARAMETER: "variant". The style variant of the button_grid */
variant?: "default" | "circle-icon";
}

@Component({
Expand Down Expand Up @@ -67,6 +73,9 @@ export class TmplRadioButtonGridComponent
this.parameter_list = this._row.parameter_list || ({} as any);
this.radioItems = getAnswerListParamFromTemplateRow(this._row, "answer_list", []);
this.gridStyle = this.generateGridStyle();
this.parameter_list.variant = getStringParamFromTemplateRow(this._row, "variant", "default")
.split(",")
.join(" ") as IRadioButtonGridParams["variant"];
}

/**
Expand Down
71 changes: 60 additions & 11 deletions src/theme/themes/plh_kids_kw/_overrides.scss
Original file line number Diff line number Diff line change
Expand Up @@ -248,13 +248,9 @@ body[data-theme="plh_kids_kw"] {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
min-width: 390px;
left: 0;
right: 0;
// border: 1px solid red;
&::ng-deep {
border: 1px solid red !important;
}
min-width: 220px;
width: 100%;
--inner-padding-end: 0px;
}
ion-item.accordion-content {
border-top: 1px solid var(--color-outline-variant) !important;
Expand Down Expand Up @@ -536,6 +532,7 @@ body[data-theme="plh_kids_kw"] {
padding: 16px;
box-shadow: 1px 1px 10px #92b7da;
background-color: #f6fafe;
margin: 12px 0;
.container {
display: flex;
flex-direction: row;
Expand Down Expand Up @@ -570,10 +567,6 @@ body[data-theme="plh_kids_kw"] {
.icon {
width: 28px;
max-width: unset;
&[data-language-direction~="rtl"] {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
}
.container[data-language-direction~="rtl"] {
.module-title {
Expand All @@ -587,6 +580,10 @@ body[data-theme="plh_kids_kw"] {
transform: scaleX(-1);
}
}
.icon {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
}
}
.module-item[data-lock~="true"] {
Expand Down Expand Up @@ -659,6 +656,46 @@ body[data-theme="plh_kids_kw"] {
}
}

// module header
plh-module-details-header {
.module-header {
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
background-color: #9ecbf5;
}
.image {
.module-illustration {
height: 380px;
background-position: center;
background-repeat: no-repeat;
background-size: 320px;

display: flex;
justify-content: center;
align-items: center;
}
img.module-image {
max-width: 190px;
min-width: 190px;
margin-top: -30px;
border-radius: 50%;
}
}
.module-title {
margin-top: -70px;
padding-bottom: 30px;
padding-left: 16px;
h2 {
font-weight: var(--font-weight-bold);
font-size: 28px;
}
}
.wrapper[data-language-direction~="rtl"] {
.module-title {
padding-right: 16px;
}
}
}
// Round Button
ion-tab-button {
box-shadow: none;
Expand Down Expand Up @@ -690,6 +727,18 @@ body[data-theme="plh_kids_kw"] {
}
}

// Radio Button Grid
.radio-grid {
.item {
border: 1px solid var(--ion-color-gray-100);
box-shadow: none !important;
border-radius: var(--ion-border-radius-small);
.item-image-container {
padding: 16px;
}
}
}

// Completion Modal
plh-completion-modal {
.completion-modal {
Expand Down

0 comments on commit 069eded

Please sign in to comment.