From f094b76e258c3ca1446b0191a008466b66390b3b Mon Sep 17 00:00:00 2001 From: Andre Weber Date: Thu, 15 Feb 2024 14:51:25 +0100 Subject: [PATCH] feature: Don't show ConnectionStatusBar when connected closes: #58 --- .../view/AdaptiveConnectionStatusView.kt | 28 +++- .../view/HorizontalConnectionStatusView.kt | 34 ++--- .../view/VerticalConnectionStatusView.kt | 5 +- .../feature/home/view/AdaptiveAppScreen.kt | 133 ++++++++++-------- .../navigation/view/AdaptiveNavigationView.kt | 14 ++ .../feature/sheet/view/AdaptiveSheetView.kt | 3 +- .../feature/sheet/view/BottomSheetView.kt | 9 +- .../feature/sheet/view/SideSheetView.kt | 6 +- 8 files changed, 145 insertions(+), 87 deletions(-) diff --git a/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/connection/view/AdaptiveConnectionStatusView.kt b/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/connection/view/AdaptiveConnectionStatusView.kt index fbfcd7b..15e6c8b 100644 --- a/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/connection/view/AdaptiveConnectionStatusView.kt +++ b/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/connection/view/AdaptiveConnectionStatusView.kt @@ -20,16 +20,21 @@ package org.eclipse.kuksa.companion.feature.connection.view import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.PaddingValues import androidx.compose.material3.windowsizeclass.WindowSizeClass import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp import org.eclipse.kuksa.companion.PREVIEW_HEIGHT_DP import org.eclipse.kuksa.companion.PREVIEW_WIDTH_DP import org.eclipse.kuksa.companion.extension.windowSizeClass import org.eclipse.kuksa.companion.feature.connection.viewModel.ConnectionStatusViewModel +import org.eclipse.kuksa.companion.feature.connection.viewModel.ConnectionStatusViewModel.ConnectionState + +val StatusBarHeight = 50.dp @Composable fun AdaptiveConnectionStatusView( @@ -44,12 +49,29 @@ fun AdaptiveConnectionStatusView( } } +class ConnectionStatusView private constructor() { + companion object { + fun calculatePaddingValues( + viewModel: ConnectionStatusViewModel, + windowSizeClass: WindowSizeClass, + ): PaddingValues { + if (viewModel.connectionState == ConnectionState.CONNECTED) return PaddingValues(0.dp) + + return if (windowSizeClass.widthSizeClass == WindowWidthSizeClass.Compact) { + PaddingValues(top = StatusBarHeight) + } else { + PaddingValues(start = StatusBarHeight) + } + } + } +} + @Preview(widthDp = PREVIEW_WIDTH_DP, heightDp = PREVIEW_HEIGHT_DP) @Preview(widthDp = PREVIEW_HEIGHT_DP, heightDp = PREVIEW_WIDTH_DP) @Composable private fun AdaptiveDisconnectedPreview() { val viewModel = ConnectionStatusViewModel() - viewModel.connectionState = ConnectionStatusViewModel.ConnectionState.DISCONNECTED + viewModel.connectionState = ConnectionState.DISCONNECTED val windowSizeClass = LocalConfiguration.current.windowSizeClass Box { @@ -62,7 +84,7 @@ private fun AdaptiveDisconnectedPreview() { @Composable private fun AdaptiveConnectingPreview() { val viewModel = ConnectionStatusViewModel() - viewModel.connectionState = ConnectionStatusViewModel.ConnectionState.CONNECTING + viewModel.connectionState = ConnectionState.CONNECTING val windowSizeClass = LocalConfiguration.current.windowSizeClass Box { @@ -75,7 +97,7 @@ private fun AdaptiveConnectingPreview() { @Composable private fun AdaptiveConnectedStatusPreview() { val viewModel = ConnectionStatusViewModel() - viewModel.connectionState = ConnectionStatusViewModel.ConnectionState.CONNECTED + viewModel.connectionState = ConnectionState.CONNECTED val windowSizeClass = LocalConfiguration.current.windowSizeClass Box { diff --git a/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/connection/view/HorizontalConnectionStatusView.kt b/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/connection/view/HorizontalConnectionStatusView.kt index 8d041c8..d97f1e7 100644 --- a/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/connection/view/HorizontalConnectionStatusView.kt +++ b/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/connection/view/HorizontalConnectionStatusView.kt @@ -25,6 +25,7 @@ import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment @@ -38,18 +39,17 @@ import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.constraintlayout.compose.ConstraintLayout import org.eclipse.kuksa.companion.R +import org.eclipse.kuksa.companion.extension.isVisible import org.eclipse.kuksa.companion.feature.connection.viewModel.ConnectionStatusViewModel import org.eclipse.kuksa.companion.feature.connection.viewModel.ConnectionStatusViewModel.ConnectionState -val StatusBarHeight = 30.dp - @Composable fun HorizontalConnectionStatusView( viewModel: ConnectionStatusViewModel, modifier: Modifier = Modifier, ) { val connectionState = viewModel.connectionState - val connectionStateLabel = connectionState.toString().lowercase() + val connectionStateLabel = connectionState.toString() val backgroundColor = viewModel.backgroundColor Row( @@ -83,21 +83,21 @@ fun HorizontalConnectionStatusView( }, ) - if (connectionState == ConnectionState.DISCONNECTED) { - Image( - painter = painterResource(id = R.drawable.baseline_refresh_24), - contentDescription = "Reconnect", - colorFilter = ColorFilter.tint(Color.White), - alignment = Alignment.CenterEnd, - modifier = Modifier - .constrainAs(imageRef) { - top.linkTo(parent.top) - bottom.linkTo(parent.bottom) + Image( + painter = painterResource(id = R.drawable.baseline_refresh_24), + contentDescription = "Reconnect", + colorFilter = ColorFilter.tint(Color.White), + alignment = Alignment.CenterEnd, + modifier = Modifier + .constrainAs(imageRef) { + top.linkTo(parent.top) + bottom.linkTo(parent.bottom) - end.linkTo(parent.end) - }, - ) - } + end.linkTo(parent.end) + } + .padding(10.dp) + .isVisible(connectionState == ConnectionState.DISCONNECTED), + ) } } } diff --git a/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/connection/view/VerticalConnectionStatusView.kt b/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/connection/view/VerticalConnectionStatusView.kt index 69f1c6b..d852a08 100644 --- a/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/connection/view/VerticalConnectionStatusView.kt +++ b/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/connection/view/VerticalConnectionStatusView.kt @@ -26,6 +26,7 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -37,6 +38,7 @@ import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp import androidx.constraintlayout.compose.ConstraintLayout import org.eclipse.kuksa.companion.R import org.eclipse.kuksa.companion.extension.isVisible @@ -49,7 +51,7 @@ fun VerticalConnectionStatusView( modifier: Modifier = Modifier, ) { val connectionState = viewModel.connectionState - val connectionStateLabel = connectionState.toString().lowercase() + val connectionStateLabel = connectionState.toString() val backgroundColor = viewModel.backgroundColor Column( @@ -96,6 +98,7 @@ fun VerticalConnectionStatusView( bottom.linkTo(parent.bottom) } + .padding(10.dp) .isVisible(connectionState == ConnectionStatusViewModel.ConnectionState.DISCONNECTED), ) } diff --git a/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/home/view/AdaptiveAppScreen.kt b/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/home/view/AdaptiveAppScreen.kt index 09f4f44..0fceb45 100644 --- a/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/home/view/AdaptiveAppScreen.kt +++ b/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/home/view/AdaptiveAppScreen.kt @@ -21,9 +21,9 @@ package org.eclipse.kuksa.companion.feature.home.view import android.app.Application import android.view.SurfaceHolder +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding -import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.windowsizeclass.WindowSizeClass import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass import androidx.compose.runtime.Composable @@ -41,7 +41,9 @@ import org.eclipse.kuksa.companion.PREVIEW_WIDTH_DP import org.eclipse.kuksa.companion.extension.windowSizeClass import org.eclipse.kuksa.companion.feature.connection.repository.ConnectionInfoRepository import org.eclipse.kuksa.companion.feature.connection.view.AdaptiveConnectionStatusView +import org.eclipse.kuksa.companion.feature.connection.view.ConnectionStatusView import org.eclipse.kuksa.companion.feature.connection.viewModel.ConnectionStatusViewModel +import org.eclipse.kuksa.companion.feature.connection.viewModel.ConnectionStatusViewModel.ConnectionState import org.eclipse.kuksa.companion.feature.door.view.DoorControlView import org.eclipse.kuksa.companion.feature.door.view.DoorOverlayView import org.eclipse.kuksa.companion.feature.door.viewModel.DoorControlViewModel @@ -60,15 +62,14 @@ import org.eclipse.kuksa.companion.feature.temperature.viewmodel.TemperatureView import org.eclipse.kuksa.companion.feature.wheel.pressure.view.WheelPressureOverlayView import org.eclipse.kuksa.companion.feature.wheel.pressure.viewmodel.WheelPressureViewModel -private const val ZINDEX_RAMSES_VIEW = 1F -private const val ZINDEX_OVERLAY = 2F +private const val ZINDEX_CONTENT = 0F +private const val ZINDEX_OVERLAY = 1F /** * Adds an adaptive AppScreen depending on the [WindowWidthSizeClass]. When the device has a [WindowWidthSizeClass] of * [WindowWidthSizeClass.Compact] all elements are placed on top of each other, while for devices with a higher class * the elements will be placed next to each other. */ -@OptIn(ExperimentalMaterial3Api::class) @Composable fun AdaptiveAppScreen( callback: SurfaceHolder.Callback, @@ -86,67 +87,86 @@ fun AdaptiveAppScreen( mutableStateOf(navigationViewModel.selectedNavigationPage) } - AdaptiveColumnRow(windowSizeClass = windowSizeClass, modifier = modifier.fillMaxSize()) { - AdaptiveConnectionStatusView(connectionStatusViewModel, windowSizeClass) - AdaptiveNavigationView(navigationViewModel, windowSizeClass) { page -> - selectedPage = page + Box { + val navigationViewPaddingValues = AdaptiveNavigationView.calculatePaddingValues(windowSizeClass) + if (connectionStatusViewModel.connectionState != ConnectionState.CONNECTED) { + AdaptiveConnectionStatusView( + connectionStatusViewModel, + windowSizeClass, + Modifier + .zIndex(ZINDEX_OVERLAY) + .padding(navigationViewPaddingValues), + ) } - AdaptiveSheetView( + + val connectionStatusViewPaddingValues = + ConnectionStatusView.calculatePaddingValues(connectionStatusViewModel, windowSizeClass) + AdaptiveColumnRow( windowSizeClass = windowSizeClass, - modifier = Modifier.fillMaxSize(), - isSheetEnabled = selectedPage.isSheetEnabled, - sheetContent = { - when (selectedPage) { - NavigationPage.DOORS -> DoorControlView(doorControlViewModel) - NavigationPage.TEMPERATURE -> TemperatureControlView(temperatureViewModel) - NavigationPage.LIGHT -> LightControlView(lightControlViewModel) - NavigationPage.WHEELS, - NavigationPage.SETTINGS, - -> { } - } - }, + modifier = modifier.fillMaxSize(), ) { - RamsesView( - callback = callback, + AdaptiveNavigationView(navigationViewModel, windowSizeClass) { page -> + selectedPage = page + } + AdaptiveSheetView( + windowSizeClass = windowSizeClass, modifier = Modifier - .zIndex(ZINDEX_RAMSES_VIEW) .fillMaxSize(), - ) + isSheetEnabled = selectedPage.isSheetEnabled, + sheetContent = { + when (selectedPage) { + NavigationPage.DOORS -> DoorControlView(doorControlViewModel) + NavigationPage.TEMPERATURE -> TemperatureControlView(temperatureViewModel) + NavigationPage.LIGHT -> LightControlView(lightControlViewModel) + NavigationPage.WHEELS, + NavigationPage.SETTINGS, + -> { + } + } + }, + ) { + RamsesView( + callback = callback, + modifier = Modifier + .zIndex(ZINDEX_CONTENT) + .fillMaxSize(), + ) - val overlayModifier = Modifier - .zIndex(ZINDEX_OVERLAY) - .fillMaxSize() - .padding(it) + val overlayModifier = Modifier + .zIndex(ZINDEX_OVERLAY) + .fillMaxSize() + .padding(connectionStatusViewPaddingValues) - when (selectedPage) { - NavigationPage.DOORS -> DoorOverlayView( - doorControlViewModel, - windowSizeClass, - overlayModifier, - ) + when (selectedPage) { + NavigationPage.DOORS -> DoorOverlayView( + doorControlViewModel, + windowSizeClass, + overlayModifier, + ) - NavigationPage.TEMPERATURE -> TemperatureOverlayView( - temperatureViewModel, - windowSizeClass, - overlayModifier, - ) + NavigationPage.TEMPERATURE -> TemperatureOverlayView( + temperatureViewModel, + windowSizeClass, + overlayModifier, + ) - NavigationPage.LIGHT -> LightOverlayView( - lightControlViewModel, - windowSizeClass, - overlayModifier, - ) + NavigationPage.LIGHT -> LightOverlayView( + lightControlViewModel, + windowSizeClass, + overlayModifier, + ) - NavigationPage.WHEELS -> WheelPressureOverlayView( - wheelPressureViewModel, - windowSizeClass, - overlayModifier, - ) + NavigationPage.WHEELS -> WheelPressureOverlayView( + wheelPressureViewModel, + windowSizeClass, + overlayModifier, + ) - NavigationPage.SETTINGS -> SettingsView( - settingsViewModel, - overlayModifier, - ) + NavigationPage.SETTINGS -> SettingsView( + settingsViewModel, + overlayModifier, + ) + } } } } @@ -182,7 +202,10 @@ private fun AdaptiveAppScreenPreview() { AdaptiveAppScreen( callback, ConnectionStatusViewModel(), - NavigationViewModel(), + NavigationViewModel().apply { + selectedNavigationIndex = NavigationPage.SETTINGS.ordinal + selectedNavigationPage = NavigationPage.SETTINGS + }, DoorControlViewModel(application), TemperatureViewModel(), LightControlViewModel(), diff --git a/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/navigation/view/AdaptiveNavigationView.kt b/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/navigation/view/AdaptiveNavigationView.kt index aae5eee..8861c4d 100644 --- a/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/navigation/view/AdaptiveNavigationView.kt +++ b/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/navigation/view/AdaptiveNavigationView.kt @@ -19,12 +19,14 @@ package org.eclipse.kuksa.companion.feature.navigation.view +import androidx.compose.foundation.layout.PaddingValues import androidx.compose.material3.windowsizeclass.WindowSizeClass import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp import org.eclipse.kuksa.companion.PREVIEW_HEIGHT_DP import org.eclipse.kuksa.companion.PREVIEW_WIDTH_DP import org.eclipse.kuksa.companion.extension.windowSizeClass @@ -50,6 +52,18 @@ fun AdaptiveNavigationView( } } +class AdaptiveNavigationView private constructor() { + companion object { + fun calculatePaddingValues(windowSizeClass: WindowSizeClass): PaddingValues { + return if (windowSizeClass.widthSizeClass == WindowWidthSizeClass.Compact) { + PaddingValues(top = 80.dp) // NavigationBarTokens#ContainerHeight + padding + } else { + PaddingValues(start = 92.dp) // NavigationRailTokens#ContainerWidth + padding + } + } + } +} + @Composable @Preview(widthDp = PREVIEW_WIDTH_DP, heightDp = PREVIEW_HEIGHT_DP) @Preview(widthDp = PREVIEW_HEIGHT_DP, heightDp = PREVIEW_WIDTH_DP) diff --git a/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/sheet/view/AdaptiveSheetView.kt b/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/sheet/view/AdaptiveSheetView.kt index 7b33b42..7f16ddc 100644 --- a/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/sheet/view/AdaptiveSheetView.kt +++ b/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/sheet/view/AdaptiveSheetView.kt @@ -19,7 +19,6 @@ package org.eclipse.kuksa.companion.feature.sheet.view -import androidx.compose.foundation.layout.PaddingValues import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.SheetValue import androidx.compose.material3.windowsizeclass.WindowSizeClass @@ -44,7 +43,7 @@ fun AdaptiveSheetView( modifier: Modifier = Modifier, isSheetEnabled: Boolean = true, sheetContent: @Composable () -> Unit = { }, - content: @Composable (PaddingValues) -> Unit = { }, + content: @Composable () -> Unit = { }, ) { if (windowSizeClass.widthSizeClass == WindowWidthSizeClass.Compact) { val initialSheetValue = if (isSheetEnabled) SheetValue.PartiallyExpanded else SheetValue.Hidden diff --git a/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/sheet/view/BottomSheetView.kt b/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/sheet/view/BottomSheetView.kt index b2ed678..af0697d 100644 --- a/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/sheet/view/BottomSheetView.kt +++ b/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/sheet/view/BottomSheetView.kt @@ -20,7 +20,6 @@ package org.eclipse.kuksa.companion.feature.sheet.view import android.app.Application -import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.material3.BottomSheetDefaults @@ -46,7 +45,7 @@ fun BottomSheetView( modifier: Modifier = Modifier, initialSheetValue: SheetValue = SheetValue.PartiallyExpanded, sheetContent: @Composable () -> Unit = {}, - content: @Composable (PaddingValues) -> Unit, + content: @Composable () -> Unit, ) { val bottomSheetScaffoldState = BottomSheetScaffoldState( bottomSheetState = SheetState( @@ -66,7 +65,7 @@ fun BottomSheetView( sheetPeekHeight = sheetPeekHeight, modifier = modifier.fillMaxSize(), ) { - content(it) + content() } } @@ -83,7 +82,7 @@ private fun ExpandedPreview() { DoorOverlayView( viewModel = viewModel, windowSizeClass = windowSizeClass, - modifier = Modifier.padding(it), + modifier = Modifier.padding(), ) } } @@ -101,7 +100,7 @@ private fun CollapsedPreview() { DoorOverlayView( viewModel = viewModel, windowSizeClass = windowSizeClass, - modifier = Modifier.padding(it), + modifier = Modifier.padding(), ) } } diff --git a/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/sheet/view/SideSheetView.kt b/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/sheet/view/SideSheetView.kt index 1936afa..92b29bb 100644 --- a/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/sheet/view/SideSheetView.kt +++ b/app/src/main/kotlin/org/eclipse/kuksa/companion/feature/sheet/view/SideSheetView.kt @@ -25,7 +25,6 @@ import androidx.compose.foundation.ScrollState import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding @@ -56,13 +55,12 @@ fun SideSheetView( modifier: Modifier = Modifier, isSideSheetEnabled: Boolean = true, sheetContent: @Composable () -> Unit = {}, - content: @Composable (PaddingValues) -> Unit, + content: @Composable () -> Unit, ) { val sideSheetBehavior: SideSheetBehavior = SideSheetBehavior() ConstraintLayout(modifier = modifier) { Box(Modifier.fillMaxSize()) { - val paddingValues = PaddingValues(0.dp) - content(paddingValues) + content() } if (!isSideSheetEnabled) {