Update design wait for self verification

CHANGES.md

@@ -22,6 +22,7 @@ Improvements 🙌:
  - Emoji Verification | It's not the same butterfly! (#1220)
  - Cross-Signing | Composer decoration: shields (#1077)
  - Cross-Signing | Migrate existing keybackup to cross signing with 4S from mobile (#1197)
+ - Cross-Signing | Consider not using a spinner on the 'complete security' prompt (#1271)
 
 Bugfix 🐛:
  - Fix summary notification staying after "mark as read"

vector/src/main/java/im/vector/riotx/features/crypto/verification/VerificationBottomSheet.kt

@@ -324,10 +324,6 @@ class VerificationBottomSheet : VectorBaseBottomSheetDialogFragment() {
         }
     }
 
-    override fun dismiss() {
-        super.dismiss()
-    }
-
     companion object {
 
         const val SECRET_REQUEST_CODE = 101

vector/src/main/java/im/vector/riotx/features/crypto/verification/cancel/VerificationCancelController.kt

@@ -76,7 +76,7 @@ class VerificationCancelController @Inject constructor(
 
         bottomSheetVerificationActionItem {
             id("cancel")
-            title(stringProvider.getString(R.string.cancel))
+            title(stringProvider.getString(R.string.skip))
             titleColor(colorProvider.getColor(R.color.riotx_destructive_accent))
             iconRes(R.drawable.ic_arrow_right)
             iconColor(colorProvider.getColor(R.color.riotx_destructive_accent))

vector/src/main/java/im/vector/riotx/features/crypto/verification/epoxy/BottomSheetSelfWaitItem.kt

@@ -0,0 +1,30 @@
+/*
+ * Copyright 2020 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+package im.vector.riotx.features.crypto.verification.epoxy
+
+import com.airbnb.epoxy.EpoxyModelClass
+import im.vector.riotx.R
+import im.vector.riotx.core.epoxy.VectorEpoxyHolder
+import im.vector.riotx.core.epoxy.VectorEpoxyModel
+
+/**
+ * A action for bottom sheet.
+ */
+@EpoxyModelClass(layout = R.layout.item_verification_wait)
+abstract class BottomSheetSelfWaitItem : VectorEpoxyModel<BottomSheetSelfWaitItem.Holder>() {
+    class Holder : VectorEpoxyHolder()
+}

vector/src/main/java/im/vector/riotx/features/crypto/verification/request/VerificationRequestController.kt

@@ -27,6 +27,7 @@ import im.vector.riotx.core.resources.ColorProvider
 import im.vector.riotx.core.resources.StringProvider
 import im.vector.riotx.core.utils.colorizeMatchingText
 import im.vector.riotx.features.crypto.verification.VerificationBottomSheetViewState
+import im.vector.riotx.features.crypto.verification.epoxy.bottomSheetSelfWaitItem
 import im.vector.riotx.features.crypto.verification.epoxy.bottomSheetVerificationActionItem
 import im.vector.riotx.features.crypto.verification.epoxy.bottomSheetVerificationNoticeItem
 import im.vector.riotx.features.crypto.verification.epoxy.bottomSheetVerificationWaitingItem
@@ -56,13 +57,12 @@ class VerificationRequestController @Inject constructor(
                 notice(stringProvider.getString(R.string.verification_open_other_to_verify))
             }
 
-            dividerItem {
+            bottomSheetSelfWaitItem {
-                id("sep")
+                id("waiting")
             }
 
-            bottomSheetVerificationWaitingItem {
+            dividerItem {
-                id("waiting")
+                id("sep")
-                title(stringProvider.getString(R.string.verification_request_waiting, matrixItem.getBestName()))
             }
 
             bottomSheetVerificationActionItem {
@@ -74,6 +74,19 @@ class VerificationRequestController @Inject constructor(
                 iconColor(colorProvider.getColorFromAttribute(R.attr.riotx_text_primary))
                 listener { listener?.onClickRecoverFromPassphrase() }
             }
+
+            dividerItem {
+                id("sep1")
+            }
+
+            bottomSheetVerificationActionItem {
+                id("skip")
+                title(stringProvider.getString(R.string.skip))
+                titleColor(colorProvider.getColor(R.color.riotx_destructive_accent))
+                iconRes(R.drawable.ic_arrow_right)
+                iconColor(colorProvider.getColor(R.color.riotx_destructive_accent))
+                listener { listener?.onClickSkip() }
+            }
         } else {
             val styledText =
                     if (state.isMe) {
@@ -153,5 +166,6 @@ class VerificationRequestController @Inject constructor(
         fun onClickOnWasNotMe()
         fun onClickRecoverFromPassphrase()
         fun onClickDismiss()
+        fun onClickSkip()
     }
 }

vector/src/main/java/im/vector/riotx/features/crypto/verification/request/VerificationRequestFragment.kt

@@ -70,6 +70,10 @@ class VerificationRequestFragment @Inject constructor(
         viewModel.handle(VerificationAction.SkipVerification)
     }
 
+    override fun onClickSkip() {
+        viewModel.queryCancel()
+    }
+
     override fun onClickOnWasNotMe() {
         viewModel.itWasNotMe()
     }

vector/src/main/res/drawable/ic_monitor.xml

@@ -0,0 +1,28 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:strokeWidth="1"
+      android:pathData="M2,5C2,3.8954 2.8954,3 4,3H20C21.1046,3 22,3.8954 22,5V15C22,16.1046 21.1046,17 20,17H4C2.8954,17 2,16.1046 2,15V5Z"
+      android:strokeLineJoin="round"
+      android:fillColor="#00000000"
+      android:fillType="evenOdd"
+      android:strokeColor="#2E2F32"
+      android:strokeLineCap="round"/>
+  <path
+      android:strokeWidth="1"
+      android:pathData="M8,21H16"
+      android:strokeLineJoin="round"
+      android:fillColor="#00000000"
+      android:strokeColor="#2E2F32"
+      android:strokeLineCap="round"/>
+  <path
+      android:strokeWidth="1"
+      android:pathData="M12,17V21"
+      android:strokeLineJoin="round"
+      android:fillColor="#00000000"
+      android:strokeColor="#2E2F32"
+      android:strokeLineCap="round"/>
+</vector>

vector/src/main/res/drawable/ic_smartphone.xml

@@ -0,0 +1,17 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:strokeWidth="1"
+      android:pathData="M5,4C5,2.8954 5.8954,2 7,2H17C18.1046,2 19,2.8954 19,4V20C19,21.1046 18.1046,22 17,22H7C5.8954,22 5,21.1046 5,20V4Z"
+      android:strokeLineJoin="round"
+      android:fillColor="#00000000"
+      android:fillType="evenOdd"
+      android:strokeColor="#2E2F32"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M12,18m-1,0a1,1 0,1 1,2 0a1,1 0,1 1,-2 0"
+      android:fillColor="#2E2F32"/>
+</vector>

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

@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:id="@+id/itemVerificationNoticeText"
+    android:layout_width="match_parent"
+    android:paddingBottom="8dp"
+    android:paddingStart="16dp"
+    android:paddingEnd="16dp"
+    android:layout_height="wrap_content">
+
+    <TextView
+        android:id="@+id/use_latest_riot"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:gravity="start"
+        android:text="@string/use_latest_riot"
+        android:textColor="?riotx_text_primary"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+
+    <ImageView
+        android:id="@+id/monitorIcon"
+        android:layout_width="40dp"
+        android:layout_height="40dp"
+        android:layout_marginTop="16dp"
+        android:contentDescription="@string/monitor_content_description"
+        android:scaleType="fitCenter"
+        android:src="@drawable/ic_monitor"
+        android:tint="?riotx_text_primary"
+        app:layout_constraintEnd_toStartOf="@id/smartphoneIcon"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/use_latest_riot" />
+
+    <ImageView
+        android:id="@+id/smartphoneIcon"
+        android:layout_width="40dp"
+        android:layout_height="40dp"
+        android:layout_marginTop="16dp"
+        android:contentDescription="@string/monitor_content_description"
+        android:scaleType="fitCenter"
+        android:src="@drawable/ic_smartphone"
+        android:tint="?riotx_text_primary"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toEndOf="@id/monitorIcon"
+        app:layout_constraintTop_toBottomOf="@+id/use_latest_riot" />
+
+
+    <TextView
+        android:id="@+id/riot_desktop_web"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="8dp"
+        android:gravity="center"
+        android:text="@string/riot_desktop_web"
+        android:textColor="?riotx_text_primary"
+        app:layout_constraintEnd_toEndOf="@id/monitorIcon"
+        app:layout_constraintStart_toStartOf="@id/monitorIcon"
+        app:layout_constraintTop_toBottomOf="@id/monitorIcon" />
+
+    <TextView
+        android:id="@+id/riot_ios_android"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="8dp"
+        android:gravity="center"
+        android:text="@string/riot_ios_android"
+        android:textColor="?riotx_text_primary"
+        app:layout_constraintEnd_toEndOf="@id/smartphoneIcon"
+        app:layout_constraintStart_toStartOf="@id/smartphoneIcon"
+        app:layout_constraintTop_toBottomOf="@id/smartphoneIcon" />
+
+    <androidx.constraintlayout.widget.Barrier
+        android:id="@+id/labelsBarrier"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        app:barrierDirection="bottom"
+        app:constraint_referenced_ids="riot_ios_android,riot_desktop_web" />
+
+
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="16dp"
+        android:textSize="12sp"
+        android:gravity="center"
+        android:text="@string/or_other_mx_capabale_client"
+        android:textColor="?riotx_text_secondary"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/labelsBarrier" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>

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

@@ -2166,7 +2166,7 @@ Not all features in Riot are implemented in RiotX yet. Main missing (and coming
     </plurals>
     <string name="poll_item_selected_aria">Selected Option</string>
     <string name="command_description_poll">Creates a simple poll</string>
-    <string name="verification_cannot_access_other_session">Use a recovery method</string>
+    <string name="verification_cannot_access_other_session">Use a Recovery Passphrase or Key</string>
     <string name="verification_use_passphrase">If you can’t access an existing session</string>
 
     <string name="new_signin">New Sign In</string>

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

@@ -6,7 +6,12 @@
     <!-- Sections has been created to limit merge conflicts. -->
 
     <!-- BEGIN Strings added by Valere -->
-
+    <string name="monitor_content_description">Monitor</string>
+    <string name="mobile_content_description">Smartphone</string>
+    <string name="riot_desktop_web">Riot Web\nRiot Desktop</string>
+    <string name="riot_ios_android">Riot iOS\nRiot X for Android</string>
+    <string name="or_other_mx_capabale_client">or another cross-signing capable Matrix client</string>
+    <string name="use_latest_riot">Use the latest Riot on your other devices:</string>
     <!-- END Strings added by Valere -->