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

DashboardSettings: fixes vertical scrolling (#30640)

Browse Source 
* fix(dashboardsettings): allow view to scroll vertically

* refactor(dashboardsettings): use theme bg colour instead of palette colour
This commit is contained in:
Jack Westbrook 2021-01-26 15:35:30 +01:00 committed by GitHub
parent 1d399b89ea
commit aaa6ebb231
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 48 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
View File

@ -1,7 +1,8 @@
import React, { PureComponent } from 'react';
import { cx } from 'emotion';
import { css, cx } from 'emotion';
import { selectors } from '@grafana/e2e-selectors';
import { Button, CustomScrollbar, Icon, IconName } from '@grafana/ui';
import { Button, CustomScrollbar, Icon, IconName, stylesFactory } from '@grafana/ui';
import config from 'app/core/config';
import { contextSrv } from 'app/core/services/context_srv';
import { BackButton } from 'app/core/components/BackButton/BackButton';
import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher';
@ -15,12 +16,20 @@ import { AnnotationsSettings } from './AnnotationsSettings';
import { LinksSettings } from './LinksSettings';
import { VersionsSettings } from './VersionsSettings';
import { JsonEditorSettings } from './JsonEditorSettings';
import { GrafanaTheme } from '@grafana/data';
export interface Props {
dashboard: DashboardModel;
updateLocation: typeof updateLocation;
editview: string;
}
export interface SettingsPage {
id: string;
title: string;
icon: IconName;
render: () => React.ReactNode;
}
export class DashboardSettings extends PureComponent<Props> {
onClose = () => {
this.props.updateLocation({
@ -142,6 +151,7 @@ export class DashboardSettings extends PureComponent<Props> {
const currentPage = pages.find((page) => page.id === editview) ?? pages[0];
const canSaveAs = contextSrv.hasEditPermissionInFolders;
const canSave = dashboard.meta.canSave;
const styles = getStyles(config.theme);
return (
<div className="dashboard-settings">
@ -154,40 +164,46 @@ export class DashboardSettings extends PureComponent<Props> {
<span>{dashboard.title} / Settings</span>
</div>
</div>
<div className="dashboard-settings__body">
<aside className="dashboard-settings__aside">
{pages.map((page) => (
<a
className={cx('dashboard-settings__nav-item', { active: page.id === editview })}
aria-label={selectors.pages.Dashboard.Settings.General.sectionItems(page.title)}
onClick={() => this.onChangePage(page.id)}
key={page.id}
>
<Icon name={page.icon} style={{ marginRight: '4px' }} />
{page.title}
</a>
))}
<div className="dashboard-settings__aside-actions">
{canSave && <SaveDashboardButton dashboard={dashboard} onSaveSuccess={this.onPostSave} />}
{canSaveAs && (
<SaveDashboardAsButton dashboard={dashboard} onSaveSuccess={this.onPostSave} variant="secondary" />
)}
</div>
</aside>
<div className="dashboard-settings__scroll">
<CustomScrollbar autoHeightMin="100%">
<CustomScrollbar>
<div className={styles.scrollInner}>
<div className={styles.settingsWrapper}>
<aside className="dashboard-settings__aside">
{pages.map((page) => (
<a
className={cx('dashboard-settings__nav-item', { active: page.id === editview })}
aria-label={selectors.pages.Dashboard.Settings.General.sectionItems(page.title)}
onClick={() => this.onChangePage(page.id)}
key={page.id}
>
<Icon name={page.icon} style={{ marginRight: '4px' }} />
{page.title}
</a>
))}
<div className="dashboard-settings__aside-actions">
{canSave && <SaveDashboardButton dashboard={dashboard} onSaveSuccess={this.onPostSave} />}
{canSaveAs && (
<SaveDashboardAsButton dashboard={dashboard} onSaveSuccess={this.onPostSave} variant="secondary" />
)}
</div>
</aside>
<div className="dashboard-settings__content">{currentPage.render()}</div>
</CustomScrollbar>
</div>
</div>
</div>
</CustomScrollbar>
</div>
);
}
}
export interface SettingsPage {
id: string;
title: string;
icon: IconName;
render: () => React.ReactNode;
}
const getStyles = stylesFactory((theme: GrafanaTheme) => ({
scrollInner: css`
min-width: 100%;
min-height: 100%;
`,
settingsWrapper: css`
background: ${theme.colors.bg1};
display: flex;
min-height: 100%;
width: 100%;
`,
}));

6
public/sass/components/_dashboard_settings.scss
View File

@ -20,12 +20,6 @@
background: $panel-bg;
}
.dashboard-settings__scroll {
flex-grow: 1;
min-width: 0;
height: 100%;
}
.dashboard-settings__content {
flex-grow: 1;
min-width: 0;