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

Canvas: Increase Add Item picker width (#56204)

Browse Source
This commit is contained in:
Adela Almasan 2022-10-04 14:22:11 -05:00 committed by GitHub
parent 4fc9b9aa35
commit 8833e35b43
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
public/app/plugins/panel/canvas/editor/TreeNavigationEditor.tsx
View File

@ -1,10 +1,11 @@
import { css } from '@emotion/css';
import { Global } from '@emotion/react'; import { Global } from '@emotion/react';
import Tree from 'rc-tree'; import Tree from 'rc-tree';
import React, { Key, useEffect, useMemo, useState } from 'react'; import React, { Key, useEffect, useMemo, useState } from 'react';
import { SelectableValue, StandardEditorProps } from '@grafana/data'; import { GrafanaTheme2, SelectableValue, StandardEditorProps } from '@grafana/data';
import { config } from '@grafana/runtime'; import { config } from '@grafana/runtime';
import { Button, HorizontalGroup, Icon, useTheme2 } from '@grafana/ui'; import { Button, HorizontalGroup, Icon, useStyles2, useTheme2 } from '@grafana/ui';
import { ElementState } from 'app/features/canvas/runtime/element'; import { ElementState } from 'app/features/canvas/runtime/element';
import { AddLayerButton } from '../../../../core/components/Layers/AddLayerButton'; import { AddLayerButton } from '../../../../core/components/Layers/AddLayerButton';
@ -29,6 +30,7 @@ export const TreeNavigationEditor = ({ item }: StandardEditorProps<any, TreeView
const theme = useTheme2(); const theme = useTheme2();
const globalCSS = getGlobalStyles(theme); const globalCSS = getGlobalStyles(theme);
const styles = useStyles2(getStyles);
const selectedBgColor = theme.v1.colors.formInputBorderActive; const selectedBgColor = theme.v1.colors.formInputBorderActive;
const { settings } = item; const { settings } = item;
@ -162,8 +164,8 @@ export const TreeNavigationEditor = ({ item }: StandardEditorProps<any, TreeView
multiple={true} multiple={true}
/> />
<HorizontalGroup> <HorizontalGroup justify="space-between">
<div style={{ marginLeft: '18px' }}> <div className={styles.addLayerButton}>
<AddLayerButton onChange={onAddItem} options={typeOptions} label={'Add item'} /> <AddLayerButton onChange={onAddItem} options={typeOptions} label={'Add item'} />
</div> </div>
{selection.length > 0 && ( {selection.length > 0 && (
@ -180,3 +182,10 @@ export const TreeNavigationEditor = ({ item }: StandardEditorProps<any, TreeView
</> </>
); );
}; };
const getStyles = (theme: GrafanaTheme2) => ({
addLayerButton: css`
margin-left: 18px;
min-width: 150px;
`,
});