diff options
author | JoramWilander <jwawilander@gmail.com> | 2015-11-05 12:20:55 -0500 |
---|---|---|
committer | JoramWilander <jwawilander@gmail.com> | 2015-11-05 12:20:55 -0500 |
commit | 0bf92c8adaa8cc336542a94341124135c99c8c3b (patch) | |
tree | e5b7e63a8e323dfd3a52a5c12908f5eb469169fb /web | |
parent | 0e728316397eda4aaa9e957b7f1e2b7645ee804b (diff) | |
download | chat-0bf92c8adaa8cc336542a94341124135c99c8c3b.tar.gz chat-0bf92c8adaa8cc336542a94341124135c99c8c3b.tar.bz2 chat-0bf92c8adaa8cc336542a94341124135c99c8c3b.zip |
Make dots in tutorial intro clickable and always at the same spot
Diffstat (limited to 'web')
-rw-r--r-- | web/react/components/tutorial/tutorial_intro_screens.jsx | 54 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_tutorial.scss | 6 |
2 files changed, 44 insertions, 16 deletions
diff --git a/web/react/components/tutorial/tutorial_intro_screens.jsx b/web/react/components/tutorial/tutorial_intro_screens.jsx index a99e9fe28..8fcd5a0f3 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 ( <div> <h3>{'Welcome to:'}</h3> <h1>{'Mattermost'}</h1> <p>{'Your team communication all in one place, instantly searchable and available anywhere.'}</p> <p>{'Keep your team connected to help them achieve what matters most.'}</p> - <div className='tutorial__circles'> - <div className='circle active'/> - <div className='circle'/> - <div className='circle'/> - </div> + {circles} </div> ); } createScreenTwo() { + const circles = this.createCircles(1); + return ( <div> <h3>{'How Mattermost works:'}</h3> <p>{'Communication happens in public discussion channels, private groups and direct messages.'}</p> <p>{'Everything is archived and searchable from any web-enabled desktop, laptop or phone.'}</p> - <div className='tutorial__circles'> - <div className='circle'/> - <div className='circle active'/> - <div className='circle'/> - </div> + {circles} </div> ); } @@ -106,6 +105,8 @@ export default class TutorialIntroScreens extends React.Component { ); } + const circles = this.createCircles(2); + return ( <div> <h3>{'You’re all set'}</h3> @@ -124,11 +125,34 @@ export default class TutorialIntroScreens extends React.Component { {'.'} </p> {'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.'} - <div className='tutorial__circles'> - <div className='circle'/> - <div className='circle'/> - <div className='circle active'/> - </div> + {circles} + </div> + ); + } + createCircles(index) { + const circles = []; + for (let i = 0; i < NUM_SCREENS; i++) { + let className = 'circle'; + if (i === index) { + className += ' active'; + } + + circles.push( + <a + href='#' + key={'circle' + i} + className={className} + onClick={(e) => { //eslint-disable-line no-loop-func + e.preventDefault(); + this.setState({currentScreen: i}); + }} + /> + ); + } + + return ( + <div className='tutorial__circles'> + {circles} </div> ); } diff --git a/web/sass-files/sass/partials/_tutorial.scss b/web/sass-files/sass/partials/_tutorial.scss index c1bf5fd59..08d491fd9 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 +} |