Move final tutorial tip to RHS menu on mobile

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;