From ad208a08199817715c4372a416b6f4a1b0b10767 Mon Sep 17 00:00:00 2001
From: Onuray Sahin <onurays@element.io>
Date: Mon, 10 Oct 2022 13:48:25 +0300
Subject: [PATCH] Refactor layout.

---
 .../src/main/res/values/strings.xml           |  8 ++---
 .../features/login/qr/QrCodeLoginActivity.kt  |  3 +-
 .../qr/QrCodeLoginInstructionsFragment.kt     | 14 +++++++++
 vector/src/main/res/drawable/ic_qr_code.xml   |  9 ++++++
 .../layout/fragment_ftue_combined_login.xml   | 29 ++++++++++---------
 5 files changed, 44 insertions(+), 19 deletions(-)
 create mode 100644 vector/src/main/res/drawable/ic_qr_code.xml

diff --git a/library/ui-strings/src/main/res/values/strings.xml b/library/ui-strings/src/main/res/values/strings.xml
index 86e1afa471..a37e15f91d 100644
--- a/library/ui-strings/src/main/res/values/strings.xml
+++ b/library/ui-strings/src/main/res/values/strings.xml
@@ -2168,7 +2168,7 @@
     <string name="login_signin_matrix_id_password_notice">If you don’t know your password, go back to reset it.</string>
     <string name="login_signin_matrix_id_error_invalid_matrix_id">This is not a valid user identifier. Expected format: \'@user:homeserver.org\'</string>
     <string name="autodiscover_well_known_error">Unable to find a valid homeserver. Please check your identifier</string>
-    <string name="login_signin_with_qr_code">Sign in with QR code</string>
+    <string name="login_scan_qr_code">Scan QR code</string>
 
     <string name="seen_by">Seen by</string>
 
@@ -3341,10 +3341,10 @@
     <string name="qr_code_login_header_failed_device_is_not_supported_description">Linking with this device is not supported.</string>
     <string name="qr_code_login_header_failed_timeout_description">The linking wasn’t completed in the required time.</string>
     <string name="qr_code_login_header_failed_denied_description">The request was denied on the other device.</string>
-    <string name="qr_code_login_new_device_instruction_1">Open Element on your other device</string>
+    <string name="qr_code_login_new_device_instruction_1">Open ${app_name} on your other device</string>
     <string name="qr_code_login_new_device_instruction_2">Go to Settings -> Security &amp; Privacy</string>
-    <string name="qr_code_login_new_device_instruction_3">Select \'Link a device\'</string>
-    <string name="qr_code_login_new_device_instruction_4">Select \'Show QR code on this device\'</string>
+    <string name="qr_code_login_new_device_instruction_3">Are you on web? -> Select \'Show QR code\'</string>
+    <string name="qr_code_login_new_device_instruction_4">Are you on a mobile device? -> Select \'Scan QR code\' and then \'Show QR code\'</string>
     <string name="qr_code_login_show_qr_code_button">Show QR code in this device</string>
     <string name="qr_code_login_need_an_alternative_method">Need an alternative method?</string>
     <string name="qr_code_login_scan_qr_code_button">Scan QR code</string>
diff --git a/vector/src/main/java/im/vector/app/features/login/qr/QrCodeLoginActivity.kt b/vector/src/main/java/im/vector/app/features/login/qr/QrCodeLoginActivity.kt
index 18efdca4ef..7ca58088f8 100644
--- a/vector/src/main/java/im/vector/app/features/login/qr/QrCodeLoginActivity.kt
+++ b/vector/src/main/java/im/vector/app/features/login/qr/QrCodeLoginActivity.kt
@@ -23,6 +23,7 @@ import android.view.View
 import com.airbnb.mvrx.Mavericks
 import com.airbnb.mvrx.viewModel
 import dagger.hilt.android.AndroidEntryPoint
+import im.vector.app.core.extensions.addFragment
 import im.vector.app.core.extensions.addFragmentToBackstack
 import im.vector.app.core.platform.SimpleFragmentActivity
 
