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

save

Browse Source
This commit is contained in:
tiago.kayaya
2021-09-24 15:39:25 +01:00
parent 77cb5ad73b
commit 45197375ff
6 changed files with 107 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/shared/chat/group-messages/group-messages.page.html
+16
View File
@@ -98,6 +98,22 @@
</div>
</div>
</div>
<ion-fab horizontal="end" vertical="bottom" slot="fixed">
<ion-fab-button *ngIf="scrollToBottomBtn" (click)="scrollToBottomClicked()" color="light" size="small">
<ion-icon name="chevron-down"></ion-icon>
</ion-fab-button>
<!-- <ion-fab-list side="start">
<ion-fab-button color="light">
<ion-icon name="chevron-down"></ion-icon>
</ion-fab-button>
<ion-fab-button color="light">
<ion-icon name="logo-twitter"></ion-icon>
</ion-fab-button>
<ion-fab-button color="light">
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
</ion-fab-list> -->
</ion-fab>
</ion-content>
src/app/shared/chat/group-messages/group-messages.page.ts
+19 -3
View File
@@ -54,6 +54,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
private scrollChangeCallback: () => void;
currentPosition: any;
startPosition: number;
scrollToBottomBtn = false;
@Input() roomId:string;
@Output() closeAllDesktopComponents:EventEmitter<any> = new EventEmitter<any>();
@@ -158,20 +159,35 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
} catch(err) { }
}
scrollToBottomClicked(): void {
try {
this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
} catch(err) { }
}
ngAfterViewInit() {
this.scrollChangeCallback = () => this.onContentScrolled(event);
window.addEventListener('scroll', this.scrollChangeCallback, true);
}
onContentScrolled(e) {
onContentScrolled(e) {
this.startPosition = e.srcElement.scrollTop;
let scroll = e.srcElement.scrollTop;
let windowHeight = e.srcElement.scrollHeight;
let containerHeight = windowHeight - 454.199951171875;
if (scroll > this.currentPosition) {
//this.showButton = false;
//alert('BOTTOM');
} else {
//this.showButton = true;
//alert('UP');
this.scrollingOnce = false;
}
if((containerHeight - 100) > scroll){
this.scrollToBottomBtn = true;
}
else{
this.scrollToBottomBtn = false;
}
this.currentPosition = scroll;
}
src/app/shared/chat/messages/messages.page.html
+28 -2
View File
@@ -31,8 +31,18 @@
</ion-refresher-content>
</ion-refresher>
<div class="messages" #scrollMe>
<div class="container-width-100" *ngFor="let msg of chatMessageStore.message[roomId]; let last = last">
<div class='incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45'>
<div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of chatMessageStore.message[roomId]; let last = last">
<div class='message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45'>
<div class="message-item-options d-flex justify-content-end">
<fa-icon (click)="mesageItemDropdownOptions=true" icon="chevron-down" class="message-options-icon"></fa-icon>
<!-- <div class="mesage-item-dropdown-options" *ngIf="mesageItemDropdownOptions">
<ion-label>Apagar mensagem</ion-label>
</div> -->
<ion-select hidden class="message-options-icon" interface="popover">
<ion-select-option value="nes">Apagar mensagem</ion-select-option>
</ion-select>
</div>
<div class="title">
<ion-label>{{msg.u.name}}</ion-label>
<span class="time">{{showDateDuration(msg._updatedAt)}}</span>
@@ -69,6 +79,22 @@
</div>
</div>
</div>
<ion-fab horizontal="end" vertical="bottom" slot="fixed">
<ion-fab-button *ngIf="scrollToBottomBtn" (click)="scrollToBottomClicked()" color="light" size="small">
<ion-icon name="chevron-down"></ion-icon>
</ion-fab-button>
<!-- <ion-fab-list side="start">
<ion-fab-button color="light">
<ion-icon name="chevron-down"></ion-icon>
</ion-fab-button>
<ion-fab-button color="light">
<ion-icon name="logo-twitter"></ion-icon>
</ion-fab-button>
<ion-fab-button color="light">
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
</ion-fab-list> -->
</ion-fab>
</ion-content>