feat: add button and scrolling behavior

src/i18n/de-DE.json

@@ -1029,6 +1029,7 @@
   "tooltipPreferencesPassword": "Öffnen Sie eine andere Website, um Ihr Passwort zurückzusetzen",
   "tooltipPreferencesPicture": "Ändern Sie Ihr Bild…",
   "tooltipPreferencesRename": "Ändern Sie Ihren Namen",
+  "tooltipScrollToBottom": "Nach unten scrollen",
   "tooltipSearchClose": "Schließen (Esc)",
   "unsupported.headlineBrowser": "Dieser Browser wird nicht unterstützt.",
   "unsupported.headlineCookies": "Cookies zulassen",

src/i18n/en-US.json

@@ -1029,6 +1029,7 @@
   "tooltipPreferencesPassword": "Open another website to reset your password",
   "tooltipPreferencesPicture": "Change your picture…",
   "tooltipPreferencesRename": "Change your name",
+  "tooltipScrollToBottom": "Scroll to bottom",
   "tooltipSearchClose": "Close (Esc)",
   "unsupported.headlineBrowser": "This browser is not supported.",
   "unsupported.headlineCookies": "Enable cookies",

src/i18n/it-IT.json

@@ -1029,6 +1029,7 @@
   "tooltipPreferencesPassword": "Apri un altro sito per reimpostare la password",
   "tooltipPreferencesPicture": "Cambia la tua foto…",
   "tooltipPreferencesRename": "Cambia il tuo nome",
+  "tooltipScrollToBottom": "Scorrere verso il basso",
   "tooltipSearchClose": "Chiudi (Esc)",
   "unsupported.headlineBrowser": "This browser is not supported.",
   "unsupported.headlineCookies": "Enable cookies",

src/page/template/content/conversation/message-list.htm

@@ -1,12 +1,14 @@
- <div id="message-list" class="message-list" data-bind="with: $root.messageList, fadingscrollbar, infinite_scroll: {onHitBottom: () => $root.messageList.loadFollowingMessages(), onHitTop: () => $root.messageList.loadPrecedingMessages(), onInit: $root.messageList.onMessageContainerInitiated}">
-  <div class="messages"
+<div id="message-list" class="message-list"
+    data-bind="with: $root.messageList, fadingscrollbar, infinite_scroll: {onHitBottom: () => $root.messageList.loadFollowingMessages(), onHitTop: () => $root.messageList.loadPrecedingMessages(), onInit: $root.messageList.onMessageContainerInitiated, onScrollTriggered: $root.messageList.showScrollToBottom}"
+    style="position: relative">
+  <div class="messages" 
         data-bind="css: {'flex-center': verticallyCenterMessage},
                    foreach: {data: conversation().messages_visible, as: 'message', noChildContext: true}">
     <div class="message"
-         data-bind="in_viewport: {onVisible: getInViewportCallback(conversation(), message), container: getMessagesContainer()},
+      data-bind="in_viewport: {onVisible: getInViewportCallback(conversation(), message), container: getMessagesContainer()},
                     attr: {'data-uie-uid': message.id, 'data-uie-value': message.super_type, 'data-uie-expired-status': message.ephemeral_expires, 'data-uie-send-status': message.status}"
-         data-uie-name="item-message">
-
+      data-uie-name="item-message">
+      
       <div class="message-header message-timestamp" data-bind="css: getTimestampClass(message)">
         <div class="message-header-icon">
           <span class="message-unread-dot"></span>
@@ -45,4 +47,9 @@
         data-bind="css: {'message-isreplying': message.id && message.id === $root.inputBar.replyMessageId()}"></message>
     </div>
   </div>
-</div>
+  <div class="scroll-to-bottom-wrapper">
+    <span class="scroll-to-bottom-icon button-icon-large icon-down"
+      data-bind="visible: isScrollToBottom, clickOrDrag: clickOnScrollToBottomButton, attr: {title: t('tooltipScrollToBottom')}"
+      data-uie-name="scroll-to-bottom"></span>
+  </div>
+</div>

src/script/view_model/bindings/MessageListBindings.ts

