mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-19 04:57:52 +00:00
add messages page and style
This commit is contained in:
tiago.kayaya
@@ -0,0 +1,17 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { MessagesPage } from './messages.page';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: MessagesPage
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class MessagesPageRoutingModule {}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { MessagesPageRoutingModule } from './messages-routing.module';
|
||||
|
||||
import { MessagesPage } from './messages.page';
|
||||
import { SharedModule } from 'src/app/shared/shared.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
SharedModule,
|
||||
MessagesPageRoutingModule
|
||||
],
|
||||
declarations: [MessagesPage]
|
||||
})
|
||||
export class MessagesPageModule {}
|
||||
@@ -0,0 +1,108 @@
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="header-toolbar">
|
||||
<div class="main-header">
|
||||
<div class="header-top">
|
||||
<app-btn-modal-dismiss></app-btn-modal-dismiss>
|
||||
<div class="middle">
|
||||
<ion-label class="title">Bruno Faria</ion-label>
|
||||
<span><ion-icon class="user-status-online" name="ellipse"></ion-icon></span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<ion-icon (click)="openMessagesOptions()" src="assets/images/icons-menu.svg"></ion-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-bottom" (click)="addContacts()">
|
||||
<div class="header-bottom-icon">
|
||||
<ion-icon src="assets/icon/icons-user.svg"></ion-icon>
|
||||
</div>
|
||||
<div class="header-bottom-contacts">
|
||||
<ion-label class="text-color-blue">Adicionar contacto</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<div class="messages">
|
||||
<div class="incoming">
|
||||
<div class="title">
|
||||
<ion-label>Secretário Assuntos sociais</ion-label>
|
||||
<span class="time">14:23</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src='assets/images/1.jpg' tappable>
|
||||
<ion-label hidden >Investidura Filipe Nyusi</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="incoming">
|
||||
<div class="title">
|
||||
<ion-label>Secretário Assuntos sociais</ion-label>
|
||||
<span class="time">14:23</span>
|
||||
</div>
|
||||
<div>
|
||||
<ion-label>Caros colegas, partilho o momento de confraternização do presidente Filipe Nyusi e de dua excelência, o presidente da república</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="incoming">
|
||||
<div class="title">
|
||||
<ion-label>Presidente da República</ion-label>
|
||||
<span class="time">14:23</span>
|
||||
</div>
|
||||
<div>
|
||||
<ion-label>Pois é, momentos históricos</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outgoing">
|
||||
<div class="title">
|
||||
<ion-label>Ministro do interior</ion-label>
|
||||
<span class="time">16:23</span>
|
||||
</div>
|
||||
<div>
|
||||
<ion-label>Grande momento</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="incoming">
|
||||
<div class="title">
|
||||
<ion-label>Secretário Assuntos sociais</ion-label>
|
||||
<span class="time">14:23</span>
|
||||
</div>
|
||||
<div>
|
||||
<ion-label>Caros colegas, partilho o momento de confraternização do presidente Filipe Nyusi e de dua excelência, o presidente da república</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outgoing">
|
||||
<div class="title">
|
||||
<ion-label>Secretário Assuntos sociais</ion-label>
|
||||
<span class="time">14:23</span>
|
||||
</div>
|
||||
<div>
|
||||
<ion-label>Caros colegas, partilho o momento de confraternização do presidente Filipe Nyusi e de dua excelência, o presidente da república</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
<ion-footer>
|
||||
<ion-toolbar>
|
||||
<ion-row align-items-center class="row">
|
||||
<ion-col size="1">
|
||||
<ion-label class="ion-no-padding" lines="none">
|
||||
<ion-icon (click)="openChatOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
|
||||
</ion-label>
|
||||
</ion-col>
|
||||
<ion-col size="9">
|
||||
<ion-item class="ion-no-padding type-message" lines="none">
|
||||
<ion-textarea placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
|
||||
<ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
|
||||
</ion-item>
|
||||
</ion-col>
|
||||
<ion-col size="2">
|
||||
<!-- [disabled]="message === ''" -->
|
||||
<ion-label>
|
||||
<ion-icon class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
|
||||
</ion-label>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
@@ -0,0 +1,166 @@
|
||||
@import '~src/function.scss';
|
||||
.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);
|
||||
|
||||
.header-top{
|
||||
width: 360px;
|
||||
margin: 0px auto;
|
||||
overflow: auto;
|
||||
padding: 0 !important;
|
||||
background: #fff;
|
||||
.middle{
|
||||
padding: 0!important;
|
||||
float: left;
|
||||
width: 280px;
|
||||
margin: 2.5px 0 0 5px;
|
||||
}
|
||||
.right{
|
||||
padding: 0!important;
|
||||
float: right;
|
||||
font-size: 25px;
|
||||
color: #0782c9;
|
||||
margin: 5px 0 0 0;
|
||||
}
|
||||
}
|
||||
.header-bottom{
|
||||
width: 310px;
|
||||
overflow: auto;
|
||||
margin: 0 auto;
|
||||
|
||||
.header-bottom-icon{
|
||||
width: 30px;
|
||||
font-size: 25px;
|
||||
float: left;
|
||||
padding: 2px;
|
||||
|
||||
}
|
||||
.header-bottom-contacts{
|
||||
width: 275px;
|
||||
font-size: 15px;
|
||||
color: #797979;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
float: left;
|
||||
padding: 5px;
|
||||
margin: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
ion-content{
|
||||
.welcome-text{
|
||||
/* width: 322px; */
|
||||
width: em(422px);
|
||||
background: #ebebeb;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: #797979;
|
||||
padding: 10px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.2rem;
|
||||
margin: 20px 39px 25px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.messages{
|
||||
font-size: 13px;
|
||||
font-family: Roboto;
|
||||
overflow: auto;
|
||||
|
||||
.incoming, .outgoing{
|
||||
width: 305px;
|
||||
padding: 15px 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.incoming{
|
||||
margin: 10px 75px 10px 20px;
|
||||
background: #ebebeb;
|
||||
float: left;
|
||||
|
||||
}
|
||||
}
|
||||
.outgoing{
|
||||
margin: 10px 20px 10px 75px;
|
||||
background: #e4f4fe;
|
||||
float: right;
|
||||
}
|
||||
.title{
|
||||
display: inline;
|
||||
color: #0782c9;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.time{
|
||||
color: #797979;
|
||||
text-align: right;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ion-footer{
|
||||
.row{
|
||||
width: 380px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.chat-icon-options{
|
||||
display:block !important;
|
||||
font-size: 25px;
|
||||
float: right !important;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.chat-icon-send{
|
||||
font-size: 45px;
|
||||
margin: 0 auto;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
ion-col .type-message{
|
||||
border: 1px solid #ebebeb;
|
||||
border-radius: 25px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.text-color-blue{
|
||||
font-size: 15px;
|
||||
color: #0782c9;
|
||||
font-weight: 500;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
.user-status-online{
|
||||
display: block;
|
||||
float: left;
|
||||
color:#99e47b;
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { MessagesPage } from './messages.page';
|
||||
|
||||
describe('MessagesPage', () => {
|
||||
let component: MessagesPage;
|
||||
let fixture: ComponentFixture<MessagesPage>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ MessagesPage ],
|
||||
imports: [IonicModule.forRoot()]
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(MessagesPage);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
}));
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,55 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ModalController, PopoverController } from '@ionic/angular';
|
||||
import { ChatOptionsPopoverPage } from 'src/app/shared/popover/chat-options-popover/chat-options-popover.page';
|
||||
import { MessagesOptionsPage } from 'src/app/shared/popover/messages-options/messages-options.page';
|
||||
import { ContactsPage } from '../new-group/contacts/contacts.page';
|
||||
|
||||
@Component({
|
||||
selector: 'app-messages',
|
||||
templateUrl: './messages.page.html',
|
||||
styleUrls: ['./messages.page.scss'],
|
||||
})
|
||||
export class MessagesPage implements OnInit {
|
||||
|
||||
constructor(
|
||||
public popoverController: PopoverController,
|
||||
private modalController: ModalController,
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
async openMessagesOptions(ev: any) {
|
||||
const popover = await this.popoverController.create({
|
||||
component: MessagesOptionsPage,
|
||||
cssClass: 'messages-options',
|
||||
event: ev,
|
||||
translucent: true
|
||||
});
|
||||
return await popover.present();
|
||||
}
|
||||
|
||||
async addContacts(){
|
||||
const modal = await this.modalController.create({
|
||||
component: ContactsPage,
|
||||
componentProps: {},
|
||||
cssClass: 'contacts',
|
||||
backdropDismiss: false
|
||||
});
|
||||
|
||||
await modal.present();
|
||||
|
||||
modal.onDidDismiss();
|
||||
}
|
||||
|
||||
async openChatOptions(ev: any) {
|
||||
const popover = await this.popoverController.create({
|
||||
component: ChatOptionsPopoverPage,
|
||||
cssClass: 'chat-options-popover',
|
||||
event: ev,
|
||||
translucent: true
|
||||
});
|
||||
return await popover.present();
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user