scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2025-01-24 13:19:54 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add UI formatting for edit fields

Browse source 
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
1 changed files with 6 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/paint-editor/paint-editor.jsx
View file

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