diff options
4 files changed, 50 insertions, 17 deletions
diff --git a/app/javascript/mastodon/components/__tests__/__snapshots__/button-test.js.snap b/app/javascript/mastodon/components/__tests__/__snapshots__/button-test.js.snap index c3f018d90..707cbf673 100644 --- a/app/javascript/mastodon/components/__tests__/__snapshots__/button-test.js.snap +++ b/app/javascript/mastodon/components/__tests__/__snapshots__/button-test.js.snap @@ -112,3 +112,19 @@ exports[`<Button /> renders the props.text instead of children 1`] = ` foo </button> `; + +exports[`<Button /> renders title if props.title is given 1`] = ` +<button + className="button" + disabled={undefined} + onClick={[Function]} + style={ + Object { + "height": "36px", + "lineHeight": "36px", + "padding": "0 16px", + } + } + title="foo" +/> +`; diff --git a/app/javascript/mastodon/components/__tests__/button-test.js b/app/javascript/mastodon/components/__tests__/button-test.js index 160cd3cbc..924ba39dc 100644 --- a/app/javascript/mastodon/components/__tests__/button-test.js +++ b/app/javascript/mastodon/components/__tests__/button-test.js @@ -72,4 +72,11 @@ describe('<Button />', () => { expect(tree).toMatchSnapshot(); }); + + it('renders title if props.title is given', () => { + const component = renderer.create(<Button title='foo' />); + const tree = component.toJSON(); + + expect(tree).toMatchSnapshot(); + }); }); diff --git a/app/javascript/mastodon/components/button.js b/app/javascript/mastodon/components/button.js index 51e2e6a7a..16868010c 100644 --- a/app/javascript/mastodon/components/button.js +++ b/app/javascript/mastodon/components/button.js @@ -14,6 +14,7 @@ export default class Button extends React.PureComponent { className: PropTypes.string, style: PropTypes.object, children: PropTypes.node, + title: PropTypes.string, }; static defaultProps = { @@ -35,26 +36,26 @@ export default class Button extends React.PureComponent { } render () { - const style = { - padding: `0 ${this.props.size / 2.25}px`, - height: `${this.props.size}px`, - lineHeight: `${this.props.size}px`, - ...this.props.style, + let attrs = { + className: classNames('button', this.props.className, { + 'button-secondary': this.props.secondary, + 'button--block': this.props.block, + }), + disabled: this.props.disabled, + onClick: this.handleClick, + ref: this.setRef, + style: { + padding: `0 ${this.props.size / 2.25}px`, + height: `${this.props.size}px`, + lineHeight: `${this.props.size}px`, + ...this.props.style, + }, }; - const className = classNames('button', this.props.className, { - 'button-secondary': this.props.secondary, - 'button--block': this.props.block, - }); + if (this.props.title) attrs.title = this.props.title; return ( - <button - className={className} - disabled={this.props.disabled} - onClick={this.handleClick} - ref={this.setRef} - style={style} - > + <button {...attrs}> {this.props.text || this.props.children} </button> ); diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js index 4b393bf8b..2da656fc0 100644 --- a/app/javascript/mastodon/features/compose/components/compose_form.js +++ b/app/javascript/mastodon/features/compose/components/compose_form.js @@ -164,6 +164,8 @@ export default class ComposeForm extends ImmutablePureComponent { let publishText = ''; let publishText2 = ''; + let title = ''; + let title2 = ''; const privacyIcons = { none: '', @@ -173,7 +175,10 @@ export default class ComposeForm extends ImmutablePureComponent { direct: 'envelope', }; + title = `${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${this.props.privacy}.short` })}`; + if (showSideArm) { + // Enhanced behavior with dual toot buttons publishText = ( <span> { @@ -185,13 +190,15 @@ export default class ComposeForm extends ImmutablePureComponent { </span> ); + title2 = `${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${secondaryVisibility}.short` })}`; publishText2 = ( <i className={`fa fa-${privacyIcons[secondaryVisibility]}`} - aria-label={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${secondaryVisibility}.short` })}`} + aria-label={title2} /> ); } else { + // Original vanilla behavior - no icon if public or unlisted if (this.props.privacy === 'private' || this.props.privacy === 'direct') { publishText = <span className='compose-form__publish-private'><i className='fa fa-lock' /> {intl.formatMessage(messages.publish)}</span>; } else { @@ -256,6 +263,7 @@ export default class ComposeForm extends ImmutablePureComponent { <Button className='compose-form__publish__side-arm' text={publishText2} + title={title2} onClick={this.handleSubmit2} disabled={submitDisabled} /> : '' @@ -263,6 +271,7 @@ export default class ComposeForm extends ImmutablePureComponent { <Button className='compose-form__publish__primary' text={publishText} + title={title} onClick={this.handleSubmit} disabled={submitDisabled} /> |