From 4b11675bdc0e99e3e03fde056a1e50e847cec81b Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Fri, 26 May 2017 21:10:37 +0900 Subject: [PATCH] Change anchor to button element (#3321) Fix warning for ESLint (jsx-a11y/href-no-hash). --- app/javascript/mastodon/components/button.js | 2 +- .../mastodon/components/load_more.js | 4 +- .../ui/components/onboarding_modal.js | 44 ++++++++++++------- app/javascript/styles/components.scss | 15 +++++-- 4 files changed, 43 insertions(+), 22 deletions(-) diff --git a/app/javascript/mastodon/components/button.js b/app/javascript/mastodon/components/button.js index aeb6b7c036..52af193e79 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 2120113869..22d9e91c35 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 }) => ( - + ); 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 2757ff3237..cc3c0cdc5c 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 = ; - } else { - nextOrDoneBtn = ; - } + const nextOrDoneBtn = hasMore ? ( + + ) : ( + + ); const styles = pages.map((page, i) => ({ key: `page-${i}`, @@ -243,7 +250,12 @@ class OnboardingModal extends React.PureComponent {
- +
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 91f7b8057c..e821a2a05a 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -1965,9 +1965,14 @@ button.icon-button.active i.fa-retweet { .load-more { display: block; color: lighten($ui-base-color, 26%); + background-color: transparent; + border: 0; + font-size: inherit; text-align: center; + line-height: inherit; + margin: 0; padding: 15px; - text-decoration: none; + width: 100%; clear: both; &:hover { @@ -2916,11 +2921,15 @@ button.icon-button.active i.fa-retweet { min-width: 33px; } - a { + .onboarding-modal__nav { color: darken($ui-secondary-color, 34%); - text-decoration: none; + background-color: transparent; + border: 0; font-size: 14px; font-weight: 500; + padding: 0; + line-height: inherit; + height: auto; &:hover, &:focus,