Add the FTUE use case screen for new users. #5467

pixlwave · 2022-01-31T17:47:36Z

Fixes #5160. I will add analytics separately in another PR

Additionally adds InlineTextButton and StyledText SwiftUI views and replaces some custom code in the Analytics prompt with this button.

Light Mode	Dark Mode

Large Phone	Small Phone	Small Phone scrolled

11" iPad	11" iPad Landscape	12" iPad

amshakal · 2022-02-01T16:52:53Z

LGTM. The only feedback I have is that at some point of time we changed the options to:

Friends and family
Teams
Communities

Besides that, all looks fine to me. TY!

pixlwave · 2022-02-01T17:03:16Z

A couple of points to note so far @amshakal:

The design deviates from the Figma when it comes to the navigation bar colour. Should this be white for the whole flow?
Unlike the splash screen I've removed the maximum height of the content container, so everything is at the top of the screen on iPad. I'm split on whether it looks better or not.

amshakal · 2022-02-02T16:23:03Z

Yeah, would prefer it being white for the whole flow but it's not essential from a UX or a UI standpoint.
I think it looks fine on ipad. In fact, the information being on top and not being spread throughout the app is nicer in this case since the user has to read (follow instructions) and then interact with the components right below it.

Update strings. Show the custom server field as needed. Enable scroll edges appearance for white navigation bar.

pixlwave · 2022-02-04T16:13:21Z

Updated strings and navigation bar colour is visible in this recording along with what the navigation looks like from the Custom server button:

UseCase1080.mp4

github-actions · 2022-02-04T16:52:46Z

📱 Scan the QR code below to install the build for this PR.
🔒 This build is for internal testing purpose. Only devices listed in the ad-hoc provisioning profile can install Element Alpha.

If you can't scan the QR code you can install the build via this link: https://i.diawi.com/xYJsPK

Riot/Managers/UserSessions/UserSessionProperties.swift

stefanceriu · 2022-02-09T09:20:07Z

Riot/Modules/Authentication/AuthenticationCoordinator.swift

@@ -62,6 +62,10 @@ final class AuthenticationCoordinator: NSObject, AuthenticationCoordinatorProtoc
        authenticationViewController.authType = authenticationType
    }

