mirror of
https://github.com/mattermost/mattermost.git
synced 2025-02-25 18:55:24 -06:00
MM-57411: Change RHS scroll direction and fix advanced text editor to the bottom (#27162)
Automatic Merge
This commit is contained in:
parent
453eabb54a
commit
50ebf8cc13
@ -27,7 +27,7 @@
|
||||
}
|
||||
|
||||
.ThreadViewer & {
|
||||
padding-top: 12px;
|
||||
padding-top: 0px;
|
||||
|
||||
.AutoHeight {
|
||||
position: absolute;
|
||||
|
@ -9,6 +9,7 @@
|
||||
}
|
||||
|
||||
.post-list__dynamic--RHS {
|
||||
padding-bottom: 8px;
|
||||
scrollbar-color: var(--center-channel-color-32) #fff0;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
@ -0,0 +1,7 @@
|
||||
.virtual-list{
|
||||
&__ctr{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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();
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user