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-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>
|
||||
Loading…
Reference in New Issue