mirror of
https://github.com/scratchfoundation/scratch-paint.git
synced 2024-12-23 05:52:42 -05:00
make alt optional for labeled buttons
Also add labels to `defineMessages` for localization. Thanks @fsih!
This commit is contained in:
parent
858a4fbef3
commit
f2e031e787
2 changed files with 61 additions and 19 deletions
|
@ -34,7 +34,7 @@ const LabeledIconButton = ({
|
|||
|
||||
LabeledIconButton.propTypes = {
|
||||
className: PropTypes.string,
|
||||
imgAlt: PropTypes.string.isRequired,
|
||||
imgAlt: PropTypes.string,
|
||||
imgSrc: PropTypes.string.isRequired,
|
||||
onClick: PropTypes.func.isRequired,
|
||||
title: PropTypes.string.isRequired
|
||||
|
|
|
@ -50,6 +50,56 @@ const messages = defineMessages({
|
|||
id: 'paint.paintEditor.costume',
|
||||
description: 'Label for the name of a sound',
|
||||
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}
|
||||
>
|
||||
<img
|
||||
alt="Undo"
|
||||
alt={this.props.intl.formatMessage(messages.undo)}
|
||||
className={styles.buttonGroupButtonIcon}
|
||||
src={undoIcon}
|
||||
/>
|
||||
|
@ -119,7 +169,7 @@ class PaintEditorComponent extends React.Component {
|
|||
onClick={this.props.onRedo}
|
||||
>
|
||||
<img
|
||||
alt="Redo"
|
||||
alt={this.props.intl.formatMessage(messages.redo)}
|
||||
className={styles.buttonGroupButtonIcon}
|
||||
src={redoIcon}
|
||||
/>
|
||||
|
@ -131,16 +181,14 @@ class PaintEditorComponent extends React.Component {
|
|||
<InputGroup className={styles.modDashedBorder}>
|
||||
<LabeledIconButton
|
||||
disabled={!shouldShowGroup()}
|
||||
imgAlt="Group"
|
||||
imgSrc={groupIcon}
|
||||
title="Group"
|
||||
title={this.props.intl.formatMessage(messages.group)}
|
||||
onClick={this.props.onGroup}
|
||||
/>
|
||||
<LabeledIconButton
|
||||
disabled={!shouldShowUngroup()}
|
||||
imgAlt="Ungroup"
|
||||
imgSrc={ungroupIcon}
|
||||
title="Ungroup"
|
||||
title={this.props.intl.formatMessage(messages.ungroup)}
|
||||
onClick={this.props.onUngroup}
|
||||
/>
|
||||
</InputGroup>
|
||||
|
@ -149,16 +197,14 @@ class PaintEditorComponent extends React.Component {
|
|||
<InputGroup className={styles.modDashedBorder}>
|
||||
<LabeledIconButton
|
||||
disabled={!shouldShowBringForward()}
|
||||
imgAlt="Send Forward"
|
||||
imgSrc={sendForwardIcon}
|
||||
title="Forward"
|
||||
title={this.props.intl.formatMessage(messages.forward)}
|
||||
onClick={this.props.onSendForward}
|
||||
/>
|
||||
<LabeledIconButton
|
||||
disabled={!shouldShowSendBackward()}
|
||||
imgAlt="Send Backward"
|
||||
imgSrc={sendBackwardIcon}
|
||||
title="Backward"
|
||||
title={this.props.intl.formatMessage(messages.backward)}
|
||||
onClick={this.props.onSendBackward}
|
||||
/>
|
||||
</InputGroup>
|
||||
|
@ -167,16 +213,14 @@ class PaintEditorComponent extends React.Component {
|
|||
<InputGroup>
|
||||
<LabeledIconButton
|
||||
disabled={!shouldShowBringForward()}
|
||||
imgAlt="Send to Front"
|
||||
imgSrc={sendFrontIcon}
|
||||
title="Front"
|
||||
title={this.props.intl.formatMessage(messages.front)}
|
||||
onClick={this.props.onSendToFront}
|
||||
/>
|
||||
<LabeledIconButton
|
||||
disabled={!shouldShowSendBackward()}
|
||||
imgAlt="Send to Back"
|
||||
imgSrc={sendBackIcon}
|
||||
title="Back"
|
||||
title={this.props.intl.formatMessage(messages.back)}
|
||||
onClick={this.props.onSendToBack}
|
||||
/>
|
||||
</InputGroup>
|
||||
|
@ -217,16 +261,14 @@ class PaintEditorComponent extends React.Component {
|
|||
<InputGroup className={classNames(styles.modDashedBorder, styles.modLabeledIconHeight)}>
|
||||
<LabeledIconButton
|
||||
disabled
|
||||
imgAlt="Copy Icon"
|
||||
imgSrc={copyIcon}
|
||||
title="Copy"
|
||||
title={this.props.intl.formatMessage(messages.copy)}
|
||||
onClick={function () {}}
|
||||
/>
|
||||
<LabeledIconButton
|
||||
disabled
|
||||
imgAlt="Paste Icon"
|
||||
imgSrc={pasteIcon}
|
||||
title="Paste"
|
||||
title={this.props.intl.formatMessage(messages.paste)}
|
||||
onClick={function () {}}
|
||||
/>
|
||||
</InputGroup>
|
||||
|
|
Loading…
Reference in a new issue