From e4c89907b6671d4391a444229823d37e03947714 Mon Sep 17 00:00:00 2001 From: Kevin Boulongne Date: Thu, 21 Nov 2024 11:07:02 +0100 Subject: [PATCH] fix: Align texts with neat animation --- .../screen/newtransfer/NewTransferNavHost.kt | 2 +- .../upload/UploadProgressScreen.kt | 31 +++++++++++++++---- .../upload/components/NetworkUnavailable.kt | 3 +- .../newtransfer/upload/components/Progress.kt | 13 ++++---- 4 files changed, 34 insertions(+), 15 deletions(-) diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/NewTransferNavHost.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/NewTransferNavHost.kt index 119fcfa3b5..6c04aad2ea 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/NewTransferNavHost.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/NewTransferNavHost.kt @@ -53,7 +53,7 @@ fun NewTransferNavHost(navController: NavHostController, closeActivity: () -> Un navController.navigate(UploadSuccessDestination(args.transferType, transferUrl)) }, navigateToUploadError = { navController.navigate(UploadErrorDestination) }, - closeActivity = closeActivity + closeActivity = closeActivity, ) } composable { diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/UploadProgressScreen.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/UploadProgressScreen.kt index c9fe6e1601..6086339496 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/UploadProgressScreen.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/UploadProgressScreen.kt @@ -18,15 +18,15 @@ package com.infomaniak.swisstransfer.ui.screen.newtransfer.upload import androidx.activity.compose.BackHandler -import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.fillMaxSize -import androidx.compose.foundation.layout.height +import androidx.compose.animation.core.animateFloatAsState +import androidx.compose.animation.core.tween +import androidx.compose.foundation.layout.* import androidx.compose.material3.Text import androidx.compose.runtime.* import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.alpha import androidx.compose.ui.res.stringResource import androidx.hilt.navigation.compose.hiltViewModel import androidx.lifecycle.compose.collectAsStateWithLifecycle @@ -124,8 +124,7 @@ private fun UploadProgressScreen( Spacer(Modifier.height(Margin.Mini)) - // TODO: When the network status changes, the AD and the two strings beneath it move upside-down. Why? - if (isNetworkAvailable()) Progress(progressState, totalSizeInBytes) else NetworkUnavailable() + SubText(isNetworkAvailable, progressState, totalSizeInBytes) Spacer(Modifier.height(Margin.Huge)) } @@ -134,6 +133,26 @@ private fun UploadProgressScreen( } } +@Composable +private fun SubText(isNetworkAvailable: () -> Boolean, progressState: () -> UploadProgressUiState, totalSizeInBytes: Long) { + Box( + modifier = Modifier.height(Margin.Medium), + contentAlignment = Alignment.Center, + ) { + val alpha by animateFloatAsState( + targetValue = if (isNetworkAvailable()) 0.0f else 1.0f, + animationSpec = tween(), + label = "NetworkUnavailable visibility", + ) + Progress( + modifier = Modifier.alpha(1 - alpha), + progressState = progressState, + totalSizeInBytes = totalSizeInBytes, + ) + NetworkUnavailable(modifier = Modifier.alpha(alpha)) + } +} + @Composable private fun CancelUploadBottomSheet(onCancel: () -> Unit, closeButtonSheet: () -> Unit) { SwissTransferBottomSheet( diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/components/NetworkUnavailable.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/components/NetworkUnavailable.kt index 8f2efa9ad0..497d789d2d 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/components/NetworkUnavailable.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/components/NetworkUnavailable.kt @@ -34,8 +34,9 @@ import com.infomaniak.swisstransfer.ui.theme.Margin import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme @Composable -fun NetworkUnavailable() { +fun NetworkUnavailable(modifier: Modifier) { Row( + modifier = modifier, horizontalArrangement = Arrangement.spacedBy(Margin.Mini), verticalAlignment = Alignment.CenterVertically, ) { diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/components/Progress.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/components/Progress.kt index 18aa078fed..1055b1dcaa 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/components/Progress.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/components/Progress.kt @@ -22,10 +22,8 @@ import androidx.compose.material3.LocalTextStyle import androidx.compose.material3.ProvideTextStyle import androidx.compose.material3.Surface import androidx.compose.material3.Text -import androidx.compose.runtime.Composable -import androidx.compose.runtime.derivedStateOf -import androidx.compose.runtime.getValue -import androidx.compose.runtime.remember +import androidx.compose.runtime.* +import androidx.compose.ui.Modifier import androidx.compose.ui.platform.LocalContext import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme import com.infomaniak.swisstransfer.ui.utils.HumanReadableSizeUtils @@ -37,11 +35,12 @@ import java.util.Locale fun Progress( progressState: () -> UploadWorker.UploadProgressUiState, totalSizeInBytes: Long, + modifier: Modifier = Modifier, ) { - ProvideTextStyle( - value = SwissTransferTheme.typography.labelRegular.copy(color = SwissTransferTheme.colors.secondaryTextColor) + CompositionLocalProvider( + LocalTextStyle provides SwissTransferTheme.typography.labelRegular.copy(color = SwissTransferTheme.colors.secondaryTextColor), ) { - Row { + Row(modifier) { Percentage({ progressState().uploadedSize }, totalSizeInBytes) Text(text = " - ") UploadedSize { progressState().uploadedSize }