cybrespace
/
mastodon
4
3
Fork 3
Code Issues 7 Pull Requests Releases Activity

Change anchor to button element (#3321) 

Fix warning for ESLint (jsx-a11y/href-no-hash).
This commit is contained in:
Yamagishi Kazutoshi 2017-05-26 21:10:37 +09:00 committed by Eugen Rochko
parent 2531c5953b
commit 4b11675bdc
4 changed files with 43 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/mastodon/components/button.js
View File

@ -22,7 +22,7 @@ class Button extends React.PureComponent {
handleClick = (e) => { handleClick = (e) => {
if (!this.props.disabled) { if (!this.props.disabled) {
this.props.onClick(); this.props.onClick(e);
} }
} }

4
app/javascript/mastodon/components/load_more.js
View File

@ -3,9 +3,9 @@ import { FormattedMessage } from 'react-intl';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
const LoadMore = ({ onClick }) => ( 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' /> <FormattedMessage id='status.load_more' defaultMessage='Load more' />
</a> </button>
); );
LoadMore.propTypes = { LoadMore.propTypes = {

44
app/javascript/mastodon/features/ui/components/onboarding_modal.js
View File

@ -191,15 +191,14 @@ class OnboardingModal extends React.PureComponent {
this.setState({ currentIndex: i }); this.setState({ currentIndex: i });
} }
handleNext = (e) => { handleNext = () => {
const maxNum = Number(e.currentTarget.getAttribute('data-length')); this.setState(({ currentIndex }) => ({
e.preventDefault(); currentIndex: currentIndex + 1,
}));
}
if (this.state.currentIndex < maxNum - 1) { handleClose = () => {
this.setState({ currentIndex: this.state.currentIndex + 1 }); this.props.onClose();
} else {
this.props.onClose();
}
} }
render () { render () {
@ -216,13 +215,21 @@ class OnboardingModal extends React.PureComponent {
const { currentIndex } = this.state; const { currentIndex } = this.state;
const hasMore = currentIndex < pages.length - 1; const hasMore = currentIndex < pages.length - 1;
let nextOrDoneBtn; const nextOrDoneBtn = hasMore ? (
<button
if(hasMore) { onClick={this.handleNext}
nextOrDoneBtn = <a href='#' data-length={pages.length} onClick={this.handleNext} className='onboarding-modal__nav onboarding-modal__next'><FormattedMessage id='onboarding.next' defaultMessage='Next' /></a>; className='onboarding-modal__nav onboarding-modal__next'
} 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>; <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) => ({ const styles = pages.map((page, i) => ({
key: `page-${i}`, key: `page-${i}`,
@ -243,7 +250,12 @@ class OnboardingModal extends React.PureComponent {
<div className='onboarding-modal__paginator'> <div className='onboarding-modal__paginator'>
<div> <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>
<div className='onboarding-modal__dots'> <div className='onboarding-modal__dots'>

15
app/javascript/styles/components.scss
View File

@ -1965,9 +1965,14 @@ button.icon-button.active i.fa-retweet {
.load-more { .load-more {
display: block; display: block;
color: lighten($ui-base-color, 26%); color: lighten($ui-base-color, 26%);
background-color: transparent;
border: 0;
font-size: inherit;
text-align: center; text-align: center;
line-height: inherit;
margin: 0;
padding: 15px; padding: 15px;
text-decoration: none; width: 100%;
clear: both; clear: both;
&:hover { &:hover {
@ -2916,11 +2921,15 @@ button.icon-button.active i.fa-retweet {
min-width: 33px; min-width: 33px;
} }
a { .onboarding-modal__nav {
color: darken($ui-secondary-color, 34%); color: darken($ui-secondary-color, 34%);
text-decoration: none; background-color: transparent;
border: 0;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
padding: 0;
line-height: inherit;
height: auto;
&:hover, &:hover,
&:focus, &:focus,