diff --git a/webapp/components/sidebar_header.jsx b/webapp/components/sidebar_header.jsx
index 3cb2a3e81c..ec3a03d17c 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(
-
-
-
- );
-
- return (
-
-
-
- );
- }
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 7c5e895e83..c7e6577fc4 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 {
);
}
+
+ let tutorialTip = null;
+ if (this.state.showTutorialTip) {
+ tutorialTip = createMenuTip((e) => e.preventDefault(), true);
+ }
+
return (
+ );
+
+ let placement = 'right';
+ let arrow = 'left';
+ if (onBottom) {
+ placement = 'bottom';
+ arrow = 'up';
+ }
+
+ return (
+
+
+
+ );
+}
diff --git a/webapp/sass/components/_tutorial.scss b/webapp/sass/components/_tutorial.scss
index 6545d7764d..e735ba3f32 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;