contacts page style finished

src/app/models/contact.model.ts

@@ -0,0 +1,5 @@
+interface Contact {
+    first: string;
+    last: string;
+    url: string;
+  }

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

@@ -26,6 +26,9 @@
             float: left;
             width: 280px;
             margin: 2.5px 0 0 5px;
+            display: flex;
+            align-items: center;
+            
           }
           .right{
             padding: 0!important;
@@ -62,6 +65,8 @@
     
         .title{
           font-size: 25px;
+          overflow: auto;
+          float: left;
         }
         .div-icon{
           width: 40px;
@@ -160,7 +165,8 @@
     letter-spacing: normal;
  }
  .user-status-online{
-     display: block;
+    display: block;
     float: left;
     color:#99e47b;
+    padding-left: 10px;
  }

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

@@ -12,8 +12,10 @@
       </div>
     </div>
   </ion-toolbar>
-  <ion-toolbar class="header-search">
-    <ion-searchbar (ionChange)="onChange($event)" placeholder="Pesquisar por cantacto" ></ion-searchbar>
+  <ion-toolbar class="toolbar-search">
+    <div class="search">
+      <ion-searchbar (ionChange)="onChange($event)" placeholder="Pesquisar por cantacto" ></ion-searchbar>
+    </div>
   </ion-toolbar>
 </ion-header>
 
@@ -25,32 +27,29 @@
     </ion-refresher>
   <div class="main-content">
     
-    <ion-list>
-      <!-- <ion-item *ngFor="let user of searchedItem">
+    <!-- <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>
+      </ion-item>
+    </ion-list> -->
+
+    <ion-virtual-scroll [items]="users" approxItemHeight="70px" [headerFn]="separateLetter">
+  
+      <div class="item-divider" *virtualHeader="let header">
+        <ion-label>{{header}}</ion-label>
       </div>
-      <div class="ion-no-padding item-checkbox no-inner-padding" lines="none">
+
+      <div *virtualItem="let user" class="item-checkbox">
         <ion-checkbox color="primary"></ion-checkbox>
-        <p>Gilson Manuel</p>
+         <p>{{user.first}} {{user.last}}</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-virtual-scroll>
+
+
+
     
-      </ion-alpha-scroll> -->
   </div>    
 </ion-content>
 

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

@@ -1,6 +1,4 @@
-ion-content{
-    --background:transparent;
-}
+
 .header-toolbar{
    --background:transparent;
    --opacity: 1;
@@ -53,19 +51,55 @@ ion-content{
     }
   }
 }
-  .main-content{
-    width: 360px;
-    height: 100%;
-    font-family: Roboto;
-    margin: 0 auto;
-    background-color: #fff;
-    overflow:auto;
-    padding: 0 20px 0 20px;
+.toolbar-search{
+  --padding-top:0 !important;
+  --padding-bottom:0 !important;
+  --padding-start:0 !important;
+  --padding-end:0 !important;
+  
+  .search{
+    border: 1px solid #ebebeb;
+    margin: 5px 20px 5px 20px;
+    border-radius: 5px;
+  }
+  .search ion-searchbar{
+    /* border: 1px solid green; */
+    width: 100%;
+    margin: 0 !important;
+    padding: 0 !important;
+    --border-radius: 5px;
+    --box-shadow: none;
+    overflow: auto;
+    --icon-color:#0d89d1;
+  }
+
+}
+ion-content{
+  --background:transparent;
+}
+.main-content{
+  width: 100%;
+  height: 100%;
+  font-family: Roboto;
+  margin: 0 auto;
+  background-color: #fff;
+  overflow:auto;
+  padding: 0 0 0 0;
+
+    .item-divider{
+      background: #ebebeb;
+      font-size: 15px;
+      margin: 10px 0 10px 0;
+      padding:5px 0 5px 20px;
+ 
+    }
 
     .item-checkbox{
-        width: 100%;
-        margin: 15px 0 15px 0;
-        overflow: auto;
+      display: flex;
+      margin: 10px 20px 10px 20px !important;
+      overflow: auto;
+      align-items: center;
+
     }
 
     .item-checkbox ion-checkbox{
@@ -77,26 +111,17 @@ ion-content{
     .item-checkbox p{
         display: block;
         margin: 0 !important;
-        width: 270px;
+        width: 330px;
         padding-left: 10px;
         font-size: 15px;
         color: #0d89d1;
         float: left;
     }
     .item-checkbox ion-icon{
-        float: left;
-        color:#99e47b;
+      font-size: 10px;
+      float: left;
+      color:#99e47b;
+      margin-left: 10px;
     }
   }
-  .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,3 +1,4 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { ModalController } from '@ionic/angular';
 import { GroupMessagesPage } from '../../group-messages/group-messages.page';
@@ -9,16 +10,119 @@ import { GroupMessagesPage } from '../../group-messages/group-messages.page';
 })
 export class ContactsPage implements OnInit {
   showLoader: boolean;
+  users = [];
+
+  contact: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"];
+
+  headers: HttpHeaders;
+  options:any;
+
+  contacts: Contact[] = [
+    {
+      first: 'Ana',
+      last: 'Manuel',
+      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
+    },
+    {
+      first: 'Abdullah',
+      last: 'Hill',
+      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
+    },
+    {
+      first: 'Batur',
+      last: 'Oymen',
+      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
+    },
+    {
+      first: 'Bianca',
+      last: 'Costa',
+      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
+    },
+    {
+      first: 'Zaya',
+      last: 'Mary',
+      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
+    },
+    {
+      first: 'Tiago',
+      last: 'Kayaya',
+      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
+    }
+];
 
   constructor(
     private modalController: ModalController,
-  ) { 
+    private http: HttpClient,
+  ) 
+  { 
+    this.headers = new HttpHeaders();
+    this.headers = this.headers.set('Access-Control-Allow-Origin' , '*');
+    this.headers = this.headers.set('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
+    this.headers = this.headers.set('Accept','application/json');
+    this.headers = this.headers.set('content-type','application/json');
+        
     
   }
 
   ngOnInit() {
+    this.loadUsers();
 
   }
+
+  loadUsers(){
+    this.options = { 
+      headers: this.headers,
+    };
+    /* this.http.get('https://randomuser.me/api/?results=100', this.options)
+    .subscribe(res => {
+      this.users = res['results'].sort((a,b) => {
+        if(a.name.first < b.name.first){
+          return -1;
+        }
+        if(a.name.first > b.name.first){
+          return 1;
+        }
+        return 0;
+      });
+      console.log(res);
+      console.log(this.users);
+    }); */
+    this.users = this.contacts.sort((a,b) => {
+      if(a.first < b.first){
+        return -1;
+      }
+      if(a.first > b.first){
+        return 1;
+      }
+      return 0;
+    });
+  }
+
+  separateLetter(record, recordIndex, records){
+    /* if(recordIndex == 0){
+      return record.name.first[0];
+    }
+
+    let first_prev = records[recordIndex - 1].name.first[0];
+    let first_current = record.name.first[0];
+
+    if(first_prev != first_current){
+      return first_current;
+    }
+    return null; */
+    if(recordIndex == 0){
+      return record.first[0];
+    }
+
+    let first_prev = records[recordIndex - 1].first[0];
+    let first_current = record.first[0];
+
+    if(first_prev != first_current){
+      return first_current;
+    }
+    return null;
+  }
+
   doRefresh(event){
 
   }