From 0a8331db052de2cdfe087a283a2858b26d402a0a Mon Sep 17 00:00:00 2001 From: "tiago.kayaya" Date: Fri, 24 Sep 2021 15:38:50 +0100 Subject: [PATCH 1/5] Add scroll to bottom btn in chat conversation --- src/app/shared/chat/messages/messages.page.ts | 22 +++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/src/app/shared/chat/messages/messages.page.ts b/src/app/shared/chat/messages/messages.page.ts index e63dca9bf..e5cdb8bd0 100644 --- a/src/app/shared/chat/messages/messages.page.ts +++ b/src/app/shared/chat/messages/messages.page.ts @@ -50,6 +50,8 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy private scrollChangeCallback: () => void; currentPosition: any; startPosition: number; + mesageItemDropdownOptions: boolean = false; + scrollToBottomBtn = false; constructor( public popoverController: PopoverController, @@ -122,6 +124,13 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy } catch(err) { } } + scrollToBottomClicked(): void { + try { + this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight; + //this.scrollingOnce = false; + } catch(err) { } + } + ngAfterViewInit() { this.scrollChangeCallback = () => this.onContentScrolled(event); window.addEventListener('scroll', this.scrollChangeCallback, true); @@ -130,17 +139,22 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy 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; - /* console.log(this.currentPosition); - console.log(this.scrollingOnce); */ } ngOnDestroy() { From e06c0ea9901582019d24738171477957c2e677b8 Mon Sep 17 00:00:00 2001 From: "tiago.kayaya" Date: Fri, 24 Sep 2021 15:39:02 +0100 Subject: [PATCH 2/5] save --- src/global.scss | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/src/global.scss b/src/global.scss index 1b1a38085..65fdb383e 100644 --- a/src/global.scss +++ b/src/global.scss @@ -1072,6 +1072,46 @@ ngx-mat-datetime-content{ } } +.messages{ + .messages-list-item-wrapper{ + .message-item{ + .message-item-options{ + .message-options-icon{ + display: none; + padding-left: 10px; + padding-right: 0px; + position: absolute; + //background-color: red; + + //box-shadow: rgba(0, 30, 0, 0.15) 1.95px 1.95px 2.6px; + } + .mesage-item-dropdown-options{ + display: none; + margin-top: 15px; + position: absolute; + border: 1px solid red; + } + } + + .title{ + //border: 1px solid blue; + } + } + .incoming-true:hover{ + .message-options-icon{ + display: block; + background-color: #ebebeb; + } + } + .incoming-false:hover{ + .message-options-icon{ + display: block; + background-color: #e4f4fe; + } + } + } +} + .message-attachments{ border-radius: 5px; background-color: #42b9fe13; From 77cb5ad73b2d499fcb3a1306a21261832bfd4cc1 Mon Sep 17 00:00:00 2001 From: "tiago.kayaya" Date: Fri, 24 Sep 2021 15:39:14 +0100 Subject: [PATCH 3/5] save --- src/app/pages/chat/group-messages/group-messages.page.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/app/pages/chat/group-messages/group-messages.page.html b/src/app/pages/chat/group-messages/group-messages.page.html index 277f1c5d3..17c526c67 100644 --- a/src/app/pages/chat/group-messages/group-messages.page.html +++ b/src/app/pages/chat/group-messages/group-messages.page.html @@ -99,6 +99,11 @@ + + + + + + diff --git a/src/app/shared/chat/group-messages/group-messages.page.ts b/src/app/shared/chat/group-messages/group-messages.page.ts index acd1760d4..878cc8e52 100644 --- a/src/app/shared/chat/group-messages/group-messages.page.ts +++ b/src/app/shared/chat/group-messages/group-messages.page.ts @@ -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 = new EventEmitter(); @@ -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; } diff --git a/src/app/shared/chat/messages/messages.page.html b/src/app/shared/chat/messages/messages.page.html index 6727cbe35..6ef6bbcb5 100644 --- a/src/app/shared/chat/messages/messages.page.html +++ b/src/app/shared/chat/messages/messages.page.html @@ -31,8 +31,18 @@
-
-
+
+
+
+ + + + +
{{msg.u.name}} {{showDateDuration(msg._updatedAt)}} @@ -69,6 +79,22 @@
+ + + + + + From f4ec6826ad363169356967c7d2b8c46984aa1ae4 Mon Sep 17 00:00:00 2001 From: "tiago.kayaya" Date: Fri, 24 Sep 2021 16:10:24 +0100 Subject: [PATCH 5/5] fix scroll dwon btn on chat set to work dynamically --- src/app/pages/chat/group-messages/group-messages.page.ts | 2 +- src/app/pages/chat/messages/messages.page.ts | 2 +- src/app/shared/chat/group-messages/group-messages.page.ts | 2 +- src/app/shared/chat/messages/messages.page.ts | 6 +++++- 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/app/pages/chat/group-messages/group-messages.page.ts b/src/app/pages/chat/group-messages/group-messages.page.ts index 2260320fa..55fa7f263 100644 --- a/src/app/pages/chat/group-messages/group-messages.page.ts +++ b/src/app/pages/chat/group-messages/group-messages.page.ts @@ -108,7 +108,7 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy { this.startPosition = e.srcElement.scrollTop; let scroll = e.srcElement.scrollTop; let windowHeight = e.srcElement.scrollHeight; - let containerHeight = windowHeight - 596.59997558594; + let containerHeight = windowHeight - e.srcElement.clientHeight; if (scroll > this.currentPosition) { //alert('BOTTOM'); diff --git a/src/app/pages/chat/messages/messages.page.ts b/src/app/pages/chat/messages/messages.page.ts index 43b522488..090b34d78 100644 --- a/src/app/pages/chat/messages/messages.page.ts +++ b/src/app/pages/chat/messages/messages.page.ts @@ -138,7 +138,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy { this.startPosition = e.srcElement.scrollTop; let scroll = e.srcElement.scrollTop; let windowHeight = e.srcElement.scrollHeight; - let containerHeight = windowHeight - 596.59997558594; + let containerHeight = windowHeight - e.srcElement.clientHeight; console.log(this.startPosition); console.log(windowHeight); diff --git a/src/app/shared/chat/group-messages/group-messages.page.ts b/src/app/shared/chat/group-messages/group-messages.page.ts index 878cc8e52..56849526b 100644 --- a/src/app/shared/chat/group-messages/group-messages.page.ts +++ b/src/app/shared/chat/group-messages/group-messages.page.ts @@ -174,7 +174,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe this.startPosition = e.srcElement.scrollTop; let scroll = e.srcElement.scrollTop; let windowHeight = e.srcElement.scrollHeight; - let containerHeight = windowHeight - 454.199951171875; + let containerHeight = windowHeight - e.srcElement.clientHeight; if (scroll > this.currentPosition) { //alert('BOTTOM'); diff --git a/src/app/shared/chat/messages/messages.page.ts b/src/app/shared/chat/messages/messages.page.ts index e5cdb8bd0..1165e1524 100644 --- a/src/app/shared/chat/messages/messages.page.ts +++ b/src/app/shared/chat/messages/messages.page.ts @@ -140,7 +140,11 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy this.startPosition = e.srcElement.scrollTop; let scroll = e.srcElement.scrollTop; let windowHeight = e.srcElement.scrollHeight; - let containerHeight = windowHeight - 454.199951171875; + let containerHeight = windowHeight - e.srcElement.clientHeight; + console.log(containerHeight); + console.log(e.srcElement.clientHeight); + + if (scroll > this.currentPosition) { //alert('BOTTOM');