Fix Bloom previews, use the right Text component

element-hq · Sep 11, 2023 · 10964f9 · 10964f9
1 parent 7ce8a57
commit 10964f9
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 9 deletions.
diff --git a/...ain/kotlin/io/element/android/features/networkmonitor/api/ui/ConnectivityIndicatorView.kt b/...ain/kotlin/io/element/android/features/networkmonitor/api/ui/ConnectivityIndicatorView.kt
@@ -38,7 +38,6 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBars
 import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.layout.width
-import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.WifiOff
 import androidx.compose.material3.MaterialTheme
@@ -48,6 +47,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.platform.LocalInspectionMode
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
@@ -56,6 +56,7 @@ import androidx.compose.ui.unit.sp
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.text.toDp
+import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.theme.ElementTheme
 import io.element.android.libraries.ui.strings.CommonStrings
 
@@ -98,13 +99,18 @@ fun ConnectivityIndicatorView(
 fun ConnectivityIndicatorContainer(
     isOnline: Boolean,
     modifier: Modifier = Modifier,
-    content: @Composable (statusBarPadding: Dp) -> Unit,
+    content: @Composable (topPadding: Dp) -> Unit,
 ) {
     val isIndicatorVisible = remember { MutableTransitionState(!isOnline) }.apply { targetState = !isOnline }
 
-    val statusBarTopPadding = WindowInsets.statusBars.asPaddingValues().calculateTopPadding() + 6.dp
+    val statusBarTopPadding = if (LocalInspectionMode.current) {
+        // Needed to get valid UI previews
+        24.dp
+    } else {
+        WindowInsets.statusBars.asPaddingValues().calculateTopPadding() + 6.dp
+    }
     val target = remember(isOnline) { if (isOnline) 0.dp else statusBarTopPadding }
-    val animationState by animateDpAsState(
+    val animationStateOffset by animateDpAsState(
         targetValue = target,
         animationSpec = spring(
             stiffness = Spring.StiffnessMediumLow,
@@ -113,7 +119,7 @@ fun ConnectivityIndicatorContainer(
         label = "insets-animation",
     )
 
-    content(animationState)
+    content(animationStateOffset)
 
     // Display the network indicator with an animation
     AnimatedVisibility(

diff --git a/...pl/src/main/kotlin/io/element/android/features/roomlist/impl/components/RoomListTopBar.kt b/...pl/src/main/kotlin/io/element/android/features/roomlist/impl/components/RoomListTopBar.kt
@@ -44,19 +44,21 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.layout.onSizeChanged
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.platform.LocalInspectionMode
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import io.element.android.features.roomlist.impl.R
 import io.element.android.libraries.designsystem.colors.avatarColors
-import io.element.android.libraries.designsystem.components.avatarBloom
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
+import io.element.android.libraries.designsystem.components.avatarBloom
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.text.applyScaleDown
+import io.element.android.libraries.designsystem.text.roundToPx
 import io.element.android.libraries.designsystem.text.toDp
 import io.element.android.libraries.designsystem.text.toSp
 import io.element.android.libraries.designsystem.theme.aliasScreenTitle
@@ -77,6 +79,8 @@ import io.element.android.libraries.theme.ElementTheme
 import io.element.android.libraries.ui.strings.CommonStrings
 import io.element.android.libraries.designsystem.R as CommonR
 
+private val avatarBloomSize = 430.dp
+
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun RoomListTopBar(
@@ -127,8 +131,16 @@ private fun DefaultRoomListTopBar(
 ) {
     var showMenu by remember { mutableStateOf(false) }
 
+    // We need this to manually clip the top app bar in preview mode
+    val previewAppBarHeight = if (LocalInspectionMode.current) {
+        112.dp.roundToPx()
+    } else {
+        null
+    }
     val collapsedFraction = scrollBehavior.state.collapsedFraction
-    var appBarHeight by remember { mutableIntStateOf(0) }
+    var appBarHeight by remember {
+        mutableIntStateOf(previewAppBarHeight ?: 0)
+    }
 
     val avatarData by remember(matrixUser) {
         derivedStateOf {
@@ -148,10 +160,10 @@ private fun DefaultRoomListTopBar(
                 .avatarBloom(
                     avatarData = avatarData,
                     background = ElementTheme.materialColors.background,
-                    blurSize = DpSize(430.dp, 430.dp),
+                    blurSize = DpSize(avatarBloomSize, avatarBloomSize),
                     offset = DpOffset(24.dp, 24.dp + statusBarPadding),
                     clipToSize = if (appBarHeight > 0) DpSize(
-                        430.dp,
+                        avatarBloomSize,
                         appBarHeight.toDp()
                     ) else DpSize.Unspecified,
                     bottomSoftEdgeAlpha = 1f - collapsedFraction,