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 +}