Commit 8237c22e by Johannes Schill

fix: Add CustomScroller on DataSources page

parent 47d86ee8
...@@ -8,6 +8,7 @@ interface Props { ...@@ -8,6 +8,7 @@ interface Props {
autoHideDuration?: number; autoHideDuration?: number;
autoMaxHeight?: string; autoMaxHeight?: string;
hideTracksWhenNotNeeded?: boolean; hideTracksWhenNotNeeded?: boolean;
autoHeightMin?: number | string;
} }
/** /**
...@@ -21,6 +22,7 @@ export class CustomScrollbar extends PureComponent<Props> { ...@@ -21,6 +22,7 @@ export class CustomScrollbar extends PureComponent<Props> {
autoHideDuration: 200, autoHideDuration: 200,
autoMaxHeight: '100%', autoMaxHeight: '100%',
hideTracksWhenNotNeeded: false, hideTracksWhenNotNeeded: false,
autoHeightMin: '0'
}; };
render() { render() {
...@@ -32,7 +34,6 @@ export class CustomScrollbar extends PureComponent<Props> { ...@@ -32,7 +34,6 @@ export class CustomScrollbar extends PureComponent<Props> {
autoHeight={true} autoHeight={true}
// These autoHeightMin & autoHeightMax options affect firefox and chrome differently. // These autoHeightMin & autoHeightMax options affect firefox and chrome differently.
// Before these where set to inhert but that caused problems with cut of legends in firefox // Before these where set to inhert but that caused problems with cut of legends in firefox
autoHeightMin={'0'}
autoHeightMax={autoMaxHeight} autoHeightMax={autoMaxHeight}
renderTrackHorizontal={props => <div {...props} className="track-horizontal" />} renderTrackHorizontal={props => <div {...props} className="track-horizontal" />}
renderTrackVertical={props => <div {...props} className="track-vertical" />} renderTrackVertical={props => <div {...props} className="track-vertical" />}
......
...@@ -4,6 +4,7 @@ import React, { Component } from 'react'; ...@@ -4,6 +4,7 @@ import React, { Component } from 'react';
// Components // Components
import PageHeader from '../PageHeader/PageHeader'; import PageHeader from '../PageHeader/PageHeader';
import PageContents from './PageContents'; import PageContents from './PageContents';
import { CustomScrollbar } from '@grafana/ui';
interface Props { interface Props {
title: string; title: string;
...@@ -11,13 +12,36 @@ interface Props { ...@@ -11,13 +12,36 @@ interface Props {
} }
class Page extends Component<Props> { class Page extends Component<Props> {
private bodyClass = 'is-react';
private body = document.getElementsByTagName('body')[0];
private footer = document.getElementsByClassName('footer')[0].cloneNode(true);
private scrollbarElementRef = React.createRef<HTMLDivElement>();
static Header = PageHeader; static Header = PageHeader;
static Contents = PageContents; static Contents = PageContents;
componentDidMount() {
this.body.classList.add(this.bodyClass);
this.copyFooter();
}
componentWillUnmount() {
this.body.classList.remove(this.bodyClass);
}
copyFooter = () => {
const c = this.scrollbarElementRef.current;
c.append(this.footer);
}
render() { render() {
return ( return (
<div> <div className="page-scrollbar-wrapper">
{this.props.children} <CustomScrollbar autoHeightMin={'100%'}>
<div className="page-scrollbar-content" ref={this.scrollbarElementRef}>
{this.props.children}
</div>
</CustomScrollbar>
</div> </div>
); );
} }
......
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
// Components // Components
import { CustomScrollbar } from '@grafana/ui';
import PageLoader from '../PageLoader/PageLoader'; import PageLoader from '../PageLoader/PageLoader';
interface Props { interface Props {
...@@ -17,10 +16,8 @@ class PageContents extends Component<Props> { ...@@ -17,10 +16,8 @@ class PageContents extends Component<Props> {
return ( return (
<div className="page-container page-body"> <div className="page-container page-body">
<CustomScrollbar> {isLoading && <PageLoader />}
{isLoading && <PageLoader />} {this.props.children}
{this.props.children}
</CustomScrollbar>
</div> </div>
); );
} }
......
...@@ -5,7 +5,7 @@ import Page from 'app/core/components/Page/Page'; ...@@ -5,7 +5,7 @@ import Page from 'app/core/components/Page/Page';
import OrgActionBar from 'app/core/components/OrgActionBar/OrgActionBar'; import OrgActionBar from 'app/core/components/OrgActionBar/OrgActionBar';
import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA'; import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
import DataSourcesList from './DataSourcesList'; import DataSourcesList from './DataSourcesList';
import { DataSource, NavModel } from 'app/types'; import { DataSource, NavModel, StoreState } from 'app/types';
import { LayoutMode } from 'app/core/components/LayoutSelector/LayoutSelector'; import { LayoutMode } from 'app/core/components/LayoutSelector/LayoutSelector';
import { loadDataSources, setDataSourcesLayoutMode, setDataSourcesSearchQuery } from './state/actions'; import { loadDataSources, setDataSourcesLayoutMode, setDataSourcesSearchQuery } from './state/actions';
import { getNavModel } from 'app/core/selectors/navModel'; import { getNavModel } from 'app/core/selectors/navModel';
...@@ -90,7 +90,7 @@ export class DataSourcesListPage extends PureComponent<Props> { ...@@ -90,7 +90,7 @@ export class DataSourcesListPage extends PureComponent<Props> {
} }
} }
function mapStateToProps(state) { function mapStateToProps(state: StoreState) {
return { return {
navModel: getNavModel(state.navIndex, 'datasources'), navModel: getNavModel(state.navIndex, 'datasources'),
dataSources: getDataSources(state.dataSources), dataSources: getDataSources(state.dataSources),
......
...@@ -38,6 +38,14 @@ ...@@ -38,6 +38,14 @@
} }
} }
.is-react .footer {
display: none;
}
.is-react .custom-scrollbars .footer {
display: block;
}
// Keeping footer inside the graphic on Login screen // Keeping footer inside the graphic on Login screen
.login-page { .login-page {
.footer { .footer {
......
...@@ -20,7 +20,23 @@ ...@@ -20,7 +20,23 @@
} }
} }
.page-scrollbar-wrapper {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.page-scrollbar-content {
display: flex;
min-height: 100%;
flex-direction: column;
width: 100%;
}
.page-container { .page-container {
flex-grow: 1;
width: 100%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-left: $spacer*2; padding-left: $spacer*2;
...@@ -78,7 +94,6 @@ ...@@ -78,7 +94,6 @@
.page-body { .page-body {
padding-top: $spacer*2; padding-top: $spacer*2;
min-height: 500px;
} }
.page-heading { .page-heading {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment