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