style chat-contacts-list page

src/app/app-routing.module.ts

@@ -29,6 +29,10 @@ const routes: Routes = [
   {
     path: 'header-pr',
     loadChildren: () => import('./shared/header-pr/header-pr.module').then( m => m.HeaderPrPageModule)
+  },
+  {
+    path: 'btn-seguinte',
+    loadChildren: () => import('./shared/btn-seguinte/btn-seguinte.module').then( m => m.BtnSeguintePageModule)
   },
 
 

src/app/pages/chat/new-group/contacts/contacts.module.ts

@@ -7,12 +7,14 @@ import { IonicModule } from '@ionic/angular';
 import { ContactsPageRoutingModule } from './contacts-routing.module';
 
 import { ContactsPage } from './contacts.page';
+import { SharedModule } from 'src/app/shared/shared.module';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
+    SharedModule,
     ContactsPageRoutingModule
   ],
   declarations: [ContactsPage]

src/app/pages/chat/new-group/contacts/contacts.page.html

@@ -1,9 +1,57 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>contacts</ion-title>
+<ion-header  class="ion-no-border">
+  <ion-toolbar class="header-toolbar">
+    <div class="main-header">
+      <div class="title-content">
+        <div class="back-icon">
+          <ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+        </div>
+        <div class="div-title">
+          <ion-label class="title">Contactos</ion-label>
+        </div>
+        <app-btn-seguinte (click)="clicked()"></app-btn-seguinte>
+      </div>
+    </div>
+  </ion-toolbar>
+  <ion-toolbar class="header-search">
+    <ion-searchbar (ionChange)="onChange($event)" placeholder="Pesquisar por cantacto" ></ion-searchbar>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
+  <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
+      <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+      <ion-refresher-content>
+      </ion-refresher-content>
+    </ion-refresher>
+  <div class="main-content">
+    
+    <ion-list>
+      <!-- <ion-item *ngFor="let user of searchedItem">
+        {{user.name}}
+      </ion-item> -->
+      <div class="ion-no-padding item-checkbox no-inner-padding" lines="none">
+        <ion-checkbox color="primary"></ion-checkbox>
+        <p>Tiago Kayaya</p>
+      </div>
+      <div class="ion-no-padding item-checkbox no-inner-padding" lines="none">
+        <ion-checkbox color="primary"></ion-checkbox>
+        <p>Gilson Manuel</p>
+        <ion-icon name="ellipse"></ion-icon>
+      </div>
+    </ion-list>
+    <!-- <ion-alpha-scroll
+        [listData]="contacts"
+        key="name"
+        [itemTemplate]="alphaScrollItemTemplateRef"
+        [currentPageClass]="currentPageClass"
+        [triggerChange]="triggerAlphaScrollChange">
 
+          <ng-template #alphaScrollItemTemplateRef let-item>
+            <ion-item (click)="currentPageClass.onItemClick(item)">{{item.$t}}</ion-item>
+          </ng-template>
+
+      </ion-alpha-scroll> -->
+  </div>    
 </ion-content>
+
+

src/app/pages/chat/new-group/contacts/contacts.page.scss

@@ -0,0 +1,102 @@
+ion-content{
+    --background:transparent;
+}
+.header-toolbar{
+   --background:transparent;
+   --opacity: 1;
+
+  .main-header{
+    width: 100%; /* 400px */
+    height: 100%;
+    font-family: Roboto;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+    background-color: #fff;
+    overflow:hidden;
+    padding: 30px 20px 0px 20px;
+    color:#000;
+    transform: translate3d(0, 1px, 0);
+
+    .div-icon{
+      width: 40px;
+      float: right;
+      font-size: 35px;
+      overflow: auto;
+      padding: 1px;
+    }
+    .div-icon ion-icon{
+      float: right;
+      padding-left: 20px;
+    }
+      .title-content{
+        width: 360px;
+        margin: 0px auto;
+        overflow: auto;
+        padding: 0 !important;
+      }
+    
+    .back-icon{
+      width: 37px;
+      float: left;
+      font-size: 35px;
+      overflow: auto;
+        
+      }
+    .div-title{
+        width: 221px;
+        padding: 0!important;
+        float: left;
+        margin: 2.5px 0 0 5px;
+    }
+    .title{
+        font-size: 25px;
+    }
+  }
+}
+  .main-content{
+    width: 360px;
+    height: 100%;
+    font-family: Roboto;
+    margin: 0 auto;
+    background-color: #fff;
+    overflow:auto;
+    padding: 0 20px 0 20px;
+
+    .item-checkbox{
+        width: 100%;
+        margin: 15px 0 15px 0;
+        overflow: auto;
+    }
+
+    .item-checkbox ion-checkbox{
+        --border-color: #0d89d1;
+        --background-checked:#0d89d1;
+        float: left;
+    }
+
+    .item-checkbox p{
+        display: block;
+        margin: 0 !important;
+        width: 270px;
+        padding-left: 10px;
+        font-size: 15px;
+        color: #0d89d1;
+        float: left;
+    }
+    .item-checkbox ion-icon{
+        float: left;
+        color:#99e47b;
+    }
+  }
+  .header-search{
+      margin-top: 15px;
+
+    ion-searchbar{
+        width: 380px;
+        margin: 0px auto;
+        --border-radius: 5px;
+        --box-shadow: /* inset */ .5px .5px 5px #ebebeb;
+        overflow: auto;
+        --icon-color:#0d89d1;
+    }
+  }

