Add UI formatting for edit fields

This adds formatting and icons to the edit field buttons at the top of the ui, as well as some additional components for abstraction – such as `InputGroup`, `ButtonGroup` and `EditFieldButton` (which is a subcomponent of the paint editor)
This commit is contained in:
Matthew Taylor 2017-10-23 10:35:30 -04:00 committed by DD
parent 75a2f804cc
commit 091201756b

View file

@ -101,13 +101,13 @@ class PaintEditorComponent extends React.Component {
</ButtonGroup>
</InputGroup>
{/* To be Group/Ungroup */}
{/* Group/Ungroup */}
<InputGroup className={styles.modDashedBorder}>
<EditFieldButton
imgAlt="Group Icon"
imgSrc={groupIcon}
title="Group"
onClick={function () {}}
onClick={this.props.onGroup}
/>
<EditFieldButton
imgAlt="Ungroup Icon"
@ -150,14 +150,14 @@ class PaintEditorComponent extends React.Component {
</InputGroup>
{/* To be rotation point */}
{/* <InputGroup>
<InputGroup>
<EditFieldButton
imgAlt="Rotation Point Icon"
imgSrc={rotationPointIcon}
title="Rotation Point"
onClick={function () {}}
/>
</InputGroup> */}
</InputGroup>
</div>
{/* Second Row */}
@ -236,12 +236,14 @@ class PaintEditorComponent extends React.Component {
PaintEditorComponent.propTypes = {
intl: intlShape,
name: PropTypes.string,
onGroup: PropTypes.func.isRequired,
onRedo: PropTypes.func.isRequired,
onSendBackward: PropTypes.func.isRequired,
onSendForward: PropTypes.func.isRequired,
onSendToBack: PropTypes.func.isRequired,
onSendToFront: PropTypes.func.isRequired,
onUndo: PropTypes.func.isRequired,
onUngroup: PropTypes.func.isRequired,
onUpdateName: PropTypes.func.isRequired,
onUpdateSvg: PropTypes.func.isRequired,
rotationCenterX: PropTypes.number,