From 393d253021e6b119ec35b92f9eeaa6f2d255008f Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Mon, 2 Nov 2015 11:40:53 +0500 Subject: [PATCH] Updating tutorial screens --- web/react/components/create_post.jsx | 7 +- web/react/components/sidebar.jsx | 30 +++-- .../tutorial/tutorial_intro_screens.jsx | 107 ++++++++-------- .../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 diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index 1dc30e251e..cb3148b7bd 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 c3f43ff692..39d9808e95 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 d423b4f1ba..b37aac27cc 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 166d10d8ae..3482a7cfaa 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 e80abf9528..fa93e46bf0 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 34f7c6eeda..5c83d5c5b4 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 0000000000000000000000000000000000000000..024dc3c09fb889003a65c0a938d8e7494836beac GIT binary patch literal 12278 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 EU;pp&=Kufz literal 0 HcmV?d00001