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

Merge pull request #15798 from grafana/fixed-scrollbar-not-visible

Browse Source 
Fixed scrollbar not visible initially (only after manual scroll)
This commit is contained in:
Torkel Ödegaard 2019-03-05 17:34:30 +01:00 committed by GitHub
commit 281d9f6058
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
View File

@ -15,6 +15,7 @@ interface Props {
scrollTop?: number;
setScrollTop: (event: any) => void;
autoHeightMin?: number | string;
updateAfterMountMs?: number;
}
/**
@ -48,6 +49,20 @@ export class CustomScrollbar extends Component<Props> {
componentDidMount() {
this.updateScroll();
// this logic is to make scrollbar visible when content is added body after mount
if (this.props.updateAfterMountMs) {
setTimeout(() => this.updateAfterMount(), this.props.updateAfterMountMs);
}
}
updateAfterMount() {
if (this.ref && this.ref.current) {
const scrollbar = this.ref.current as any;
if (scrollbar.update) {
scrollbar.update();
}
}
}
componentDidUpdate() {

1
public/app/features/dashboard/containers/DashboardPage.tsx
View File

@ -272,6 +272,7 @@ export class DashboardPage extends PureComponent<Props, State> {
autoHeightMin={'100%'}
setScrollTop={this.setScrollTop}
scrollTop={scrollTop}
updateAfterMountMs={500}
className="custom-scrollbar--page"
>
{editview && <DashboardSettings dashboard={dashboard} />}

2
public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap
View File

@ -113,6 +113,7 @@ exports[`DashboardPage Dashboard init completed Should render dashboard grid 1`
hideTracksWhenNotNeeded={false}
scrollTop={0}
setScrollTop={[Function]}
updateAfterMountMs={500}
>
<div
className="dashboard-container"
@ -349,6 +350,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti
hideTracksWhenNotNeeded={false}
scrollTop={0}
setScrollTop={[Function]}
updateAfterMountMs={500}
>
<DashboardSettings
dashboard={

2
public/app/features/dashboard/panel_editor/EditorTabBody.tsx
View File

@ -118,7 +118,7 @@ export class EditorTabBody extends PureComponent<Props, State> {
{toolbarItems.map(item => this.renderButton(item))}
</div>
<div className="panel-editor__scroll">
<CustomScrollbar autoHide={false} scrollTop={scrollTop} setScrollTop={setScrollTop}>
<CustomScrollbar autoHide={false} scrollTop={scrollTop} setScrollTop={setScrollTop} updateAfterMountMs={300}>
<div className="panel-editor__content">
<FadeIn in={isOpen} duration={200} unmountOnExit={true}>
{openView && this.renderOpenView(openView)}