added family member segment and design

enad-Q3
enadhilal 4 years ago
parent 47b9209497
commit 3ce01fc610

@ -18,8 +18,8 @@
<ion-list>
<ion-item *ngFor="let data of notificationList">
<ion-label>
<p *ngIf="direction == 'ltr'" style="color: black">{{data.nameEn}}</p>
<p *ngIf="direction == 'rtl'" style="color: black">{{data.nameAr}}</p>
<p *ngIf="direction == 'ltr'" style="color: black; padding: 5px; font-size: 16px; font-family: 'Poppins'; padding-bottom: 10px;">{{data.nameEn}}</p>
<p *ngIf="direction == 'rtl'" style="color: black; padding: 5px; font-size: 16px; font-family: 'Poppins'; padding-bottom: 10px;">{{data.nameAr}}</p>
</ion-label>
<ion-toggle [checked]="data.isChecked"></ion-toggle>
</ion-item>

@ -58,10 +58,10 @@
<span class="btnTitle">{{ts.trPK('userProfile','contact-details')}} </span>
</div>
</ion-col>
<ion-col [size]="3">
<ion-col [size]="3" (click)="selectedSegment('family')">
<div class="action-button col-button">
<img *ngIf="!basicDetailsSegment" style="width: 40px;" src="../assets/imgs/profile-icons/basic-detail@2x.png">
<img *ngIf="basicDetailsSegment" style="width: 40px;" src="../assets/imgs/profile-icons/basic-detail@21.png">
<img *ngIf="!familyMemberSegment" style="width: 40px;" src="../assets/imgs/profile-icons/family.svg">
<img *ngIf="familyMemberSegment" style="width: 40px;" src="../assets/imgs/profile-icons/family-g.svg">
<span class="btnTitle">{{ts.trPK('userProfile','family-members')}}</span>
</div>
</ion-col>
@ -125,6 +125,8 @@
<div [ngClass]='profileProgress >= 85 ? "profile-green":"profile-gray"'></div>
</div>
<div style="margin-left: 20px; margin-top: 5px; font-size: 13px;">{{ts.trPK('userProfile','profile-compitation')}} {{profileProgress}}%</div>
<div *ngIf="familyMemberSegment" style="margin-left: 20px; margin-top: 5px; font-size: 13px;">Add or update information about your beneficarie of dependants <br>
Note: People you enter here become dependants or beneficiaries only after you complete benefits enrollment</div>
<ion-card *ngIf="personalInfoSegment" [ngClass]="direction === 'ltr'? 'card-size-info-en': 'card-size-info-ar' ">
<ion-card-content>
@ -282,7 +284,65 @@
<br>
</ion-card-content>
</ion-card>
<!-- <ion-card *ngIf="familyMemberSegment" [ngClass]="direction === 'ltr'? 'card-size-info-en': 'card-size-info-ar' ">
<ion-card-content>
<ion-grid>
<ion-row>
<ion-col size='5'>
<h2 style="font-weight: bold; padding-top: 15px;">ENAD, Hilal</h2>
</ion-col>
<ion-col size='3' offset='2'>
<div class='family-member-button'>
<ion-icon style="width: 20px;" name="create"></ion-icon>
<p>update</p>
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col size='5'>
<ion-label><p style="font-weight: bold;">Father</p></ion-label>
</ion-col>
<ion-col size='3' offset='2'>
<div class='family-member-button'>
<ion-icon name="trash" style="width: 20px; height: 20px; color: #CA3332;"></ion-icon>
<p style="color: #CA3332;">Remove</p>
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card> -->
<div *ngIf="familyMemberSegment">
<br>
<div *ngFor='let data of familyMemberData' style="background: white; border-radius: 20px; margin-left: 15px; margin-right: 15px; margin-bottom: 15px;">
<ion-grid>
<ion-row>
<ion-col size='4'>
<h2 style="font-weight: bold; font-size: 17px;">{{data.name}}</h2>
</ion-col>
<ion-col size='5' offset='3'>
<div class='family-member-button' style="height: 32px !important;">
<ion-icon style="width: 20px;" name="create"></ion-icon>
<p>update</p>
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col size='4'>
<ion-label><p style="font-weight: bold; font-size: 17px;">{{data.relation}}</p></ion-label>
</ion-col>
<ion-col size='5' offset='3'>
<div class='family-member-button' style="height: 32px !important;">
<ion-icon name="trash" style="width: 20px; height: 20px; color: #CA3332;"></ion-icon>
<p style="color: #CA3332;">Remove</p>
</div>
</ion-col>
</ion-row>
</ion-grid>
</div>
</div>
<!-- <ion-footer *ngIf="editBasic||editAddress">
<ion-grid>
<ion-row>