@@ -98,12 +98,18 @@ ko.bindingHandlers.showAllTimestamps = {
 ko.bindingHandlers.infinite_scroll = {
   init(
     scrollingElement: HTMLElement,
-    params: () => {onHitBottom: () => void; onHitTop: () => void; onInit: (element: HTMLElement) => void},
+    params: () => {
+      onHitBottom: () => void;
+      onHitTop: () => void;
+      onInit: (element: HTMLElement) => void;
+      onScrollTriggered: () => void;
+    },
   ) {
-    const {onHitTop, onHitBottom, onInit} = params();
+    const {onHitTop, onHitBottom, onInit, onScrollTriggered} = params();
     onInit(scrollingElement);
 
     const onScroll = ({target: element}: Event & {target: HTMLElement}) => {
+      onScrollTriggered();
       // On some HiDPI screens scrollTop returns a floating point number instead of an integer
       // https://github.com/jquery/api.jquery.com/issues/608
       const scrollPosition = Math.ceil(element.scrollTop);

src/script/view_model/content/MessageListViewModel.ts

@@ -73,6 +73,7 @@ export class MessageListViewModel {
   private messagesBeforeChangeSubscription: ko.Subscription;
   private messagesContainer: HTMLElement;
   showInvitePeople: ko.PureComputed<boolean>;
+  private readonly isScrollToBottom: ko.Observable<boolean>;
 
   constructor(
     private readonly mainViewModel: MainViewModel,
@@ -136,6 +137,8 @@ export class MessageListViewModel {
         this.conversation().isActiveParticipant() && this.conversation().inTeam() && this.conversation().isGuestRoom()
       );
     });
+
+    this.isScrollToBottom = ko.observable(false);
   }
 
   readonly onMessageContainerInitiated = (messagesContainer: HTMLElement): void => {
@@ -169,6 +172,14 @@ export class MessageListViewModel {
     }
   };
 
+  readonly clickOnScrollToBottomButton = (): void => {
+    scrollToBottom(this.getMessagesContainer());
+  };
+
+  readonly showScrollToBottom = (): void => {
+    this.isScrollToBottom(true);
+  };
+
   private readonly handleInputResize = (inputSizeDiff: number): void => {
     if (inputSizeDiff) {
       scrollBy(this.getMessagesContainer(), inputSizeDiff);
@@ -329,6 +340,7 @@ export class MessageListViewModel {
     const lastMessage = this.conversation().getLastMessage();
 
     if (lastMessage) {
+      this.isScrollToBottom(false);
       if (!this.isLastReceivedMessage(lastMessage, this.conversation())) {
         // if the last loaded message is not the last of the conversation, we load the subsequent messages
         this.conversationRepository.getSubsequentMessages(this.conversation(), lastMessage as ContentMessage);

src/style/content/conversation/message-list.less

@@ -19,6 +19,7 @@
 
 // MEMBER LIST
 .message-list {
+  position: relative;
   overflow: auto;
   flex: 1 1;
 }
@@ -838,3 +839,16 @@
     fill: #fff;
   }
 }
+
+.scroll-to-bottom-wrapper {
+  position: absolute;
+  right: 72px;
+  bottom: 64px;
+
+  .scroll-to-bottom-icon {
+    position: fixed;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 50%;
+    color: #fff;
+  }
+}

test/unit_tests/view_model/bindings/MessageListBindingsSpec.js

@@ -32,11 +32,12 @@ describe('messageListBindings', () => {
     ];
 
     scrollingTests.forEach(({expectedCalls, initialScroll, scrollTop}) => {
-      it('calls params functions when scroll hits top and bottom', () => {
+      it('calls params functions when scroll hits top and bottom and scroll is triggered', () => {
         const context = {
           onHitBottom: jest.fn(),
           onHitTop: jest.fn(),
           onInit: jest.fn(),
+          onScrollTriggered: jest.fn(),
         };
 
         const boundElement = `<div style='height: 10px; overflow: scroll' class="scroll" data-bind="{infinite_scroll: {onHitTop, onHitBottom, onInit}}">
@@ -64,7 +65,7 @@ describe('messageListBindings', () => {
           return new Promise(resolve => {
             setTimeout(() => {
               expect(context.onInit).toHaveBeenCalledWith(scrollingElement);
-              ['onHitBottom', 'onHitTop'].forEach(callback => {
+              ['onHitBottom', 'onHitTop', 'onScrollTriggered'].forEach(callback => {
                 if (expectedCalls.includes(callback)) {
                   // eslint-disable-next-line jest/no-conditional-expect
                   expect(context[callback]).toHaveBeenCalled();