diff options
author | JoramWilander <jwawilander@gmail.com> | 2015-10-28 15:04:17 -0400 |
---|---|---|
committer | JoramWilander <jwawilander@gmail.com> | 2015-11-02 14:47:04 -0500 |
commit | 0e801a4e70f3d9c8e3cf929aa2f7ac201ca87b52 (patch) | |
tree | 427d1972f4e672704dc742fb100c262129815b2e | |
parent | e52669c2da0bb78c225a5c87edebe472e4c7ac56 (diff) | |
download | chat-0e801a4e70f3d9c8e3cf929aa2f7ac201ca87b52.tar.gz chat-0e801a4e70f3d9c8e3cf929aa2f7ac201ca87b52.tar.bz2 chat-0e801a4e70f3d9c8e3cf929aa2f7ac201ca87b52.zip |
Add tutorial intro screens for new users.
-rw-r--r-- | model/preference.go | 4 | ||||
-rw-r--r-- | web/react/components/navbar_dropdown.jsx | 2 | ||||
-rw-r--r-- | web/react/components/tutorial/tutorial_intro_screens.jsx | 150 | ||||
-rw-r--r-- | web/react/utils/constants.jsx | 2 |
4 files changed, 156 insertions, 2 deletions
diff --git a/model/preference.go b/model/preference.go index 44279f71a..6e5b68b92 100644 --- a/model/preference.go +++ b/model/preference.go @@ -9,7 +9,9 @@ import ( ) const ( - PREFERENCE_CATEGORY_DIRECT_CHANNEL_SHOW = "direct_channel_show" + PREFERENCE_CATEGORY_DIRECT_CHANNEL_SHOW = "direct_channel_show" + PREFERENCE_CATEGORY_TUTORIAL_INTRO_COMPLETE = "tutorial_intro_complete" + PREFERENCE_CATEGORY_TUTORIAL_POPOVERS = "tutorial_popovers" ) type Preference struct { diff --git a/web/react/components/navbar_dropdown.jsx b/web/react/components/navbar_dropdown.jsx index dc21fad21..f43bdffdf 100644 --- a/web/react/components/navbar_dropdown.jsx +++ b/web/react/components/navbar_dropdown.jsx @@ -104,7 +104,7 @@ export default class NavbarDropdown extends React.Component { </li> ); - if (this.props.teamType === 'O') { + if (this.props.teamType === Constants.OPEN_TEAM) { teamLink = ( <li> <a diff --git a/web/react/components/tutorial/tutorial_intro_screens.jsx b/web/react/components/tutorial/tutorial_intro_screens.jsx new file mode 100644 index 000000000..d7568e4cd --- /dev/null +++ b/web/react/components/tutorial/tutorial_intro_screens.jsx @@ -0,0 +1,150 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +const UserStore = require('../../stores/user_store.jsx'); +const ChannelStore = require('../../stores/channel_store.jsx'); +const TeamStore = require('../../stores/team_store.jsx'); +const PreferenceStore = require('../../stores/preference_store.jsx'); +const Utils = require('../../utils/utils.jsx'); +const AsyncClient = require('../../utils/async_client.jsx'); + +const Constants = require('../../utils/constants.jsx'); +const Preferences = Constants.Preferences; + +export default class TutorialIntroScreens extends React.Component { + constructor(props) { + super(props); + + this.handleNext = this.handleNext.bind(this); + this.createScreen = this.createScreen.bind(this); + + this.state = {screen: 0}; + } + handleNext() { + if (this.state.screen < 2) { + this.setState({screen: this.state.screen + 1}); + return; + } + + Utils.switchChannel(ChannelStore.getByName(Constants.DEFAULT_CHANNEL)); + + const preference = PreferenceStore.setPreference(Preferences.TUTORIAL_INTRO_COMPLETE, UserStore.getCurrentId(), 'true'); + AsyncClient.savePreferences([preference]); + } + createScreen() { + switch (this.state.screen) { + case 0: + return this.createScreenOne(); + case 1: + return this.createScreenTwo(); + case 2: + return this.createScreenThree(); + } + } + createScreenOne() { + return ( + <div> + <h4><strong>{'Welcome to:'}</strong></h4> + <h2><strong>{'Mattermost'}</strong></h2> + <br/> + {'Your team communications all in one place,'} + <br/> + {'instantly searchable and available anywhere.'} + <br/><br/> + {'Keep your team connected to help them'} + <br/> + {'achieve what matters most.'} + <br/><br/> + <span>{'[ x ][ ][ ]'}</span> + </div> + ); + } + createScreenTwo() { + return ( + <div> + <h4><strong>{'How Mattermost works:'}</strong></h4> + <br/> + {'Communication happens in public discussion channels,'} + <br/> + {'private groups and direct messages.'} + <br/><br/> + {'Everything is archived and searchable from'} + <br/> + {'any web-enabled laptop, tablet or phone.'} + <br/><br/> + <span>{'[ ][ x ][ ]'}</span> + </div> + ); + } + createScreenThree() { + const team = TeamStore.getCurrent(); + let inviteModalLink; + if (team.type === Constants.INVITE_TEAM) { + inviteModalLink = ( + <a + className='intro-links' + href='#' + data-toggle='modal' + data-target='#invite_member' + > + {'Invite teammates'} + </a> + ); + } else { + inviteModalLink = ( + <a + className='intro-links' + href='#' + data-toggle='modal' + data-target='#get_link' + data-title='Team Invite' + data-value={Utils.getWindowLocationOrigin() + '/signup_user_complete/?id=' + team.id} + > + {'Invite teammates'} + </a> + ); + } + + return ( + <div> + <h4><strong>{'You’re all set'}</strong></h4> + <br/> + {inviteModalLink} + {' when you’re ready.'} + <br/><br/> + {'Need anything, just email us at '} + <a + href='mailto:feedback@mattermost.com' + target='_blank' + > + {'feedback@mattermost.com.'} + </a> + <br/><br/> + {'Click “Next” to enter Town Square. This is the first channel'} + <br/> + {'teammates see when they sign up - use it for posting updates'} + <br/> + {'everyone needs to know.'} + <br/><br/> + <span>{'[ ][ ][ x ]'}</span> + </div> + ); + } + render() { + const screen = this.createScreen(); + + return ( + <div> + {screen} + <br/><br/> + <button + className='btn btn-primary' + tabIndex='1' + onClick={this.handleNext} + > + {'Next'} + </button> + </div> + ); + } +} diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index 8884d1d10..57be5046e 100644 --- a/web/react/utils/constants.jsx +++ b/web/react/utils/constants.jsx @@ -315,6 +315,8 @@ module.exports = { CATEGORY_DIRECT_CHANNEL_SHOW: 'direct_channel_show', CATEGORY_DISPLAY_SETTINGS: 'display_settings', CATEGORY_ADVANCED_SETTINGS: 'advanced_settings' + TUTORIAL_INTRO_COMPLETE: 'tutorial_intro_complete', + TUTORIAL_POPOVERS: 'tutorial_popovers' }, KeyCodes: { UP: 38, |