MM-57411: Change RHS scroll direction and fix advanced text editor to the bottom (#27162)

Automatic Merge
This commit is contained in:
Ashish Dhama 2024-08-01 18:57:53 +05:30 committed by GitHub
parent 453eabb54a
commit 50ebf8cc13
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 30 additions and 27 deletions

View File

@ -27,7 +27,7 @@
}
.ThreadViewer & {
padding-top: 12px;
padding-top: 0px;
.AutoHeight {
position: absolute;

View File

@ -9,6 +9,7 @@
}
.post-list__dynamic--RHS {
padding-bottom: 8px;
scrollbar-color: var(--center-channel-color-32) #fff0;
scrollbar-width: thin;
}

View File

@ -0,0 +1,7 @@
.virtual-list{
&__ctr{
display: flex;
height: 100%;
flex-direction: column;
}
}

View File

@ -26,6 +26,7 @@ import type {FakePost} from 'types/store/rhs';
import CreateComment from './create_comment';
import Row from './thread_viewer_row';
import './virtualized_thread_viewer.scss';
type Props = {
currentUserId: string;
@ -45,7 +46,6 @@ type Props = {
}
type State = {
createCommentHeight: number;
isScrolling: boolean;
topRhsPostId?: string;
userScrolledToBottom: boolean;
@ -58,9 +58,11 @@ type State = {
const virtListStyles = {
position: 'absolute',
top: '0',
height: '100%',
willChange: 'auto',
willChange: 'transform',
overflowY: 'auto',
overflowAnchor: 'none',
bottom: '0px',
maxHeight: '100%',
};
const innerStyles = {
@ -81,6 +83,11 @@ const THREADING_TIME: typeof BASE_THREADING_TIME = {
};
const OFFSET_TO_SHOW_TOAST = -50;
// To handle issue caused by slight difference in scrollHeight and scrollOffset + clientHeight of virtaulized list
// we add a buffer to the scrollOffset
const SCROLL_OFFSET_BUFFER = 5;
const OVERSCAN_COUNT_FORWARD = 80;
const OVERSCAN_COUNT_BACKWARD = 80;
@ -88,7 +95,6 @@ class ThreadViewerVirtualized extends PureComponent<Props, State> {
private mounted = false;
private scrollStopAction: DelayedAction;
private scrollShortCircuit = 0;
postCreateContainerRef: RefObject<HTMLDivElement>;
listRef: RefObject<DynamicSizeList>;
innerRef: RefObject<HTMLDivElement>;
initRangeToRender: number[];
@ -105,11 +111,9 @@ class ThreadViewerVirtualized extends PureComponent<Props, State> {
this.listRef = React.createRef();
this.innerRef = React.createRef();
this.postCreateContainerRef = React.createRef();
this.scrollStopAction = new DelayedAction(this.handleScrollStop);
this.state = {
createCommentHeight: 0,
isScrolling: false,
userScrolledToBottom: false,
topRhsPostId: undefined,
@ -184,11 +188,10 @@ class ThreadViewerVirtualized extends PureComponent<Props, State> {
if (scrollHeight <= 0) {
return;
}
const {createCommentHeight} = this.state;
const updatedState: Partial<State> = {};
const userScrolledToBottom = scrollHeight - scrollOffset - createCommentHeight <= clientHeight;
const userScrolledToBottom = scrollHeight - scrollOffset - SCROLL_OFFSET_BUFFER <= clientHeight;
if (!scrollUpdateWasRequested) {
this.scrollShortCircuit = 0;
@ -350,18 +353,6 @@ class ThreadViewerVirtualized extends PureComponent<Props, State> {
a11yIndex++;
}
if (isCreateComment(itemId)) {
return (
<CreateComment
placeholder={this.props.inputPlaceholder}
isThreadView={this.props.isThreadView}
ref={this.postCreateContainerRef}
teammate={this.props.directTeammate}
threadId={this.props.selected.id}
/>
);
}
return (
<div
style={style}
@ -423,7 +414,7 @@ class ThreadViewerVirtualized extends PureComponent<Props, State> {
const {topRhsPostId} = this.state;
return (
<>
<div className='virtual-list__ctr'>
{this.props.isMobileView && topRhsPostId && !this.props.useRelativeTimestamp && (
<FloatingTimestamp
isRhsPost={true}
@ -468,7 +459,13 @@ class ThreadViewerVirtualized extends PureComponent<Props, State> {
)}
</AutoSizer>
</div>
</>
<CreateComment
placeholder={this.props.inputPlaceholder}
isThreadView={this.props.isThreadView}
teammate={this.props.directTeammate}
threadId={this.props.selected.id}
/>
</div>
);
}
}

View File

@ -13,7 +13,7 @@ import {makeGetPostsForIds} from 'mattermost-redux/selectors/entities/posts';
import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
import {getThreads} from 'mattermost-redux/selectors/entities/threads';
import {createIdsSelector} from 'mattermost-redux/utils/helpers';
import {DATE_LINE, makeCombineUserActivityPosts, START_OF_NEW_MESSAGES, CREATE_COMMENT} from 'mattermost-redux/utils/post_list';
import {DATE_LINE, makeCombineUserActivityPosts, START_OF_NEW_MESSAGES} from 'mattermost-redux/utils/post_list';
import {getUserCurrentTimezone} from 'mattermost-redux/utils/timezone_utils';
import {getIsRhsOpen, getSelectedPostId} from 'selectors/rhs';
@ -149,8 +149,6 @@ export function makeFilterRepliesAndAddSeparators() {
out.push(post.id);
}
out.push(CREATE_COMMENT);
// Flip it back to newest to oldest
return out.reverse();
},