diff options
| -rw-r--r-- | app/javascript/mastodon/components/button.js | 18 | ||||
| -rw-r--r-- | app/javascript/mastodon/features/ui/components/confirmation_modal.js | 19 | ||||
| -rw-r--r-- | app/javascript/styles/components.scss | 10 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | yarn.lock | 2 |
5 files changed, 36 insertions, 14 deletions
diff --git a/app/javascript/mastodon/components/button.js b/app/javascript/mastodon/components/button.js index cc6482cde..aeb6b7c03 100644 --- a/app/javascript/mastodon/components/button.js +++ b/app/javascript/mastodon/components/button.js @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import classNames from 'classnames'; class Button extends React.PureComponent { @@ -10,6 +11,7 @@ class Button extends React.PureComponent { block: PropTypes.bool, secondary: PropTypes.bool, size: PropTypes.number, + className: PropTypes.string, style: PropTypes.object, children: PropTypes.node, }; @@ -24,6 +26,14 @@ class Button extends React.PureComponent { } } + setRef = (c) => { + this.node = c; + } + + focus() { + this.node.focus(); + } + render () { const style = { padding: `0 ${this.props.size / 2.25}px`, @@ -32,11 +42,17 @@ class Button extends React.PureComponent { ...this.props.style, }; + const className = classNames('button', this.props.className, { + 'button-secondary': this.props.secondary, + 'button--block': this.props.block, + }); + return ( <button - className={`button ${this.props.secondary ? 'button-secondary' : ''} ${this.props.block ? 'button--block' : ''}`} + className={className} disabled={this.props.disabled} onClick={this.handleClick} + ref={this.setRef} style={style} > {this.props.text || this.props.children} diff --git a/app/javascript/mastodon/features/ui/components/confirmation_modal.js b/app/javascript/mastodon/features/ui/components/confirmation_modal.js index d0c092737..f33bfd445 100644 --- a/app/javascript/mastodon/features/ui/components/confirmation_modal.js +++ b/app/javascript/mastodon/features/ui/components/confirmation_modal.js @@ -13,18 +13,25 @@ class ConfirmationModal extends React.PureComponent { intl: PropTypes.object.isRequired, }; + componentDidMount() { + this.button.focus(); + } + handleClick = () => { this.props.onClose(); this.props.onConfirm(); } - handleCancel = (e) => { - e.preventDefault(); + handleCancel = () => { this.props.onClose(); } + setRef = (c) => { + this.button = c; + } + render () { - const { intl, message, confirm, onConfirm, onClose } = this.props; + const { message, confirm } = this.props; return ( <div className='modal-root__modal confirmation-modal'> @@ -33,8 +40,10 @@ class ConfirmationModal extends React.PureComponent { </div> <div className='confirmation-modal__action-bar'> - <div><a href='#' onClick={this.handleCancel}><FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' /></a></div> - <Button text={confirm} onClick={this.handleClick} /> + <Button onClick={this.handleCancel} className='confirmation-modal__cancel-button'> + <FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' /> + </Button> + <Button text={confirm} onClick={this.handleClick} ref={this.setRef} /> </div> </div> ); diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 863f7958c..992db014e 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -3145,6 +3145,7 @@ button.icon-button.active i.fa-retweet { .boost-modal__action-bar, .confirmation-modal__action-bar { display: flex; + justify-content: space-between; background: $ui-secondary-color; padding: 10px; line-height: 36px; @@ -3179,14 +3180,9 @@ button.icon-button.active i.fa-retweet { } .confirmation-modal__action-bar { - & > div { - text-align: left; - padding: 0 16px; - } - - a { + .confirmation-modal__cancel-button { + background-color: transparent; color: darken($ui-secondary-color, 34%); - text-decoration: none; font-size: 14px; font-weight: 500; diff --git a/package.json b/package.json index 94711eb19..6159de506 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.4.0", "babel-preset-react": "^6.11.1", + "classnames": "^2.2.5", "coffee-loader": "^0.7.3", "coffee-script": "^1.12.5", "compression-webpack-plugin": "^0.4.0", diff --git a/yarn.lock b/yarn.lock index 549c7178a..3c19450b6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1542,7 +1542,7 @@ clap@^1.0.9: dependencies: chalk "^1.1.3" -classnames@^2.1.2, classnames@^2.2.3, classnames@~2.2: +classnames@^2.1.2, classnames@^2.2.3, classnames@^2.2.5, classnames@~2.2: version "2.2.5" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d" |