fixed header issue in application

mekawy-issues
umasoodch 6 years ago
parent 4aea82cf7c
commit bcf8443157

@ -1,16 +1,21 @@
<ion-header >
<!-- <ion-header >
<ion-toolbar class="header-toolbar-new">
<ion-title color="light">{{ts.trPK('home','leave-balance')}}</ion-title>
<ion-buttons slot="start">
<nav-buttons></nav-buttons>
</ion-buttons>
</ion-buttons> -->
<!-- <ion-buttons slot="end">
<button class="headerBtn" (click)="AccrualBalances()">
<img class="headerImg" src="../assets/imgs/accubalance.png">
</button>
</ion-buttons> -->
</ion-toolbar>
</ion-header>
<!-- </ion-toolbar>
</ion-header> -->
<app-generic-header
showBack="true"
[headerText]="'home,leave-balance' | translate">
</app-generic-header>
<ion-content class="colorBG">

@ -1,11 +1,8 @@
<ion-header *ngIf="!accessFromOutSide">
<ion-toolbar class="header-toolbar-new">
<ion-buttons slot="start">
<nav-buttons [enableMenu]="false" [enableBack]="true" [navigate]="true"></nav-buttons>
</ion-buttons>
<ion-title color="light" > {{'login,verify-login' | translate}}</ion-title>
</ion-toolbar>
</ion-header>
<app-generic-header
*ngIf="!accessFromOutSide"
showBack="true"
[headerText]="'login,verify-login' | translate">
</app-generic-header>

@ -1,11 +1,7 @@
<ion-header>
<ion-toolbar class="header-toolbar-new">
<ion-buttons slot="start">
<nav-buttons [enableMenu]="false" [enableBack]="true" [navigate]="true"></nav-buttons>
</ion-buttons>
<ion-title color="light" > {{'verificationcode,verificationcode' | translate}}</ion-title>
</ion-toolbar>
</ion-header>
<app-generic-header
showBack="true"
[headerText]="'verificationcode,verificationcode' | translate">
</app-generic-header>
<ion-content padding>
<ion-grid>

@ -1,10 +1,7 @@
<ion-header>
<ion-toolbar class="header-toolbar-new">
<ion-title color="light">{{headerTitle}}</ion-title>
<nav-buttons [enableMenu]="false" [enableBack]="true" [navigate]="true"></nav-buttons>
</ion-toolbar>
</ion-header>
<app-generic-header
showBack="true"
[headerText]="headerTitle">
</app-generic-header>
<ion-content class="colorBG">
<div class="contentEit">

@ -1,14 +1,7 @@
<ion-header>
<ion-toolbar class="header-toolbar-new">
<ion-title color="light">{{headerTitle}}</ion-title>
<ion-buttons slot="start">
<!-- <ion-buttons [ngClass]="direction == 'rtl'? 'icon-right' : 'icon-left' "> -->
<nav-buttons backLink=""></nav-buttons>
</ion-buttons>
</ion-toolbar>
</ion-header>
<app-generic-header
showBack="true"
[headerText]="headerTitle">
</app-generic-header>
<ion-content>

