diff options
Diffstat (limited to 'app/javascript/mastodon')
-rw-r--r-- | app/javascript/mastodon/components/button.js | 2 | ||||
-rw-r--r-- | app/javascript/mastodon/components/load_more.js | 4 | ||||
-rw-r--r-- | app/javascript/mastodon/features/ui/components/onboarding_modal.js | 44 |
3 files changed, 31 insertions, 19 deletions
diff --git a/app/javascript/mastodon/components/button.js b/app/javascript/mastodon/components/button.js index aeb6b7c03..52af193e7 100644 --- a/app/javascript/mastodon/components/button.js +++ b/app/javascript/mastodon/components/button.js @@ -22,7 +22,7 @@ class Button extends React.PureComponent { handleClick = (e) => { if (!this.props.disabled) { - this.props.onClick(); + this.props.onClick(e); } } diff --git a/app/javascript/mastodon/components/load_more.js b/app/javascript/mastodon/components/load_more.js index 212011386..22d9e91c3 100644 --- a/app/javascript/mastodon/components/load_more.js +++ b/app/javascript/mastodon/components/load_more.js @@ -3,9 +3,9 @@ import { FormattedMessage } from 'react-intl'; import PropTypes from 'prop-types'; const LoadMore = ({ onClick }) => ( - <a href="#" className='load-more' role='button' onClick={onClick}> + <button className='load-more' onClick={onClick}> <FormattedMessage id='status.load_more' defaultMessage='Load more' /> - </a> + </button> ); LoadMore.propTypes = { diff --git a/app/javascript/mastodon/features/ui/components/onboarding_modal.js b/app/javascript/mastodon/features/ui/components/onboarding_modal.js index 2757ff323..cc3c0cdc5 100644 --- a/app/javascript/mastodon/features/ui/components/onboarding_modal.js +++ b/app/javascript/mastodon/features/ui/components/onboarding_modal.js @@ -191,15 +191,14 @@ class OnboardingModal extends React.PureComponent { this.setState({ currentIndex: i }); } - handleNext = (e) => { - const maxNum = Number(e.currentTarget.getAttribute('data-length')); - e.preventDefault(); + handleNext = () => { + this.setState(({ currentIndex }) => ({ + currentIndex: currentIndex + 1, + })); + } - if (this.state.currentIndex < maxNum - 1) { - this.setState({ currentIndex: this.state.currentIndex + 1 }); - } else { - this.props.onClose(); - } + handleClose = () => { + this.props.onClose(); } render () { @@ -216,13 +215,21 @@ class OnboardingModal extends React.PureComponent { const { currentIndex } = this.state; const hasMore = currentIndex < pages.length - 1; - let nextOrDoneBtn; - - if(hasMore) { - nextOrDoneBtn = <a href='#' data-length={pages.length} onClick={this.handleNext} className='onboarding-modal__nav onboarding-modal__next'><FormattedMessage id='onboarding.next' defaultMessage='Next' /></a>; - } else { - nextOrDoneBtn = <a href='#' data-length={pages.length} onClick={this.handleNext} className='onboarding-modal__nav onboarding-modal__done'><FormattedMessage id='onboarding.done' defaultMessage='Done' /></a>; - } + const nextOrDoneBtn = hasMore ? ( + <button + onClick={this.handleNext} + className='onboarding-modal__nav onboarding-modal__next' + > + <FormattedMessage id='onboarding.next' defaultMessage='Next' /> + </button> + ) : ( + <button + onClick={this.handleClose} + className='onboarding-modal__nav onboarding-modal__done' + > + <FormattedMessage id='onboarding.done' defaultMessage='Done' /> + </button> + ); const styles = pages.map((page, i) => ({ key: `page-${i}`, @@ -243,7 +250,12 @@ class OnboardingModal extends React.PureComponent { <div className='onboarding-modal__paginator'> <div> - <a href='#' className='onboarding-modal__skip' onClick={this.handleSkip}><FormattedMessage id='onboarding.skip' defaultMessage='Skip' /></a> + <button + onClick={this.handleSkip} + className='onboarding-modal__nav onboarding-modal__skip' + > + <FormattedMessage id='onboarding.skip' defaultMessage='Skip' /> + </button> </div> <div className='onboarding-modal__dots'> |