From 8b282f27e5a2efcd854b1609561e24a20c74ad39 Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Thu, 3 Oct 2024 17:00:48 +0200 Subject: [PATCH] Hide images: iterate on design. --- .../impl/timeline/protection/ProtectedView.kt | 77 ++++++++++++++++--- .../timeline/protection/ProtectedViewTest.kt | 18 ++--- .../src/main/res/values/localazy.xml | 1 + 3 files changed, 77 insertions(+), 19 deletions(-) diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/protection/ProtectedView.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/protection/ProtectedView.kt index d7e8d94963..0761a3fdfb 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/protection/ProtectedView.kt +++ b/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 = {}, + ) + } +} diff --git a/features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/timeline/protection/ProtectedViewTest.kt b/features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/timeline/protection/ProtectedViewTest.kt index a1e876f328..5d82b292bf 100644 --- a/features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/timeline/protection/ProtectedViewTest.kt +++ b/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 AndroidComposeTestRule.setProte content: @Composable () -> Unit = {}, ) { setContent { - Box { - ProtectedView( - hideContent = hideContent, - onShowClick = onShowClick, - content = content - ) - } + ProtectedView( + hideContent = hideContent, + onShowClick = onShowClick, + content = content + ) } } diff --git a/libraries/ui-strings/src/main/res/values/localazy.xml b/libraries/ui-strings/src/main/res/values/localazy.xml index 11e1ab922a..3fb2adc584 100644 --- a/libraries/ui-strings/src/main/res/values/localazy.xml +++ b/libraries/ui-strings/src/main/res/values/localazy.xml @@ -104,6 +104,7 @@ "Send message" "Share" "Share link" + "Show" "Sign in again" "Sign out" "Sign out anyway"