add new design for EIT & Absence subpage

MOHEMM-Q3-DEV-LATEST
Mohamed Mekawy 6 years ago
parent d1d3a307b7
commit c37d469ea7

@ -1,5 +1,5 @@
<ion-header> <ion-header>
<ion-toolbar class="header-toolbar"> <ion-toolbar class="header-toolbar-new">
<ion-title color="light">{{headerTitle}}</ion-title> <ion-title color="light">{{headerTitle}}</ion-title>
<ion-buttons slot="start"> <ion-buttons slot="start">
<nav-buttons backLink=""></nav-buttons> <nav-buttons backLink=""></nav-buttons>
@ -10,34 +10,40 @@
<ion-content padding> <ion-content>
<ion-list> <ion-list style="margin-top: 40px;border-top: 1px solid #c8c8c8;">
<ion-item lines="none" class="custCollabs ion-item-styling" *ngFor="let menuItem of menu; let i=index" <ion-item lines="none" class="custCollabs ion-item-styling" *ngFor="let menuItem of menu.children; let i=index"
(click)="openPage(menuItem, i);"> (click)="openPage(menuItem, i);">
<ion-row> <ion-row style="width: 100%;">
<!-- Parent Pages --> <!-- Parent Pages -->
<ion-col size="12" class="menu-name"> <ion-col size="12" class="">
<div [ngClass]="{'selectedDiv': selectedMenu == i,'notSelected': selectedMenu != i }"> <div [ngClass]="{'selectedDiv': selectedMenu == i,'notSelected': selectedMenu != i }">
<ion-text> <ion-label>
<b>{{menuItem.PROMPT}}</b> <b text-wrap>{{menuItem.PROMPT}}</b>
<ion-icon style="float: right;font-size: 25px;color: grey;" name="arrow-forward"></ion-icon>
</ion-label>
</ion-text>
</div> </div>
<!-- Child Pages --> <!-- Child Pages -->
<ion-list [hidden]="selectedMenu != i"> <ion-list [hidden]="selectedMenu != i" lines="full">
<ion-item lines="none" class="childItem" *ngFor="let subPage of menuItem.children;let i2=index" text-wrap <ion-item lines="full" class="" *ngFor="let subPage of menuItem.children;let i2=index" text-wrap
(click)="openPage(subPage)"> (click)="openPage(subPage)">
<ion-row> <!-- <ion-row>
<ion-col size="12" class="menu-name"><span ion-text color="color2">&nbsp;{{subPage.PROMPT}}</span> <ion-col size="10" class="menu-name"><span ion-text color="color2">&nbsp;{{subPage.PROMPT}} </span> -->
</ion-col> <ion-label><span ion-text color="color2">&nbsp;{{subPage.PROMPT}} </span>
</ion-row> <ion-icon style="float: right;font-size: 25px;color: grey;" name="arrow-forward"></ion-icon>
</ion-label>
<!-- </ion-col>
</ion-row> -->
</ion-item> </ion-item>
</ion-list> </ion-list>
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-icon [name]="selectedMenu == i? 'ios-arrow-down' : 'ios-arrow-forward'" <!-- <ion-icon [name]="selectedMenu == i? 'ios-arrow-down' : 'ios-arrow-forward'"
*ngIf="menuItem.children && menuItem.MENU_ENTRY_TYPE=='MENU'" slot="end" class="arrow-down"></ion-icon> *ngIf="menuItem.children && menuItem.MENU_ENTRY_TYPE=='MENU'" slot="end" class="arrow-down"></ion-icon> -->
</ion-item> </ion-item>
</ion-list> </ion-list>
</ion-content> </ion-content>

@ -4,16 +4,16 @@ ion-item.custCollabs.item.item-block.item-ios {
} }
.ion-item-styling { .ion-item-styling {
-webkit-box-shadow: 0px 2px 7px 0px #7f8c8d; color: black;
-moz-box-shadow: 0px 2px 7px 0px #7f8c8d;
box-shadow: 0px 2px 7px 0px #7f8c8d;
color: #209a83 !important;
border: 0px;
border-radius: 5px;
line-height: 2; line-height: 2;
margin: 8px 2px; margin: 8px 2px;
min-height: 40px; min-height: 40px;
background-color: #ffffff; background-color: #ffffff;
border-bottom: 1px solid #c8c8c8;
}
.header-toolbar-new{
--background: #22c6b3;
} }
ion-item.item.item-block { ion-item.item.item-block {

@ -21,7 +21,7 @@ export class HomeComponent implements OnInit {
this.menu = this.cs.sharedService.getSharedData('menuEntries', false); this.menu = this.cs.sharedService.getSharedData('menuEntries', false);
this.selMenu = this.cs.sharedService.getSharedData(MenuResponse.SHARED_DATA, false); this.selMenu = this.cs.sharedService.getSharedData(MenuResponse.SHARED_DATA, false);
const title: string = this.ts.trPK('eit', 'my-requests'); const title: string = this.ts.trPK('eit', 'my-requests');
this.headerTitle = this.selMenu.List_Menu.MENU_NAME ? this.selMenu.List_Menu.MENU_NAME : title; this.headerTitle = this.menu.PROMPT ? this.menu.PROMPT : title;
} }
ngOnInit() { } ngOnInit() { }
@ -40,6 +40,7 @@ export class HomeComponent implements OnInit {
this.selectedMenu = index; this.selectedMenu = index;
} }
} }
console.log("selected>>>>>>>"+this.selectedMenu);
} }
goToRequest(menuEntry) { goToRequest(menuEntry) {

@ -554,10 +554,13 @@ export class HomePage implements OnInit {
this.common.openAbsencePage(); this.common.openAbsencePage();
} else if (subMenu.REQUEST_TYPE === 'EIT') { } else if (subMenu.REQUEST_TYPE === 'EIT') {
this.common.openEitListPage(); this.common.openEitListPage();
} } else if (subMenu.REQUEST_TYPE === 'PAYSLIP') {
if (subMenu.REQUEST_TYPE === 'PAYSLIP') {
this.common.openPayslipPage(); this.common.openPayslipPage();
} else if (subMenu.MENU_ENTRY_TYPE === 'MENU') {
this.common.sharedService.setSharedData(selMenu.GetMenuEntriesList, "menuEntries");
this.common.openEITPage();
} }
} }
getAccrualBalance() { getAccrualBalance() {

Loading…
Cancel
Save