From 0bf92c8adaa8cc336542a94341124135c99c8c3b Mon Sep 17 00:00:00 2001
From: JoramWilander <jwawilander@gmail.com>
Date: Thu, 5 Nov 2015 12:20:55 -0500
Subject: Make dots in tutorial intro clickable and always at the same spot

---
 .../components/tutorial/tutorial_intro_screens.jsx | 54 ++++++++++++++++------
 web/sass-files/sass/partials/_tutorial.scss        |  6 ++-
 2 files changed, 44 insertions(+), 16 deletions(-)

(limited to 'web')

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
+}
-- 
cgit v1.2.3-1-g7c22


From 2c271d1514611e06b2a1a46ea8bba7e27322accf Mon Sep 17 00:00:00 2001
From: JoramWilander <jwawilander@gmail.com>
Date: Thu, 5 Nov 2015 12:22:40 -0500
Subject: Use state for current screen in turotial intro

---
 web/react/components/tutorial/tutorial_intro_screens.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'web')

diff --git a/web/react/components/tutorial/tutorial_intro_screens.jsx b/web/react/components/tutorial/tutorial_intro_screens.jsx
index 8fcd5a0f3..66ca556c6 100644
--- a/web/react/components/tutorial/tutorial_intro_screens.jsx
+++ b/web/react/components/tutorial/tutorial_intro_screens.jsx
@@ -52,7 +52,7 @@ export default class TutorialIntroScreens extends React.Component {
         }
     }
     createScreenOne() {
-        const circles = this.createCircles(0);
+        const circles = this.createCircles();
 
         return (
             <div>
@@ -65,7 +65,7 @@ export default class TutorialIntroScreens extends React.Component {
         );
     }
     createScreenTwo() {
-        const circles = this.createCircles(1);
+        const circles = this.createCircles();
 
         return (
             <div>
@@ -105,7 +105,7 @@ export default class TutorialIntroScreens extends React.Component {
             );
         }
 
-        const circles = this.createCircles(2);
+        const circles = this.createCircles();
 
         return (
             <div>
@@ -129,11 +129,11 @@ export default class TutorialIntroScreens extends React.Component {
             </div>
         );
     }
-    createCircles(index) {
+    createCircles() {
         const circles = [];
         for (let i = 0; i < NUM_SCREENS; i++) {
             let className = 'circle';
-            if (i === index) {
+            if (i === this.state.currentScreen) {
                 className += ' active';
             }
 
-- 
cgit v1.2.3-1-g7c22