diff options
Diffstat (limited to 'webapp/components/tutorial/tutorial_tip.jsx')
-rw-r--r-- | webapp/components/tutorial/tutorial_tip.jsx | 160 |
1 files changed, 160 insertions, 0 deletions
diff --git a/webapp/components/tutorial/tutorial_tip.jsx b/webapp/components/tutorial/tutorial_tip.jsx new file mode 100644 index 000000000..ab49d4b04 --- /dev/null +++ b/webapp/components/tutorial/tutorial_tip.jsx @@ -0,0 +1,160 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import UserStore from 'stores/user_store.jsx'; +import PreferenceStore from 'stores/preference_store.jsx'; +import * as AsyncClient from 'utils/async_client.jsx'; + +import Constants from 'utils/constants.jsx'; + +import {FormattedMessage} from 'react-intl'; + +const Preferences = Constants.Preferences; + +import {Overlay} from 'react-bootstrap'; + +import React from 'react'; + +export default class TutorialTip extends React.Component { + constructor(props) { + super(props); + + this.handleNext = this.handleNext.bind(this); + this.toggle = this.toggle.bind(this); + + this.state = {currentScreen: 0, show: false}; + } + toggle() { + const show = !this.state.show; + this.setState({show}); + + if (!show && this.state.currentScreen >= this.props.screens.length - 1) { + let preference = PreferenceStore.getPreference(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), {value: '0'}); + + const newValue = (parseInt(preference.value, 10) + 1).toString(); + + preference = PreferenceStore.setPreference(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), newValue); + AsyncClient.savePreferences([preference]); + } + } + handleNext() { + if (this.state.currentScreen < this.props.screens.length - 1) { + this.setState({currentScreen: this.state.currentScreen + 1}); + return; + } + + this.toggle(); + } + skipTutorial(e) { + e.preventDefault(); + const preference = PreferenceStore.setPreference(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), '999'); + AsyncClient.savePreferences([preference]); + } + render() { + const buttonText = this.state.currentScreen === this.props.screens.length - 1 ? ( + <FormattedMessage + id='tutorial_tip.ok' + defaultMessage='Okay' + /> + ) : ( + <FormattedMessage + id='tutorial_tip.next' + defaultMessage='Next' + /> + ); + + const dots = []; + if (this.props.screens.length > 1) { + for (let i = 0; i < this.props.screens.length; i++) { + let className = 'circle'; + if (i === this.state.currentScreen) { + className += ' active'; + } + + dots.push( + <a + href='#' + key={'dotactive' + i} + className={className} + onClick={(e) => { //eslint-disable-line no-loop-func + e.preventDefault(); + this.setState({currentScreen: i}); + }} + /> + ); + } + } + + var tipColor = ''; + if (this.props.overlayClass === 'tip-overlay--header' || this.props.overlayClass === 'tip-overlay--sidebar') { + tipColor = 'White'; + } + + return ( + <div className={'tip-div ' + this.props.overlayClass}> + <img + className='tip-button' + src={'/static/images/tutorialTip' + tipColor + '.gif'} + width='35' + onClick={this.toggle} + ref='target' + /> + + <Overlay + show={this.state.show} + > + <div className='tip-backdrop'/> + </Overlay> + + <Overlay + placement={this.props.placement} + show={this.state.show} + rootClose={true} + onHide={this.toggle} + target={() => this.refs.target} + > + <div className={'tip-overlay ' + this.props.overlayClass}> + <div className='arrow'></div> + {this.props.screens[this.state.currentScreen]} + <div className='tutorial__footer'> + <div className='tutorial__circles'>{dots}</div> + <div className='text-right'> + <button + className='btn btn-primary' + onClick={this.handleNext} + > + {buttonText} + </button> + <div className='tip-opt'> + <FormattedMessage + id='tutorial_tip.seen' + defaultMessage='Seen this before? ' + /> + <a + href='#' + onClick={this.skipTutorial} + > + <FormattedMessage + id='tutorial_tip.out' + defaultMessage='Opt out of these tips.' + /> + </a> + </div> + </div> + </div> + </div> + </Overlay> + </div> + ); + } +} + +TutorialTip.defaultProps = { + overlayClass: '' +}; + +TutorialTip.propTypes = { + screens: React.PropTypes.array.isRequired, + placement: React.PropTypes.string.isRequired, + overlayClass: React.PropTypes.string +}; |