Improve ShapePainterEditor layout

This commit is contained in:
Florian Rival
2019-12-07 13:24:04 +00:00
parent 00f5cc2e54
commit 4c02468aa4
2 changed files with 11 additions and 10 deletions

View File

@@ -3,10 +3,11 @@ import { Trans } from '@lingui/macro';
import * as React from 'react';
import Checkbox from '../../UI/Checkbox';
import { Line, Column, Spacer } from '../../UI/Grid';
import { Line, Column } from '../../UI/Grid';
import ColorField from '../../UI/ColorField';
import { type EditorProps } from './EditorProps.flow';
import SemiControlledTextField from '../../UI/SemiControlledTextField';
import { ResponsiveLineStackLayout } from '../../UI/Layout';
const gd = global.gd;
export default class PanelSpriteEditor extends React.Component<
@@ -34,7 +35,7 @@ export default class PanelSpriteEditor extends React.Component<
}}
/>
</Line>
<Line>
<ResponsiveLineStackLayout>
<ColorField
floatingLabelText={<Trans>Outline color</Trans>}
disableAlpha
@@ -76,8 +77,8 @@ export default class PanelSpriteEditor extends React.Component<
this.forceUpdate();
}}
/>
</Line>
<Line>
</ResponsiveLineStackLayout>
<ResponsiveLineStackLayout>
<ColorField
floatingLabelText={<Trans>Fill color</Trans>}
disableAlpha
@@ -108,8 +109,7 @@ export default class PanelSpriteEditor extends React.Component<
this.forceUpdate();
}}
/>
<Spacer expand />
</Line>
</ResponsiveLineStackLayout>
</Column>
);
}

View File

@@ -4,7 +4,7 @@ const marginsSize = 4;
/**
* A Line in the standard GDevelop grid to position components.
* Check `Layout` first to see if there is already a layout made
* specifically for your components (like TextFieldWithButton).
* specifically for your components (like `TextFieldWithButton`).
*/
export const Line = props => (
<div
@@ -24,7 +24,7 @@ export const Line = props => (
/**
* A Column in the standard GDevelop grid to position components.
* Check `Layout` first to see if there is already a layout made
* specifically for your components (like TextFieldWithButton).
* specifically for your components (like `TextFieldWithButton`).
*/
export const Column = props => (
<div
@@ -45,13 +45,14 @@ export const Column = props => (
/**
* A Spacer in the standard GDevelop grid to position components.
* Check `Layout` first to see if there is already a layout made
* specifically for your components (like TextFieldWithButton).
* specifically for your components (like `TextFieldWithButton`).
*/
export const Spacer = props => (
<span
style={{
width: props.expand ? '100%' : marginsSize,
width: marginsSize,
height: marginsSize,
flexShrink: 0, // Ensure the spacer is not shrinked when in a flex container
}}
/>
);