From 860ffc05602b148769b87d0cda39985feb9a8486 Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Tue, 23 May 2017 20:10:41 +0900 Subject: [PATCH] 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. --- app/javascript/mastodon/components/button.js | 18 +++++++++++++++++- .../ui/components/confirmation_modal.js | 19 ++++++++++++++----- app/javascript/styles/components.scss | 10 +++------- package.json | 1 + 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 cc6482cdeca..aeb6b7c0366 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 ( +