fix: Align texts with neat animation

Infomaniak · Nov 21, 2024 · 0b98dbe · 0b98dbe
1 parent 227babf
commit 0b98dbe
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 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
@@ -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<UploadSuccessDestination> {

diff --git a/...in/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/UploadProgressScreen.kt b/...in/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/...om/infomaniak/swisstransfer/ui/screen/newtransfer/upload/components/NetworkUnavailable.kt b/...om/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/...ain/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/components/Progress.kt b/...ain/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 }