+    func showCustomServer() {
+        authenticationViewController.hideCustomServers(false)


We should probably rename this to something along the lines of setCustomServersVisibility(_ visible: Bool)

I went with setCustomServerFieldsVisible(_ isVisible: Bool) in the end and left it as it on the Coordinator for now - there will be further changes to this when AuthVC is replaced so probably makes sense to hold back and see what makes sense at that stage.

Riot/Managers/UserSessions/UserSession.swift

Riot/Modules/Onboarding/OnboardingCoordinator.swift

stefanceriu · 2022-02-09T09:55:54Z

RiotSwiftUI/Modules/Common/Util/InlineTextButton.swift

+    ///   - tappableText: The tappable text that will be substituted into the `%@` placeholder.
+    ///   - action: The action to perform when tapping the button.
+    internal init(_ mainText: String, tappableText: String, action: @escaping () -> Void) {
+        guard let range = mainText.range(of: "%@") else {


I'm wondering if a better interface here would be to receive both the full string and the tappable string and search for the range of one in the other, instead of relying on a %@ format placeholder.

That makes far more sense now that you mention it 🙈

Although... In theory this could produce the wrong result if the tappable text is repeated and the first occurrence isn't meant to be the one to tap on. 🤔

Terrible contrived example:

For more information tap the link below, otherwise contact us via this link.

Yep, no, that makes sense. Perhaps then the full text and the tappable range?

This just pushes the issue further up but it still exists. If you have VectorL10n.descriptionMainText and VectorL10n.descriptionTappableText, you would need to either

Get the main string with the placeholder as %@.

Create a range from the start of the placeholder and the length of the tappable string.

Manually substitute the placeholder with the tappable string

Pass those to InlineTextButton

or

Get the main string with the tappable string already substituted.

Somehow handle the case of multiple occurrences of the tappable string (in all languages).

I agree it isn't particularly tidy this way, but not sure of any other options really 😕

stefanceriu

🙌

pixlwave force-pushed the doug/5160_ftue_use_case branch from 715ab3a to 01f52ad Compare February 1, 2022 16:36

pixlwave requested a review from amshakal February 1, 2022 16:39

pixlwave mentioned this pull request Feb 1, 2022

Instrument metrics for iOS for the IA project matrix-org/matrix-analytics-events#21

Merged

pixlwave force-pushed the doug/5160_ftue_use_case branch 3 times, most recently from 743f574 to 26258c3 Compare February 4, 2022 10:17

pixlwave added 2 commits February 4, 2022 16:10

Add the Use Case selection screen to the onboarding flow.

d11b3e0

Tweaks to the Use Case screen ready for review.

906eb48

Update strings. Show the custom server field as needed. Enable scroll edges appearance for white navigation bar.

pixlwave force-pushed the doug/5160_ftue_use_case branch from 26258c3 to 906eb48 Compare February 4, 2022 16:10

pixlwave commented Feb 4, 2022

View reviewed changes

Riot/Managers/UserSessions/UserSessionProperties.swift Outdated Show resolved Hide resolved

Fix tests.

8c55168

amshakal approved these changes Feb 7, 2022

View reviewed changes

stefanceriu requested changes Feb 9, 2022

View reviewed changes

Updates following PR feedback.

3fd3077

stefanceriu approved these changes Feb 10, 2022

View reviewed changes

pixlwave merged commit 3943b17 into develop Feb 10, 2022

pixlwave deleted the doug/5160_ftue_use_case branch February 10, 2022 14:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add the FTUE use case screen for new users. #5467

Add the FTUE use case screen for new users. #5467

pixlwave commented Jan 31, 2022 •

edited

Loading

amshakal commented Feb 1, 2022

pixlwave commented Feb 1, 2022

amshakal commented Feb 2, 2022

pixlwave commented Feb 4, 2022 •

edited

Loading

github-actions bot commented Feb 4, 2022 •

edited

Loading

stefanceriu Feb 9, 2022

pixlwave Feb 10, 2022 •

edited

Loading

stefanceriu Feb 9, 2022

pixlwave Feb 10, 2022

pixlwave Feb 10, 2022 •

edited

Loading

stefanceriu Feb 10, 2022

pixlwave Feb 10, 2022 •

edited

Loading

stefanceriu left a comment

Add the FTUE use case screen for new users. #5467

Add the FTUE use case screen for new users. #5467

Conversation

pixlwave commented Jan 31, 2022 • edited Loading

amshakal commented Feb 1, 2022

pixlwave commented Feb 1, 2022

amshakal commented Feb 2, 2022

pixlwave commented Feb 4, 2022 • edited Loading

github-actions bot commented Feb 4, 2022 • edited Loading

stefanceriu Feb 9, 2022

Choose a reason for hiding this comment

pixlwave Feb 10, 2022 • edited Loading

Choose a reason for hiding this comment

stefanceriu Feb 9, 2022

Choose a reason for hiding this comment

pixlwave Feb 10, 2022

Choose a reason for hiding this comment

pixlwave Feb 10, 2022 • edited Loading

Choose a reason for hiding this comment

stefanceriu Feb 10, 2022

Choose a reason for hiding this comment

pixlwave Feb 10, 2022 • edited Loading

Choose a reason for hiding this comment

stefanceriu left a comment

Choose a reason for hiding this comment

pixlwave commented Jan 31, 2022 •

edited

Loading

pixlwave commented Feb 4, 2022 •

edited

Loading

github-actions bot commented Feb 4, 2022 •

edited

Loading

pixlwave Feb 10, 2022 •

edited

Loading

pixlwave Feb 10, 2022 •

edited

Loading

pixlwave Feb 10, 2022 •

edited

Loading