diff options
-rw-r--r-- | webapp/components/sidebar_header.jsx | 37 | ||||
-rw-r--r-- | webapp/components/sidebar_right_menu.jsx | 42 | ||||
-rw-r--r-- | webapp/components/tutorial/tutorial_tip.jsx | 37 | ||||
-rw-r--r-- | webapp/sass/components/_tutorial.scss | 14 |
4 files changed, 93 insertions, 37 deletions
diff --git a/webapp/components/sidebar_header.jsx b/webapp/components/sidebar_header.jsx index 3cb2a3e81..ec3a03d17 100644 --- a/webapp/components/sidebar_header.jsx +++ b/webapp/components/sidebar_header.jsx @@ -3,19 +3,19 @@ import $ from 'jquery'; import NavbarDropdown from './navbar_dropdown.jsx'; -import TutorialTip from './tutorial/tutorial_tip.jsx'; import PreferenceStore from 'stores/preference_store.jsx'; +import * as Utils from 'utils/utils.jsx'; import Constants from 'utils/constants.jsx'; -import {FormattedHTMLMessage} from 'react-intl'; - const Preferences = Constants.Preferences; const TutorialSteps = Constants.TutorialSteps; import {Tooltip, OverlayTrigger} from 'react-bootstrap'; +import {createMenuTip} from 'components/tutorial/tutorial_tip.jsx'; + import React from 'react'; export default class SidebarHeader extends React.Component { @@ -36,7 +36,7 @@ export default class SidebarHeader extends React.Component { getStateFromStores() { const tutorialStep = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, this.props.currentUser.id, 999); - return {showTutorialTip: tutorialStep === TutorialSteps.MENU_POPOVER}; + return {showTutorialTip: tutorialStep === TutorialSteps.MENU_POPOVER && !Utils.isMobile()}; } onPreferenceChange() { this.setState(this.getStateFromStores()); @@ -49,33 +49,6 @@ export default class SidebarHeader extends React.Component { } $('.team__header').find('.dropdown-toggle').dropdown('toggle'); } - createTutorialTip() { - const screens = []; - - screens.push( - <div> - <FormattedHTMLMessage - id='sidebar_header.tutorial' - defaultMessage='<h4>Main Menu</h4> - <p>The <strong>Main Menu</strong> is where you can <strong>Invite New Members</strong>, access your <strong>Account Settings</strong> and set your <strong>Theme Color</strong>.</p> - <p>Team administrators can also access their <strong>Team Settings</strong> from this menu.</p><p>System administrators will find a <strong>System Console</strong> option to administrate the entire system.</p>' - /> - </div> - ); - - return ( - <div - onClick={this.toggleDropdown} - > - <TutorialTip - ref='tip' - placement='right' - screens={screens} - overlayClass='tip-overlay--header' - /> - </div> - ); - } render() { var me = this.props.currentUser; var profilePicture = null; @@ -95,7 +68,7 @@ export default class SidebarHeader extends React.Component { let tutorialTip = null; if (this.state.showTutorialTip) { - tutorialTip = this.createTutorialTip(); + tutorialTip = createMenuTip(this.toggleDropdown); } return ( diff --git a/webapp/components/sidebar_right_menu.jsx b/webapp/components/sidebar_right_menu.jsx index 7c5e895e8..c7e6577fc 100644 --- a/webapp/components/sidebar_right_menu.jsx +++ b/webapp/components/sidebar_right_menu.jsx @@ -4,12 +4,20 @@ import TeamMembersModal from './team_members_modal.jsx'; import ToggleModalButton from './toggle_modal_button.jsx'; import UserSettingsModal from './user_settings/user_settings_modal.jsx'; + import UserStore from 'stores/user_store.jsx'; +import PreferenceStore from 'stores/preference_store.jsx'; + import * as GlobalActions from 'action_creators/global_actions.jsx'; import * as Utils from 'utils/utils.jsx'; +import Constants from 'utils/constants.jsx'; + +const Preferences = Constants.Preferences; +const TutorialSteps = Constants.TutorialSteps; import {FormattedMessage} from 'react-intl'; import {Link} from 'react-router'; +import {createMenuTip} from 'components/tutorial/tutorial_tip.jsx'; import React from 'react'; @@ -17,9 +25,30 @@ export default class SidebarRightMenu extends React.Component { constructor(props) { super(props); - this.state = { - showUserSettingsModal: false - }; + this.onPreferenceChange = this.onPreferenceChange.bind(this); + + const state = this.getStateFromStores(); + state.showUserSettingsModal = false; + + this.state = state; + } + + componentDidMount() { + PreferenceStore.addChangeListener(this.onPreferenceChange); + } + + componentWillUnmount() { + PreferenceStore.removeChangeListener(this.onPreferenceChange); + } + + getStateFromStores() { + const tutorialStep = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), 999); + + return {showTutorialTip: tutorialStep === TutorialSteps.MENU_POPOVER && Utils.isMobile()}; + } + + onPreferenceChange() { + this.setState(this.getStateFromStores()); } render() { @@ -158,6 +187,12 @@ export default class SidebarRightMenu extends React.Component { </li> ); } + + let tutorialTip = null; + if (this.state.showTutorialTip) { + tutorialTip = createMenuTip((e) => e.preventDefault(), true); + } + return ( <div className='sidebar--menu' @@ -173,6 +208,7 @@ export default class SidebarRightMenu extends React.Component { </div> <div className='nav-pills__container'> + {tutorialTip} <ul className='nav nav-pills nav-stacked'> <li> <a diff --git a/webapp/components/tutorial/tutorial_tip.jsx b/webapp/components/tutorial/tutorial_tip.jsx index deca70794..c9b7367d2 100644 --- a/webapp/components/tutorial/tutorial_tip.jsx +++ b/webapp/components/tutorial/tutorial_tip.jsx @@ -7,7 +7,7 @@ import * as AsyncClient from 'utils/async_client.jsx'; import Constants from 'utils/constants.jsx'; -import {FormattedMessage} from 'react-intl'; +import {FormattedMessage, FormattedHTMLMessage} from 'react-intl'; const Preferences = Constants.Preferences; @@ -166,3 +166,38 @@ TutorialTip.propTypes = { placement: React.PropTypes.string.isRequired, overlayClass: React.PropTypes.string }; + +export function createMenuTip(toggleFunc, onBottom) { + const screens = []; + + screens.push( + <div> + <FormattedHTMLMessage + id='sidebar_header.tutorial' + defaultMessage='<h4>Main Menu</h4> + <p>The <strong>Main Menu</strong> is where you can <strong>Invite New Members</strong>, access your <strong>Account Settings</strong> and set your <strong>Theme Color</strong>.</p> + <p>Team administrators can also access their <strong>Team Settings</strong> from this menu.</p><p>System administrators will find a <strong>System Console</strong> option to administrate the entire system.</p>' + /> + </div> + ); + + let placement = 'right'; + let arrow = 'left'; + if (onBottom) { + placement = 'bottom'; + arrow = 'up'; + } + + return ( + <div + onClick={toggleFunc} + > + <TutorialTip + ref='tip' + placement={placement} + screens={screens} + overlayClass={'tip-overlay--header--' + arrow} + /> + </div> + ); +} diff --git a/webapp/sass/components/_tutorial.scss b/webapp/sass/components/_tutorial.scss index 6545d7764..e735ba3f3 100644 --- a/webapp/sass/components/_tutorial.scss +++ b/webapp/sass/components/_tutorial.scss @@ -51,7 +51,7 @@ } } - &.tip-overlay--header { + &.tip-overlay--header--left { margin: 10px 0 0 10px; .arrow { @@ -62,6 +62,18 @@ } } + &.tip-overlay--header--bottom { + margin-top: -10px; + + .arrow { + border-top-width: 0; + border-bottom-color: $white; + top: -10px; + left: 50%; + margin-left: -10px; + } + } + &.tip-overlay--chat { margin-top: -10px; |