commit: 860ffc05602b148769b87d0cda39985feb9a8486
parent: 7eb4abe20ab03deb00c1e0fc78e17c3856f59904
Author: Yamagishi Kazutoshi <ykzts@desire.sh>
Date: Tue, 23 May 2017 20:10:41 +0900
Focus the submit button (#3253)
Focus the submit button when confirmation modal is opened.
Also, changed cancellation link to button.
This makes the meaning clearer.
Diffstat:
5 files changed, 36 insertions(+), 14 deletions(-)
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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"