scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2024-12-23 05:52:42 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

make alt optional for labeled buttons

Browse source 
Also add labels to `defineMessages` for localization. Thanks @fsih!
This commit is contained in:
Matthew Taylor 2017-10-31 15:03:51 -04:00
parent 858a4fbef3
commit f2e031e787
2 changed files with 61 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/labeled-icon-button/labeled-icon-button.jsx
View file

@ -34,7 +34,7 @@ const LabeledIconButton = ({
LabeledIconButton.propTypes = { LabeledIconButton.propTypes = {
className: PropTypes.string, className: PropTypes.string,
imgAlt: PropTypes.string.isRequired, imgAlt: PropTypes.string,
imgSrc: PropTypes.string.isRequired, imgSrc: PropTypes.string.isRequired,
onClick: PropTypes.func.isRequired, onClick: PropTypes.func.isRequired,
title: PropTypes.string.isRequired title: PropTypes.string.isRequired

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

@ -50,6 +50,56 @@ const messages = defineMessages({
id: 'paint.paintEditor.costume', id: 'paint.paintEditor.costume',
description: 'Label for the name of a sound', description: 'Label for the name of a sound',
defaultMessage: 'Costume' defaultMessage: 'Costume'
},
group: {
defaultMessage: 'Group',
description: 'Label for the button to group shapes',
id: 'paint.paintEditor.group'
},
ungroup: {
defaultMessage: 'Ungroup',
description: 'Label for the button to ungroup shapes',
id: 'paint.paintEditor.ungroup'
},
undo: {
defaultMessage: 'Undo',
description: 'Alt to image for the button to undo an action',
id: 'paint.paintEditor.undo'
},
redo: {
defaultMessage: 'Redo',
description: 'Alt to image for the button to undo an action',
id: 'paint.paintEditor.redo'
},
forward: {
defaultMessage: 'Forward',
description: 'Label for the `Send forward on canvas` button',
id: 'paint.paintEditor.forward'
},
backward: {
defaultMessage: 'Backward',
description: 'Label for the `Send backward on canvas` button',
id: 'paint.paintEditor.backward'
},
front: {
defaultMessage: 'Front',
description: 'Label for the `Send to front of canvas` button',
id: 'paint.paintEditor.front'
},
back: {
defaultMessage: 'Back',
description: 'Label for the `Send to back of canvas` button',
id: 'paint.paintEditor.back'
},
copy: {
defaultMessage: 'Copy',
description: 'Label for the copy button',
id: 'paint.paintEditor.copy'
},
paste: {
defaultMessage: 'Paste',
description: 'Label for the paste button',
id: 'paint.paintEditor.paste'
} }
}); });
@ -101,7 +151,7 @@ class PaintEditorComponent extends React.Component {
onClick={this.props.onUndo} onClick={this.props.onUndo}
> >
<img <img
alt="Undo" alt={this.props.intl.formatMessage(messages.undo)}
className={styles.buttonGroupButtonIcon} className={styles.buttonGroupButtonIcon}
src={undoIcon} src={undoIcon}
/> />
@ -119,7 +169,7 @@ class PaintEditorComponent extends React.Component {
onClick={this.props.onRedo} onClick={this.props.onRedo}
> >
<img <img
alt="Redo" alt={this.props.intl.formatMessage(messages.redo)}
className={styles.buttonGroupButtonIcon} className={styles.buttonGroupButtonIcon}
src={redoIcon} src={redoIcon}
/> />
@ -131,16 +181,14 @@ class PaintEditorComponent extends React.Component {
<InputGroup className={styles.modDashedBorder}> <InputGroup className={styles.modDashedBorder}>
<LabeledIconButton <LabeledIconButton
disabled={!shouldShowGroup()} disabled={!shouldShowGroup()}
imgAlt="Group"
imgSrc={groupIcon} imgSrc={groupIcon}
title="Group" title={this.props.intl.formatMessage(messages.group)}
onClick={this.props.onGroup} onClick={this.props.onGroup}
/> />
<LabeledIconButton <LabeledIconButton
disabled={!shouldShowUngroup()} disabled={!shouldShowUngroup()}
imgAlt="Ungroup"
imgSrc={ungroupIcon} imgSrc={ungroupIcon}
title="Ungroup" title={this.props.intl.formatMessage(messages.ungroup)}
onClick={this.props.onUngroup} onClick={this.props.onUngroup}
/> />
</InputGroup> </InputGroup>
@ -149,16 +197,14 @@ class PaintEditorComponent extends React.Component {
<InputGroup className={styles.modDashedBorder}> <InputGroup className={styles.modDashedBorder}>
<LabeledIconButton <LabeledIconButton
disabled={!shouldShowBringForward()} disabled={!shouldShowBringForward()}
imgAlt="Send Forward"
imgSrc={sendForwardIcon} imgSrc={sendForwardIcon}
title="Forward" title={this.props.intl.formatMessage(messages.forward)}
onClick={this.props.onSendForward} onClick={this.props.onSendForward}
/> />
<LabeledIconButton <LabeledIconButton
disabled={!shouldShowSendBackward()} disabled={!shouldShowSendBackward()}
imgAlt="Send Backward"
imgSrc={sendBackwardIcon} imgSrc={sendBackwardIcon}
title="Backward" title={this.props.intl.formatMessage(messages.backward)}
onClick={this.props.onSendBackward} onClick={this.props.onSendBackward}
/> />
</InputGroup> </InputGroup>
@ -167,16 +213,14 @@ class PaintEditorComponent extends React.Component {
<InputGroup> <InputGroup>
<LabeledIconButton <LabeledIconButton
disabled={!shouldShowBringForward()} disabled={!shouldShowBringForward()}
imgAlt="Send to Front"
imgSrc={sendFrontIcon} imgSrc={sendFrontIcon}
title="Front" title={this.props.intl.formatMessage(messages.front)}
onClick={this.props.onSendToFront} onClick={this.props.onSendToFront}
/> />
<LabeledIconButton <LabeledIconButton
disabled={!shouldShowSendBackward()} disabled={!shouldShowSendBackward()}
imgAlt="Send to Back"
imgSrc={sendBackIcon} imgSrc={sendBackIcon}
title="Back" title={this.props.intl.formatMessage(messages.back)}
onClick={this.props.onSendToBack} onClick={this.props.onSendToBack}
/> />
</InputGroup> </InputGroup>
@ -217,16 +261,14 @@ class PaintEditorComponent extends React.Component {
<InputGroup className={classNames(styles.modDashedBorder, styles.modLabeledIconHeight)}> <InputGroup className={classNames(styles.modDashedBorder, styles.modLabeledIconHeight)}>
<LabeledIconButton <LabeledIconButton
disabled disabled
imgAlt="Copy Icon"
imgSrc={copyIcon} imgSrc={copyIcon}
title="Copy" title={this.props.intl.formatMessage(messages.copy)}
onClick={function () {}} onClick={function () {}}
/> />
<LabeledIconButton <LabeledIconButton
disabled disabled
imgAlt="Paste Icon"
imgSrc={pasteIcon} imgSrc={pasteIcon}
title="Paste" title={this.props.intl.formatMessage(messages.paste)}
onClick={function () {}} onClick={function () {}}
/> />
</InputGroup> </InputGroup>