From 393d253021e6b119ec35b92f9eeaa6f2d255008f Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Mon, 2 Nov 2015 11:40:53 +0500 Subject: Updating tutorial screens --- web/react/components/create_post.jsx | 7 +- web/react/components/sidebar.jsx | 30 +++--- .../components/tutorial/tutorial_intro_screens.jsx | 107 +++++++++---------- web/react/components/tutorial/tutorial_tip.jsx | 51 +++++---- web/sass-files/sass/partials/_tutorial.scss | 117 +++++++++++++++++++-- web/sass-files/sass/styles.scss | 1 + web/static/images/tutorialTip.gif | Bin 0 -> 12278 bytes 7 files changed, 215 insertions(+), 98 deletions(-) create mode 100644 web/static/images/tutorialTip.gif (limited to 'web') 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(
-

{'Sending Messages'}

- {'Type here to write a message.'} -

- {'Click the attachment button to upload an image or a file.'} +

{'Sending Messages'}

+

{'Type here to write a message.'}

+

{'Click the attachment button to upload an image or a file.'}

); 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(
-

{'Channels'}

- {'Channels'}{' organize conversations across different topics. They’re open to everyone on your team. To send private communications use '}{'Direct Messages'}{' for a single person or '}{'Private Groups'}{' for multiple people.'} +

{'Channels'}

+

{'Channels'}{' organize conversations across different topics. They’re open to everyone on your team. To send private communications use '}{'Direct Messages'}{' for a single person or '}{'Private Groups'}{' for multiple people.'} +

); screens.push(
-

{'"Town Square" and "Off-Topic" channels'}

- {'Here are two public channels to start:'} -

- {'Town Square'}{' is a place for team-wide communication. Everyone in your team is a member of this channel.'} -

- {'Off-Topic'}{' is a place for fun and humor outside of work-related channels. You and your team can decide what other channels to create.'} +

{'"Town Square" and "Off-Topic" channels'}

+

{'Here are two public channels to start:'}

+

+ {'Town Square'}{' is a place for team-wide communication. Everyone in your team is a member of this channel.'} +

+

+ {'Off-Topic'}{' is a place for fun and humor outside of work-related channels. You and your team can decide what other channels to create.'} +

); screens.push(
-

{'Creating and Joining Channels'}

- {'Click '}{'"More..."'}{' to create a new channel or join an existing one.'} -

- {'You can also create a new channel or private group by clicking the '}{'"+" symbol'}{' next to the channel or private group header.'} +

{'Creating and Joining Channels'}

+

+ {'Click '}{'"More..."'}{' to create a new channel or join an existing one.'} +

+

+ {'You can also create a new channel or private group by clicking the '}{'"+" symbol'}{' next to the channel or private group header.'} +

); 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 (
-

{'Welcome to:'}

-

{'Mattermost'}

-
- {'Your team communications all in one place,'} -
- {'instantly searchable and available anywhere.'} -

- {'Keep your team connected to help them'} -
- {'achieve what matters most.'} -

- {'[ x ][ ][ ]'} +

{'Welcome to:'}

+

{'Mattermost'}

+

{'Your team communications all in one place, instantly searchable and available anywhere.'}

+

{'Keep your team connected to help them achieve what matters most.'}

+
+
+
+
+
); } createScreenTwo() { return (
-

{'How Mattermost works:'}

-
- {'Communication happens in public discussion channels,'} -
- {'private groups and direct messages.'} -

- {'Everything is archived and searchable from'} -
- {'any web-enabled laptop, tablet or phone.'} -

- {'[ ][ x ][ ]'} +

{'How Mattermost works:'}

+

{'Communication happens in public discussion channels, private groups and direct messages.'}

+

{'Everything is archived and searchable from any web-enabled laptop, tablet or phone.'}

+
+
+
+
+
); } @@ -111,26 +109,26 @@ export default class TutorialIntroScreens extends React.Component { return (
-

{'You’re all set'}

-
- {inviteModalLink} - {' when you’re ready.'} -

- {'Need anything, just email us at '} - - {'feedback@mattermost.com.'} - -

- {'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.'} -

- {'[ ][ ][ x ]'} +

{'You’re all set'}

+

+ {inviteModalLink} + {' when you’re ready.'} +

+

+ {'Need anything, just email us at '} + + {'feedback@mattermost.com.'} + +

+ {'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.'} +
+
+
+
+
); } @@ -138,16 +136,19 @@ export default class TutorialIntroScreens extends React.Component { const screen = this.createScreen(); return ( -
- {screen} -

- +
+
+
+ {screen} + +
+
); } 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({'[ x ]'}); + dots.push( +
+ ); } else { - dots.push({'[ ]'}); + dots.push( +
+ ); } } } @@ -63,7 +73,8 @@ export default class TutorialTip extends React.Component {
@@ -77,24 +88,24 @@ export default class TutorialTip extends React.Component { >
{this.props.screens[this.state.currentScreen]} -
- {dots} - -
- - {'Seen this before? '} - {dots}
+
+ +
+ {'Seen this before? '} + + {'Opt out of these tips.'} + +
+
diff --git a/web/sass-files/sass/partials/_tutorial.scss b/web/sass-files/sass/partials/_tutorial.scss index e80abf952..fa93e46bf 100644 --- a/web/sass-files/sass/partials/_tutorial.scss +++ b/web/sass-files/sass/partials/_tutorial.scss @@ -1,17 +1,71 @@ +.tip-backdrop { + background: rgba(black, 0.5); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 999; +} + .tip-overlay { + width: 350px; + max-width: 90%; position:absolute; - background-color:#EEE; - box-shadow:0 5px 10px rgba(0, 0, 0, 0.2); - border:1px solid #CCC; - border-radius:3px; - padding:10px; - z-index:999; + background-color: #fff; + @include border-radius(3px); + padding: 20px; + z-index: 1000; + h4 { + font-size: em(16px); + font-weight: 600; + margin: 5px 0 15px; + } + p { + font-size: 13px; + line-height: 1.6; + strong { + font-weight: 600; + } + } + .btn { + background: #cccccc; + color: #fff; + @include border-radius(3px); + border: none; + margin-bottom: 10px; + &:hover, &:active, &:focus { + color: #fff; + border: none; + background: #bbb; + } + } + .tip-opt { + font-size: 12px; + span { + @include opacity(0.5); + } + } + .tutorial__circles { + margin: 1.5em 0px -1.7em -4px; + .circle { + width: 7px; + height: 7px; + margin: 0 4px; + &.active { + background: #000; + @include opacity(0.4); + } + } + } } .tip-button { - height:20px; - width:20px; - z-index:998; + z-index: 998; + right: -10px; + top: -10px; + position: relative; + cursor: pointer; } .tip-div { @@ -19,3 +73,48 @@ top:0px; right:0px; } + +.tutorial-steps__container { + text-align: center; + width: 100%; + display: table; + .tutorial__content { + display: table-cell; + vertical-align: middle; + padding-bottom: 100px; + padding: 0 40px; + .tutorial__steps { + max-width: 310px; + min-height: 420px; + text-align: left; + display: inline-block; + } + } + h1 { + font-size: em(40px); + margin: -20px 0 30px; + font-weight: 600; + } + h3 { + font-size: em(24px); + margin-bottom: 30px; + font-weight: 600; + } +} + +.tutorial__circles { + margin: 2em 0; + .circle { + width: 9px; + height: 9px; + @include border-radius(9px); + @include opacity(0.1); + background: #000; + display: inline-block; + margin: 0 5px; + &.active { + background: $primary-color; + @include opacity(1); + } + } +} \ No newline at end of file diff --git a/web/sass-files/sass/styles.scss b/web/sass-files/sass/styles.scss index 34f7c6eed..5c83d5c5b 100644 --- a/web/sass-files/sass/styles.scss +++ b/web/sass-files/sass/styles.scss @@ -39,6 +39,7 @@ @import "partials/get-link"; @import "partials/markdown"; @import "partials/tutorial"; +@import "partials/statistics"; // Responsive Css @import "partials/responsive"; diff --git a/web/static/images/tutorialTip.gif b/web/static/images/tutorialTip.gif new file mode 100644 index 000000000..024dc3c09 Binary files /dev/null and b/web/static/images/tutorialTip.gif differ -- cgit v1.2.3-1-g7c22