From a4dd127af7deb569dd25096afc719de35fe23f9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20G=C3=B6ransson?= Date: Tue, 17 Oct 2023 15:22:41 +0200 Subject: [PATCH] Fix animation of status and navigation bar --- .../mullvadvpn/compose/component/Scaffolding.kt | 6 ++++-- .../mullvad/mullvadvpn/compose/screen/AccountScreen.kt | 1 + .../mullvad/mullvadvpn/compose/screen/ConnectScreen.kt | 10 +++++++++- .../mullvadvpn/compose/screen/SettingsScreen.kt | 1 + .../mullvad/mullvadvpn/ui/fragment/ConnectFragment.kt | 5 +++++ .../mullvad/mullvadvpn/viewmodel/ConnectViewModel.kt | 6 ++++++ 6 files changed, 26 insertions(+), 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 index ce12644b549f..11abdad19103 100644 --- 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 index 71f79e55b5e4..e0cd9648bb7b 100644 --- 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 index ef36b0c0ef37..9592a92fda56 100644 --- 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 index 8983e6ac4a9a..b092ed981b5f 100644 --- 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 index cc67e1a1bc07..992fd19ea559 100644 --- 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 index 8a4f087d64b0..3b6a5a993b09 100644 --- 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 {