Fix animation of status and navigation bar

mullvad · Oct 17, 2023 · a4dd127 · a4dd127
1 parent fa25d66
commit a4dd127
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 3 deletions.
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt
@@ -72,7 +72,7 @@ fun ScaffoldWithTopBar(
 fun ScaffoldWithTopBarAndDeviceName(
     topBarColor: Color,
     statusBarColor: Color,
-    navigationBarColor: Color,
+    navigationBarColor: Color?,
     modifier: Modifier = Modifier,
     iconTintColor: Color = MaterialTheme.colorScheme.onPrimary.copy(alpha = AlphaTopBar),
     onSettingsClicked: (() -> Unit)?,
@@ -86,7 +86,9 @@ fun ScaffoldWithTopBarAndDeviceName(
     val systemUiController = rememberSystemUiController()
     LaunchedEffect(key1 = statusBarColor, key2 = navigationBarColor) {
         systemUiController.setStatusBarColor(statusBarColor)
-        systemUiController.setNavigationBarColor(navigationBarColor)
+        if (navigationBarColor != null) {
+            systemUiController.setNavigationBarColor(navigationBarColor)
+        }
     }
 
     Scaffold(

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreen.kt
@@ -80,6 +80,7 @@ fun AccountScreen(
     var showDeviceNameInfoDialog by remember { mutableStateOf(false) }
 
     LaunchedEffect(Unit) {
+        systemUiController.setNavigationBarColor(backgroundColor)
         enterTransitionEndAction.collect { systemUiController.setStatusBarColor(backgroundColor) }
     }
     if (showDeviceNameInfoDialog) {

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ConnectScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ConnectScreen.kt
@@ -26,6 +26,7 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
+import com.google.accompanist.systemuicontroller.rememberSystemUiController
 import kotlinx.coroutines.flow.MutableSharedFlow
 import kotlinx.coroutines.flow.SharedFlow
 import kotlinx.coroutines.flow.asSharedFlow
@@ -85,6 +86,10 @@ fun ConnectScreen(
     onDismissNewDeviceClick: () -> Unit = {}
 ) {
     val context = LocalContext.current
+
+    val systemUiController = rememberSystemUiController()
+    val navigationBarColor = MaterialTheme.colorScheme.primary
+    val setSystemBarColor = { systemUiController.setNavigationBarColor(navigationBarColor) }
     LaunchedEffect(key1 = Unit) {
         uiSideEffect.collect { uiSideEffect ->
             when (uiSideEffect) {
@@ -94,6 +99,9 @@ fun ConnectScreen(
                 is ConnectViewModel.UiSideEffect.OpenOutOfTimeView -> {
                     onOpenOutOfTimeScreen()
                 }
+                ConnectViewModel.UiSideEffect.EnterAnimationEnd -> {
+                    setSystemBarColor()
+                }
             }
         }
     }
@@ -122,7 +130,7 @@ fun ConnectScreen(
             } else {
                 MaterialTheme.colorScheme.error
             },
-        navigationBarColor = MaterialTheme.colorScheme.primary,
+        navigationBarColor = null,
         iconTintColor =
             if (uiState.tunnelUiState.isSecured()) {
                     MaterialTheme.colorScheme.onPrimary

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SettingsScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SettingsScreen.kt
@@ -67,6 +67,7 @@ fun SettingsScreen(
     val systemUiController = rememberSystemUiController()
 
     LaunchedEffect(Unit) {
+        systemUiController.setNavigationBarColor(backgroundColor)
         enterTransitionEndAction.collect { systemUiController.setStatusBarColor(backgroundColor) }
     }
 

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/ConnectFragment.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/ConnectFragment.kt
@@ -93,4 +93,9 @@ class ConnectFragment : BaseFragment() {
     private fun openAccountView() {
         (context as? MainActivity)?.openAccount()
     }
+
+    override fun onEnterTransitionAnimationEnd() {
+        super.onEnterTransitionAnimationEnd()
+        connectViewModel.onTransitionAnimationEnd()
+    }
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/viewmodel/ConnectViewModel.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/viewmodel/ConnectViewModel.kt
@@ -188,10 +188,16 @@ class ConnectViewModel(
         newDeviceNotificationUseCase.clearNewDeviceCreatedNotification()
     }
 
+    fun onTransitionAnimationEnd() {
+        _uiSideEffect.tryEmit(UiSideEffect.EnterAnimationEnd)
+    }
+
     sealed interface UiSideEffect {
         data class OpenAccountManagementPageInBrowser(val token: String) : UiSideEffect
 
         data object OpenOutOfTimeView : UiSideEffect
+
+        data object EnterAnimationEnd : UiSideEffect
     }
 
     companion object {