From 5291b8bca31dba1032053a5615631a20374b441a Mon Sep 17 00:00:00 2001 From: zaSmilingIdiot <30551211+zaSmilingIdiot@users.noreply.github.com> Date: Sat, 30 Apr 2022 14:03:59 +0200 Subject: [PATCH] [market] Chat improvements: - Add indicators and warning to public chat conversations (to better indicate that the conversation is not direct with one other party only); - Automatically scroll to new received messages when viewing the last message in the conversation. --- .../chat-conversation-modal.component.html | 14 +++++-- .../chat-conversation-modal.component.scss | 26 +++++++++++++ .../chat-conversation-modal.component.ts | 3 ++ .../chat-conversation.component.html | 39 ++++++++++++------- .../chat-conversation.component.scss | 1 + .../chat-conversation.component.ts | 37 ++++++++++++++++-- 6 files changed, 100 insertions(+), 20 deletions(-) diff --git a/src/app/main-market/shared/chat-conversation-modal/chat-conversation-modal.component.html b/src/app/main-market/shared/chat-conversation-modal/chat-conversation-modal.component.html index 352611e44..76f26baaf 100644 --- a/src/app/main-market/shared/chat-conversation-modal/chat-conversation-modal.component.html +++ b/src/app/main-market/shared/chat-conversation-modal/chat-conversation-modal.component.html @@ -1,6 +1,13 @@ - - {{ componentData.title }} -

{{ componentData.subtitle }}

+ +
+
+ +
+
+
{{ componentData.title }}
+
{{ componentData.subtitle }}
+
+
+ +

+ This is a publicly visible conversation: all messages can be viewed by anyone with access to the Listing Item. Please do not share personal information and details here, and be wary of anyone asking for personal identifying details! +

+ + + + + + + {{ textInput.value.length }}/{{ MAX_MESSAGE_LENGTH }} + + + + diff --git a/src/app/main-market/shared/chat-conversation/chat-conversation.component.scss b/src/app/main-market/shared/chat-conversation/chat-conversation.component.scss index 93839e383..1acbb983f 100644 --- a/src/app/main-market/shared/chat-conversation/chat-conversation.component.scss +++ b/src/app/main-market/shared/chat-conversation/chat-conversation.component.scss @@ -54,6 +54,7 @@ overflow: hidden; white-space: nowrap; font-weight: 500; + margin-top: 0.5em; padding: 3px 6px; border-radius: var(--radius); font-family: var(--font-mono); diff --git a/src/app/main-market/shared/chat-conversation/chat-conversation.component.ts b/src/app/main-market/shared/chat-conversation/chat-conversation.component.ts index 3e1c0c2c2..f4fa99315 100644 --- a/src/app/main-market/shared/chat-conversation/chat-conversation.component.ts +++ b/src/app/main-market/shared/chat-conversation/chat-conversation.component.ts @@ -57,11 +57,14 @@ export class ChatConversationComponent implements OnInit, OnDestroy { @Input() inputChannelType: ChatChannelType = ChatChannelType.OTHER; @Input() highlitedAddress: string = ''; @Input() highlitedAddressLabel: string = ''; + @Input() doSmoothScroll: boolean = false; @ViewChild('chatHistoryPane', {static: true}) chatHistoryPane: ElementRef; readonly MAX_MESSAGE_LENGTH: number = 500; readonly MAX_ADDRESS_LABEL_LENGTH: number = 100; + isPublicChat: boolean = true; + agreedToPublicPostingWarning: boolean = false; messageList: ChatMessage[] = []; hasMoreMessages: boolean = false; @@ -79,6 +82,7 @@ export class ChatConversationComponent implements OnInit, OnDestroy { private readonly MESSAGE_COUNT: number = 15; private earliestMessageId: string = ''; private savedScrollHeight: number = 0; + private scrollHeightMax: number = 0; constructor( @@ -91,6 +95,9 @@ export class ChatConversationComponent implements OnInit, OnDestroy { ngOnInit() { + this.isPublicChat = this.inputChannelType !== ChatChannelType.ORDERITEM; + this.agreedToPublicPostingWarning = !this.isPublicChat; + if ( !(getValueOrDefault(this.inputChannel, 'string', '').length > 0) || this.inputChannelType === ChatChannelType.OTHER @@ -132,7 +139,7 @@ export class ChatConversationComponent implements OnInit, OnDestroy { this._cdr.detectChanges(); - this.chatHistoryPane.nativeElement.scrollTop = this.chatHistoryPane.nativeElement.scrollHeight; + this.scrollToBottom(); }), takeUntil(this.destroy$) ); @@ -158,9 +165,16 @@ export class ChatConversationComponent implements OnInit, OnDestroy { this.messageList = []; this.earliestMessageId = messages[0].id; } + this.messageList.push(...messages); - this._store.dispatch(new MarketUserActions.ChatChannelRead(this.inputChannel, this.inputChannelType)); - this._cdr.detectChanges(); + if (this.selectedChatMessage === null) { + this._store.dispatch(new MarketUserActions.ChatChannelRead(this.inputChannel, this.inputChannelType)); + const doScroll = (this.scrollHeightMax > 0) && (this.chatHistoryPane.nativeElement.scrollTop > (this.scrollHeightMax - 70)); + this._cdr.detectChanges(); + if (doScroll) { + this.scrollToBottom(); + } + } }), takeUntil(this.destroy$) ); @@ -187,6 +201,11 @@ export class ChatConversationComponent implements OnInit, OnDestroy { } + agreeToPublicPostingWarning() { + this.agreedToPublicPostingWarning = true; + } + + showMessageDetails(message: ChatMessage) { if (!message) { return; @@ -203,6 +222,7 @@ export class ChatConversationComponent implements OnInit, OnDestroy { this.selectedMessageLabelInput.setValue('', {emitEvent: false}); this._cdr.detectChanges(); this.chatHistoryPane.nativeElement.scrollTop = this.savedScrollHeight; + this._store.dispatch(new MarketUserActions.ChatChannelRead(this.inputChannel, this.inputChannelType)); } } @@ -269,7 +289,7 @@ export class ChatConversationComponent implements OnInit, OnDestroy { } this.isLoading = false; this._cdr.detectChanges(); - this.chatHistoryPane.nativeElement.scrollTop = this.chatHistoryPane.nativeElement.scrollHeight; + this.scrollToBottom(); }), ).subscribe(); } @@ -413,4 +433,13 @@ export class ChatConversationComponent implements OnInit, OnDestroy { return chats; } + private scrollToBottom() { + if (this.doSmoothScroll) { + this.chatHistoryPane.nativeElement.scrollTo({top: this.chatHistoryPane.nativeElement.scrollHeight, behavior: 'smooth' }); + } else { + this.chatHistoryPane.nativeElement.scrollTop = this.chatHistoryPane.nativeElement.scrollHeight; + } + this.scrollHeightMax = this.chatHistoryPane.nativeElement.scrollTop; + } + }