src/app/pages/chat/new-group/contacts/contacts.page.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { ModalController } from '@ionic/angular';
 
 @Component({
   selector: 'app-contacts',
@@ -6,10 +7,29 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./contacts.page.scss'],
 })
 export class ContactsPage implements OnInit {
+  showLoader: boolean;
 
-  constructor() { }
+  constructor(
+    private modalController: ModalController, 
+  ) { 
+    
+  }
 
   ngOnInit() {
+
+  }
+  doRefresh(event){
+
+  }
+  close(){
+    this.modalController.dismiss();
+  }
+  onChange(event){
+
+  }
+  clicked(){
+    console.log('clicked');
+    
   }
 
 }

src/app/pages/chat/new-group/new-group.module.ts

@@ -7,12 +7,14 @@ import { IonicModule } from '@ionic/angular';
 import { NewGroupPageRoutingModule } from './new-group-routing.module';
 
 import { NewGroupPage } from './new-group.page';
+import { SharedModule } from 'src/app/shared/shared.module';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
+    SharedModule,
     NewGroupPageRoutingModule
   ],
   declarations: [NewGroupPage]

src/app/pages/chat/new-group/new-group.page.html

@@ -8,9 +8,10 @@
         <div class="middle">
           <ion-label class="title">Novo Grupo</ion-label>
         </div>
-        <div class="right">
+        <!-- <div class="right" (click)="addContacts()">
           <ion-label>Seguinte</ion-label>
-        </div>
+        </div> -->
+        <app-btn-seguinte (click)="addContacts()"></app-btn-seguinte>
       </div>
     </div>
   </ion-toolbar>

