fixed header issue in application
parent
4aea82cf7c
commit
bcf8443157
@ -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-buttons slot="start">
|
||||||
<ion-menu-button (click)="onMenuClicked()" *ngIf="enableMenu"></ion-menu-button>
|
<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)">
|
<ion-button style="background: transparent;" *ngIf="enableBack" (click)="backButtonClicked($event)">
|
||||||
<ng-container *ngIf="direction">
|
<ng-container *ngIf="direction">
|
||||||
<ion-icon slot="icon-only" [name]=" direction == 'ltr' ? 'arrow-back': 'arrow-forward' "></ion-icon>
|
<ion-icon slot="icon-only" [name]=" direction == 'ltr' ? 'arrow-back': 'arrow-forward' "></ion-icon>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<!--
|
|
||||||
<p *ngIf="isIOS" class="slideInRight">{{'general,back'|translate}}</p>
|
|
||||||
-->
|
|
||||||
</ion-button>
|
</ion-button>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</ion-buttons>
|
</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>
|
|
||||||
|
|
||||||
|
|
||||||
-->
|
|
||||||
Loading…
Reference in New Issue