diff options
author | JoramWilander <jwawilander@gmail.com> | 2015-10-30 11:35:16 -0400 |
---|---|---|
committer | JoramWilander <jwawilander@gmail.com> | 2015-11-02 14:47:24 -0500 |
commit | 97449a102e5592358a4f7f22d6720a9af21286a1 (patch) | |
tree | daf676cc25facf1a30bf837d3cec9f07ecca73db /web/react/components/tutorial | |
parent | 0e801a4e70f3d9c8e3cf929aa2f7ac201ca87b52 (diff) | |
download | chat-97449a102e5592358a4f7f22d6720a9af21286a1.tar.gz chat-97449a102e5592358a4f7f22d6720a9af21286a1.tar.bz2 chat-97449a102e5592358a4f7f22d6720a9af21286a1.zip |
Add tutorial popovers
Diffstat (limited to 'web/react/components/tutorial')
-rw-r--r-- | web/react/components/tutorial/tutorial_intro_screens.jsx | 14 | ||||
-rw-r--r-- | web/react/components/tutorial/tutorial_tip.jsx | 108 |
2 files changed, 117 insertions, 5 deletions
diff --git a/web/react/components/tutorial/tutorial_intro_screens.jsx b/web/react/components/tutorial/tutorial_intro_screens.jsx index d7568e4cd..d423b4f1b 100644 --- a/web/react/components/tutorial/tutorial_intro_screens.jsx +++ b/web/react/components/tutorial/tutorial_intro_screens.jsx @@ -18,21 +18,25 @@ export default class TutorialIntroScreens extends React.Component { this.handleNext = this.handleNext.bind(this); this.createScreen = this.createScreen.bind(this); - this.state = {screen: 0}; + this.state = {currentScreen: 0}; } handleNext() { - if (this.state.screen < 2) { - this.setState({screen: this.state.screen + 1}); + if (this.state.currentScreen < 2) { + this.setState({currentScreen: this.state.currentScreen + 1}); return; } Utils.switchChannel(ChannelStore.getByName(Constants.DEFAULT_CHANNEL)); - const preference = PreferenceStore.setPreference(Preferences.TUTORIAL_INTRO_COMPLETE, UserStore.getCurrentId(), 'true'); + 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]); } createScreen() { - switch (this.state.screen) { + switch (this.state.currentScreen) { case 0: return this.createScreenOne(); case 1: diff --git a/web/react/components/tutorial/tutorial_tip.jsx b/web/react/components/tutorial/tutorial_tip.jsx new file mode 100644 index 000000000..166d10d8a --- /dev/null +++ b/web/react/components/tutorial/tutorial_tip.jsx @@ -0,0 +1,108 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +const UserStore = require('../../stores/user_store.jsx'); +const PreferenceStore = require('../../stores/preference_store.jsx'); +const AsyncClient = require('../../utils/async_client.jsx'); + +const Constants = require('../../utils/constants.jsx'); +const Preferences = Constants.Preferences; + +const Overlay = ReactBootstrap.Overlay; + +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 ? 'Okay' : 'Next'; + + const dots = []; + if (this.props.screens.length > 1) { + for (let i = 0; i < this.props.screens.length; i++) { + if (i === this.state.currentScreen) { + dots.push(<span key={'dotactive' + i}>{'[ x ]'}</span>); + } else { + dots.push(<span key={'dotinactive' + i}>{'[ ]'}</span>); + } + } + } + + return ( + <div className='tip-div'> + <img + className='tip-button' + src='/static/images/next.png' + onClick={this.toggle} + ref='target' + /> + + <Overlay + placement={this.props.placement} + show={this.state.show} + rootClose={true} + onHide={this.toggle} + target={() => this.refs.target} + > + <div className='tip-overlay'> + {this.props.screens[this.state.currentScreen]} + <br/> + {dots} + <button + className='btn btn-default' + onClick={this.handleNext} + > + {buttonText} + </button> + <br/> + <span> + {'Seen this before? '} + <a + href='#' + onClick={this.skipTutorial} + > + {'Opt out of these tips.'} + </a> + </span> + </div> + </Overlay> + </div> + ); + } +} + +TutorialTip.propTypes = { + screens: React.PropTypes.array.isRequired, + placement: React.PropTypes.string.isRequired +}; |