[Compound] Bloom (#1253)

* Add `bloom` and `avatarBloom` modifiers. * Add `ConnectivityIndicatorContainer` to control the padding needed at the top. --------- Co-authored-by: ElementBot <[email protected]>
element-hq · Sep 11, 2023 · 41061da · 41061da
1 parent e6ecedf
commit 41061da
Show file tree

Hide file tree

Showing 67 changed files with 913 additions and 173 deletions.
diff --git a/changelog.d/1217.feature b/changelog.d/1217.feature
@@ -0,0 +1 @@
+Implement Bloom effect modifier.
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
@@ -18,6 +18,9 @@ package io.element.android.features.networkmonitor.api.ui
 
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.core.MutableTransitionState
+import androidx.compose.animation.core.Spring
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.spring
 import androidx.compose.animation.expandVertically
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
@@ -27,34 +30,44 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 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
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 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
 import androidx.compose.ui.unit.dp
 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
 
+/**
+ * A view that displays a connectivity indicator when the device is offline, adding a default
+ * padding to make sure the status bar is not overlapped.
+ */
 @Composable
 fun ConnectivityIndicatorView(
     isOnline: Boolean,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
 ) {
     val isIndicatorVisible = remember { MutableTransitionState(!isOnline) }.apply { targetState = !isOnline }
     val isStatusBarPaddingVisible = remember { MutableTransitionState(isOnline) }.apply { targetState = isOnline }
@@ -78,6 +91,46 @@ fun ConnectivityIndicatorView(
     }
 }
 
+/**
+ * A view that displays a connectivity indicator when the device is offline, passing the padding
+ * needed to make sure the status bar is not overlapped to its content views.
+ */
+@Composable
+fun ConnectivityIndicatorContainer(
+    isOnline: Boolean,
+    modifier: Modifier = Modifier,
+    content: @Composable (topPadding: Dp) -> Unit,
+) {
+    val isIndicatorVisible = remember { MutableTransitionState(!isOnline) }.apply { targetState = !isOnline }
+
+    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 animationStateOffset by animateDpAsState(
+        targetValue = target,
+        animationSpec = spring(
+            stiffness = Spring.StiffnessMediumLow,
+            visibilityThreshold = 1.dp,
+        ),
+        label = "insets-animation",
+    )
+
+    content(animationStateOffset)
+
+    // Display the network indicator with an animation
+    AnimatedVisibility(
+        visibleState = isIndicatorVisible,
+        enter = fadeIn() + expandVertically(),
+        exit = fadeOut() + shrinkVertically(),
+    ) {
+        Indicator(modifier)
+    }
+}
+
 @Composable
 private fun Indicator(modifier: Modifier = Modifier) {
     Row(

diff --git a/...s/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/RoomListView.kt b/...s/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/RoomListView.kt
@@ -18,13 +18,13 @@ package io.element.android.features.roomlist.impl
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.lazy.rememberLazyListState
@@ -45,7 +45,7 @@ import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.Velocity
 import androidx.compose.ui.unit.dp
 import io.element.android.features.leaveroom.api.LeaveRoomView
-import io.element.android.features.networkmonitor.api.ui.ConnectivityIndicatorView
+import io.element.android.features.networkmonitor.api.ui.ConnectivityIndicatorContainer
 import io.element.android.features.roomlist.impl.components.RequestVerificationHeader
 import io.element.android.features.roomlist.impl.components.RoomListMenuAction
 import io.element.android.features.roomlist.impl.components.RoomListTopBar
@@ -76,8 +76,10 @@ fun RoomListView(
     onMenuActionClicked: (RoomListMenuAction) -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    Column(modifier = modifier) {
-        ConnectivityIndicatorView(isOnline = state.hasNetworkConnection)
+    ConnectivityIndicatorContainer(
+        modifier = modifier,
+        isOnline = state.hasNetworkConnection,
+    ) { topPadding ->
         Box {
             fun onRoomLongClicked(
                 roomListRoomSummary: RoomListRoomSummary
@@ -96,6 +98,7 @@ fun RoomListView(
             LeaveRoomView(state = state.leaveRoomState)
 
             RoomListContent(
+                modifier = Modifier.padding(top = topPadding),
                 state = state,
                 onVerifyClicked = onVerifyClicked,
                 onRoomClicked = onRoomClicked,
@@ -111,6 +114,8 @@ fun RoomListView(
                 onRoomClicked = onRoomClicked,
                 onRoomLongClicked = { onRoomLongClicked(it) },
                 modifier = Modifier
+                    .statusBarsPadding()
+                    .padding(top = topPadding)
                     .fillMaxSize()
                     .background(MaterialTheme.colorScheme.background)
             )