From 66ca7157db9c9ea24fd18a624a1a642c9f7a419a Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Mon, 5 Jun 2017 17:09:14 +0900 Subject: Add support key shortcut to Onboarding Modal (#3517) * Add support key shortcut to Onboarding Modal * this.state.pages -> this.pages --- .../features/ui/components/onboarding_modal.js | 90 +++++++++++++++++----- app/javascript/styles/components.scss | 8 ++ 2 files changed, 79 insertions(+), 19 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/mastodon/features/ui/components/onboarding_modal.js b/app/javascript/mastodon/features/ui/components/onboarding_modal.js index a06338b25..c121bfb17 100644 --- a/app/javascript/mastodon/features/ui/components/onboarding_modal.js +++ b/app/javascript/mastodon/features/ui/components/onboarding_modal.js @@ -3,6 +3,7 @@ import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import classNames from 'classnames'; import Permalink from '../../../components/permalink'; import TransitionMotion from 'react-motion/lib/TransitionMotion'; import spring from 'react-motion/lib/spring'; @@ -59,6 +60,7 @@ const PageTwo = ({ me }) => ( onClearSuggestions={noop} onFetchSuggestions={noop} onSuggestionSelected={noop} + showSearch /> @@ -180,6 +182,25 @@ class OnboardingModal extends React.PureComponent { currentIndex: 0, }; + componentWillMount() { + const { me, admin, domain, intl } = this.props; + this.pages = [ + , + , + , + , + , + ]; + }; + + componentDidMount() { + window.addEventListener('keyup', this.handleKeyUp); + } + + componentWillUnmount() { + window.addEventListener('keyup', this.handleKeyUp); + } + handleSkip = (e) => { e.preventDefault(); this.props.onClose(); @@ -191,27 +212,36 @@ class OnboardingModal extends React.PureComponent { this.setState({ currentIndex: i }); } + handlePrev = () => { + this.setState(({ currentIndex }) => ({ + currentIndex: Math.max(0, currentIndex - 1), + })); + } + handleNext = () => { + const { pages } = this; this.setState(({ currentIndex }) => ({ - currentIndex: currentIndex + 1, + currentIndex: Math.min(currentIndex + 1, pages.length - 1), })); } + handleKeyUp = ({ key }) => { + switch (key) { + case 'ArrowLeft': + this.handlePrev(); + break; + case 'ArrowRight': + this.handleNext(); + break; + } + } + handleClose = () => { this.props.onClose(); } render () { - const { me, admin, domain, intl } = this.props; - - const pages = [ - , - , - , - , - , - ]; - + const { pages } = this; const { currentIndex } = this.state; const hasMore = currentIndex < pages.length - 1; @@ -231,21 +261,29 @@ class OnboardingModal extends React.PureComponent { ); - const styles = pages.map((page, i) => ({ + const styles = pages.map((data, i) => ({ key: `page-${i}`, - style: { opacity: spring(i === currentIndex ? 1 : 0) }, + data, + style: { + opacity: spring(i === currentIndex ? 1 : 0), + }, })); return (
- {interpolatedStyles => + {interpolatedStyles => (
- {pages.map((page, i) => -
{page}
- )} + {interpolatedStyles.map(({ key, data, style }, i) => { + const className = classNames('onboarding-modal__page__wrapper', { + 'onboarding-modal__page__wrapper--active': i === currentIndex, + }); + return ( +
{data}
+ ); + })}
- } + )}
@@ -259,7 +297,21 @@ class OnboardingModal extends React.PureComponent {
- {pages.map((_, i) =>
)} + {pages.map((_, i) => { + const className = classNames('onboarding-modal__dot', { + active: i === currentIndex, + }); + return ( +
+ ); + })}
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 7f2b5cfe0..3301e6e47 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -3073,6 +3073,14 @@ button.icon-button.active i.fa-retweet { } } +.onboarding-modal__page__wrapper { + pointer-events: none; + + &.onboading-modal__page__wrapper--active { + pointer-events: auto; + } +} + .onboarding-modal__page { cursor: default; line-height: 21px; -- cgit