diff --git a/web/react/components/tutorial/tutorial_intro_screens.jsx b/web/react/components/tutorial/tutorial_intro_screens.jsx
index a99e9fe285..8fcd5a0f33 100644
--- a/web/react/components/tutorial/tutorial_intro_screens.jsx
+++ b/web/react/components/tutorial/tutorial_intro_screens.jsx
@@ -11,12 +11,15 @@ const AsyncClient = require('../../utils/async_client.jsx');
const Constants = require('../../utils/constants.jsx');
const Preferences = Constants.Preferences;
+const NUM_SCREENS = 3;
+
export default class TutorialIntroScreens extends React.Component {
constructor(props) {
super(props);
this.handleNext = this.handleNext.bind(this);
this.createScreen = this.createScreen.bind(this);
+ this.createCircles = this.createCircles.bind(this);
this.state = {currentScreen: 0};
}
@@ -49,31 +52,27 @@ export default class TutorialIntroScreens extends React.Component {
}
}
createScreenOne() {
+ const circles = this.createCircles(0);
+
return (
{'Welcome to:'}
{'Mattermost'}
{'Your team communication all in one place, instantly searchable and available anywhere.'}
{'Keep your team connected to help them achieve what matters most.'}
-
+ {circles}
);
}
createScreenTwo() {
+ const circles = this.createCircles(1);
+
return (
{'How Mattermost works:'}
{'Communication happens in public discussion channels, private groups and direct messages.'}
{'Everything is archived and searchable from any web-enabled desktop, laptop or phone.'}
-
+ {circles}
);
}
@@ -106,6 +105,8 @@ export default class TutorialIntroScreens extends React.Component {
);
}
+ const circles = this.createCircles(2);
+
return (
{'You’re all set'}
@@ -124,11 +125,34 @@ export default class TutorialIntroScreens extends React.Component {
{'.'}
{'Click “Next” to enter Town Square. This is the first channel teammates see when they sign up. Use it for posting updates everyone needs to know.'}
-
+ {circles}
+
+ );
+ }
+ createCircles(index) {
+ const circles = [];
+ for (let i = 0; i < NUM_SCREENS; i++) {
+ let className = 'circle';
+ if (i === index) {
+ className += ' active';
+ }
+
+ circles.push(
+ { //eslint-disable-line no-loop-func
+ e.preventDefault();
+ this.setState({currentScreen: i});
+ }}
+ />
+ );
+ }
+
+ return (
+
+ {circles}
);
}
diff --git a/web/sass-files/sass/partials/_tutorial.scss b/web/sass-files/sass/partials/_tutorial.scss
index c1bf5fd591..08d491fd9d 100644
--- a/web/sass-files/sass/partials/_tutorial.scss
+++ b/web/sass-files/sass/partials/_tutorial.scss
@@ -171,6 +171,10 @@
margin-bottom: 30px;
font-weight: 600;
}
+ .tutorial__circles {
+ position: absolute;
+ bottom: 40px;
+ }
}
.tutorial__circles {
@@ -188,4 +192,4 @@
@include opacity(1);
}
}
-}
\ No newline at end of file
+}