mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-18 20:47:54 +00:00
Merge branch 'feature/chat' of bitbucket.org:equilibriumito/gabinete-digital into feature/calendar
This commit is contained in:
@@ -2,9 +2,8 @@
|
||||
<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">{{room.name}}</ion-label>
|
||||
<ion-label class="title">{{room.name.split('-').join(' ')}}</ion-label>
|
||||
</div>
|
||||
<div class="right">
|
||||
<ion-icon (click)="openOptions()" src="assets/images/icons-menu.svg"></ion-icon>
|
||||
@@ -35,43 +34,38 @@
|
||||
<ion-label> {{message}} Esta conversa passou a grupo</ion-label><br />
|
||||
<ion-label>A conversa original mantêm-se como chat individual</ion-label>
|
||||
</div>
|
||||
<div *ngFor="let msg of messages" class="messages">
|
||||
<div *ngIf="msg.t != 'r'" class='incoming-{{msg.u.username!=loggedUser.me.username}}'>
|
||||
<div class="title">
|
||||
<ion-label>{{msg.u.name}}</ion-label>
|
||||
<span class="time">{{msg._updatedAt | date: 'HH:mm' }}</span>
|
||||
<div class="messages">
|
||||
<div class="container-width-100" *ngFor="let msg of messages">
|
||||
<div *ngIf="msg.t != 'r'" class='incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45'>
|
||||
<div class="title">
|
||||
<ion-label>{{msg.u.name}}</ion-label>
|
||||
<span class="time">{{msg._updatedAt | date: 'HH:mm' }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<ion-label>{{msg.msg}}</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<ion-label>{{msg.msg}}</ion-label>
|
||||
<div *ngIf="msg.t == 'r'" class="info-text">
|
||||
<ion-label>Alterou o assunto de para "{{msg.msg.split('-').join(' ')}}"</ion-label><br />
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="msg.t == 'r'" class="info-text">
|
||||
<ion-label>Alterou o assunto de para "{{msg.msg.split('-').join(' ')}}"</ion-label><br />
|
||||
</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 (click)="sendMessage()" class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
|
||||
</ion-label>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-toolbar>
|
||||
<div class="container width-100 d-flex">
|
||||
<div>
|
||||
<ion-icon (click)="openChatOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
|
||||
</div>
|
||||
<div class="width-80">
|
||||
<ion-item class="ion-no-padding type-message" lines="none">
|
||||
<ion-textarea clearOnEdit="true" 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>
|
||||
</div>
|
||||
<div>
|
||||
<ion-icon (click)="sendMessage()" class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
|
||||
</div>
|
||||
</div>
|
||||
</ion-footer>
|
||||
|
||||
|
||||
@@ -4,16 +4,12 @@
|
||||
--opacity: 1;
|
||||
|
||||
.main-header{
|
||||
width: 100%; /* 400px */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: Roboto;
|
||||
border-top-left-radius: 25px;
|
||||
border-top-right-radius: 25px;
|
||||
background-color: #fff;
|
||||
overflow:hidden;
|
||||
overflow:auto;
|
||||
padding: 30px 20px 0px 20px;
|
||||
color:#000;
|
||||
transform: translate3d(0, 1px, 0);
|
||||
//transform: translate3d(0, 1px, 0);
|
||||
|
||||
.header-top{
|
||||
//width: 360px;
|
||||
@@ -36,9 +32,8 @@
|
||||
}
|
||||
}
|
||||
.header-bottom{
|
||||
width: 310px;
|
||||
width: 95%;
|
||||
overflow: auto;
|
||||
margin: 0 auto;
|
||||
|
||||
.header-bottom-icon{
|
||||
width: 30px;
|
||||
@@ -109,66 +104,73 @@
|
||||
overflow: auto;
|
||||
|
||||
.incoming-true, .incoming-false{
|
||||
width: 305px;
|
||||
padding: 15px 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.incoming-true{
|
||||
margin: 10px 75px 10px 20px;
|
||||
background: #ebebeb;
|
||||
float: left;
|
||||
}
|
||||
.container-width-100{
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.incoming-true{
|
||||
margin: 10px 75px 10px 20px;
|
||||
background: #ebebeb;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
.incoming-false{
|
||||
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;
|
||||
margin-left: 10px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ion-footer{
|
||||
.row{
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
padding-top: 7.5px;
|
||||
padding-bottom: 7.5px;
|
||||
.container{
|
||||
justify-content: center;
|
||||
justify-content: space-evenly;
|
||||
|
||||
}
|
||||
|
||||
.chat-icon-options{
|
||||
display:block !important;
|
||||
font-size: 25px;
|
||||
float: right !important;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.chat-icon-send{
|
||||
font-size: 45px;
|
||||
margin: 0 auto;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.type-message{
|
||||
display: flex;
|
||||
border: 1px solid #ebebeb;
|
||||
border-radius: 25px;
|
||||
padding-left: 15px;
|
||||
align-items: center;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
border: 1px solid #ebebeb;
|
||||
border-radius: 25px;
|
||||
padding-left: 15px;
|
||||
align-items: center;
|
||||
overflow: auto;
|
||||
|
||||
ion-textarea{
|
||||
margin: 0 !important;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
ion-textarea{
|
||||
margin: 0 !important;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { AfterViewChecked, Component, OnChanges, OnInit, Input, SimpleChanges, Output } from '@angular/core';
|
||||
import { ActionSheetController, MenuController, ModalController, NavParams, PopoverController } from '@ionic/angular';
|
||||
import { Component, OnChanges, OnInit, Input, SimpleChanges} from '@angular/core';
|
||||
import { ActionSheetController, MenuController, ModalController, PopoverController } from '@ionic/angular';
|
||||
import { AuthService } from 'src/app/services/auth.service';
|
||||
import { ChatService } from 'src/app/services/chat.service';
|
||||
import { ChatOptionsPopoverPage } from 'src/app/shared/popover/chat-options-popover/chat-options-popover.page';
|
||||
@@ -22,7 +22,6 @@ export class GroupMessagesPage implements OnInit, OnChanges {
|
||||
|
||||
|
||||
room:any;
|
||||
roomName:any;
|
||||
members:any;
|
||||
|
||||
@Input() roomId:string;
|
||||
@@ -33,12 +32,9 @@ export class GroupMessagesPage implements OnInit, OnChanges {
|
||||
private actionSheetController: ActionSheetController,
|
||||
public popoverController: PopoverController,
|
||||
private chatService: ChatService,
|
||||
/* private navParams: NavParams, */
|
||||
private authService: AuthService,
|
||||
) {
|
||||
this.isGroupCreated = true;
|
||||
/* this.room = this.navParams.get('room'); */
|
||||
/* this.roomName = this.room.name.split('-').join(' '); */
|
||||
}
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
this.getRoomInfo();
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
</ion-refresher>
|
||||
<div class="messages" #scrollMe>
|
||||
<div class="container-width-100" *ngFor="let msg of messages">
|
||||
<div class='incoming-{{msg.u.username!=loggedUser.me.username}}'>
|
||||
<div class='incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45'>
|
||||
<div class="title">
|
||||
<ion-label>{{msg.u.name}}</ion-label>
|
||||
<span class="time">{{msg._updatedAt | date: 'HH:mm' }}</span>
|
||||
|
||||
@@ -7,8 +7,6 @@
|
||||
width: 100%; /* 400px */
|
||||
height: 100%;
|
||||
font-family: Roboto;
|
||||
border-top-left-radius: 25px;
|
||||
border-top-right-radius: 25px;
|
||||
background-color: #fff;
|
||||
overflow:hidden;
|
||||
//padding: 0px 20px 0px 20px;
|
||||
|
||||
Reference in New Issue
Block a user