@@ -38,7 +39,7 @@ class QrCodeLoginActivity : SimpleFragmentActivity() {
         val qrCodeLoginArgs: QrCodeLoginArgs? = intent?.extras?.getParcelable(Mavericks.KEY_ARG)
         if (isFirstCreation()) {
             if (qrCodeLoginArgs?.loginType == QrCodeLoginType.LOGIN) {
-                addFragmentToBackstack(
+                addFragment(
                         views.container,
                         QrCodeLoginInstructionsFragment::class.java,
                         qrCodeLoginArgs,
diff --git a/vector/src/main/java/im/vector/app/features/login/qr/QrCodeLoginInstructionsFragment.kt b/vector/src/main/java/im/vector/app/features/login/qr/QrCodeLoginInstructionsFragment.kt
index c9cf59a7d5..6b48975e15 100644
--- a/vector/src/main/java/im/vector/app/features/login/qr/QrCodeLoginInstructionsFragment.kt
+++ b/vector/src/main/java/im/vector/app/features/login/qr/QrCodeLoginInstructionsFragment.kt
@@ -21,6 +21,7 @@ import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import androidx.core.view.isVisible
 import com.airbnb.mvrx.activityViewModel
 import com.airbnb.mvrx.fragmentViewModel
 import dagger.hilt.android.AndroidEntryPoint
@@ -41,10 +42,23 @@ class QrCodeLoginInstructionsFragment : VectorBaseFragment<FragmentQrCodeLoginIn
 
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
+        observeViewState()
         initScanQrCodeButton()
         initShowQrCodeButton()
     }
 
+    private fun observeViewState() {
+        viewModel.onEach {
+            if (it.loginType == QrCodeLoginType.LOGIN) {
+                views.qrCodeLoginInstructionsShowQrCodeButton.isVisible = false
+                views.qrCodeLoginInstructionsAlternativeLayout.isVisible = false
+            } else {
+                views.qrCodeLoginInstructionsShowQrCodeButton.isVisible = true
+                views.qrCodeLoginInstructionsAlternativeLayout.isVisible = true
+            }
+        }
+    }
+
     private fun initShowQrCodeButton() {
         views.qrCodeLoginInstructionsShowQrCodeButton.debouncedClicks {
             viewModel.handle(QrCodeLoginAction.ShowQrCode)
diff --git a/vector/src/main/res/drawable/ic_qr_code.xml b/vector/src/main/res/drawable/ic_qr_code.xml
new file mode 100644
index 0000000000..1ebdc169c9
--- /dev/null
+++ b/vector/src/main/res/drawable/ic_qr_code.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="13dp"
+    android:height="12dp"
+    android:viewportWidth="13"
+    android:viewportHeight="12">
+  <path
+      android:pathData="M7.167,12V10.667H8.5V12H7.167ZM5.833,10.667V7.333H7.167V10.667H5.833ZM11.167,8.667V6H12.5V8.667H11.167ZM9.833,6V4.667H11.167V6H9.833ZM1.833,7.333V6H3.167V7.333H1.833ZM0.5,6V4.667H1.833V6H0.5ZM6.5,1.333V0H7.833V1.333H6.5ZM1.333,3.167H3.667V0.833H1.333V3.167ZM1,4C0.856,4 0.736,3.953 0.642,3.858C0.547,3.764 0.5,3.644 0.5,3.5V0.5C0.5,0.356 0.547,0.236 0.642,0.142C0.736,0.047 0.856,0 1,0H4C4.144,0 4.264,0.047 4.358,0.142C4.453,0.236 4.5,0.356 4.5,0.5V3.5C4.5,3.644 4.453,3.764 4.358,3.858C4.264,3.953 4.144,4 4,4H1ZM1.333,11.167H3.667V8.833H1.333V11.167ZM1,12C0.856,12 0.736,11.953 0.642,11.858C0.547,11.764 0.5,11.644 0.5,11.5V8.5C0.5,8.356 0.547,8.236 0.642,8.142C0.736,8.047 0.856,8 1,8H4C4.144,8 4.264,8.047 4.358,8.142C4.453,8.236 4.5,8.356 4.5,8.5V11.5C4.5,11.644 4.453,11.764 4.358,11.858C4.264,11.953 4.144,12 4,12H1ZM9.333,3.167H11.667V0.833H9.333V3.167ZM9,4C8.856,4 8.736,3.953 8.642,3.858C8.547,3.764 8.5,3.644 8.5,3.5V0.5C8.5,0.356 8.547,0.236 8.642,0.142C8.736,0.047 8.856,0 9,0H12C12.144,0 12.264,0.047 12.358,0.142C12.453,0.236 12.5,0.356 12.5,0.5V3.5C12.5,3.644 12.453,3.764 12.358,3.858C12.264,3.953 12.144,4 12,4H9ZM9.833,12V10H8.5V8.667H11.167V10.667H12.5V12H9.833ZM7.167,7.333V6H9.833V7.333H7.167ZM4.5,7.333V6H3.167V4.667H7.167V6H5.833V7.333H4.5ZM5.167,4V1.333H6.5V2.667H7.833V4H5.167ZM2,2.5V1.5H3V2.5H2ZM2,10.5V9.5H3V10.5H2ZM10,2.5V1.5H11V2.5H10Z"
+      android:fillColor="#0DBD8B"/>
+</vector>
diff --git a/vector/src/main/res/layout/fragment_ftue_combined_login.xml b/vector/src/main/res/layout/fragment_ftue_combined_login.xml
index 5440fcba15..17fe895cf2 100644
--- a/vector/src/main/res/layout/fragment_ftue_combined_login.xml
+++ b/vector/src/main/res/layout/fragment_ftue_combined_login.xml
@@ -220,17 +220,6 @@
             app:layout_constraintStart_toStartOf="@id/loginGutterStart"
             app:layout_constraintTop_toBottomOf="@id/actionSpacing" />
 
-        <Button
-            android:id="@+id/loginWithQrCode"
-            style="@style/Widget.Vector.Button.Outlined.Login"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:layout_marginTop="12dp"
-            android:text="@string/login_signin_with_qr_code"
-            app:layout_constraintEnd_toEndOf="@id/loginGutterEnd"
-            app:layout_constraintStart_toStartOf="@id/loginGutterStart"
-            app:layout_constraintTop_toBottomOf="@id/loginSubmit" />
-
         <androidx.constraintlayout.widget.Group
             android:id="@+id/ssoGroup"
             android:layout_width="wrap_content"
@@ -238,7 +227,7 @@
             android:visibility="gone"
             app:constraint_referenced_ids="ssoButtonsHeader,ssoButtons"
             app:layout_constraintBottom_toTopOf="@id/ssoButtonsHeader"
-            app:layout_constraintTop_toBottomOf="@id/loginWithQrCode"
+            app:layout_constraintTop_toBottomOf="@id/loginSubmit"
             tools:visibility="visible" />
 
         <TextView
@@ -253,7 +242,19 @@
             app:layout_constraintBottom_toTopOf="@id/ssoButtons"
             app:layout_constraintEnd_toEndOf="@id/loginGutterEnd"
             app:layout_constraintStart_toStartOf="@id/loginGutterStart"
-            app:layout_constraintTop_toBottomOf="@id/loginWithQrCode" />
+            app:layout_constraintTop_toBottomOf="@id/loginSubmit" />
+
+        <Button
+            android:id="@+id/loginWithQrCode"
+            style="@style/Widget.Vector.Button.Outlined.Login"
+            android:layout_width="0dp"
+            android:layout_height="60dp"
+            android:layout_marginTop="12dp"
+            android:text="@string/login_scan_qr_code"
+            app:drawableLeftCompat="@drawable/ic_qr_code"
+            app:layout_constraintEnd_toEndOf="@id/loginGutterEnd"
+            app:layout_constraintStart_toStartOf="@id/loginGutterStart"
+            app:layout_constraintTop_toBottomOf="@id/ssoButtonsHeader" />
 
         <im.vector.app.features.login.SocialLoginButtonsView
             android:id="@+id/ssoButtons"
@@ -263,7 +264,7 @@
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="@id/loginGutterEnd"
             app:layout_constraintStart_toStartOf="@id/loginGutterStart"
-            app:layout_constraintTop_toBottomOf="@id/ssoButtonsHeader"
+            app:layout_constraintTop_toBottomOf="@id/loginWithQrCode"
             tools:signMode="signup" />
 
     </androidx.constraintlayout.widget.ConstraintLayout>