Add a basic FTU by gmarty · Pull Request #42 · mozilla-magnet/journey

gmarty · 2017-01-30T16:47:57Z

This PR contains:

A basic FTU
It is accessible from the components demo page

What is needed for the FTU now but will be on another PR:

Logic to display it on first start only
Logic to display the notification permission popup
A link on 'Tell us where...'

gmarty · 2017-01-31T13:55:01Z

For references, here's a couple of screenshots.

iOS:

Android:

arcturus

Looking pretty nice.

Should we use this react-native-viewpager component as our Carousel? #12

arcturus · 2017-01-31T15:26:25Z

js/App.js

 import Home from './scenes/Home';
 import Item from './scenes/Item';
 import Map from './scenes/Map';
+import Profile from './scenes/Profile';


Any reason for this reordering?

I'm really missing that we cannot do a dynamic import :( :( :( would love to load all this scenes like fte, debug, etc. on demand.

The new order reflects the order the routes are declared in the constructor below.

Also I know it's bad to import everything but I wouldn't worry too much as the components are not instantiated.
In the final product, I think it makes sense to be able to access the FTU (remember Firefox OS?)

arcturus · 2017-01-31T15:27:53Z

js/components/ViewPagerIndicator.js

@@ -0,0 +1,80 @@
+import React, { PropTypes } from 'react';


I'm going to be a bit picky, could you add some documentation explaining what this component does?

It has now better documentation.

Thanks, much better :)

arcturus · 2017-01-31T15:32:55Z

js/components/ViewPagerIndicator.js

