IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-15 01:53:33 -06:00
Code Issues Packages Projects Releases Wiki Activity

PanelEdit: Title tweaks (#22237)

Browse Source
This commit is contained in:
Torkel Ödegaard 2020-02-17 07:28:00 +01:00 committed by GitHub
parent 5396c9ef92
commit bfa959c66a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
View File

@ -279,11 +279,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
>
{this.renderHorizontalSplit(styles)}
<div className={styles.panelOptionsPane}>
<CustomScrollbar
className={css`
height: 100% !important;
`}
>
<CustomScrollbar>
{this.renderFieldOptions()}
<OptionsGroup title="Old settings">{this.renderVisSettings()}</OptionsGroup>
</CustomScrollbar>
@ -403,6 +399,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
position: relative;
`,
toolbarLeft: css`
padding-left: ${theme.spacing.sm};
display: flex;
align-items: center;
`,

29
public/app/features/dashboard/components/PanelEditor/PanelTitle.tsx
View File

@ -1,6 +1,7 @@
import React, { useState } from 'react';
import { css } from 'emotion';
import { Forms, useTheme } from '@grafana/ui';
import { Forms, useTheme, stylesFactory } from '@grafana/ui';
import { GrafanaTheme } from '@grafana/data';
interface PanelTitleProps {
value: string;
@ -10,26 +11,30 @@ interface PanelTitleProps {
export const PanelTitle: React.FC<PanelTitleProps> = ({ value, onChange }) => {
const [isEditing, setIsEditing] = useState(false);
const theme = useTheme();
const styles = getStyles(theme);
return (
<>
<div className={styles.wrapper}>
{isEditing ? (
<Forms.Input
value={value || ''}
ref={elem => elem && elem.focus()}
onChange={e => onChange(e.currentTarget.value)}
onBlur={() => setIsEditing(false)}
placeholder="Panel Title"
/>
) : (
<span
className={css`
font-size: ${theme.typography.size.lg};
margin-left: ${theme.spacing.sm};
`}
onClick={() => setIsEditing(true)}
>
{value}
</span>
<span onClick={() => setIsEditing(true)}>{value}</span>
)}
</>
</div>
);
};
const getStyles = stylesFactory((theme: GrafanaTheme) => {
return {
wrapper: css`
font-size: ${theme.typography.size.lg};
padding-left: ${theme.spacing.md};
`,
};
});