FTUE Use case UI/UX #4927

ouchadam · 2022-01-12T13:49:52Z

Part of #4585

Builds the base UI and UX for the use case screen in the FTUE onboarding flow (behind a feature flag)
Fixes the setTextWithColoredPart ignoring the underline argument, the default behaviour is now underline=true to match the previous behaviour

TODO

Storing the selection and Integrating with posthog
Dark mode icon updates (if signed off)

SCREEN	TABLET PORTRAIT	TABLET LANDSCAPE	SMALL TOP	SMALL SCROLLED

GIF

… it's set - updates the default value to true and that was the existing intentional behaviour

… at the same time for visibility

… act on the use caseselection)

github-actions · 2022-01-12T14:21:32Z

Unit Test Results

  66 files ±0   66 suites ±0 55s ⏱️ -5s
135 tests ±0 135 ✔️ ±0 0 💤 ±0 0 ❌ ±0
418 runs ±0 418 ✔️ ±0 0 💤 ±0 0 ❌ ±0

Results for commit c3ac60f. ± Comparison against base commit c1d89c5.

♻️ This comment has been updated with latest results.

bmarty

Nice work, some small remarks. Thanks!

bmarty · 2022-01-12T15:34:43Z

vector/src/main/java/im/vector/app/features/onboarding/OnboardingAction.kt