src/app/pages/chat/new-group/new-group.page.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ModalController } from '@ionic/angular';
+import { ContactsPage } from './contacts/contacts.page';
 
 @Component({
   selector: 'app-new-group',
@@ -12,7 +13,7 @@ export class NewGroupPage implements OnInit {
   constructor(
     private modalController: ModalController, 
   ) { 
-    
+
   }
 
   ngOnInit() {
@@ -22,4 +23,17 @@ export class NewGroupPage implements OnInit {
     this.modalController.dismiss();
   }
 
+  async addContacts(){
+    const modal = await this.modalController.create({
+      component: ContactsPage,
+      componentProps: {}, 
+      cssClass: 'contacts',
+      backdropDismiss: false
+    });
+
+    await modal.present();
+
+    modal.onDidDismiss();
+  }
+
 }

src/app/pages/chat/newchat/newchat.page.scss

@@ -4,36 +4,7 @@ ion-content{
 .header-toolbar{
    --background:transparent;
    --opacity: 1;
-}
-.div-top-header{
-    width: 400px;
-    margin: 0 auto;
-    background-color: #0782c9;
-    overflow: auto;
-    padding-top: 15px;
-    border: 0!important;
 
-    .div-search{
-      font-size: 45px;
-      float: left;
-      margin: 0 0 0 10px
-    }
-    .div-logo{
-      background: transparent;
-      width: 140px;
-      margin: 5px 0 0px 71px;
-      float: left;
-    }
-    .div-logo img{
-      width: 100%;
-    }
-    .div-profile{
-      font-size: 45px;
-      float: right;
-      margin-right: 10px;
-    }
-    
-  }
   .main-header{
     width: 100%; /* 400px */
     height: 100%;
@@ -45,21 +16,7 @@ ion-content{
     padding: 30px 20px 0px 20px;
     color:#000;
     transform: translate3d(0, 1px, 0);
-    
-    .title-content{
-      width: 360px;
-      margin: 0px auto;
-      overflow: auto;
-      padding: 0 !important;
-      background: #fff;
-    }
-    .div-title{
-      padding: 0!important;
-      float: left;
-    }
-    .title{
-      font-size: 25px;
-    }
+
     .div-icon{
       width: 40px;
       float: right;
@@ -70,35 +27,7 @@ ion-content{
     .div-icon ion-icon{
       float: right;
       padding-left: 20px;
-    }.main-content{
-        width: 100%; /* 400px */
-        height: 100%;
-        font-family: Roboto;
-        margin: 0 auto;
-        background-color: #fff;
-        overflow:auto;
-        padding: 15px 20px 0 20px;
-      }
-      .content-top{
-        width: 344px;
-        background: #f3f2f2;
-        height: 20px;
-        margin: 0 auto;
-        border-top-left-radius: 25px;
-        border-top-right-radius: 25px;
-        transform: translate3d(0, 1px, 0);
     }
-      .content-container{
-        width: 100%;
-        margin:0 auto;
-        border-top-left-radius: 25px;
-        border-top-right-radius: 25px;
-        background: #ffffff;
-        height: 100%;
-        box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.6);
-        padding: 25px 0px 0 0px;
-        overflow: auto;
-      }
       .title-content{
         width: 360px;
         margin: 0px auto;
@@ -106,22 +35,32 @@ ion-content{
         padding: 0 !important;
       }
     
-      .back-icon{
-        width: 37px;
-        float: left;
-        font-size: 35px;
-        overflow: auto;
+    .back-icon{
+      width: 37px;
+      float: left;
+      font-size: 35px;
+      overflow: auto;
         
       }
-      .div-title{
-          width: 221px;
-        /* padding: 0!important; */
+    .div-title{
+        width: 221px;
+        padding: 0!important;
         float: left;
         margin: 2.5px 0 0 5px;
-      }
-      .title{
+    }
+    .title{
         font-size: 25px;
-      }
+    }
+  }
+}
+  .main-content{
+    width: 100%; /* 400px */
+    height: 100%;
+    font-family: Roboto;
+    margin: 0 auto;
+    background-color: #fff;
+    overflow:auto;
+    padding: 15px 20px 0 20px;
   }
 ion-searchbar{
     --border-radius: 20px;

src/app/shared/btn-seguinte/btn-seguinte-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { BtnSeguintePage } from './btn-seguinte.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: BtnSeguintePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class BtnSeguintePageRoutingModule {}

src/app/shared/btn-seguinte/btn-seguinte.module.ts

@@ -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 { BtnSeguintePageRoutingModule } from './btn-seguinte-routing.module';
+
+import { BtnSeguintePage } from './btn-seguinte.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    BtnSeguintePageRoutingModule
+  ],
+  declarations: [BtnSeguintePage]
+})
+export class BtnSeguintePageModule {}

src/app/shared/btn-seguinte/btn-seguinte.page.html

@@ -0,0 +1,3 @@
+<div class="right">
+  <ion-label>Seguinte</ion-label>
+</div>

src/app/shared/btn-seguinte/btn-seguinte.page.scss

@@ -0,0 +1,7 @@
+.right{
+    padding: 0!important;
+    float: right;
+    font-size: 15px;
+    color: #0782c9;
+    margin: 8px 0 0 5px;
+  }

src/app/shared/btn-seguinte/btn-seguinte.page.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { BtnSeguintePage } from './btn-seguinte.page';
+
+describe('BtnSeguintePage', () => {
+  let component: BtnSeguintePage;
+  let fixture: ComponentFixture<BtnSeguintePage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BtnSeguintePage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BtnSeguintePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/btn-seguinte/btn-seguinte.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-btn-seguinte',
+  templateUrl: './btn-seguinte.page.html',
+  styleUrls: ['./btn-seguinte.page.scss'],
+})
+export class BtnSeguintePage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/shared/shared.module.ts

@@ -4,6 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { IonicModule } from '@ionic/angular';
 import { HeaderPage } from './header/header.page';
 import { HeaderPrPage } from './header-pr/header-pr.page';
+import { BtnSeguintePage } from './btn-seguinte/btn-seguinte.page';
 
 @NgModule({
   imports: [
@@ -11,8 +12,15 @@ import { HeaderPrPage } from './header-pr/header-pr.page';
     FormsModule,
     IonicModule,
   ],
-  exports: [HeaderPage, HeaderPrPage],
+  exports: [
+    HeaderPage, 
+    HeaderPrPage, 
+    BtnSeguintePage,
+  ],
   entryComponents:[],
-  declarations: [HeaderPage, HeaderPrPage]
+  declarations: [HeaderPage, 
+    HeaderPrPage, 
+    BtnSeguintePage,
+  ]
 })
 export class SharedModule {}

src/theme/variables.scss

@@ -263,7 +263,7 @@
   padding: 25px;
   background: rgba(51, 51, 51, 0.3); 
 }
-.newchat, .new-group{
+.newchat, .new-group, .contacts{
   padding-top: 73px;
   --border-radius: 25px 25px 0 0;
   --border-width:0px;