+const DOT_SIZE = 12;
+const DOT_SPACE = 6;
+
+const ViewPagerIndicator = ({


nit:
export default const ViewPageIndicator ...

arcturus · 2017-01-31T15:39:21Z

js/scenes/FTU.js

+
+    this.navigator = this.props.navigator;
+
+    const PAGES = [


Can we render the pages on demand? Or are we going to force to show always the two pages?

The pages are rendered on demand. The code used to build each page is only called when required (think of <ListView> component).
The API seems flexible so it can also handle complicated case where you go to different pages depending on which button you tap.

arcturus · 2017-01-31T15:40:10Z

js/scenes/FTU.js

+      this.renderPage2(),
+    ];
+    const dataSource = new ViewPager.DataSource({
+      pageHasChanged: (p1, p2) => p1 !== p2,


I hate that RN doesn't have this datasource definition by default, I think we have the same filter in the home with the list view.

wilsonpage

Nice work @gmarty! Comments:

I'm unable to swipe the view-pager. It's very confusing as the dots suggest to me that the view is swipeable. If it's not, I'd suggest removing the dots.
We've introduced a new button design here. I suggest we have a single primary-call-to-action button that is used throughout the app. This button needs to be able to accept text and icons.
Action hierarchy UX: IMO we should have one clear 'primary' call to action and downgraded 'secondary' call-to-action. For example 'Turn On' is primary and 'Skip' is secondary.
Page indicators have no vertical padding:

wilsonpage · 2017-01-31T17:26:58Z

js/components/ViewPagerIndicator.js

+} from 'react-native';
+
+const { width } = Dimensions.get('window');
+const DOT_SIZE = 12;


Dots are quite big, can you refer to Android home screen for normal dot sizes.

I referred to the UI specs by Francis.
What about 10 px?

These are only UX specs, not visual, so don't worry about implementing them to pixel perfection. Android page indicators look half the size to me.

wilsonpage · 2017-01-31T17:28:21Z

js/components/ViewPagerIndicator.js

+ * @param scrollOffset {number} Used to reset dot position after a transition.
+ * @return {Component}
+ */
+const ViewPagerIndicator = ({


I understand this a shorthand declaration, but I'd rather we just be consistent with how we define components (ie. class).

This is more than just a shorthand. These stateless functional components are the recommended way to build components that are purely visual. They've been added in React 0.0.14 and they're likely to get an optimisation boost in the next versions. Ideally I'd like all the components in the components folder to use this syntax.

You can read more in the announcement blog and this blog post.

Interesting thanks!

wilsonpage · 2017-01-31T17:29:31Z

js/components/ViewPagerIndicator.js

+  // Initial left position of the active dot used during transition.
+  const offsetX = (width - DOT_FULL_WIDTH * pageCount) / 2 +
+    (activePage - scrollOffset) * DOT_FULL_WIDTH;
+  // The CSS `left` property.


NIT: Line break before comments. Is there a rule for this?

There's no rule as of yet, but feel free to make a PR or open an issue.

wilsonpage · 2017-01-31T17:32:55Z

js/scenes/FTU.js

+        source={require('../images/ftu/background.jpg')}
+        resizeMode="cover"
+        style={styles.container}>
+        <View style={styles.scrim}>


What's a scrim?

n. A transparent fabric used as a drop in the theatre to create special effects of lights or atmosphere.

That's a word that came up when I was working on the settings drawer of Firefox OS. I think @djabberwocky was working on the spec back then so he may know more about this term.
That may not be appropriate in this case.

wilsonpage · 2017-01-31T17:33:39Z

js/scenes/FTU.js

+    return (
+      <View style={styles.screen}>
+        <Text style={styles.title}>{`Hear the story of London's vibrant street art`.toUpperCase()}</Text>
+        <Text style={styles.text}>This month Project Magnet brings you a selection of amazing street art from around London.</Text>


Should we move this text out into a config file?

I agree this is not pretty. Maybe if I move it to a constant at the beginning of the file it will make it easier to read.

wilsonpage · 2017-01-31T17:36:33Z

js/scenes/FTU.js

+              title="GET STARTED"
+              accessibilityLabel="Continue to the next screen."
+              onPress={() => this.refs.viewPager.goToPage(1)}
+              color={Platform.OS === 'ios' ? 'white' : 'transparent'}/>


I'm our current design we have a black button with white border as our primary-call-to-action button. Can we be consistent and have a single <PrimaryButton> component that we use everywhere?

So after our UX discussions of yesterday, let's not focus too much on design. All will change.
I agree we need a specific button. Let's open an issue for this.

wilsonpage · 2017-01-31T18:09:02Z

Call-to-action is missing for the "Tell us where you'd like us to go next" text.

arcturus · 2017-02-01T14:19:24Z

The dots are cut out for me too.

I will land this patch, it will change a lot once slicebread comes with the design, but we can start wiring the logic for launching it just one time and so on.

Also it can be used in the user study as a place holder until we have the final visuals.

But yes the dots ... could be completely visible :)

gmarty · 2017-02-01T14:22:09Z

Oh yes I forgot to comment on the dots. They are currently cut out because this patch works with #49 so that the FTU is displayed full screen with no background on the status bar (take a look at the slightly outdated visual posted above).

wilsonpage · 2017-02-02T02:26:05Z

Landed on master

gmarty added the in progress label Jan 30, 2017

gmarty force-pushed the ftu branch from 95f338a to cb3112c Compare January 30, 2017 17:24

oteo assigned gmarty Jan 31, 2017

oteo added this to the Sprint 11 [Jan 23rd - Feb 3rd] milestone Jan 31, 2017

gmarty force-pushed the ftu branch 2 times, most recently from 4a2380b to 5debd42 Compare January 31, 2017 13:50

gmarty requested review from arcturus and wilsonpage January 31, 2017 14:46

arcturus requested changes Jan 31, 2017

View reviewed changes

gmarty added 7 commits January 31, 2017 17:42

Add a basic FTU

a972900

Replace carousel component

d7f24eb

Do the internal wiring

fa3d353

Remove the styling of the status bar

0e16276

Fix dot positioning

1754f44

Document the ViewPagerIndicator component

0033025

Define propTypes as static

3e77587

gmarty force-pushed the ftu branch from 6a6ba8d to 3e77587 Compare January 31, 2017 17:42

wilsonpage requested changes Jan 31, 2017

View reviewed changes

Do the changes requested

39db7ce

wilsonpage closed this Feb 2, 2017

wilsonpage removed the in progress label Feb 2, 2017

Conversation

gmarty commented Jan 30, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gmarty commented Jan 31, 2017

Uh oh!

arcturus left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wilsonpage left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wilsonpage commented Jan 31, 2017

Uh oh!

arcturus commented Feb 1, 2017

Uh oh!

gmarty commented Feb 1, 2017

Uh oh!

wilsonpage commented Feb 2, 2017

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

gmarty commented Jan 30, 2017 •

edited

Loading

wilsonpage left a comment •

edited

Loading