@@ -31,6 +31,15 @@ sealed class OnboardingAction : VectorViewModelAction {

    data class UpdateServerType(val serverType: ServerType) : OnboardingAction()
    data class UpdateHomeServer(val homeServerUrl: String) : OnboardingAction()
+    data class UpdateUseCase(val useCase: UseCase) : OnboardingAction() {
+        enum class UseCase {


Nit: Other enums (SignMode, etc.) are declared in their own file, maybe do the same, this file is big enough.

extracted 5d0c55b

bmarty · 2022-01-12T15:35:51Z

vector/src/main/java/im/vector/app/features/onboarding/OnboardingViewModel.kt

@@ -441,6 +457,11 @@ class OnboardingViewModel @AssistedInject constructor(
        }
    }

+    private fun handleUpdateUseCase() {
+        // TODO act on the use case selection


Yeah, maybe just store it in a data store for now, for future usage in the app?

I was planning to store and apply to the posthog identity in the next PR to keep this PR a little smaller, but I'm also happy to do the local storing here to avoid the TODO

Ok, it's fine to do it in another PR. About analytics you do not have the user consent yet (in the current impl)

that's fine, we'll store selection locally and when consent is granted we'll retrieve the stored value and apply as an identity property in the analytics init

bmarty · 2022-01-12T15:38:06Z

vector/src/main/java/im/vector/app/features/onboarding/ftueauth/FtueAuthUseCaseFragment.kt

+        views.useCaseOptionThree.setUseCase(R.string.ftue_auth_use_case_option_three, UseCase.COMMUNITIES)
+
+        val partial = getString(R.string.ftue_auth_use_case_skip_partial)
+        views.useCaseSkip.setTextWithColoredPart(


You can use (I think) the other version of this fun, which will take the string resource R.string.ftue_auth_use_case_skip_partial and R.string.ftue_auth_use_case_skip, partial as parameters. Shorter code.

works great! c3a7f6e

bmarty · 2022-01-12T15:39:24Z

vector/src/main/java/im/vector/app/features/onboarding/ftueauth/FtueAuthUseCaseFragment.kt

+    }
+
+    override fun resetViewModel() {
+        // Nothing to do


It should reset the previous answer from the user for this question (if it's in the state)

f3cc7e9 relies on the same TODO for storing the use case selection, we don't need to store the selection in the onboarding state

bmarty · 2022-01-12T15:41:28Z

vector/src/main/res/layout/fragment_ftue_auth_use_case.xml

+        android:id="@+id/useCaseHeaderIcon"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="52dp"


We do not have a scrollview here, I am afraid the whole screen will render badly on small screens (did not check)

yep it's broken...

240 DPI - nexus one

b371e24

PR description screenshots updated

bmarty · 2022-01-12T15:42:27Z

vector/src/main/res/layout/fragment_ftue_auth_use_case.xml

+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_marginBottom="16dp"
+        android:background="@drawable/bg_login_server_selector"


Thanks for reusing this drawable!

bmarty · 2022-01-12T15:43:08Z

vector/src/main/res/layout/fragment_ftue_auth_use_case.xml

+        app:layout_constraintBottom_toTopOf="@id/contentFooterSpacing"
+        app:layout_constraintEnd_toEndOf="@id/useCaseGutterEnd"
+        app:layout_constraintStart_toStartOf="@id/useCaseGutterStart"
+        app:layout_constraintTop_toBottomOf="@id/useCaseOptionThree" />


maybe add a tools:text attribute for a better preview of the layout

bmarty · 2022-01-12T15:43:58Z

vector/src/main/res/layout/fragment_ftue_auth_use_case.xml

+        app:layout_constraintStart_toStartOf="@id/useCaseGutterStart"
+        app:layout_constraintTop_toBottomOf="@id/contentFooterSpacing" />
+
+    <TextView


Better to use a Button here.

47c9e75 also updated the splash I already know this to use a button as well

bmarty · 2022-01-12T15:45:07Z

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

+    <string name="ftue_auth_use_case_skip">Not sure yet? %s</string>
+    <string name="ftue_auth_use_case_skip_partial">You can skip this question</string>
+    <string name="ftue_auth_use_case_join_existing_server">Looking to join an existing server?</string>
+    <string name="ftue_auth_use_case_connect_to_server">Connect to server</string>


It's OK, but you were thinking about adding new strings to another file waiting for final copy.

💯 will do

…ented

…es to avoid translations before they're signed off

…er devices

github-actions · 2022-01-13T13:09:34Z

Matrix SDK

Integration Tests Results:

[org.matrix.android.sdk.session]
passed="21" failures="0" errors="0" skipped="2"
[org.matrix.android.sdk.account]
passed="5" failures="0" errors="0" skipped="2"
[org.matrix.android.sdk.internal]
passed="158" failures="1" errors="0" skipped="38"
[org.matrix.android.sdk.ordering]
passed="16" failures="0" errors="0" skipped="0"
[org.matrix.android.sdk.PermalinkParserTest]
passed="2" failures="0" errors="0" skipped="0"

bmarty

LGTM, thanks for the update! Please merge it when you want to

ouchadam added 10 commits January 12, 2022 12:05

adding debug feature flag for the splash carousel

7cea035

adding feature flag and entry point for the _wip_ usecase screen

1ae112d

adding barebones ftue use case fragment

b6ff6aa

respecting the underline parameter by only applying an underline when…

00bbede

… it's set - updates the default value to true and that was the existing intentional behaviour

extracting use case copy to the resources

3d4caea

only showing the use case screen for the sign up flow

8c67cc0

aligning the use case image padding to the other onboarding pages

0ba6f55

fading the server selection when coming from the use case page

878371c

typing the use case selections and binding the label and usecase type…

c29dc89

… at the same time for visibility

removing unused action instance (will be needed once we decide how to…

a7e8da4

… act on the use caseselection)

ouchadam added the Z-FTUE Issue is relevant to the first time use project or experience label Jan 12, 2022

ouchadam mentioned this pull request Jan 12, 2022

Build FTUE Use Case screen #4585

Closed

6 tasks

fixing line length

42e6c54

bmarty reviewed Jan 12, 2022

View reviewed changes

ouchadam added 8 commits January 13, 2022 10:05

extracting usecase enum to its own file

5d0c55b

reusing existing helper to replace partial in string template

c3a7f6e

adding reset use case action, is todo until the persistence is implem…

f3cc7e9

…ented

making the text only buttons a button widget to give them touch feedback

47c9e75

adding text to design preview for programatically set text

1f876b9

moving the work in progress strings out of the production strings fil…

83af0d7

…es to avoid translations before they're signed off

wrapping the use case into a scrollview to avoid overlapping on small…

b371e24

…er devices

fixing import ordering

c3ac60f

ouchadam requested a review from bmarty January 13, 2022 13:10

bmarty approved these changes Jan 13, 2022

View reviewed changes

ouchadam enabled auto-merge January 13, 2022 14:28

ouchadam merged commit a208b48 into develop Jan 13, 2022

ouchadam deleted the feature/adm/ftue-usecase branch January 13, 2022 14:48

ouchadam mentioned this pull request Jan 14, 2022

In development release notes category #4953

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FTUE Use case UI/UX #4927

FTUE Use case UI/UX #4927

ouchadam commented Jan 12, 2022 •

edited

github-actions bot commented Jan 12, 2022 •

edited

bmarty left a comment

bmarty Jan 12, 2022

ouchadam Jan 13, 2022

bmarty Jan 12, 2022

ouchadam Jan 12, 2022 •

edited

bmarty Jan 12, 2022

ouchadam Jan 12, 2022

bmarty Jan 12, 2022

ouchadam Jan 13, 2022

bmarty Jan 12, 2022

ouchadam Jan 13, 2022

bmarty Jan 12, 2022

ouchadam Jan 13, 2022

ouchadam Jan 13, 2022

bmarty Jan 12, 2022

bmarty Jan 12, 2022

ouchadam Jan 13, 2022

bmarty Jan 12, 2022

ouchadam Jan 13, 2022

bmarty Jan 12, 2022

ouchadam Jan 12, 2022

ouchadam Jan 13, 2022

github-actions bot commented Jan 13, 2022 •

edited

bmarty left a comment

FTUE Use case UI/UX #4927

FTUE Use case UI/UX #4927

Conversation

ouchadam commented Jan 12, 2022 • edited

github-actions bot commented Jan 12, 2022 • edited

Unit Test Results

bmarty left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ouchadam Jan 12, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Jan 13, 2022 • edited

Matrix SDK

Integration Tests Results:

bmarty left a comment

Choose a reason for hiding this comment

ouchadam commented Jan 12, 2022 •

edited

github-actions bot commented Jan 12, 2022 •

edited

ouchadam Jan 12, 2022 •

edited

github-actions bot commented Jan 13, 2022 •

edited