IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-15 10:03: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)} {this.renderHorizontalSplit(styles)}
<div className={styles.panelOptionsPane}> <div className={styles.panelOptionsPane}>
<CustomScrollbar <CustomScrollbar>
className={css`
height: 100% !important;
`}
>
{this.renderFieldOptions()} {this.renderFieldOptions()}
<OptionsGroup title="Old settings">{this.renderVisSettings()}</OptionsGroup> <OptionsGroup title="Old settings">{this.renderVisSettings()}</OptionsGroup>
</CustomScrollbar> </CustomScrollbar>
@ -403,6 +399,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
position: relative; position: relative;
`, `,
toolbarLeft: css` toolbarLeft: css`
padding-left: ${theme.spacing.sm};
display: flex; display: flex;
align-items: center; align-items: center;
`, `,

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

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