mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-20 13:26:08 +00:00
Add "new-group" and "contacts" pages
- Style new group page - Improve style in chat page
This commit is contained in:
tiago.kayaya
@@ -1,4 +1,4 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
@@ -15,6 +15,7 @@ import { NewchatPage } from './newchat.page';
|
||||
IonicModule,
|
||||
NewchatPageRoutingModule
|
||||
],
|
||||
declarations: [NewchatPage]
|
||||
declarations: [NewchatPage],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
||||
})
|
||||
export class NewchatPageModule {}
|
||||
|
||||
@@ -1,20 +1,51 @@
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button icon="chevron-back"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Nova Conversa</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">Nova Conversa</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-toolbar>
|
||||
<ion-searchbar round (ionChange)="onChange($event)" placeholder="Pesquisar por cantacto" ></ion-searchbar>
|
||||
</ion-toolbar>
|
||||
<ion-list>
|
||||
<ion-item *ngFor="let user of searchedItem" (click)="starConversation(user)">
|
||||
{{user.name}}
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
<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-toolbar>
|
||||
<ion-searchbar round (ionChange)="onChange($event)" placeholder="Pesquisar por cantacto" ></ion-searchbar>
|
||||
</ion-toolbar>
|
||||
<ion-list>
|
||||
<ion-item *ngFor="let user of searchedItem" (click)="starConversation(user)">
|
||||
{{user.name}}
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Tiago Kayaya
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Gilson Manuel
|
||||
</ion-item>
|
||||
</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>
|
||||
|
||||
|
||||
@@ -1,3 +1,128 @@
|
||||
ion-content{
|
||||
--background:transparent;
|
||||
}
|
||||
.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%;
|
||||
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);
|
||||
|
||||
.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;
|
||||
font-size: 35px;
|
||||
overflow: auto;
|
||||
padding: 1px;
|
||||
}
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
ion-searchbar{
|
||||
--border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,12 +11,27 @@ import { ConversationPage } from '../conversation/conversation.page';
|
||||
styleUrls: ['./newchat.page.scss'],
|
||||
})
|
||||
export class NewchatPage implements OnInit {
|
||||
showLoader: boolean;
|
||||
userList: any[];
|
||||
|
||||
contacts:any;
|
||||
currentPageClass = this;
|
||||
triggerAlphaScrollChange: number = 0;
|
||||
|
||||
constructor(
|
||||
private chatService: ChatService,
|
||||
private modalController: ModalController,
|
||||
private router:Router) { }
|
||||
private router:Router) {
|
||||
this.contacts = [
|
||||
{
|
||||
'name': 'Affenpinscher'
|
||||
},
|
||||
{
|
||||
'name': 'Afghan Hound'
|
||||
},
|
||||
// ...
|
||||
];
|
||||
}
|
||||
|
||||
result:any;
|
||||
searchCountryString:any;
|
||||
@@ -25,6 +40,16 @@ export class NewchatPage implements OnInit {
|
||||
ngOnInit() {
|
||||
this.getUsers();
|
||||
}
|
||||
close(){
|
||||
this.modalController.dismiss();
|
||||
}
|
||||
doRefresh(event) {
|
||||
this.getUsers();
|
||||
|
||||
setTimeout(() => {
|
||||
event.target.complete();
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
getUsers(){
|
||||
this.result = this.chatService.getAllUsers().subscribe((res:any)=>{
|
||||
@@ -60,6 +85,14 @@ export class NewchatPage implements OnInit {
|
||||
await modal.present();
|
||||
modal.onDidDismiss();
|
||||
}
|
||||
|
||||
|
||||
onItemClick(item) {
|
||||
// This is an example of how you could manually trigger ngOnChange
|
||||
// for the component. If you modify "listData" it won't perform
|
||||
// an ngOnChange, you will have to trigger manually to refresh the component.
|
||||
this.triggerAlphaScrollChange++;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user