-add header with no search funcionality

- change header in home and chat
This commit is contained in:
tiago.kayaya
2021-01-29 11:28:26 +01:00
parent 076b614488
commit ba5baf3fe8
12 changed files with 202 additions and 24 deletions
@@ -0,0 +1,17 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HeaderNoSearchPage } from './header-no-search.page';
const routes: Routes = [
{
path: '',
component: HeaderNoSearchPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class HeaderNoSearchPageRoutingModule {}
@@ -0,0 +1,20 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { HeaderNoSearchPageRoutingModule } from './header-no-search-routing.module';
import { HeaderNoSearchPage } from './header-no-search.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
HeaderNoSearchPageRoutingModule
],
declarations: [HeaderNoSearchPage]
})
export class HeaderNoSearchPageModule {}
@@ -0,0 +1,25 @@
<ion-toolbar class="bg-blue">
<ion-grid>
<ion-row class="div-top-header ion-justify-content-between">
<ion-col>
<!-- <div (click)="openSearch()" class="div-search">
<ion-icon src='assets/images/icons-search.svg'></ion-icon>
</div> -->
</ion-col>
<ion-col>
<div class="div-logo">
<img src='assets/images/logo-no-bg.png' alt='logo'>
</div>
</ion-col>
<ion-col>
<div class="div-profile">
<ion-icon src='assets/images/icons-profile.svg'></ion-icon>
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-toolbar>
@@ -0,0 +1,32 @@
@import '~src/function.scss';
.div-top-header{
margin: 0 auto;
background-color: #0782c9;
overflow: auto;
padding-top: em(15px);
border: 0!important;
.div-search{
font-size: 45px;
margin: 0 0 0 10px
}
.div-logo{
background: transparent;
width: em(140px);
margin: 0px auto;
margin-top: 5px;
justify-content: center;
display: flex;
}
.div-logo img{
width: 100%;
margin: 0px auto;
}
.div-profile{
font-size: 45px;
margin-right: 10px;
justify-content: flex-end;
display: flex;
}
}
@@ -0,0 +1,24 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { HeaderNoSearchPage } from './header-no-search.page';
describe('HeaderNoSearchPage', () => {
let component: HeaderNoSearchPage;
let fixture: ComponentFixture<HeaderNoSearchPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ HeaderNoSearchPage ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(HeaderNoSearchPage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
@@ -0,0 +1,27 @@
import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { SearchPage } from 'src/app/pages/search/search.page';
@Component({
selector: 'app-header-no-search',
templateUrl: './header-no-search.page.html',
styleUrls: ['./header-no-search.page.scss'],
})
export class HeaderNoSearchPage implements OnInit {
constructor(private modalController: ModalController) { }
ngOnInit() {
}
async openSearch() {
const modal = await this.modalController.create({
component: SearchPage,
cssClass: 'group-messages',
componentProps: {
}
});
return await modal.present();
}
}
+7 -3
View File
@@ -7,6 +7,7 @@ import { HeaderPrPage } from './header-pr/header-pr.page';
import { BtnSeguintePage } from './btn-seguinte/btn-seguinte.page';
import { BtnModalDismissPage } from './btn-modal-dismiss/btn-modal-dismiss.page';
import { ChatPopoverPage } from './popover/chat-popover/chat-popover.page';
import { HeaderNoSearchPage } from './headers/header-no-search/header-no-search.page';
@NgModule({
imports: [
@@ -16,13 +17,16 @@ import { ChatPopoverPage } from './popover/chat-popover/chat-popover.page';
],
exports: [
HeaderPage,
HeaderPrPage,
HeaderPrPage,
HeaderNoSearchPage,
BtnSeguintePage,
BtnModalDismissPage,
],
entryComponents:[],
declarations: [HeaderPage,
HeaderPrPage,
declarations: [
HeaderPage,
HeaderPrPage,
HeaderNoSearchPage,
BtnSeguintePage,
BtnModalDismissPage,
]