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/sidebar_header.jsx | |
parent | 0e801a4e70f3d9c8e3cf929aa2f7ac201ca87b52 (diff) | |
download | chat-97449a102e5592358a4f7f22d6720a9af21286a1.tar.gz chat-97449a102e5592358a4f7f22d6720a9af21286a1.tar.bz2 chat-97449a102e5592358a4f7f22d6720a9af21286a1.zip |
Add tutorial popovers
Diffstat (limited to 'web/react/components/sidebar_header.jsx')
-rw-r--r-- | web/react/components/sidebar_header.jsx | 89 |
1 files changed, 86 insertions, 3 deletions
diff --git a/web/react/components/sidebar_header.jsx b/web/react/components/sidebar_header.jsx index 65e4c6d7e..96348f688 100644 --- a/web/react/components/sidebar_header.jsx +++ b/web/react/components/sidebar_header.jsx @@ -1,9 +1,16 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -var NavbarDropdown = require('./navbar_dropdown.jsx'); -var UserStore = require('../stores/user_store.jsx'); +const NavbarDropdown = require('./navbar_dropdown.jsx'); +const TutorialTip = require('./tutorial/tutorial_tip.jsx'); + +const UserStore = require('../stores/user_store.jsx'); +const PreferenceStore = require('../stores/preference_store.jsx'); + const Utils = require('../utils/utils.jsx'); +const Constants = require('../utils/constants.jsx'); +const Preferences = Constants.Preferences; +const TutorialSteps = Constants.TutorialSteps; const Tooltip = ReactBootstrap.Tooltip; const OverlayTrigger = ReactBootstrap.OverlayTrigger; @@ -13,8 +20,23 @@ export default class SidebarHeader extends React.Component { super(props); this.toggleDropdown = this.toggleDropdown.bind(this); + this.onPreferenceChange = this.onPreferenceChange.bind(this); - this.state = {}; + this.state = this.getStateFromStores(); + } + componentDidMount() { + PreferenceStore.addChangeListener(this.onPreferenceChange); + } + componentWillUnmount() { + PreferenceStore.removeChangeListener(this.onPreferenceChange); + } + getStateFromStores() { + const tutorialPref = PreferenceStore.getPreference(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), {value: '0'}); + + return {showTutorialTip: parseInt(tutorialPref.value, 10) === TutorialSteps.MENU_POPOVER}; + } + onPreferenceChange() { + this.setState(this.getStateFromStores()); } toggleDropdown(e) { e.preventDefault(); @@ -22,8 +44,63 @@ export default class SidebarHeader extends React.Component { this.refs.dropdown.blockToggle = false; return; } + console.log(this.refs.tip); + this.refs.tip.toggle(); $('.team__header').find('.dropdown-toggle').dropdown('toggle'); } + createTutorialTip() { + const screens = []; + + let teamSettingsLink = <strong>{'Team Settings'}</strong>; + if (Utils.isAdmin(UserStore.getCurrentUser().roles)) { + teamSettingsLink = ( + <a + href='#' + data-toggle='modal' + data-target='#team_settings' + > + {'Team Settings'} + </a> + ); + } + + screens.push( + <div> + <h4><strong>{'Sending Messages'}</strong></h4> + {'The '}<strong>{'Main Menu'}</strong>{' is where you can '} + <a + href='#' + data-toggle='modal' + data-target='#invite_member' + > + {'Invite New Members'} + </a> + {', access your '} + <a + href='#' + data-toggle='modal' + data-target='#user_settings' + > + {'Account Settings'} + </a> + {', and set your '}<strong>{'Theme Color'}</strong>{'.'} + <br/><br/> + {'Team administrators can also access their '}{teamSettingsLink}{' from this menu.'} + </div> + ); + + return ( + <div + onClick={this.toggleDropdown} + > + <TutorialTip + ref='tip' + placement='right' + screens={screens} + /> + </div> + ); + } render() { var me = UserStore.getCurrentUser(); var profilePicture = null; @@ -41,8 +118,14 @@ export default class SidebarHeader extends React.Component { ); } + let tutorialTip = null; + if (this.state.showTutorialTip) { + tutorialTip = this.createTutorialTip(); + } + return ( <div className='team__header theme'> + {tutorialTip} <a href='#' onClick={this.toggleDropdown} |