resolved merge issues

Fatima-Q2-June
Fatimah Alshammari 5 years ago
parent 32f2900a90
commit ca25bfb05a

@ -57,7 +57,7 @@
<ion-item lines="none" class="filed-container"> <ion-item lines="none" class="filed-container">
<select [(ngModel)]="secType" (change)="onSelectChange($event,2)" class="filed1" <select [(ngModel)]="secType" (change)="onSelectChange($event,2)" class="filed1"
selected="selected" placeholder="Select Sectiont" type="text" required> selected="selected" placeholder="Select Sectiont" type="text" required>
<option value="" selected>Select Sectiont</option> <option value="" selected>Select Section</option>
<option [value]="x.sectionId" <option [value]="x.sectionId"
*ngFor="let x of sectionTypeList"> *ngFor="let x of sectionTypeList">
{{x.sectionName}} </option> {{x.sectionName}} </option>

@ -54,9 +54,9 @@ export class HrRequestFormComponent implements OnInit {
public sectionDep: any; public sectionDep: any;
public projectCode; public projectCode;
public SelectedServiceType: any; public SelectedServiceType: any;
public depType: any; public depType: any ="";
public secType: any; public secType: any ="";
public topicType: any; public topicType: any ="";
indexLastObj: any; indexLastObj: any;
addAttachRequest: any = []; addAttachRequest: any = [];
TransactionID: any; TransactionID: any;

@ -1,9 +1,12 @@
<app-generic-header <app-generic-header
showBack="true" showBack="true"
backLink="/my-team/home"
[headerText]="'userProfile, emp-detail' | translate"> [headerText]="'userProfile, emp-detail' | translate">
</app-generic-header> </app-generic-header>
<ion-content> <ion-content>
<div class="contentBg"> <div class="contentBg">
<div class="result-graph" > <div class="result-graph" >
@ -18,8 +21,10 @@
<img class="img" [src]="employee.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+employee.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'" alt="Team Member Image"/> <img class="img" [src]="employee.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+employee.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'" alt="Team Member Image"/>
</div> </div>
<div [ngClass]="direction == 'en' ? 'call':'call-ar' " slot="end" > <div [ngClass]="direction == 'en' ? 'call':'call-ar' " slot="end" >
<a [ngClass]="employee.EMPLOYEE_MOBILE_NUMBER == '' ? 'disable-phone action-button-icon' : 'action-button-icon'" href="tel:{{employee.EMPLOYEE_MOBILE_NUMBER}}"></a> <a [ngClass]="employee.EMPLOYEE_MOBILE_NUMBER == '' ? 'disable-phone action-button-icon' : 'action-button-icon'" href="tel:{{employee.EMPLOYEE_MOBILE_NUMBER}}">
<img src="../assets/imgs/call-o.svg"></div> <img src="../assets/imgs/call-o.svg">
</a>
</div>
<!-- <a [ngClass]="employee.EMPLOYEE_MOBILE_NUMBER == '' ? 'disable-phone action-button-icon' : 'action-button-icon'" href="tel:{{employee.EMPLOYEE_MOBILE_NUMBER}}"> <!-- <a [ngClass]="employee.EMPLOYEE_MOBILE_NUMBER == '' ? 'disable-phone action-button-icon' : 'action-button-icon'" href="tel:{{employee.EMPLOYEE_MOBILE_NUMBER}}">
<img src="../assets/imgs/profile.svg"> <img src="../assets/imgs/profile.svg">
</a> --> </a> -->
@ -31,12 +36,12 @@
</div> </div>
<div > <div >
<ion-row style="margin-top: 11px;"> <ion-row style="margin-top: 11px;">
<ion-col style="border-right: 1px solid rgb(221 221 221);"> <ion-col [size]="6">
<p class="subTitle">{{ts.trPK('userProfile','role')}}</p> <p class="subTitle">{{ts.trPK('userProfile','role')}}</p>
<span class="Boldtext">{{employee.JOB_NAME}}</span> <span class="Boldtext">{{employee.JOB_NAME}}</span>
</ion-col> </ion-col>
<ion-col> <ion-col [size]="6" style="border-left: 1px solid rgb(221 221 221);">
<p class="subTitle">{{ts.trPK('userProfile','empNo')}}</p> <p class="subTitle" style="line-height: 12px !important;">{{ts.trPK('userProfile','empNo')}}</p>
<span class="Boldtext">{{employee.EMPLOYEE_NUMBER}}</span> <span class="Boldtext">{{employee.EMPLOYEE_NUMBER}}</span>
</ion-col> </ion-col>
</ion-row> </ion-row>
@ -419,7 +424,7 @@
<div *ngIf="activeSegment === 'TeamMembers'"> <div *ngIf="activeSegment === 'TeamMembers'">
<div class="MyTeamdiv"> <div class="MyTeamdiv">
<div class="MyTeamtext" >{{ts.trPK('myTeam','my-team-members')}}</div> <div class="MyTeamtext" >{{ts.trPK('myTeam','my-team-members')}}</div>
<div class="numberEmp">{{EmployeeTotal}}</div> <div [ngClass]="direction == 'en' ? 'numberEmp':'numberEmp-ar' " >{{EmployeeTotal}}</div>
</div> </div>
<!-- <div style="margin-top: -23px;"> <!-- <div style="margin-top: -23px;">
<ion-row> <ion-row>

@ -178,8 +178,9 @@ ion-title{
min-height: 39px; min-height: 39px;
padding-right: -10px; padding-right: -10px;
border-radius: 50% !important; border-radius: 50% !important;
margin-right: 22px; // margin-right: 22px;
margin-left: 22px; // margin-left: 22px;
margin-left: 19px;
background-color: #269DB8; background-color: #269DB8;
display: flex; display: flex;
} }
@ -200,6 +201,7 @@ ion-title{
padding-left: 6px; padding-left: 6px;
margin-right: 10px; margin-right: 10px;
margin-left: 57px; margin-left: 57px;
// margin-left: 14px;
display: flex; display: flex;
}} }}
@ -213,8 +215,9 @@ ion-title{
min-height: 39px; min-height: 39px;
padding-right: -10px; padding-right: -10px;
border-radius: 50% !important; border-radius: 50% !important;
margin-right: 22px; // margin-right: 22px;
margin-left: 22px; // margin-left: 22px;
margin-left: 15px;
background: #414040 !important; background: #414040 !important;
display: flex; display: flex;
@ -232,6 +235,7 @@ ion-title{
padding-left: 6px; padding-left: 6px;
margin-right: 10px; margin-right: 10px;
margin-left: 57px; margin-left: 57px;
// margin-left: 14px;
background: #414040 !important; background: #414040 !important;
display: flex; display: flex;
}} }}
@ -244,7 +248,7 @@ ion-title{
/* right: 15px; */ /* right: 15px; */
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 7px; // left: 7px;
margin: auto; margin: auto;
height: 18px; height: 18px;
display: flex; display: flex;
@ -253,7 +257,7 @@ ion-title{
.imgSize{position: absolute; .imgSize{position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 2px; left: 2px;
margin: auto; margin: auto;
height: 28px; height: 28px;
display: flex;}} display: flex;}}
@ -370,7 +374,7 @@ ion-title{
position: relative; position: relative;
background: white; background: white;
// margin-top: 20px; // margin-top: 20px;
padding-bottom: 20px; padding-bottom: 5px;
border-radius: 20px; border-radius: 20px;
z-index: 1; z-index: 1;
margin-bottom: 10px; margin-bottom: 10px;
@ -385,7 +389,7 @@ ion-title{
position: relative; position: relative;
background: white; background: white;
// margin-top: 20px; // margin-top: 20px;
padding-bottom: 20px; padding-bottom: 5px;
border-radius: 20px; border-radius: 20px;
z-index: 1; z-index: 1;
margin-bottom: 10px; margin-bottom: 10px;
@ -872,6 +876,7 @@ ion-title{
letter-spacing: -0.52px; letter-spacing: -0.52px;
color: #A2A2A2; color: #A2A2A2;
opacity: 1; opacity: 1;
padding-top: 3px;
} }
.subTitle{ .subTitle{
text-align: center; text-align: center;
@ -980,6 +985,24 @@ opacity: 1;
padding-top: 3px; padding-top: 3px;
} }
.numberEmp-ar{
color: white;
font-size: 12px;
font-weight: bolder;
/* padding-top: 5px; */
/* padding-right: 20px; */
margin-right: 13px;
width: 23px;
height: 23px;
border-radius: 100%;
background-color: #269DB8;
z-index: 9;
margin-top: 25px;
/* padding-left: 4px; */
text-align: center;
padding-top: 3px;
}
.MyTeamtext{ .MyTeamtext{
text-align: left; text-align: left;
font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-family: var(--fontFamilyPoppins-SemiBold, inherit);
@ -998,6 +1021,7 @@ opacity: 1;
line-height: 10px; line-height: 10px;
font-size: 11px; font-size: 11px;
color: #4D4D4D; color: #4D4D4D;
margin-top: -13px;
} }
.btnDiv{ .btnDiv{
position: relative; position: relative;
@ -1009,3 +1033,5 @@ opacity: 1;
} }

@ -53,7 +53,7 @@
</div> </div>
<div class="div"> <div class="div">
<div class="text" >{{ts.trPK('myTeam','my-team-members')}}</div> <div class="text" >{{ts.trPK('myTeam','my-team-members')}}</div>
<div class="numberEmp">{{EmployeeTotal}}</div> <div [ngClass]="direction == 'en' ? 'numberEmp':'numberEmp-ar' ">{{EmployeeTotal}}</div>
</div> </div>
<!-- <div> <!-- <div>
<ion-row> <ion-row>

@ -303,6 +303,23 @@ ion-content {
text-align: center; text-align: center;
padding-top: 3px; padding-top: 3px;
} }
.numberEmp-ar{
color: white;
font-size: 12px;
font-weight: bolder;
/* padding-top: 5px; */
/* padding-right: 20px; */
margin-right: 13px;
width: 23px;
height: 23px;
border-radius: 100%;
background-color: #269DB8;
z-index: 9;
margin-top: 25px;
/* padding-left: 4px; */
text-align: center;
padding-top: 3px;
}
.div{ .div{
position: relative; position: relative;
display: flex; display: flex;

@ -7,7 +7,7 @@
<div [ngClass]="direction == 'ltr' ? 'result-graph' : 'result-graph-ar'" style="margin-top: -50px;"> <div [ngClass]="direction == 'ltr' ? 'result-graph' : 'result-graph-ar'" style="margin-top: -50px;">
<div class="user-info"> <div class="user-info">
<div class="user-image-container"> <div class="user-image-container">
<div class="user-image"> <div [ngClass]=" direction == 'ltr' ? 'user-image' : 'user-image-ar'" >
<img [ngClass]="direction == 'ltr'? 'img':'img-ar' " <img [ngClass]="direction == 'ltr'? 'img':'img-ar' "
[src]="personalInfo.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+personalInfo.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'" [src]="personalInfo.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+personalInfo.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'"
alt="Team Member Image" /> alt="Team Member Image" />
@ -18,19 +18,20 @@
</button> </button>
</div> </div>
</div> </div>
<div style="margin-top: 18px;">
<h1>{{personalInfo.EMPLOYEE_NAME}}</h1> <div style="margin-top: 25px;">
<span>{{personalInfo.EMPLOYEE_EMAIL_ADDRESS}}</span> <h1 class="name">{{personalInfo.EMPLOYEE_NAME}}</h1>
<span class="email">{{personalInfo.EMPLOYEE_EMAIL_ADDRESS}}</span>
</div> </div>
<div> <div>
<ion-row> <ion-row style="margin-top: 11px;">
<ion-col style="border-right: 1px solid rgb(221 221 221);"> <ion-col [size]="6">
<p style="font-size: 12px; color: rgb(128, 124, 124);">{{ts.trPK('userProfile','role')}}</p> <p class="subTitle">{{ts.trPK('userProfile','role')}}</p>
<span class="Boldtext">{{personalInfo.JOB_NAME}}</span> <span class="boldText">{{personalInfo.JOB_NAME}}</span>
</ion-col> </ion-col>
<ion-col> <ion-col [size]="6" style="border-left: 1px solid rgb(221 221 221);">
<p style="font-size: 12px; color: rgb(128, 124, 124);">{{ts.trPK('userProfile','empNo')}}</p> <p class="subTitle" style="line-height: 8px !important;">{{ts.trPK('userProfile','empNo')}}</p>
<span class="Boldtext">{{personalInfo.EMPLOYEE_NUMBER}}</span> <span class="boldText">{{personalInfo.EMPLOYEE_NUMBER}}</span>
</ion-col> </ion-col>
</ion-row> </ion-row>
</div> </div>
@ -41,38 +42,38 @@
<div class="action-button col-button"> <div class="action-button col-button">
<img *ngIf="!personalInfoSegment" style="width: 40px;" src="../assets/imgs/profile-icons/info@2x.png"> <img *ngIf="!personalInfoSegment" style="width: 40px;" src="../assets/imgs/profile-icons/info@2x.png">
<img *ngIf="personalInfoSegment" style="width: 40px;" src="../assets/imgs/profile-icons/info-a@2x.png"> <img *ngIf="personalInfoSegment" style="width: 40px;" src="../assets/imgs/profile-icons/info-a@2x.png">
<span style="font-size: 11px;">{{ts.trPK('general','personal-info')}}</span> <span class="btnTitle">{{ts.trPK('general','personal-info')}}</span>
</div> </div>
</ion-col> </ion-col>
<ion-col [size]="4" (click)="selectedSegment('basic')"> <ion-col [size]="4" (click)="selectedSegment('basic')">
<div class="action-button col-button"> <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@2x.png">
<img *ngIf="basicDetailsSegment" style="width: 40px;" src="../assets/imgs/profile-icons/basic-detail@21.png"> <img *ngIf="basicDetailsSegment" style="width: 40px;" src="../assets/imgs/profile-icons/basic-detail@21.png">
<span style="font-size: 11px;">{{ts.trPK('general','basic-details')}}</span> <span class="btnTitle">{{ts.trPK('general','basic-details')}}</span>
</div> </div>
</ion-col> </ion-col>
<ion-col [size]="4" (click)="selectedSegment('address')"> <ion-col [size]="4" (click)="selectedSegment('address')">
<div class="action-button col-button"> <div class="action-button col-button">
<img *ngIf="!addressSegment" style="width: 40px;" src="../assets/imgs/profile-icons/main-address@2x.png"> <img *ngIf="!addressSegment" style="width: 40px;" src="../assets/imgs/profile-icons/main-address@2x.png">
<img *ngIf="addressSegment" style="width: 40px;" src="../assets/imgs/profile-icons/main address-a@2x.png"> <img *ngIf="addressSegment" style="width: 40px;" src="../assets/imgs/profile-icons/main address-a@2x.png">
<span style="font-size: 11px;">{{ts.trPK('userProfile','address')}} </span> <span class="btnTitle">{{ts.trPK('userProfile','address')}} </span>
</div> </div>
</ion-col> </ion-col>
</ion-row> </ion-row>
</div> </div>
<ion-grid [ngClass]="direction === 'ltr'? 'grid-card':'grid-card-ar' "> <ion-grid [ngClass]="direction === 'ltr'? 'grid-card':'grid-card-ar' ">
<div [ngClass]=" direction == 'ltr' ? 'gridService-en' : 'gridService-ar'" <div [ngClass]=" direction == 'ltr' ? 'gridService-en' : 'gridService-ar'"
style="background: #002948; border-radius: 0px 0px 10px 10px;"> style="background: #2B353E; border-radius: 0px 0px 10px 10px;">
<ion-row> <ion-row>
<ion-col> <ion-col>
<label <label
style="font-size: 12px; color: white; margin: 10px 0px 0px 0px; display: block; text-align: center;font-weight: bold;"> style="font-size: 11px; color: white; margin: 10px 0px 0px 0px; display: block; text-align: center;font-family: var(--fontFamilyPoppins-SemiBold, inherit);">
{{ 'general, appreciate-service' | translate}} {{ 'general, appreciate-service' | translate}}
</label> </label>
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row [ngClass]=" direction == 'ltr' ? 'service-row-en' : 'service-row-ar'"> <ion-row [ngClass]=" direction == 'ltr' ? 'service-row-en' : 'service-row-ar'">
<ion-col [ngClass]=" direction == 'ltr' ? 'columns' : 'columns-ar'"> <ion-col [size]="4" [ngClass]=" direction == 'ltr' ? 'columns' : 'columns-ar'">
<ion-grid> <ion-grid>
<ion-row> <ion-row>
<ion-col class="text-years"> <ion-col class="text-years">
@ -83,7 +84,7 @@
</ion-row> </ion-row>
</ion-grid> </ion-grid>
</ion-col> </ion-col>
<ion-col [ngClass]=" direction == 'ltr' ? 'columns' : 'columns-ar'"> <ion-col [size]="4" [ngClass]=" direction == 'ltr' ? 'columns' : 'columns-ar'">
<ion-grid> <ion-grid>
<ion-row> <ion-row>
<ion-col class="text-years"> <ion-col class="text-years">
@ -94,7 +95,7 @@
</ion-row> </ion-row>
</ion-grid> </ion-grid>
</ion-col> </ion-col>
<ion-col [ngClass]=" direction == 'ltr' ? 'columns' : 'columns-ar'"> <ion-col [size]="4" [ngClass]=" direction == 'ltr' ? 'columns' : 'columns-ar'">
<ion-grid> <ion-grid>
<ion-row> <ion-row>
<ion-col class="text-years"> <ion-col class="text-years">
@ -115,28 +116,28 @@
<ion-card *ngIf="personalInfoSegment" [ngClass]="direction === 'ltr'? 'card-size-info-en': 'card-size-info-ar' "> <ion-card *ngIf="personalInfoSegment" [ngClass]="direction === 'ltr'? 'card-size-info-en': 'card-size-info-ar' ">
<ion-card-content> <ion-card-content>
<ion-label> <ion-label>
<h1 class="header-label-text-form">{{ts.trPK('userProfile','personal-informaion')}}</h1> <h1 [ngClass]="direction === 'ltr'? 'Profileheader-label-text-form': 'Profileheader-label-text-form-ar' " >{{ts.trPK('userProfile','personal-informaion')}}</h1>
</ion-label> </ion-label>
<br> <br>
<ion-label> <ion-label>
<h3 class="type-label-text-form">{{ts.trPK('userProfile','category')}}</h3> <h3 [ngClass]="direction === 'ltr'? 'type-label-text-form': 'type-label-text-form-ar' ">{{ts.trPK('userProfile','category')}}</h3>
</ion-label> </ion-label>
<h3 class="result-label-text-form">{{personalInfo.EMPLOYMENT_CATEGORY_MEANING}}</h3> <h3 [ngClass]="direction === 'ltr'? 'result-label-text-form': 'result-label-text-form-ar' ">{{personalInfo.EMPLOYMENT_CATEGORY_MEANING}}</h3>
<br> <br>
<ion-label> <ion-label>
<h3 class="type-label-text-form">{{ts.trPK('userProfile','phone-no')}}</h3> <h3 [ngClass]="direction === 'ltr'? 'type-label-text-form': 'type-label-text-form-ar' ">{{ts.trPK('userProfile','phone-no')}}</h3>
</ion-label> </ion-label>
<h3 class="result-label-text-form">{{personalInfo.EMPLOYEE_MOBILE_NUMBER}}</h3> <h3 [ngClass]="direction === 'ltr'? 'result-label-text-form': 'result-label-text-form-ar' ">{{personalInfo.EMPLOYEE_MOBILE_NUMBER}}</h3>
<br> <br>
<ion-label> <ion-label>
<h3 class="type-label-text-form">{{ts.trPK('userProfile','busG')}}</h3> <h3 [ngClass]="direction === 'ltr'? 'type-label-text-form': 'type-label-text-form-ar' ">{{ts.trPK('userProfile','busG')}}</h3>
</ion-label> </ion-label>
<h3 class="result-label-text-form">{{personalInfo.BUSINESS_GROUP_NAME}}</h3> <h3 [ngClass]="direction === 'ltr'? 'result-label-text-form': 'result-label-text-form-ar' ">{{personalInfo.BUSINESS_GROUP_NAME}}</h3>
<br> <br>
<ion-label> <ion-label>
<h3 class="type-label-text-form">{{ts.trPK('userProfile','payrol')}}</h3> <h3 [ngClass]="direction === 'ltr'? 'type-label-text-form': 'type-label-text-form-ar' ">{{ts.trPK('userProfile','payrol')}}</h3>
</ion-label> </ion-label>
<h3 class="result-label-text-form">{{personalInfo.PAYROLL_NAME}}</h3> <h3 [ngClass]="direction === 'ltr'? 'result-label-text-form': 'result-label-text-form-ar' ">{{personalInfo.PAYROLL_NAME}}</h3>
<br> <br>
</ion-card-content> </ion-card-content>
</ion-card> </ion-card>
@ -144,15 +145,15 @@
<ion-card *ngIf="basicDetailsSegment" [ngClass]="direction === 'ltr'? 'card-size-info-en': 'card-size-info-ar' "> <ion-card *ngIf="basicDetailsSegment" [ngClass]="direction === 'ltr'? 'card-size-info-en': 'card-size-info-ar' ">
<ion-card-content *ngIf="!editBasic && (fullName && maritalStatus && birthDate && civilIdentityNumber)"> <ion-card-content *ngIf="!editBasic && (fullName && maritalStatus && birthDate && civilIdentityNumber)">
<ion-grid> <ion-grid>
<ion-row> <ion-row style="width: 113%;">
<ion-col size="10"> <ion-col size="10">
<ion-label> <ion-label>
<h1 class="header-label-text-form">{{ts.trPK('general','basic-details')}}</h1> <h1 [ngClass]="direction === 'ltr'? 'header-label-text-form': 'header-label-text-form-ar' ">{{ts.trPK('general','basic-details')}}</h1>
</ion-label> </ion-label>
</ion-col> </ion-col>
<ion-col size="2" *ngIf="basicDetailsSubMenu && basicDetailsSubMenu.UPDATE_BUTTON === 'Y'"> <ion-col size="2" *ngIf="basicDetailsSubMenu && basicDetailsSubMenu.UPDATE_BUTTON === 'Y'">
<img style="width: 70%;" src="../assets/imgs/profile-icons/editing@2x.png" <img style="width: 18px;height: 18px;" src="../assets/imgs/profile-icons/editing@2x.png"
(click)="allowEdit('basic')"> (click)="allowEdit('basic')">
</ion-col> </ion-col>
<ion-col size="2" *ngIf="basicDetailsSubMenu && basicDetailsSubMenu.ADD_BUTTON === 'Y'"> <ion-col size="2" *ngIf="basicDetailsSubMenu && basicDetailsSubMenu.ADD_BUTTON === 'Y'">
@ -162,24 +163,24 @@
</ion-grid> </ion-grid>
<br> <br>
<ion-label> <ion-label>
<h3 class="type-label-text-form">{{ts.trPK('general','full-name')}}</h3> <h3 [ngClass]="direction === 'ltr'? 'type-label-text-form': 'type-label-text-form-ar' ">{{ts.trPK('general','full-name')}}</h3>
</ion-label> </ion-label>
<h3 class="result-label-text-form">{{fullName}}</h3> <h3 [ngClass]="direction === 'ltr'? 'result-label-text-form': 'result-label-text-form-ar' ">{{fullName}}</h3>
<br> <br>
<ion-label> <ion-label>
<h3 class="type-label-text-form">{{ts.trPK('general','marital-status')}}</h3> <h3 [ngClass]="direction === 'ltr'? 'type-label-text-form': 'type-label-text-form-ar' ">{{ts.trPK('general','marital-status')}}</h3>
</ion-label> </ion-label>
<h3 class="result-label-text-form">{{maritalStatus}}</h3> <h3 [ngClass]="direction === 'ltr'? 'result-label-text-form': 'result-label-text-form-ar' ">{{maritalStatus}}</h3>
<br> <br>
<ion-label> <ion-label>
<h3 class="type-label-text-form">{{ts.trPK('general','birth_date')}}</h3> <h3 [ngClass]="direction === 'ltr'? 'type-label-text-form': 'type-label-text-form-ar' ">{{ts.trPK('general','birth_date')}}</h3>
</ion-label> </ion-label>
<h3 class="result-label-text-form">{{birthDate}}</h3> <h3 [ngClass]="direction === 'ltr'? 'result-label-text-form': 'result-label-text-form-ar' ">{{birthDate}}</h3>
<br> <br>
<ion-label> <ion-label>
<h3 class="type-label-text-form">{{ts.trPK('general','civil-identity-number')}}</h3> <h3 [ngClass]="direction === 'ltr'? 'type-label-text-form': 'type-label-text-form-ar' ">{{ts.trPK('general','civil-identity-number')}}</h3>
</ion-label> </ion-label>
<h3 class="result-label-text-form">{{civilIdentityNumber}}</h3> <h3 [ngClass]="direction === 'ltr'? 'result-label-text-form': 'result-label-text-form-ar' ">{{civilIdentityNumber}}</h3>
<br> <br>
</ion-card-content> </ion-card-content>
</ion-card> </ion-card>
@ -187,16 +188,16 @@
<ion-card *ngIf="addressSegment" [ngClass]="direction === 'ltr'? 'card-size-info-en': 'card-size-info-ar' "> <ion-card *ngIf="addressSegment" [ngClass]="direction === 'ltr'? 'card-size-info-en': 'card-size-info-ar' ">
<ion-card-content *ngIf="!editAddress && employeeAdress"> <ion-card-content *ngIf="!editAddress && employeeAdress">
<ion-grid> <ion-grid>
<ion-row> <ion-row style="width: 113%;">
<ion-col size="10"> <ion-col size="10">
<ion-label> <ion-label>
<h1 class="header-label-text-form">{{ts.trPK('general','main-address')}}</h1> <h1 [ngClass]="direction === 'ltr'? 'header-label-text-form': 'header-label-text-form-ar' ">{{ts.trPK('general','main-address')}}</h1>
</ion-label> </ion-label>
</ion-col> </ion-col>
<ion-col size="2" *ngIf="addressSubMenu && addressSubMenu.UPDATE_BUTTON === 'Y'" (click)="allowEdit('address')"> <ion-col size="2" *ngIf="addressSubMenu && addressSubMenu.UPDATE_BUTTON === 'Y'" (click)="allowEdit('address')">
<img style="width: 70%;" src="../assets/imgs/profile-icons/editing@2x.png" <img style="width: 18px; height: 18px;" src="../assets/imgs/profile-icons/editing@2x.png"
> (click)="allowEdit('address')">
</ion-col> </ion-col>
<ion-col size="2" *ngIf="addressSubMenu && addressSubMenu.ADD_BUTTON === 'Y'" (click)="allowEdit('address')"> <ion-col size="2" *ngIf="addressSubMenu && addressSubMenu.ADD_BUTTON === 'Y'" (click)="allowEdit('address')">
<ion-icon class="add-icon-styling" name="add"></ion-icon> <ion-icon class="add-icon-styling" name="add"></ion-icon>
@ -205,34 +206,34 @@
</ion-grid> </ion-grid>
<br> <br>
<ion-label> <ion-label>
<h3 class="type-label-text-form">{{ts.trPK('userProfile','address')}}</h3> <h3 [ngClass]="direction === 'ltr'? 'type-label-text-form': 'type-label-text-form-ar' " >{{ts.trPK('userProfile','address')}}</h3>
</ion-label> </ion-label>
<h3 class="result-label-text-form">{{address}}</h3> <h3 [ngClass]="direction === 'ltr'? 'result-label-text-form': 'result-label-text-form-ar' " >{{address}}</h3>
<br> <br>
<ion-label> <ion-label>
<h3 class="type-label-text-form">{{ts.trPK('userProfile','street')}}</h3> <h3 [ngClass]="direction === 'ltr'? 'type-label-text-form': 'type-label-text-form-ar' " >{{ts.trPK('userProfile','street')}}</h3>
</ion-label> </ion-label>
<h3 class="result-label-text-form">{{street}}</h3> <h3 [ngClass]="direction === 'ltr'? 'result-label-text-form': 'result-label-text-form-ar' ">{{street}}</h3>
<br> <br>
<ion-label> <ion-label>
<h3 class="type-label-text-form">{{ts.trPK('userProfile','area')}}</h3> <h3 [ngClass]="direction === 'ltr'? 'type-label-text-form': 'type-label-text-form-ar' " >{{ts.trPK('userProfile','area')}}</h3>
</ion-label> </ion-label>
<h3 class="result-label-text-form">{{area}}</h3> <h3 [ngClass]="direction === 'ltr'? 'result-label-text-form': 'result-label-text-form-ar' " >{{area}}</h3>
<br> <br>
<ion-label> <ion-label>
<h3 class="type-label-text-form">{{ts.trPK('userProfile','p-o-box')}}</h3> <h3 [ngClass]="direction === 'ltr'? 'type-label-text-form': 'type-label-text-form-ar' " >{{ts.trPK('userProfile','p-o-box')}}</h3>
</ion-label> </ion-label>
<h3 class="result-label-text-form">{{poBox}}</h3> <h3 [ngClass]="direction === 'ltr'? 'result-label-text-form': 'result-label-text-form-ar' " >{{poBox}}</h3>
<br> <br>
<ion-label> <ion-label>
<h3 class="type-label-text-form">{{ts.trPK('userProfile','city')}}</h3> <h3 [ngClass]="direction === 'ltr'? 'type-label-text-form': 'type-label-text-form-ar' " >{{ts.trPK('userProfile','city')}}</h3>
</ion-label> </ion-label>
<h3 class="result-label-text-form">{{city}}</h3> <h3 [ngClass]="direction === 'ltr'? 'result-label-text-form': 'result-label-text-form-ar' " >{{city}}</h3>
<br> <br>
<ion-label> <ion-label>
<h3 class="type-label-text-form">{{ts.trPK('userProfile','postal-code')}}</h3> <h3 [ngClass]="direction === 'ltr'? 'type-label-text-form': 'type-label-text-form-ar' " >{{ts.trPK('userProfile','postal-code')}}</h3>
</ion-label> </ion-label>
<h3 class="result-label-text-form">{{postalCode}}</h3> <h3 [ngClass]="direction === 'ltr'? 'result-label-text-form': 'result-label-text-form-ar' " >{{postalCode}}</h3>
<br> <br>
</ion-card-content> </ion-card-content>
</ion-card> </ion-card>

@ -116,7 +116,8 @@ ion-thumbnail.menu-thumb {
// font-weight: bolder; // font-weight: bolder;
color: white; color: white;
// letter-spacing: 1px; // letter-spacing: 1px;
font-weight: bold; // font-weight: bold;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
} }
.services { .services {
font-size: 12px; font-size: 12px;
@ -279,14 +280,49 @@ ion-title {
} }
@media screen and (min-width: 768px) and (max-width: 1024px) { @media screen and (min-width: 768px) and (max-width: 1024px) {
.user-image { .user-image {
// position: relative;
// display: block;
// width: 30%;
// height: 100%;
// border-radius: 80px;
// margin-bottom: 371px;
position: relative;
display: block;
width: 30%;
height: 100%;
border-radius: 80px;
margin-bottom: 321px;
margin-left: 52px;
}
}
@media screen and (min-width: 1px) and (max-width: 767px) {
.user-image-ar {
position: relative; position: relative;
display: block; display: block;
width: 30%; width: 30%;
height: 100%; height: 100%;
border-radius: 80px; border-radius: 80px;
margin-bottom: 371px; /* border: 1px solid #ccc; */
margin-top: -125px;
} }
} }
@media screen and (min-width: 768px) and (max-width: 1024px) {
.user-image-ar {
// position: relative;
// display: block;
// width: 30%;
// height: 100%;
// border-radius: 80px;
// margin-bottom: 371px;
position: relative;
display: block;
width: 30%;
height: 100%;
border-radius: 80px;
margin-bottom: 321px;
margin-right: 52px;
}}
h1 { h1 {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -977,33 +1013,70 @@ $actionBtnSize: 36px;
text-align: center; text-align: center;
width: 20px; width: 20px;
} }
@media screen and (min-width: 1px) and (max-width:766px){
.grid-card { .grid-card {
right: 5px; right: 5px;
position: relative; position: relative;
display: block; display: block;
z-index: 5; z-index: 5;
width: 103%; width: 103%;
} }}
@media screen and (min-width: 1px) and (max-width:766px){
.grid-card-ar { .grid-card-ar {
left: 5px; left: 5px;
position: relative; position: relative;
display: block; display: block;
z-index: 5; z-index: 5;
width: 103%; width: 103%;
} }}
@media screen and (min-width: 768px) and (max-width:1050px){
.grid-card {
right: 5px;
position: relative;
display: block;
z-index: 5;
width: 101%;
}}
@media screen and (min-width: 768px) and (max-width:1050px){
.grid-card-ar {
left: 5px;
position: relative;
display: block;
z-index: 5;
width: 101%;
}}
@media screen and (min-width: 1px) and (max-width:766px){
.changeImgBtn { .changeImgBtn {
position: absolute; position: absolute;
left: 60%; left: 60%;
bottom: 230%; bottom: 230%;
} display: flex;
.changeImgBtn-ar { }}
@media screen and (min-width: 768px) and (max-width:1050px){
.changeImgBtn {
position: absolute; position: absolute;
left: 60%; left: 55%;
bottom: 150%; display: flex;
} margin-bottom: 44%;
}}
@media screen and (min-width: 1px) and (max-width:766px){
.changeImgBtn-ar {
position: absolute;
left: 60%;
bottom: 150%;
display: flex;
}}
@media screen and (min-width: 768px) and (max-width:1050px){
.changeImgBtn-ar {
position: absolute;
left: 55%;
// margin-bottom: 15%;
display: flex;
margin-bottom: 44%;
}}
.menubutton { .menubutton {
background: #f0ecec; background: #f0ecec;
min-height: 25px; min-height: 25px;
@ -1041,8 +1114,10 @@ $actionBtnSize: 36px;
} }
.card-size-info-en{ .card-size-info-en{
width: 88%; // width: 88%;
left: 2%; // left: 2%;
width: 90%;
left: 3%;
} }
.card-size-info-ar{ .card-size-info-ar{
@ -1050,36 +1125,177 @@ $actionBtnSize: 36px;
right: 2%; right: 2%;
} }
.header-label-text-form{ // .header-label-text-form{
// opacity: 1;
// color: #2B353E;
// font: normal normal 600 20px/30px Poppins;
// letter-spacing: -0.8px;
// }
// .type-label-text-form{
// font: normal normal 600 13px/20px Poppins;
// letter-spacing: -0.52px;
// color: #A2A2A2;
// opacity: 1;
// }
// .result-label-text-form{
// font: normal normal 600 16px/25px Poppins;
// letter-spacing: -0.64px;
// color: #2B353E;
// opacity: 1;
// }
.update{
--background: #20A169; background: white; width: 100%;
}
.add{
--background: #00bcd4; background: white; width: 100%;
}
.add-icon-styling {
background-color: #191814;
width: 35px;
height: 35px;
color: white;
border-radius: 50%;
}
.name{
text-align: center;
letter-spacing: -0.84px;
color: #2B353E;
opacity: 1;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 21px;
font-size: 21px;
}
.email{
text-align: center;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-size: 13px;
line-height: 6px;
letter-spacing: -0.52px;
color: #A2A2A2;
opacity: 1;
}
.subTitle{
text-align: center;
letter-spacing: -0.52px;
color: #A2A2A2;
opacity: 1; opacity: 1;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-size: 13px;
line-height: 0px;
margin-bottom: 7px;
}
.boldText{
text-align: center;
letter-spacing: -0.64px;
color: #2B353E; color: #2B353E;
font: normal normal 600 20px/30px Poppins; opacity: 1;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-size: 16px;
line-height: 19px;
}
.btnTitle{
text-align: center;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 10px;
font-size: 11px;
color: #4D4D4D;
}
.Profileheader-label-text-form{
text-align: left;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 30px;
font-size: 20px;
letter-spacing: -0.8px; letter-spacing: -0.8px;
color: #2B353E;
opacity: 1;
margin-top: 12px;
margin-bottom: 2px;
} }
.header-label-text-form{
text-align: left;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 30px;
font-size: 20px;
letter-spacing: -0.8px;
color: #2B353E;
opacity: 1;
margin-top: -3px;
margin-bottom: 2px;
margin-left: -11px;}
.type-label-text-form{ .type-label-text-form{
font: normal normal 600 13px/20px Poppins; text-align: left;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 20px;
font-size: 13px;
letter-spacing: -0.52px; letter-spacing: -0.52px;
color: #A2A2A2; color: #A2A2A2;
opacity: 1; opacity: 1;
} }
.result-label-text-form{ .result-label-text-form{
font: normal normal 600 16px/25px Poppins; text-align: left;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 20px;
font-size: 16px;
letter-spacing: -0.64px; letter-spacing: -0.64px;
color: #2B353E; color: #2B353E;
opacity: 1; opacity: 1;
} }
.update{
--background: #20A169; background: white; width: 100%;
.Profileheader-label-text-form-ar{
text-align: right;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 30px;
font-size: 20px;
letter-spacing: -0.8px;
color: #2B353E;
opacity: 1;
margin-top: 12px;
margin-bottom: 2px;
} }
.add{
--background: #00bcd4; background: white; width: 100%; .header-label-text-form-ar{
text-align: right;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 30px;
font-size: 20px;
letter-spacing: -0.8px;
color: #2B353E;
opacity: 1;
margin-top: -3px;
margin-bottom: 2px;
margin-left: -11px;}
.type-label-text-form-ar{
text-align: right;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 20px;
font-size: 13px;
letter-spacing: -0.52px;
color: #A2A2A2;
opacity: 1;
} }
.add-icon-styling {
background-color: #191814; .result-label-text-form-ar{
width: 35px; text-align: right;
height: 35px; font-family: var(--fontFamilyPoppins-SemiBold, inherit);
color: white; line-height: 20px;
border-radius: 50%; font-size: 16px;
letter-spacing: -0.64px;
color: #2B353E;
opacity: 1;
} }

@ -1269,7 +1269,7 @@
}, },
"role": { "role": {
"en": "Role", "en": "Role",
"ar": "Role" "ar": "الدور الوظيفي"
}, },
"address": { "address": {
"en": "Address", "en": "Address",

Loading…
Cancel
Save