Post-Signup Interstitial: Create interstitial screen #10933

renanferrari · 2019-12-10T16:22:01Z

Fixes #10923

Screens

Standard

Dark Mode

The dark mode layout has been scraped for now, as it depends on the work being done at the material-theme branch.

Landscape

Tablet

Notes

There are some slight differences between the layouts implemented here and the ones in the design spec (mainly the status bar color). Most of these differences are due to the fact that I'm reusing existing theme and styles instead of creating new ones just for this screen. It is my understanding that there is an ongoing effort to update the theme of the app as a whole, so I still need to make sure what would be the best approach here.

To test

To be able to test this, you need to:

Build and launch a debug version of the app.
Use adb to start the Activity when needed:
adb shell am start -n org.wordpress.android/org.wordpress.android.ui.accounts.PostSignupInterstitialActivity

Standard layout

Start the PostSignupInterstitialActivity on a phone in portrait mode.
Verify that the layout is compliant with the design spec on Post-Signup Interstitial: Create interstitial screen #10923.

Landscape layout

Start the PostSignupInterstitialActivity on a phone in landscape mode.
Verify that the layout is compliant with the design spec on Post-Signup Interstitial: Create interstitial screen #10923.

Tablet layout

Start the PostSignupInterstitialActivity on a tablet.
Verifiy both texts and buttons don't expand horizontally more than what's been defined in the design spec on Post-Signup Interstitial: Create interstitial screen #10923.
Rotate the tablet.
Verify that the layout doesn't change.

Create new site button

Sign in to an account without any sites.
Start the PostSignupInterstitialActivity while WPMainActivity is on the back stack (more details on this below).
Tap on the Create WordPress.com Site button.
Verifiy that the SiteCreationActivity has been opened.
Complete the site creation flow.
Verify that the WPMainActivity is shown and the newly created site is selected.

Add self-hosted site button

Sign in to an account without any sites.
Start the PostSignupInterstitialActivity while WPMainActivity is on the back stack (more details on this below).
Tap on the Add Self-Hosted Site button.
Verifiy that the LoginActivity has been opened.
Complete the site connection flow.
Verify that the WPMainActivity is shown and the newly created site is selected.

Dismissal button

Sign in to an account without any sites.
Start the PostSignupInterstitialActivity.
Tap on the Not Right Now button.
Verify that the WPMainActivity has been opened on the Reader tab.

Notes

Please, check my comments below for more details on the assumptions I made while working on the buttons functionality and what is currently needed before moving forward.

WordPress/src/main/res/values/strings.xml

SylvesterWilmott · 2019-12-11T15:00:30Z

Looks great so far!

There are some slight differences between the layouts implemented here and the ones in the design spec (mainly the status bar color).

I am aware of this, the status bar colour is fine as is in the screenshots

We sometimes use a container width of 512dp max-width in some areas around the app. Can we try applying this constraint to the tablet layout (keeping the existing left and right paddings)?

renanferrari · 2019-12-11T15:26:01Z

Looks great so far!

Glad you like it!

We sometimes use a container width of 512dp max-width in some areas around the app. Can we try applying this constraint to the tablet layout (keeping the existing left and right paddings)?

If I understand correctly, that's something we can try for sure. I would just need to adjust this to 512dp.

Update: @SylvesterWilmott I have added the landscape layout and applied your suggestion regarding the max width.

peril-wordpress-mobile · 2019-12-11T19:27:59Z

	Warnings
⚠️	PR has more than 500 lines of code changing. Consider splitting into smaller PRs if possible.

Generated by 🚫 dangerJS

WordPress/src/main/java/org/wordpress/android/ui/accounts/PostSignupInterstitialActivity.kt

SylvesterWilmott · 2019-12-12T09:25:41Z

The changes look good to me! Thanks @renanferrari

maxme

Having separate layouts is often a source of issues, I wish we could find a simple way to only have one.

PR looks good overall, I left minor comments.

I'll create a feature branch, so you can merge this one and target the same feature branch in the upcoming PRs.

WordPress/src/main/java/org/wordpress/android/ui/accounts/PostSignupInterstitialActivity.kt

WordPress/src/main/res/drawable/img_illustration_construct_site_190dp.xml

WordPress/src/main/res/values/strings.xml

maxme · 2019-12-12T14:46:24Z

I'll create a feature branch, so you can merge this one and target the same feature branch in the upcoming PRs.

Pushed a new branch: feature/10918-post-signup-interstitial

renanferrari · 2019-12-12T16:46:20Z

Having separate layouts is often a source of issues, I wish we could find a simple way to only have one.

I agree. I have actually tried a few things, but none were quite good.

Our first iteration had a single layout, but the user had to scroll to see the buttons on a phone in landscape mode, which is not a good UX. @SylvesterWilmott fixed that with the new landscape layout.

From there, we experimented reusing the landscape layout on a tablet, but that didn't look good – and even if it did, we would still have at least two layouts: default and landscape.

The only alternatives I could think of that would let us achieve a single layout again would be to either update the ConstraintLayout lib to 2.0.0-beta2 so we could leverage its new Flow helper or to use the FlexboxLayout lib from Google. I just don't know if these alternatives can be considered "simple".

