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-right',
'arrow-up', 'arrow-up',
'arrows-h', 'arrows-h',
'arrows-v',
'backward', 'backward',
'bars', 'bars',
'bell', 'bell',

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

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