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: Add constraint selection icons (#52504)

Browse Source
This commit is contained in:
Drew Slobodnjak 2022-07-20 09:49:34 -07:00 committed by GitHub
parent 355489d9b4
commit feb9960f96
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/grafana-ui/src/types/icon.ts
View File

@ -24,6 +24,7 @@ export const getAvailableIcons = () =>
'arrow-right',
'arrow-up',
'arrows-h',
'arrows-v',
'backward',
'bars',
'bell',

20
public/app/plugins/panel/canvas/editor/PlacementEditor.tsx
View File

@ -3,7 +3,7 @@ import { useObservable } from 'react-use';
import { Subject } from 'rxjs';
import { SelectableValue, StandardEditorProps } from '@grafana/data';
import { Field, HorizontalGroup, InlineField, InlineFieldRow, Select, VerticalGroup } from '@grafana/ui';
import { Field, HorizontalGroup, Icon, InlineField, InlineFieldRow, Select, VerticalGroup } from '@grafana/ui';
import { NumberInput } from 'app/core/components/OptionsUI/NumberInput';
import { HorizontalConstraint, Placement, VerticalConstraint } from 'app/features/canvas';
@ -18,7 +18,7 @@ const places: Array<keyof Placement> = ['top', 'left', 'bottom', 'right', 'width
const horizontalOptions: Array<SelectableValue<HorizontalConstraint>> = [
{ label: 'Left', value: HorizontalConstraint.Left },
{ label: 'Right', value: HorizontalConstraint.Right },
{ label: 'Left and right', value: HorizontalConstraint.LeftRight },
{ label: 'Left & right', value: HorizontalConstraint.LeftRight },
{ label: 'Center', value: HorizontalConstraint.Center },
{ label: 'Scale', value: HorizontalConstraint.Scale },
];
@ -26,7 +26,7 @@ const horizontalOptions: Array<SelectableValue<HorizontalConstraint>> = [
const verticalOptions: Array<SelectableValue<VerticalConstraint>> = [
{ label: 'Top', value: VerticalConstraint.Top },
{ label: 'Bottom', value: VerticalConstraint.Bottom },
{ label: 'Top and bottom', value: VerticalConstraint.TopBottom },
{ label: 'Top & bottom', value: VerticalConstraint.TopBottom },
{ label: 'Center', value: VerticalConstraint.Center },
{ label: 'Scale', value: VerticalConstraint.Scale },
];
@ -99,8 +99,18 @@ export const PlacementEditor: FC<StandardEditorProps<any, CanvasEditorOptions, P
currentConstraints={constraint}
/>
<VerticalGroup>
<Select options={verticalOptions} onChange={onVerticalConstraintSelect} value={constraint.vertical} />
<Select options={horizontalOptions} onChange={onHorizontalConstraintSelect} value={constraint.horizontal} />
<HorizontalGroup>
<Icon name="arrows-h" />
<Select
options={horizontalOptions}
onChange={onHorizontalConstraintSelect}
value={constraint.horizontal}
/>
</HorizontalGroup>
<HorizontalGroup>
<Icon name="arrows-v" />
<Select options={verticalOptions} onChange={onVerticalConstraintSelect} value={constraint.vertical} />
</HorizontalGroup>
</VerticalGroup>
</HorizontalGroup>
</Field>