@ -117,6 +117,8 @@ import { CircleCalendarComponent } from './ui/circle-calendar/circle-calendar.co
import { NgCalendarModule } from 'ionic2-calendar';
import { DateInfoModalComponent } from './ui/circle-calendar/date-info-modal/date-info-modal.component';
import { ChartModule } from 'primeng/chart';
import { GenericHeaderComponent } from './ui/generic-header/generic-header.component';
@NgModule({
imports: [
CommonModule,
@ -198,7 +200,8 @@ import { ChartModule } from 'primeng/chart';
ConfirmLoginComponent,
CircleCalendarComponent,
DateInfoModalComponent,
Modal
Modal,
GenericHeaderComponent
],
exports: [
FabButtonComponent,
@ -268,7 +271,8 @@ import { ChartModule } from 'primeng/chart';
NgCalendarModule,
ChartModule,
FileUploadModule,
Modal
Modal,
GenericHeaderComponent
],
providers: [
AttendScanService,

@ -0,0 +1,17 @@
<ion-header no-border>
<ion-toolbar class="header-toolbar-new">
<ion-row style="padding: 0; margin: 0;">
<ion-col [size]="2" style="padding: 0;">
<nav-buttons [enableMenu]="showMenu" [enableBack]="showBack" [navigate]="navigate" [backLink]="backLink"></nav-buttons>
</ion-col>
<ion-col [size]="8" style="padding: 0;" *ngIf="headerText != ''">
<span class="ion-title">{{headerText}}</span>
</ion-col>
<ion-col *ngIf="showImage" [size]="2" (click)="openProfilePage()" style="padding: 0;">
<div class="profile-image-container">
<img [src]="userImage"/>
</div>
</ion-col>
</ion-row>
</ion-toolbar>
</ion-header>

@ -0,0 +1,26 @@
.profile-image-container{
display: block;
margin: 7px auto 0;
width: 32px;
height: 32px;
border-radius: 100%;
overflow: hidden;
text-align: center;
img{
display: block;
margin: 0 auto;
max-width: 100%;
}
}
.ion-title{
color: white;
font-size: 0.5cm;
font-weight: bold;
font-family: WorkSans-Regular;
display: block;
text-align: center;
line-height: 46px;
}
.header-toolbar-new {
--background: #22c6b3;
}

@ -0,0 +1,27 @@
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { GenericHeaderComponent } from './generic-header.component';
describe('GenericHeaderComponent', () => {
let component: GenericHeaderComponent;
let fixture: ComponentFixture<GenericHeaderComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ GenericHeaderComponent ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(GenericHeaderComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

@ -0,0 +1,27 @@
import { Component, OnInit, Input } from '@angular/core';
import { CommonService } from '../../services/common/common.service';
@Component({
selector: 'app-generic-header',
templateUrl: './generic-header.component.html',
styleUrls: ['./generic-header.component.scss'],
})
export class GenericHeaderComponent implements OnInit {
@Input() userImage = '';
@Input() showImage = false;
@Input() showMenu = false;
@Input() showBack = false;
@Input() navigate = true;
@Input() headerText = '';
@Input() backLink: string;
constructor(public common: CommonService) { }
ngOnInit() {}
openProfilePage() {
this.common.openEditProfile();
}
}

@ -1,48 +1,8 @@
<ion-buttons slot="start">
<ion-menu-button (click)="onMenuClicked()" *ngIf="enableMenu"></ion-menu-button>
<!--
<ion-back-button *ngIf="enableBack" (click)="backButtonClicked($event)" ></ion-back-button>
-->
<!--
this is temporarly button should be deleted later when iconic route get stable
-->
<ion-button style="background: transparent;" *ngIf="enableBack" (click)="backButtonClicked($event)">
<ng-container *ngIf="direction">
<ion-icon slot="icon-only" [name]=" direction == 'ltr' ? 'arrow-back': 'arrow-forward' "></ion-icon>
</ng-container>
<!--
<p *ngIf="isIOS" class="slideInRight">{{'general,back'|translate}}</p>
-->
</ion-button>
</ion-buttons>
<!--
<ion-buttons slot="start" class="float-left">
<ion-menu-button (click)="onMenuClicked()" *ngIf="enableMenu"></ion-menu-button>
<ion-button *ngIf="enableBack" (click)="backButtonClicked($event)" >
<ion-icon slot="icon-only" name="arrow-back"></ion-icon>
<p *ngIf="isIOS" class="slideInRight">{{'general,back'|translate}}</p>
</ion-button>
</ion-buttons>
-->
</ion-buttons>

@ -5,4 +5,5 @@ ion-menu-button {
font-size: 0.8cm;
color: white;
background: #22c6b3;
margin: 0 auto;
}

@ -1,14 +1,10 @@
<ion-header>
<ion-toolbar class="header-toolbar-new">
<nav-buttons [enableMenu]="true" [enableBack]="false" [navigate]="false"></nav-buttons>
<ion-title>{{'home,dashboard' | translate}}</ion-title>
<div slot = "start" class="profile-image-container" (click)="openProfilePage()">
</div>
<div slot="end">
<img class="profile-image" [src]="userImage"/>
</div>
</ion-toolbar>
</ion-header>
<app-generic-header
[userImage]="userImage"
showImage="true"
showMenu="true"
[headerText]="'home,dashboard' | translate"
>
</app-generic-header>
<ion-content class="main-dashboard-container">
<ion-grid class="main-container contentBg">

@ -3,40 +3,6 @@ ion-row {
margin-top: 10px;
}
.header-toolbar-new{
--background: #22c6b3;
}
.profile-image-container{
position: relative;
z-index: 999;
// img {
// width: 32px;
// float: right;
// // margin-top: -42px;
// border-radius: 20px;
// height: 32px;
// // margin-right: 4px;
// }
}
.profile-image{
width: 32px;
float: right;
// margin-top: -42px;
border-radius: 20px;
height: 32px;
// margin-right: 4px;
}
ion-title{
color: white;
position: absolute;
top: 0;
text-align: center;
left: 4%;
right: 4%;
font-size: 0.42cm;
font-weight: bold;
height: 100%;
}
ion-label{
display: block;
color: black !important;

@ -151,20 +151,16 @@ export class HomePage implements OnInit {
}
ngOnInit() {
this.direction = TranslatorService.getCurrentLanguageName();
// this.getUserDetails();
// this.getCount();
// this.events.subscribe('getNotCount', badge => {
// this.notBadge = badge;
// });
this.myTeamTitle= this.ts.trPK('myTeam','myTeam-header');
this.vacationRuleTitle = this.ts.trPK('vacation-rule','vacationRule');
// this.myTeamIcon="assets/icon/new-design/leave_balance.png";
// this.vacationRuleIcon="assets/icon/new-design/vacation_rules_icon.png"
this.direction = TranslatorService.getCurrentLanguageName();
this.myTeamTitle = this.ts.trPK('myTeam', 'myTeam-header');
this.vacationRuleTitle = this.ts.trPK('vacation-rule', 'vacationRule');
this.common.startLoading();
this.menu.enable(true);
// this.getUserDetails();
// this.getCount();
this.events.subscribe('getNotCount', badge => {
this.notBadge = badge;
});
@ -685,11 +681,6 @@ openattentracking() {
this.common.openAttenTrackingpage();
}
openProfilePage() {
this.common.openEditProfile();
}
openStatsButton(link: any) {
// tslint:disable-next-line: triple-equals
if (link == '1') {

@ -1,12 +1,16 @@
<ion-header>
<!-- <ion-header>
<ion-toolbar class="header-toolbar-new">
<ion-title color="light">{{ts.trPK('myTeam','myTeam-header')}}</ion-title>
<ion-buttons slot="start">
<!-- <nav-buttons backLink="/home"></nav-buttons> -->
<nav-buttons></nav-buttons>
</ion-buttons>
</ion-toolbar>
</ion-header>
</ion-header> -->
<app-generic-header
showBack="true"
backLink="/home"
[headerText]="'myTeam, myTeam-header' | translate">
</app-generic-header>
<ion-content>
<div class="contentBg">

@ -1,11 +1,8 @@
<ion-header>
<ion-toolbar class="header-toolbar-new">
<ion-buttons slot="start">
<nav-buttons backLink="/home"></nav-buttons>
</ion-buttons>
<ion-title>{{ts.trPK('home','worklist')}}</ion-title>
</ion-toolbar>
</ion-header>
<app-generic-header
showBack="true"
backLink="/home"
[headerText]="'home, worklist' | translate">
</app-generic-header>
<ion-content>
<div class="contentBg">

@ -1,20 +1,7 @@
<!-- <ion-header>
<ion-toolbar class="header-toolbar">
<ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
</ion-buttons>
<ion-title color="light" >{{ts.trPK('payslip','title')}}</ion-title>
</ion-toolbar>
</ion-header> -->
<ion-header>
<ion-toolbar class="header-toolbar-new">
<nav-buttons [enableMenu]="false" [enableBack]="true" [navigate]="true"></nav-buttons>
<ion-title style="color: white;">{{ts.trPK('payslip','monthly-payslip')}}</ion-title>
</ion-toolbar>
</ion-header>
<app-generic-header
showBack="true"
[headerText]="'payslip,monthly-payslip' | translate">
</app-generic-header>
<ion-content class="colorBG">

@ -1,13 +1,7 @@
<ion-header>
<ion-toolbar class="header-toolbar-new">
<ion-title>{{ts.trPK('home','monthly-attendance')}}</ion-title>
<ion-buttons slot="start">
<!-- <nav-buttons backLink="/home"></nav-buttons> -->
<nav-buttons></nav-buttons>
</ion-buttons>
</ion-toolbar>
</ion-header>
<app-generic-header
showBack="true"
[headerText]="'home,monthly-attendance' | translate">
</app-generic-header>
<ion-content>
<div class="contentBg">

@ -1,14 +1,7 @@
<ion-header>
<ion-toolbar class="header-toolbar-new">
<!-- <nav-buttons></nav-buttons> -->
<ion-title color="light">{{ 'vacation-rule, vacationRule' | translate}}</ion-title>
<ion-buttons slot="start">
<!-- <ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button> -->
<nav-buttons></nav-buttons>
</ion-buttons>
</ion-toolbar>
</ion-header>
<app-generic-header
showBack="true"
[headerText]="'vacation-rule,vacationRule' | translate">
</app-generic-header>
<ion-content class="colorBG" padding>

@ -1319,7 +1319,6 @@ border:0px
}
.header-toolbar-new {
--background: #22c6b3;
background: #22c6b3;
}

Loading…
Cancel
Save