diff options
author | Asaad Mahmood <Unknowngi@live.com> | 2015-11-02 11:40:53 +0500 |
---|---|---|
committer | JoramWilander <jwawilander@gmail.com> | 2015-11-02 14:47:24 -0500 |
commit | 393d253021e6b119ec35b92f9eeaa6f2d255008f (patch) | |
tree | d20833fcebe116899b06d9f9b6b3d0ffaa0e2590 /web/react | |
parent | 97449a102e5592358a4f7f22d6720a9af21286a1 (diff) | |
download | chat-393d253021e6b119ec35b92f9eeaa6f2d255008f.tar.gz chat-393d253021e6b119ec35b92f9eeaa6f2d255008f.tar.bz2 chat-393d253021e6b119ec35b92f9eeaa6f2d255008f.zip |
Updating tutorial screens
Diffstat (limited to 'web/react')
-rw-r--r-- | web/react/components/create_post.jsx | 7 | ||||
-rw-r--r-- | web/react/components/sidebar.jsx | 30 | ||||
-rw-r--r-- | web/react/components/tutorial/tutorial_intro_screens.jsx | 107 | ||||
-rw-r--r-- | web/react/components/tutorial/tutorial_tip.jsx | 51 |
4 files changed, 106 insertions, 89 deletions
diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index 1dc30e251..cb3148b7b 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -383,10 +383,9 @@ export default class CreatePost extends React.Component { screens.push( <div> - <h4><strong>{'Sending Messages'}</strong></h4> - {'Type here to write a message.'} - <br/><br/> - {'Click the attachment button to upload an image or a file.'} + <h4>{'Sending Messages'}</h4> + <p>{'Type here to write a message.'}</p> + <p>{'Click the attachment button to upload an image or a file.'}</p> </div> ); diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx index c3f43ff69..39d9808e9 100644 --- a/web/react/components/sidebar.jsx +++ b/web/react/components/sidebar.jsx @@ -323,28 +323,34 @@ export default class Sidebar extends React.Component { screens.push( <div> - <h4><strong>{'Channels'}</strong></h4> - <strong>{'Channels'}</strong>{' organize conversations across different topics. They’re open to everyone on your team. To send private communications use '}<strong>{'Direct Messages'}</strong>{' for a single person or '}<strong>{'Private Groups'}</strong>{' for multiple people.'} + <h4>{'Channels'}</h4> + <p><strong>{'Channels'}</strong>{' organize conversations across different topics. They’re open to everyone on your team. To send private communications use '}<strong>{'Direct Messages'}</strong>{' for a single person or '}<strong>{'Private Groups'}</strong>{' for multiple people.'} + </p> </div> ); screens.push( <div> - <h4><strong>{'"Town Square" and "Off-Topic" channels'}</strong></h4> - {'Here are two public channels to start:'} - <br/><br/> - <strong>{'Town Square'}</strong>{' is a place for team-wide communication. Everyone in your team is a member of this channel.'} - <br/><br/> - <strong>{'Off-Topic'}</strong>{' is a place for fun and humor outside of work-related channels. You and your team can decide what other channels to create.'} + <h4>{'"Town Square" and "Off-Topic" channels'}</h4> + <p>{'Here are two public channels to start:'}</p> + <p> + <strong>{'Town Square'}</strong>{' is a place for team-wide communication. Everyone in your team is a member of this channel.'} + </p> + <p> + <strong>{'Off-Topic'}</strong>{' is a place for fun and humor outside of work-related channels. You and your team can decide what other channels to create.'} + </p> </div> ); screens.push( <div> - <h4><strong>{'Creating and Joining Channels'}</strong></h4> - {'Click '}<strong>{'"More..."'}</strong>{' to create a new channel or join an existing one.'} - <br/><br/> - {'You can also create a new channel or private group by clicking the '}<strong>{'"+" symbol'}</strong>{' next to the channel or private group header.'} + <h4>{'Creating and Joining Channels'}</h4> + <p> + {'Click '}<strong>{'"More..."'}</strong>{' to create a new channel or join an existing one.'} + </p> + <p> + {'You can also create a new channel or private group by clicking the '}<strong>{'"+" symbol'}</strong>{' next to the channel or private group header.'} + </p> </div> ); diff --git a/web/react/components/tutorial/tutorial_intro_screens.jsx b/web/react/components/tutorial/tutorial_intro_screens.jsx index d423b4f1b..b37aac27c 100644 --- a/web/react/components/tutorial/tutorial_intro_screens.jsx +++ b/web/react/components/tutorial/tutorial_intro_screens.jsx @@ -20,6 +20,10 @@ export default class TutorialIntroScreens extends React.Component { this.state = {currentScreen: 0}; } + componentDidMount() { + const height = $(window).outerHeight() - 120; + $('.tutorial-steps__container').css('height', `${height}px`); + } handleNext() { if (this.state.currentScreen < 2) { this.setState({currentScreen: this.state.currentScreen + 1}); @@ -48,35 +52,29 @@ export default class TutorialIntroScreens extends React.Component { createScreenOne() { return ( <div> - <h4><strong>{'Welcome to:'}</strong></h4> - <h2><strong>{'Mattermost'}</strong></h2> - <br/> - {'Your team communications all in one place,'} - <br/> - {'instantly searchable and available anywhere.'} - <br/><br/> - {'Keep your team connected to help them'} - <br/> - {'achieve what matters most.'} - <br/><br/> - <span>{'[ x ][ ][ ]'}</span> + <h3>{'Welcome to:'}</h3> + <h1>{'Mattermost'}</h1> + <p>{'Your team communications 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> </div> ); } createScreenTwo() { return ( <div> - <h4><strong>{'How Mattermost works:'}</strong></h4> - <br/> - {'Communication happens in public discussion channels,'} - <br/> - {'private groups and direct messages.'} - <br/><br/> - {'Everything is archived and searchable from'} - <br/> - {'any web-enabled laptop, tablet or phone.'} - <br/><br/> - <span>{'[ ][ x ][ ]'}</span> + <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 laptop, tablet or phone.'}</p> + <div className='tutorial__circles'> + <div className='circle'/> + <div className='circle active'/> + <div className='circle'/> + </div> </div> ); } @@ -111,26 +109,26 @@ export default class TutorialIntroScreens extends React.Component { return ( <div> - <h4><strong>{'You’re all set'}</strong></h4> - <br/> - {inviteModalLink} - {' when you’re ready.'} - <br/><br/> - {'Need anything, just email us at '} - <a - href='mailto:feedback@mattermost.com' - target='_blank' - > - {'feedback@mattermost.com.'} - </a> - <br/><br/> - {'Click “Next” to enter Town Square. This is the first channel'} - <br/> - {'teammates see when they sign up - use it for posting updates'} - <br/> - {'everyone needs to know.'} - <br/><br/> - <span>{'[ ][ ][ x ]'}</span> + <h3>{'You’re all set'}</h3> + <p> + {inviteModalLink} + {' when you’re ready.'} + </p> + <p> + {'Need anything, just email us at '} + <a + href='mailto:feedback@mattermost.com' + target='_blank' + > + {'feedback@mattermost.com.'} + </a> + </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> </div> ); } @@ -138,16 +136,19 @@ export default class TutorialIntroScreens extends React.Component { const screen = this.createScreen(); return ( - <div> - {screen} - <br/><br/> - <button - className='btn btn-primary' - tabIndex='1' - onClick={this.handleNext} - > - {'Next'} - </button> + <div className='tutorial-steps__container'> + <div className='tutorial__content'> + <div className='tutorial__steps'> + {screen} + <button + className='btn btn-primary' + tabIndex='1' + onClick={this.handleNext} + > + {'Next'} + </button> + </div> + </div> </div> ); } diff --git a/web/react/components/tutorial/tutorial_tip.jsx b/web/react/components/tutorial/tutorial_tip.jsx index 166d10d8a..3482a7cfa 100644 --- a/web/react/components/tutorial/tutorial_tip.jsx +++ b/web/react/components/tutorial/tutorial_tip.jsx @@ -52,9 +52,19 @@ export default class TutorialTip extends React.Component { if (this.props.screens.length > 1) { for (let i = 0; i < this.props.screens.length; i++) { if (i === this.state.currentScreen) { - dots.push(<span key={'dotactive' + i}>{'[ x ]'}</span>); + dots.push( + <div + className='circle active' + key={'dotactive' + i} + /> + ); } else { - dots.push(<span key={'dotinactive' + i}>{'[ ]'}</span>); + dots.push( + <div + className='circle' + key={'dotinactive' + i} + /> + ); } } } @@ -63,7 +73,8 @@ export default class TutorialTip extends React.Component { <div className='tip-div'> <img className='tip-button' - src='/static/images/next.png' + src='/static/images/tutorialTip.gif' + width='35' onClick={this.toggle} ref='target' /> @@ -77,24 +88,24 @@ export default class TutorialTip extends React.Component { > <div className='tip-overlay'> {this.props.screens[this.state.currentScreen]} - <br/> - {dots} - <button - className='btn btn-default' - onClick={this.handleNext} - > - {buttonText} - </button> - <br/> - <span> - {'Seen this before? '} - <a - href='#' - onClick={this.skipTutorial} + <div className='tutorial__circles'>{dots}</div> + <div className='text-right'> + <button + className='btn btn-default' + onClick={this.handleNext} > - {'Opt out of these tips.'} - </a> - </span> + {buttonText} + </button> + <div className='tip-opt'> + {'Seen this before? '} + <a + href='#' + onClick={this.skipTutorial} + > + {'Opt out of these tips.'} + </a> + </div> + </div> </div> </Overlay> </div> |