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

Style for popover in chat finished

Browse Source
This commit is contained in:
tiago.kayaya
2020-12-29 12:40:19 +01:00
parent 2ea9fc58e5
commit 0b4bef8eca
21 changed files with 374 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/chat/chat.page.html
+17 -1
View File
@@ -59,7 +59,23 @@
<p>Podemos marcar reunião para amanha</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="item-icon">
<ion-icon class="icon" slot="start" src="assets/images/icons-chat-chat-40.svg"></ion-icon>
</div>
<div class="item-content">
<div class="item-title-time">
<div class="item-title">
<ion-label>Secretário para o Sector Produtivo</ion-label>
</div>
<div class="item-date">Ontem</div>
</div>
<div class="item-description">
<p>Viva!</p>
</div>
</div>
</div>
</ion-item-sliding>
</ion-item-group>
</ion-list>
src/app/pages/chat/chat.page.ts
+2 -1
View File
@@ -24,7 +24,8 @@ export class ChatPage implements OnInit {
constructor(
private chatService: ChatService,
private modalController: ModalController,
private authService: AuthService) { }
private authService: AuthService
) { }
ngOnInit() {
this.segment = "Contactos";
src/app/pages/chat/group-messages/group-messages.page.html
+26 -15
View File
@@ -1,7 +1,7 @@
<ion-header class="ion-no-border">
<ion-toolbar class="header-toolbar">
<div class="main-header">
<div class="title-content">
<div class="header-top">
<app-btn-modal-dismiss></app-btn-modal-dismiss>
<div class="middle">
<ion-label class="title">Grupo de Trabalho A</ion-label>
@@ -10,36 +10,47 @@
<ion-icon (click)="openOptions()" src="assets/images/icons-menu.svg"></ion-icon>
</div>
</div>
<div class="header-bottom">
<div class="header-bottom-icon">
<ion-icon (click)="addContacts()" src="assets/icon/icons-user.svg"></ion-icon>
</div>
<div class="header-bottom-contacts">
<ion-label *ngFor="let contact of contacts" >
{{contact}}
</ion-label>
</div>
</div>
</div>
</ion-toolbar>
</ion-header>
<ion-content>
<p>HHHHH</p>
<!-- <p>HHHHH</p> -->
</ion-content>
<ion-footer class="ion-no-border">
<ion-footer>
<ion-toolbar>
<ion-row align-items-center>
<ion-col>
<ion-item button lines="none">
<img src="assets/images/icons-arrow-arrow-down-25.svg">
</ion-item>
<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>
<ion-item lines="none" class="div-message">
<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" name="mic-outline"></ion-icon>
<ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
</ion-item>
</ion-col>
<ion-col>
<ion-item button lines="none" [disabled]="message === ''">
<img src="assets/images/icons-chat-send.svg">
</ion-item>
<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>
src/app/pages/chat/group-messages/group-messages.page.scss
+53 -1
View File
@@ -14,7 +14,7 @@
color:#000;
transform: translate3d(0, 1px, 0);
.title-content{
.header-top{
width: 360px;
margin: 0px auto;
overflow: auto;
@@ -34,6 +34,30 @@
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;
@@ -50,4 +74,32 @@
padding-left: 20px;
}
}
}
ion-footer{
.row{
width: 380px;
margin: 0 auto;
}
ion-col{
/* border: 1px solid red; */
}
.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;
}
}
src/app/pages/chat/group-messages/group-messages.page.ts
+27 -1
View File
@@ -1,6 +1,9 @@
import { Component, OnInit } from '@angular/core';
import { ActionSheetController, MenuController, PopoverController } from '@ionic/angular';
import { ActionSheetController, MenuController, ModalController, PopoverController } from '@ionic/angular';
import { ChatOptionsPopoverPage } from 'src/app/shared/popover/chat-options-popover/chat-options-popover.page';
import { ChatPopoverPage } from 'src/app/shared/popover/chat-popover/chat-popover.page';
import { ContactsPage } from '../new-group/contacts/contacts.page';
import { NewGroupPage } from '../new-group/new-group.page';
@Component({
selector: 'app-group-messages',
@@ -10,9 +13,11 @@ import { ChatPopoverPage } from 'src/app/shared/popover/chat-popover/chat-popove
export class GroupMessagesPage implements OnInit {
message:any;
contacts: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"];
constructor(
private menu: MenuController,
private modalController: ModalController,
private actionSheetController: ActionSheetController,
public popoverController: PopoverController,
) { }
@@ -53,6 +58,27 @@ export class GroupMessagesPage implements OnInit {
});
return await popover.present();
}
async openChatOptions(ev: any) {
const popover = await this.popoverController.create({
component: ChatOptionsPopoverPage,
cssClass: 'chat-options-popover',
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();
}
}