@ -1168,8 +1168,10 @@ $actionBtnSize: 36px;
.card-size-info-en{
// width: 88%;
// left: 2%;
width: 89%;
left: 10px;
// width: 89%;
// left: 10px;
width: 90%;
left: 0px;
}
.card-size-info-ar{
@ -1368,4 +1370,14 @@ $actionBtnSize: 36px;
width: 80px;
height: 8px;
border-radius: 5px;
}
}
.family-member-button{
width: 115px;
height: 45px;
background-color: #F5F5F5;
display: flex;
align-items: center;
padding: 16px;
border-radius: 20px;
box-shadow: 0px 0px 5px #00000029;
}

@ -20,6 +20,21 @@ import { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-respo
})
export class HomeComponent implements OnInit {
public familyMemberData = [
{
name:'Enad',
relation:'Father'
},
{
name:'Zoz',
relation:'Son'
},
{
name:'Hofi',
relation:'daughter'
},
]
public direction: string;
public setImage: any;
public user_image: any = '../assets/imgs/profile.png';
@ -28,6 +43,7 @@ export class HomeComponent implements OnInit {
public performanceData: any = [];
public static PERFORMANCE_DATA = 'perAppData';
public personalInfoSegment = false;
public familyMemberSegment = false;
public basicDetailsSegment = false;
public addressSegment = false;
public editBasic = false;
@ -76,18 +92,27 @@ export class HomeComponent implements OnInit {
this.personalInfoSegment = true;
this.basicDetailsSegment = false;
this.addressSegment = false;
this.familyMemberSegment = false;
} else if (this.targetValue === 'basicDetails') {
this.personalInfoSegment = false;
this.basicDetailsSegment = true;
this.addressSegment = false;
this.familyMemberSegment = false;
} else if (this.targetValue === 'address') {
this.personalInfoSegment = false;
this.basicDetailsSegment = false;
this.addressSegment = true;
this.familyMemberSegment = false;
}else if (this.targetValue === 'fmaily') {
this.personalInfoSegment = false;
this.basicDetailsSegment = false;
this.addressSegment = false;
this.familyMemberSegment = true;
} else {
this.personalInfoSegment = true;
this.basicDetailsSegment = false;
this.addressSegment = false;
this.familyMemberSegment = false;
}
});
}
@ -261,6 +286,7 @@ export class HomeComponent implements OnInit {
this.addressSegment = false;
this.editBasic = false;
this.editAddress = false;
this.familyMemberSegment = false;
break;
case "basic":
this.personalInfoSegment = false;
@ -268,6 +294,7 @@ export class HomeComponent implements OnInit {
this.addressSegment = false;
this.editBasic = false;
this.editAddress = false;
this.familyMemberSegment = false;
break;
case "address":
this.personalInfoSegment = false;
@ -275,6 +302,15 @@ export class HomeComponent implements OnInit {
this.addressSegment = true;
this.editBasic = false;
this.editAddress = false;
this.familyMemberSegment = false;
break;
case "family":
this.personalInfoSegment = false;
this.basicDetailsSegment = false;
this.addressSegment = false;
this.editBasic = false;
this.editAddress = false;
this.familyMemberSegment = true;
break;
}
}

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="39" height="39" viewBox="0 0 39 39">
<g id="Group_7680" data-name="Group 7680" transform="translate(-111 -245.557)">
<circle id="Ellipse_152" data-name="Ellipse 152" cx="19.5" cy="19.5" r="19.5" transform="translate(111 245.557)" fill="#259cb8"/>
<path id="family_3_" data-name="family (3)" d="M9.537,15.144v.993A3.01,3.01,0,0,1,6.53,19.144H2.647A.344.344,0,0,1,2.3,18.8V16.984A2.186,2.186,0,0,1,4.487,14.8H9.193A.344.344,0,0,1,9.537,15.144ZM6.53,19.831c-2.567,0-3.49.008-3.871,0a.343.343,0,0,0-.355.343v.637a2.977,2.977,0,1,0,5.953-.024v-.852a.343.343,0,0,0-.458-.324A3.674,3.674,0,0,1,6.53,19.831Zm4.753,11.8a3.875,3.875,0,0,1-1.948.006.172.172,0,0,0-.177.274,1.486,1.486,0,0,0,2.3-.007A.171.171,0,0,0,11.283,31.633Zm1.506-.259h-.071a.339.339,0,0,0-.321.237,2.184,2.184,0,0,1-3.968.451,2.276,2.276,0,0,1-.208-.449.344.344,0,0,0-.325-.238H7.806a2.062,2.062,0,0,0-2.062,2.062v.344a.344.344,0,0,0,.344.344h8.42a.344.344,0,0,0,.344-.344v-.344A2.062,2.062,0,0,0,12.789,31.374ZM2.307,30.112H.344A.344.344,0,0,0,0,30.455v3.324a.344.344,0,0,0,.344.344H2.307a.344.344,0,0,0,.344-.344V30.455A.344.344,0,0,0,2.307,30.112Zm5.736-5.361a.344.344,0,0,0-.181-.625l-.1,0a.284.284,0,0,0-.266.184,2.33,2.33,0,0,1-2.142,1.547,2.362,2.362,0,0,1-2.182-1.591.208.208,0,0,0-.2-.14A2.976,2.976,0,0,0,0,27.1v1.98a.344.344,0,0,0,.344.344H2.307a.344.344,0,0,0,.344-.344v-.144a.351.351,0,0,1,.321-.354.344.344,0,0,1,.366.343v4.854a.344.344,0,0,0,.344.344H4.713a.343.343,0,0,0,.344-.35c0-.089,0-.195,0-.338a2.754,2.754,0,0,1,2-2.644.344.344,0,0,0,.178-.543,3.873,3.873,0,0,1,.813-5.5Zm9.574-.626a.279.279,0,0,0-.265.193,2.209,2.209,0,0,1-2.046,1.526,2.305,2.305,0,0,1-2.07-1.545.277.277,0,0,0-.258-.174c-.077,0-.156,0-.239,0a.344.344,0,0,0-.186.625,3.873,3.873,0,0,1,.81,5.5.344.344,0,0,0,.177.543,2.754,2.754,0,0,1,2,2.645c0,.143,0,.249,0,.338a.343.343,0,0,0,.344.35h1.031a.344.344,0,0,0,.344-.344V28.925a.344.344,0,0,1,.366-.343.351.351,0,0,1,.321.354v.144a.344.344,0,0,0,.344.344h1.964a.344.344,0,0,0,.344-.344V27.1A2.976,2.976,0,0,0,17.618,24.124Zm.326,6.331v3.324a.344.344,0,0,0,.344.344h1.964a.344.344,0,0,0,.344-.344V30.455a.344.344,0,0,0-.344-.344H18.287A.344.344,0,0,0,17.944,30.455ZM15.374,14.82A4.284,4.284,0,0,0,11.052,19.1V23.36a.344.344,0,0,0,.469.32,3.654,3.654,0,0,1,.567-.166.345.345,0,0,0,.207-.544,3.711,3.711,0,0,1-.722-2.2V19.442a1.031,1.031,0,0,1,1.043-1.031,12.582,12.582,0,0,0,4.157-.649,1.618,1.618,0,0,1,2.133,1.532v1.5a3.678,3.678,0,0,1-.721,2.183.343.343,0,0,0,.2.542,3.63,3.63,0,0,1,.737.242.344.344,0,0,0,.488-.312v-4.3a4.315,4.315,0,0,0-4.237-4.334Zm-5.076,9.9a3.179,3.179,0,1,0,3.179,3.179A3.183,3.183,0,0,0,10.3,24.715Zm4.123-.347a.172.172,0,0,0-.164.285,1.382,1.382,0,0,0,2.176-.062.172.172,0,0,0-.182-.274A3.688,3.688,0,0,1,14.421,24.368Zm2.572-5.954a13.252,13.252,0,0,1-4.385.684.343.343,0,0,0-.348.344v1.326a2.98,2.98,0,1,0,5.959.024v-1.5A.93.93,0,0,0,16.993,18.414ZM4.35,24.35a.172.172,0,0,0-.171.282,1.545,1.545,0,0,0,2.381-.053.172.172,0,0,0-.182-.275A3.669,3.669,0,0,1,4.35,24.35Z" transform="translate(120.203 239.361)" fill="#fff"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.0 KiB

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="39" height="39" viewBox="0 0 39 39">
<g id="Group_7680" data-name="Group 7680" transform="translate(-111 -245.557)">
<circle id="Ellipse_152" data-name="Ellipse 152" cx="19.5" cy="19.5" r="19.5" transform="translate(111 245.557)" fill="#4d4d4d"/>
<path id="family_3_" data-name="family (3)" d="M9.537,15.144v.993A3.01,3.01,0,0,1,6.53,19.144H2.647A.344.344,0,0,1,2.3,18.8V16.984A2.186,2.186,0,0,1,4.487,14.8H9.193A.344.344,0,0,1,9.537,15.144ZM6.53,19.831c-2.567,0-3.49.008-3.871,0a.343.343,0,0,0-.355.343v.637a2.977,2.977,0,1,0,5.953-.024v-.852a.343.343,0,0,0-.458-.324A3.674,3.674,0,0,1,6.53,19.831Zm4.753,11.8a3.875,3.875,0,0,1-1.948.006.172.172,0,0,0-.177.274,1.486,1.486,0,0,0,2.3-.007A.171.171,0,0,0,11.283,31.633Zm1.506-.259h-.071a.339.339,0,0,0-.321.237,2.184,2.184,0,0,1-3.968.451,2.276,2.276,0,0,1-.208-.449.344.344,0,0,0-.325-.238H7.806a2.062,2.062,0,0,0-2.062,2.062v.344a.344.344,0,0,0,.344.344h8.42a.344.344,0,0,0,.344-.344v-.344A2.062,2.062,0,0,0,12.789,31.374ZM2.307,30.112H.344A.344.344,0,0,0,0,30.455v3.324a.344.344,0,0,0,.344.344H2.307a.344.344,0,0,0,.344-.344V30.455A.344.344,0,0,0,2.307,30.112Zm5.736-5.361a.344.344,0,0,0-.181-.625l-.1,0a.284.284,0,0,0-.266.184,2.33,2.33,0,0,1-2.142,1.547,2.362,2.362,0,0,1-2.182-1.591.208.208,0,0,0-.2-.14A2.976,2.976,0,0,0,0,27.1v1.98a.344.344,0,0,0,.344.344H2.307a.344.344,0,0,0,.344-.344v-.144a.351.351,0,0,1,.321-.354.344.344,0,0,1,.366.343v4.854a.344.344,0,0,0,.344.344H4.713a.343.343,0,0,0,.344-.35c0-.089,0-.195,0-.338a2.754,2.754,0,0,1,2-2.644.344.344,0,0,0,.178-.543,3.873,3.873,0,0,1,.813-5.5Zm9.574-.626a.279.279,0,0,0-.265.193,2.209,2.209,0,0,1-2.046,1.526,2.305,2.305,0,0,1-2.07-1.545.277.277,0,0,0-.258-.174c-.077,0-.156,0-.239,0a.344.344,0,0,0-.186.625,3.873,3.873,0,0,1,.81,5.5.344.344,0,0,0,.177.543,2.754,2.754,0,0,1,2,2.645c0,.143,0,.249,0,.338a.343.343,0,0,0,.344.35h1.031a.344.344,0,0,0,.344-.344V28.925a.344.344,0,0,1,.366-.343.351.351,0,0,1,.321.354v.144a.344.344,0,0,0,.344.344h1.964a.344.344,0,0,0,.344-.344V27.1A2.976,2.976,0,0,0,17.618,24.124Zm.326,6.331v3.324a.344.344,0,0,0,.344.344h1.964a.344.344,0,0,0,.344-.344V30.455a.344.344,0,0,0-.344-.344H18.287A.344.344,0,0,0,17.944,30.455ZM15.374,14.82A4.284,4.284,0,0,0,11.052,19.1V23.36a.344.344,0,0,0,.469.32,3.654,3.654,0,0,1,.567-.166.345.345,0,0,0,.207-.544,3.711,3.711,0,0,1-.722-2.2V19.442a1.031,1.031,0,0,1,1.043-1.031,12.582,12.582,0,0,0,4.157-.649,1.618,1.618,0,0,1,2.133,1.532v1.5a3.678,3.678,0,0,1-.721,2.183.343.343,0,0,0,.2.542,3.63,3.63,0,0,1,.737.242.344.344,0,0,0,.488-.312v-4.3a4.315,4.315,0,0,0-4.237-4.334Zm-5.076,9.9a3.179,3.179,0,1,0,3.179,3.179A3.183,3.183,0,0,0,10.3,24.715Zm4.123-.347a.172.172,0,0,0-.164.285,1.382,1.382,0,0,0,2.176-.062.172.172,0,0,0-.182-.274A3.688,3.688,0,0,1,14.421,24.368Zm2.572-5.954a13.252,13.252,0,0,1-4.385.684.343.343,0,0,0-.348.344v1.326a2.98,2.98,0,1,0,5.959.024v-1.5A.93.93,0,0,0,16.993,18.414ZM4.35,24.35a.172.172,0,0,0-.171.282,1.545,1.545,0,0,0,2.381-.053.172.172,0,0,0-.182-.275A3.669,3.669,0,0,1,4.35,24.35Z" transform="translate(120.203 239.361)" fill="#fff"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.0 KiB

Loading…
Cancel
Save