IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

MM-58351 Fix showing LHS scrollbar when moving mouse over on chrome and safari (#27160)

Browse Source 
* fixing scrollbar not showing when moving mouse over sidebar

* making scrollbar hidden by default and keep shown when hover over channel list

* updating sidebar_list snapshot
This commit is contained in:
Paweł Pohl 2024-07-11 17:13:01 +02:00 committed by GitHub
parent e8b4892877
commit 43b70e287a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 79 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
webapp/channels/src/components/sidebar/sidebar_list/__snapshots__/sidebar_list.test.tsx.snap
View File

@ -37,50 +37,55 @@ exports[`SidebarList should match snapshot 1`] = `
onClick={[Function]}
show={false}
/>
<Scrollbars
autoHeight={false}
autoHeightMax={200}
autoHeightMin={0}
autoHide={true}
autoHideDuration={500}
autoHideTimeout={500}
hideTracksWhenNotNeeded={false}
onScroll={[Function]}
renderThumbHorizontal={[Function]}
renderThumbVertical={[Function]}
renderTrackHorizontal={[Function]}
renderTrackVertical={[Function]}
renderView={[Function]}
style={
Object {
"position": "absolute",
}
}
tagName="div"
thumbMinSize={30}
universal={false}
<div
onPointerLeave={[Function]}
onPointerOver={[Function]}
>
<DragDropContext
onBeforeCapture={[Function]}
onBeforeDragStart={[Function]}
onDragEnd={[Function]}
onDragStart={[Function]}
<Scrollbars
autoHeight={false}
autoHeightMax={200}
autoHeightMin={0}
autoHide={true}
autoHideDuration={200}
autoHideTimeout={1000}
hideTracksWhenNotNeeded={false}
onScroll={[Function]}
renderThumbHorizontal={[Function]}
renderThumbVertical={[Function]}
renderTrackHorizontal={[Function]}
renderTrackVertical={[Function]}
renderView={[Function]}
style={
Object {
"position": "absolute",
}
}
tagName="div"
thumbMinSize={30}
universal={false}
>
<Connect(Droppable)
direction="vertical"
droppableId="droppable-categories"
getContainerForClone={[Function]}
ignoreContainerClipping={false}
isCombineEnabled={false}
isDropDisabled={false}
mode="standard"
renderClone={null}
type="SIDEBAR_CATEGORY"
<DragDropContext
onBeforeCapture={[Function]}
onBeforeDragStart={[Function]}
onDragEnd={[Function]}
onDragStart={[Function]}
>
<Component />
</Connect(Droppable)>
</DragDropContext>
</Scrollbars>
<Connect(Droppable)
direction="vertical"
droppableId="droppable-categories"
getContainerForClone={[Function]}
ignoreContainerClipping={false}
isCombineEnabled={false}
isDropDisabled={false}
mode="standard"
renderClone={null}
type="SIDEBAR_CATEGORY"
>
<Component />
</Connect(Droppable)>
</DragDropContext>
</Scrollbars>
</div>
</div>
</Fragment>
`;

46
webapp/channels/src/components/sidebar/sidebar_list/sidebar_list.tsx
View File

@ -108,6 +108,7 @@ type Props = {
type State = {
showTopUnread: boolean;
showBottomUnread: boolean;
autoHide: boolean;
};
// scrollMargin is the margin at the edge of the channel list that we leave when scrolling to a channel.
@ -125,6 +126,7 @@ export default class SidebarList extends React.PureComponent<Props, State> {
scrollbar: React.RefObject<Scrollbars>;
animate: SpringSystem;
scrollAnimation: Spring;
channelsListScrollTimeout: NodeJS.Timeout | null = null;
constructor(props: Props) {
super(props);
@ -133,6 +135,7 @@ export default class SidebarList extends React.PureComponent<Props, State> {
this.state = {
showTopUnread: false,
showBottomUnread: false,
autoHide: true,
};
this.scrollbar = React.createRef();
@ -462,6 +465,20 @@ export default class SidebarList extends React.PureComponent<Props, State> {
this.props.actions.stopDragging();
};
showChannelListScrollbar = () => {
if (this.channelsListScrollTimeout !== null) {
clearTimeout(this.channelsListScrollTimeout);
}
this.setState({autoHide: false});
};
hideChannelListScrollbar = () => {
this.channelsListScrollTimeout = setTimeout(() => {
this.setState({autoHide: true});
}, 300);
};
render() {
const {categories} = this.props;
@ -562,20 +579,23 @@ export default class SidebarList extends React.PureComponent<Props, State> {
extraClass='nav-pills__unread-indicator-bottom'
content={below}
/>
<Scrollbars
ref={this.scrollbar}
autoHide={true}
autoHideTimeout={500}
autoHideDuration={500}
renderThumbHorizontal={renderThumbHorizontal}
renderThumbVertical={renderThumbVertical}
renderTrackVertical={renderTrackVertical}
renderView={renderView}
onScroll={this.onScroll}
style={scrollbarStyles}
<div
onPointerLeave={this.hideChannelListScrollbar}
onPointerOver={this.showChannelListScrollbar}
>
{channelList}
</Scrollbars>
<Scrollbars
ref={this.scrollbar}
autoHide={this.state.autoHide}
renderThumbHorizontal={renderThumbHorizontal}
renderThumbVertical={renderThumbVertical}
renderTrackVertical={renderTrackVertical}
renderView={renderView}
onScroll={this.onScroll}
style={scrollbarStyles}
>
{channelList}
</Scrollbars>
</div>
</div>
</>
);