maxme · 2019-12-13T16:03:57Z

WordPress/src/main/res/layout/post_signup_interstitial_default.xml

        android:id="@+id/title_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/margin_medium"
        android:text="@string/post_signup_interstitial_title"
        android:textAlignment="center"
        android:textAppearance="@style/TextAppearance.AppCompat.Title"
+        app:fixWidowWords="true"


Well spotted, 👍 I actually forgot about that one ;)

maxme

LGTM,

maxme · 2019-12-19T13:37:51Z

There are some slight differences between the layouts implemented here and the ones in the design spec (mainly the status bar color). Most of these differences are due to the fact that I'm reusing existing theme and styles instead of creating new ones just for this screen. It is my understanding that there is an ongoing effort to update the theme of the app as a whole, so I still need to make sure what would be the best approach here.

Sorry, I just realized that, but I think we could reuse @style/WordPress.Button.Primary for the 2 primary buttons. I'll add a comment in the follow up PR.

renanferrari added 2 commits December 9, 2019 20:26

Creating post-signup interstitial layout

3ae56f5

Implementing basic functionality of post-signup interstitial buttons

0caee3e

renanferrari mentioned this pull request Dec 10, 2019

Post-Signup Interstitial Master Issue #10918

Closed

20 tasks

maxme requested review from maxme, theck13 and shiki December 11, 2019 09:17

maxme added the Signup label Dec 11, 2019

maxme added this to the 13.9 milestone Dec 11, 2019

maxme added the [Status] Not Ready for Merge label Dec 11, 2019

Adding post-signup interstitial screen title for accessibility

3bf6ef5

renanferrari commented Dec 11, 2019

View reviewed changes

WordPress/src/main/res/values/strings.xml Outdated Show resolved Hide resolved

renanferrari force-pushed the issue/10923-create-interstitial-screen branch from 78cdc5e to 383fb60 Compare December 12, 2019 02:02

renanferrari added 2 commits December 11, 2019 23:02

Adding landscape layout for post-signup interstitial screen

383fb60

Removing TODO comments

6a3b432

renanferrari commented Dec 12, 2019

View reviewed changes

WordPress/src/main/java/org/wordpress/android/ui/accounts/PostSignupInterstitialActivity.kt Show resolved Hide resolved

Updating strings to reuse existing ones

d7f699c

maxme suggested changes Dec 12, 2019

View reviewed changes

maxme changed the base branch from develop to feature/10918-post-signup-interstitial December 12, 2019 14:45

maxme removed the [Status] Not Ready for Merge label Dec 12, 2019

renanferrari changed the title ~~[DO NOT MERGE] Post-Signup Interstitial: Create interstitial screen~~ Post-Signup Interstitial: Create interstitial screen Dec 12, 2019

Marking reused strings as not translatable

8c74b88

Updating max width setting for post-signup interstitial screen

e462add

maxme reviewed Dec 13, 2019

View reviewed changes

Updating post-signup interstitial illustration to use color references

866c12a

maxme approved these changes Dec 13, 2019

View reviewed changes

maxme merged commit 7e9e35d into wordpress-mobile:feature/10918-post-signup-interstitial Dec 13, 2019

This was referenced Dec 19, 2019

Post-Signup Interstitial: Display interstitial screen #10976

Merged

Add post-signup interstitial feature #11024

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Post-Signup Interstitial: Create interstitial screen #10933

Post-Signup Interstitial: Create interstitial screen #10933

renanferrari commented Dec 10, 2019 •

edited

Loading

SylvesterWilmott commented Dec 11, 2019

renanferrari commented Dec 11, 2019 •

edited

Loading

peril-wordpress-mobile bot commented Dec 11, 2019

SylvesterWilmott commented Dec 12, 2019

maxme left a comment

maxme commented Dec 12, 2019

renanferrari commented Dec 12, 2019

maxme Dec 13, 2019

maxme left a comment

maxme commented Dec 19, 2019

Post-Signup Interstitial: Create interstitial screen #10933

Post-Signup Interstitial: Create interstitial screen #10933

Conversation

renanferrari commented Dec 10, 2019 • edited Loading

Screens

Standard

Dark Mode

Landscape

Tablet

Notes

To test

Standard layout

Landscape layout

Tablet layout

Create new site button

Add self-hosted site button

Dismissal button

Notes

SylvesterWilmott commented Dec 11, 2019

renanferrari commented Dec 11, 2019 • edited Loading

peril-wordpress-mobile bot commented Dec 11, 2019

SylvesterWilmott commented Dec 12, 2019

maxme left a comment

Choose a reason for hiding this comment

maxme commented Dec 12, 2019

renanferrari commented Dec 12, 2019

maxme Dec 13, 2019

Choose a reason for hiding this comment

maxme left a comment

Choose a reason for hiding this comment

maxme commented Dec 19, 2019

renanferrari commented Dec 10, 2019 •

edited

Loading

renanferrari commented Dec 11, 2019 •

edited

Loading