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

add press gesture in messages itens to perfom message options such as delete message

Browse Source
This commit is contained in:
tiago.kayaya
2021-09-30 08:43:49 +01:00
parent 4e12e8d0fa
commit 9b8c60b573
10 changed files with 205 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/chat/messages/messages.module.ts
+3 -1
View File
@@ -10,6 +10,7 @@ import { MessagesPage } from './messages.page';
import { SharedModule } from 'src/app/shared/shared.module';
import { BtnModalDismissPage } from 'src/app/shared/btn-modal-dismiss/btn-modal-dismiss.page';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { MatMenuModule } from '@angular/material/menu';
@NgModule({
@@ -18,7 +19,8 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
FormsModule,
IonicModule,
FontAwesomeModule,
MessagesPageRoutingModule
MessagesPageRoutingModule,
MatMenuModule,
],
declarations: [MessagesPage]
})
src/app/pages/chat/messages/messages.page.html
+22 -4
View File
@@ -1,5 +1,8 @@
<ion-header class="ion-no-border">
<ion-toolbar class="header-toolbar">
<!-- <div #rectangle class="rectangle" (press)="handlePress()">
Double click me to change the color
</div> -->
<div class="main-header">
<div class="header-top">
<div class="left">
@@ -7,9 +10,15 @@
<ion-icon slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
</button>
</div>
<div class="middle" *ngFor="let users of dmUsers">
<ion-label class="title">{{users.name}}</ion-label>
<span><ion-icon class="{{users.status}}" name="ellipse"></ion-icon></span>
<div class="middle-container" *ngIf="!showMessageOptions">
<div class="middle" *ngFor="let users of dmUsers">
<ion-label class="title">{{users.name}}</ion-label>
<span><ion-icon class="{{users.status}}" name="ellipse"></ion-icon></span>
</div>
</div>
<div class="middle-container-options" *ngIf="showMessageOptions">
<fa-icon icon="trash" class="middle-container-options-icons"></fa-icon>
<!-- <ion-icon name="trash"></ion-icon> -->
</div>
<div hidden class="right">
<button class="btn-no-color" (click)="openMessagesOptions()">
@@ -30,13 +39,22 @@
</ion-header>
<ion-content>
<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="messages" #scrollMe>
<div *ngFor="let msg of chatMessageStore.message[roomId] ; let last = last" class='incoming-{{msg.u.username!=loggedUser.me.username}}'>
<div (click)="handleClick() " (press)="handlePress()" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}' *ngFor="let msg of chatMessageStore.message[roomId] ; let last = last">
<!-- <div class="message-item-options d-flex justify-content-end">
<fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer"></fa-icon>
<mat-menu #beforeMenu="matMenu" xPosition="before">
<button (click)="deleteMessage(msg._id)" class="menuButton">Apagar mensagem</button>
</mat-menu>
</div> -->
<div class="title">
<ion-label>{{msg.u.name}}</ion-label>
<span class="time">{{showDateDuration(msg._updatedAt)}}</span>
src/app/pages/chat/messages/messages.page.scss
+28 -7
View File
@@ -20,20 +20,41 @@
overflow: auto;
padding: 0 !important;
background: #fff;
.left{
width: 37px;
float: left;
font-size: 35px;
overflow: hidden;
}
.middle{
padding: 0!important;
float: left;
width:calc(100% - 77px);
margin: 2.5px 0 0 5px;
display: flex;
align-items: center;
.middle-container{
overflow: auto;
height: auto;
.middle{
padding: 0!important;
float: left;
width:calc(100% - 77px);
margin: 2.5px 0 0 5px;
display: flex;
align-items: center;
}
}
.middle-container-options{
padding: 0!important;
margin: 5px 0 0 5px;
float: left;
width: calc(100% - 47px);
text-align: right;
/* ion-icon{
font-size: 25px;
} */
.middle-container-options-icons{
font-size: 23px;
}
}
.right{
padding: 0!important;
src/app/pages/chat/messages/messages.page.ts
+104 -5
View File
@@ -1,6 +1,6 @@
import { AfterViewChecked, AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router'
import { ModalController, NavParams, PopoverController } from '@ionic/angular';
import { GestureController, Gesture, ModalController, NavParams, PopoverController } from '@ionic/angular';
import { map } from 'rxjs/operators';
import { EventPerson } from 'src/app/models/eventperson.model';
import { ContactsPage } from 'src/app/pages/chat/messages/contacts/contacts.page';
@@ -17,6 +17,7 @@ import { ChatMessageStore } from 'src/app/store/chat/chat-message.service';
import { ChatUserStorage } from 'src/app/store/chat/chat-user.service';
import { environment } from 'src/environments/environment';
@Component({
selector: 'app-messages',
templateUrl: './messages.page.html',
@@ -26,6 +27,8 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
showLoader: boolean;
@ViewChild('scrollMe') private myScrollContainer: ElementRef;
/* @ViewChild('messageContainer') messageContainer: ElementRef; */
@ViewChild('rectangle') private rectangle: ElementRef;
loggedUser: any;
@@ -47,6 +50,14 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
startPosition: number;
scrollToBottomBtn = false;
attendees: EventPerson[] = [];
longPressActive = false;
private backgrounds: string[] = ['rgba(0, 0, 255, 0.5)', 'rgba(0, 255, 0.5)', 'rgba(255, 0, 0, 0.5)', 'rgba(255, 255, 0, 0.5)', 'rgba(255, 0, 255, 0.5)', 'rgba(0, 255, 255, 0.5)'];
private currentColor: string = 'rgba(0, 0, 255, 0.5)';
private lastOnStart: number = 0;
private DOUBLE_CLICK_THRESHOLD: number = 500;
showMessageOptions = false;
constructor(
public popoverController: PopoverController,
@@ -59,6 +70,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
private route: Router,
private activatedRoute: ActivatedRoute,
private fileService: FileService,
private gestureController: GestureController,
) {
/* this.activatedRoute.paramMap.subscribe(params => {
if(params["params"].SerialNumber) {
@@ -84,6 +96,96 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
this.el.scrollTop = this.el.scrollHeight - this.el.scrollTop; */
this.setStatus('online');
//this.onPressingMessage();
/* setInterval(()=>{
const gesture = this.gestureController.create({
el: this.rectangle.nativeElement,
gestureName:'my-gesture',
onMove: (detail) => { this.onMove(detail); }
})
gesture.enable();
}, 9000); */
}
ngAfterViewInit() {
this.scrollChangeCallback = () => this.onContentScrolled(event);
window.addEventListener('scroll', this.scrollChangeCallback, true);
const gesture = this.gestureController.create({
el: this.rectangle.nativeElement,
gestureName:'long-press',
onStart: () => { alert('OP') },
/* onMove () => {
console.log('Move');
}, */
onEnd: () => {
console.log('ENNNNNDS');
},
})
gesture.enable();
}
handlePress(){
this.showMessageOptions = true;
/* if(!this.showMessageOptions){
this.showMessageOptions = true;
}
else{
this.showMessageOptions = false;
} */
}
handleClick(){
this.showMessageOptions = false;
}
private onStart() {
alert('OP');
const now = Date.now();
if (Math.abs(now - this.lastOnStart) <= this.DOUBLE_CLICK_THRESHOLD) {
this.rectangle.nativeElement.style.setProperty('background', this.getRandomBackground());
this.lastOnStart = 0;
} else {
this.lastOnStart = now;
}
}
private getRandomBackground() {
const options = this.backgrounds.filter(bg => bg !== this.currentColor);
this.currentColor = options[Math.floor(Math.random() * options.length)];
return this.currentColor;
}
/* onPressingMessage(){
const gesture = this.gestureController.create({
el: this.messageContainer.nativeElement,
gestureName: 'long-press',
onStart: ev =>{
this.longPressActive = true;
console.log('Pressing');
},
onEnd: ev => {
this.longPressActive = false;
console.log('Stop pressing');
}
});
gesture.enable(true);
} */
deleteMessage(msgId:string){
let body = {
"roomId": this.roomId,
"msgId": msgId,
"asUser": false,
}
this.alertService.confirmDeleteMessage(body);
}
setStatus(status:string){
@@ -129,10 +231,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
} catch(err) { }
}
ngAfterViewInit() {
this.scrollChangeCallback = () => this.onContentScrolled(event);
window.addEventListener('scroll', this.scrollChangeCallback, true);
}
onContentScrolled(e) {
this.startPosition = e.srcElement.scrollTop;