-
- {children}
-
-
-
-
+
);
diff --git a/webapp/channels/src/components/post_view/post_list_virtualized/post_list_virtualized.tsx b/webapp/channels/src/components/post_view/post_list_virtualized/post_list_virtualized.tsx
index 51d037407c..ce44adce45 100644
--- a/webapp/channels/src/components/post_view/post_list_virtualized/post_list_virtualized.tsx
+++ b/webapp/channels/src/components/post_view/post_list_virtualized/post_list_virtualized.tsx
@@ -141,6 +141,8 @@ type State = {
isSearchHintDismissed: boolean;
isMobileView?: boolean;
isNewMessageLineReached: boolean;
+ showScrollToBottomToast: boolean;
+ isScrollToBottomDismissed: boolean;
}
export default class PostList extends React.PureComponent
{
@@ -175,6 +177,8 @@ export default class PostList extends React.PureComponent {
showSearchHint: false,
isSearchHintDismissed: false,
isNewMessageLineReached: false,
+ showScrollToBottomToast: false,
+ isScrollToBottomDismissed: false,
};
this.listRef = React.createRef();
@@ -408,7 +412,7 @@ export default class PostList extends React.PureComponent {
const didUserScrollBackwards = scrollDirection === 'backward' && !scrollUpdateWasRequested;
const didUserScrollForwards = scrollDirection === 'forward' && !scrollUpdateWasRequested;
const isOffsetWithInRange = scrollOffset < HEIGHT_TRIGGER_FOR_MORE_POSTS;
- const offsetFromBottom = (scrollHeight - clientHeight) - scrollOffset;
+ const offsetFromBottom = this.getOffsetFromBottom(scrollOffset, scrollHeight, clientHeight);
const shouldLoadNewPosts = offsetFromBottom < HEIGHT_TRIGGER_FOR_MORE_POSTS;
if (didUserScrollBackwards && isOffsetWithInRange && !this.props.atOldestPost) {
@@ -458,6 +462,8 @@ export default class PostList extends React.PureComponent {
showSearchHint: offsetFromBottom > this.showSearchHintThreshold,
});
}
+
+ this.updateScrollToBottomToastVisibility(scrollOffset, scrollHeight, clientHeight);
};
getShowSearchHintThreshold = () => {
@@ -468,9 +474,11 @@ export default class PostList extends React.PureComponent {
this.updateAtBottom(this.isAtBottom(scrollOffset, scrollHeight, clientHeight));
};
+ // Calculate how far the post list is from being scrolled to the bottom
+ getOffsetFromBottom = (scrollOffset: number, scrollHeight: number, clientHeight: number) => scrollHeight - clientHeight - scrollOffset;
+
isAtBottom = (scrollOffset: number, scrollHeight: number, clientHeight: number) => {
- // Calculate how far the post list is from being scrolled to the bottom
- const offsetFromBottom = scrollHeight - clientHeight - scrollOffset;
+ const offsetFromBottom = this.getOffsetFromBottom(scrollOffset, scrollHeight, clientHeight);
return offsetFromBottom <= BUFFER_TO_BE_CONSIDERED_BOTTOM && scrollHeight > 0;
};
@@ -512,6 +520,40 @@ export default class PostList extends React.PureComponent {
});
};
+ handleScrollToBottomToastDismiss = () => {
+ this.setState({
+ showScrollToBottomToast: false,
+ isScrollToBottomDismissed: true,
+ });
+ };
+
+ hideScrollToBottomToast = () => {
+ this.setState({
+ showScrollToBottomToast: false,
+ });
+ };
+
+ /*
+ * - Show the scroll-to-bottom toast at the same time as the search-hint toast.
+ * - Only show if the user hasn't dismissed it before, within a session.
+ * - Hide it if the user is at the bottom of the list.
+ */
+ updateScrollToBottomToastVisibility = (scrollOffset: number, scrollHeight: number, clientHeight: number) => {
+ if (this.state.showScrollToBottomToast && this.state.atBottom) {
+ this.setState({
+ showScrollToBottomToast: false,
+ });
+ return;
+ }
+
+ if (!this.state.isScrollToBottomDismissed) {
+ const offsetFromBottom = this.getOffsetFromBottom(scrollOffset, scrollHeight, clientHeight);
+ this.setState({
+ showScrollToBottomToast: offsetFromBottom > this.showSearchHintThreshold,
+ });
+ }
+ };
+
updateFloatingTimestamp = (visibleTopItem: number) => {
if (!this.props.isMobileView) {
return;
@@ -627,6 +669,9 @@ export default class PostList extends React.PureComponent {
initScrollOffsetFromBottom={this.state.initScrollOffsetFromBottom}
onSearchHintDismiss={this.handleSearchHintDismiss}
showSearchHintToast={this.state.showSearchHint}
+ showScrollToBottomToast={this.state.showScrollToBottomToast}
+ onScrollToBottomToastDismiss={this.handleScrollToBottomToastDismiss}
+ hideScrollToBottomToast={this.hideScrollToBottomToast}
/>
);
};
diff --git a/webapp/channels/src/components/scroll_to_bottom_toast/index.tsx b/webapp/channels/src/components/scroll_to_bottom_toast/index.tsx
new file mode 100644
index 0000000000..7f12d00883
--- /dev/null
+++ b/webapp/channels/src/components/scroll_to_bottom_toast/index.tsx
@@ -0,0 +1,6 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import ScrollToBottomToast from './scroll_to_bottom_toast';
+
+export default ScrollToBottomToast;
diff --git a/webapp/channels/src/components/scroll_to_bottom_toast/scroll_to_bottom_toast.scss b/webapp/channels/src/components/scroll_to_bottom_toast/scroll_to_bottom_toast.scss
new file mode 100644
index 0000000000..45478bb488
--- /dev/null
+++ b/webapp/channels/src/components/scroll_to_bottom_toast/scroll_to_bottom_toast.scss
@@ -0,0 +1,63 @@
+.scroll-to-bottom-toast {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 4px;
+ padding-left: 12px;
+
+ // background-color: var(--center-channel-color--88);
+ background: linear-gradient(0deg, rgba(63, 67, 80, 0.9) 0%, rgba(63, 67, 80, 0.9) 100%), #fff;
+ border-radius: 4px;
+ box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.12);
+ color: var(--sidebar-text);
+ cursor: pointer;
+ font-size: 14px;
+ font-weight: 600;
+ gap: 8px;
+
+ &:hover {
+ background-color: var(--center-channel-color);
+ }
+
+ svg {
+ fill: var(--sidebar-text);
+ vertical-align: middle;
+ }
+
+ body.enable-animations & {
+ transition-duration: 0s;
+ transition-property: opacity, visibility;
+ transition-timing-function: ease-in-out;
+ }
+
+ .scroll-to-bottom-toast__message {
+ display: inline-block;
+ line-height: 20px;
+ vertical-align: middle;
+
+ > svg {
+ margin-right: 8px;
+ }
+ }
+
+ .scroll-to-bottom-toast__dismiss {
+ display: inline-block;
+ padding: 4px;
+ border-radius: 4px;
+
+ &:hover {
+ background-color: var(--center-channel-bg-08);
+ }
+
+ svg {
+ padding-top: 1px; // To align vertically
+ fill: rgba(var(--sidebar-text-rgb), 0.56);
+ vertical-align: middle;
+ }
+
+ .close-btn {
+ cursor: pointer;
+ line-height: normal;
+ }
+ }
+}
diff --git a/webapp/channels/src/components/scroll_to_bottom_toast/scroll_to_bottom_toast.test.tsx b/webapp/channels/src/components/scroll_to_bottom_toast/scroll_to_bottom_toast.test.tsx
new file mode 100644
index 0000000000..171b70d6ce
--- /dev/null
+++ b/webapp/channels/src/components/scroll_to_bottom_toast/scroll_to_bottom_toast.test.tsx
@@ -0,0 +1,66 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {shallow} from 'enzyme';
+import React from 'react';
+
+import ScrollToBottomToast from './scroll_to_bottom_toast';
+
+describe('ScrollToBottomToast Component', () => {
+ const mockOnDismiss = jest.fn();
+ const mockOnClick = jest.fn();
+ const mockOnClickEvent = {
+ preventDefault: jest.fn(),
+ stopPropagation: jest.fn(),
+ };
+
+ it('should render ScrollToBottomToast component', () => {
+ const wrapper = shallow(
+ ,
+ );
+
+ // Assertions
+ expect(wrapper.find('.scroll-to-bottom-toast')).toHaveLength(1);
+ expect(wrapper.find('UnreadBelowIcon')).toHaveLength(1);
+ expect(wrapper.text()).toContain('Jump to recents');
+ expect(wrapper.find('.scroll-to-bottom-toast__dismiss')).toHaveLength(1);
+ expect(wrapper.find('.close-btn')).toHaveLength(1);
+ });
+
+ it('should call onClick when clicked', () => {
+ const wrapper = shallow(
+ ,
+ );
+
+ // Simulate click
+ wrapper.simulate('click', mockOnClickEvent);
+
+ // Expect the onClick function to be called
+ expect(mockOnClick).toHaveBeenCalled();
+ });
+
+ it('should call onDismiss when close button is clicked', () => {
+ const wrapper = shallow(
+ ,
+ );
+
+ // Simulate click on the close button
+ wrapper.find('.scroll-to-bottom-toast__dismiss').simulate('click', mockOnClickEvent);
+
+ // Expect the onDismiss function to be called
+ expect(mockOnDismiss).toHaveBeenCalled();
+
+ // Expect to stop propagation to avoid scrolling down on dismissing
+ expect(mockOnClickEvent.stopPropagation).toHaveBeenCalled();
+ });
+});
+
diff --git a/webapp/channels/src/components/scroll_to_bottom_toast/scroll_to_bottom_toast.tsx b/webapp/channels/src/components/scroll_to_bottom_toast/scroll_to_bottom_toast.tsx
new file mode 100644
index 0000000000..8388bcd2ee
--- /dev/null
+++ b/webapp/channels/src/components/scroll_to_bottom_toast/scroll_to_bottom_toast.tsx
@@ -0,0 +1,61 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {useIntl} from 'react-intl';
+
+import CloseIcon from 'components/widgets/icons/close_icon';
+import UnreadBelowIcon from 'components/widgets/icons/unread_below_icon';
+
+import './scroll_to_bottom_toast.scss';
+
+export const SCROLL_TO_BOTTOM_TOAST_TESTID = 'scroll-to-bottom-toast';
+export const SCROLL_TO_BOTTOM_DISMISS_BUTTON_TESTID = 'scroll-to-bottom-toast--dismiss-button';
+
+type ScrollToBottomToastProps = {
+ onDismiss: () => void;
+ onClick: () => void;
+}
+
+export const ScrollToBottomToast = ({onDismiss, onClick}: ScrollToBottomToastProps) => {
+ const {formatMessage} = useIntl();
+
+ const jumpToRecentsMessage = formatMessage({
+ id: 'postlist.toast.scrollToBottom',
+ defaultMessage: 'Jump to recents',
+ });
+
+ const handleScrollToBottom: React.MouseEventHandler = (e) => {
+ e.preventDefault();
+ onClick();
+ };
+
+ const handleDismiss: React.MouseEventHandler = (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ onDismiss();
+ };
+
+ return (
+
+
+ {jumpToRecentsMessage}
+
+
+
+
+ {toasts}
+
);
}