Hide images: iterate on design.

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/protection/ProtectedView.kt

@@ -7,27 +7,86 @@
 
 package io.element.android.features.messages.impl.timeline.protection
 
-import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import io.element.android.libraries.designsystem.theme.components.Button
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.unit.dp
+import io.element.android.compound.theme.ElementTheme
+import io.element.android.libraries.designsystem.components.blurhash.blurHashBackground
+import io.element.android.libraries.designsystem.preview.ElementPreview
+import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.matrix.ui.components.A_BLUR_HASH
+import io.element.android.libraries.ui.strings.CommonStrings
 
 @Composable
-fun BoxScope.ProtectedView(
+fun ProtectedView(
     hideContent: Boolean,
     onShowClick: () -> Unit,
     modifier: Modifier = Modifier,
     content: @Composable () -> Unit,
 ) {
     if (hideContent) {
-        // TODO Update design, wording for video?
-        Button(
-            modifier = modifier.align(Alignment.Center),
-            text = "Show",
-            onClick = onShowClick,
-        )
+        Box(
+            modifier = modifier
+                .fillMaxSize()
+                .background(Color(0x99000000)),
+            contentAlignment = Alignment.Center,
+        ) {
+            ElementTheme(darkTheme = false) {
+                // Not using a button to be able to have correct size
+                Text(
+                    modifier = Modifier
+                        .clip(RoundedCornerShape(percent = 50))
+                        .clickable(
+                            onClick = onShowClick,
+                            role = Role.Button,
+                        )
+                        .padding(4.dp)
+                        .border(
+                            width = 1.dp,
+                            color = ElementTheme.colors.borderInteractiveSecondary,
+                            shape = RoundedCornerShape(percent = 50),
+                        )
+                        .padding(
+                            horizontal = 16.dp,
+                            vertical = 4.dp,
+                        ),
+                    text = stringResource(CommonStrings.action_show),
+                    color = ElementTheme.colors.textOnSolidPrimary,
+                    style = ElementTheme.typography.fontBodyLgMedium,
+                )
+            }
+        }
     } else {
         content()
     }
 }
+
+@PreviewsDayNight
+@Composable
+internal fun PreviewProtectedView() = ElementPreview {
+    Box(
+        modifier = Modifier
+            .size(160.dp)
+            .blurHashBackground(A_BLUR_HASH)
+    ) {
+        ProtectedView(
+            hideContent = true,
+            onShowClick = {},
+            content = {},
+        )
+    }
+}

features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/timeline/protection/ProtectedViewTest.kt

@@ -8,14 +8,14 @@
 package io.element.android.features.messages.impl.timeline.protection
 
 import androidx.activity.ComponentActivity
-import androidx.compose.foundation.layout.Box
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.test.junit4.AndroidComposeTestRule
 import androidx.compose.ui.test.junit4.createAndroidComposeRule
 import androidx.compose.ui.test.onNodeWithText
-import androidx.compose.ui.test.performClick
 import androidx.test.ext.junit.runners.AndroidJUnit4
 import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.ui.strings.CommonStrings
+import io.element.android.tests.testutils.clickOn
 import io.element.android.tests.testutils.ensureCalledOnce
 import io.element.android.tests.testutils.lambda.lambdaError
 import org.junit.Rule
@@ -49,7 +49,7 @@ class ProtectedViewTest {
                 }
             )
             rule.onNodeWithText("Hello").assertDoesNotExist()
-            rule.onNodeWithText("Show").performClick()
+            rule.clickOn(CommonStrings.action_show)
         }
     }
 }
@@ -60,12 +60,10 @@ private fun <R : TestRule> AndroidComposeTestRule<R, ComponentActivity>.setProte
     content: @Composable () -> Unit = {},
 ) {
     setContent {
-        Box {
-            ProtectedView(
-                hideContent = hideContent,
-                onShowClick = onShowClick,
-                content = content
-            )
-        }
+        ProtectedView(
+            hideContent = hideContent,
+            onShowClick = onShowClick,
+            content = content
+        )
     }
 }

libraries/ui-strings/src/main/res/values/localazy.xml

@@ -104,6 +104,7 @@
   <string name="action_send_message">"Send message"</string>
   <string name="action_share">"Share"</string>
   <string name="action_share_link">"Share link"</string>
+  <string name="action_show">"Show"</string>
   <string name="action_sign_in_again">"Sign in again"</string>
   <string name="action_signout">"Sign out"</string>
   <string name="action_signout_anyway">"Sign out anyway"</string>