peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-18 12:37:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

contacts page style finished

Browse Source
This commit is contained in:
tiago.kayaya
2020-12-31 11:37:35 +01:00
parent ebc7132a38
commit 24c39630fc
5 changed files with 191 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/models/contact.model.ts
+5
View File
@@ -0,0 +1,5 @@
interface Contact {
first: string;
last: string;
url: string;
}
src/app/pages/chat/messages/messages.page.scss
+7 -1
View File
@@ -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
+20 -21
View File
@@ -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">
</ion-virtual-scroll>
<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
+53 -28
View File
@@ -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
+106 -2
View File
@@ -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 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){
}