feature: Don't show ConnectionStatusBar when connected

closes: #58
eclipse-kuksa · Feb 15, 2024 · f094b76 · f094b76
1 parent 733b505
commit f094b76
Show file tree

Hide file tree

Showing 8 changed files with 145 additions and 87 deletions.
diff --git a/...otlin/org/eclipse/kuksa/companion/feature/connection/view/AdaptiveConnectionStatusView.kt b/...otlin/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/...lin/org/eclipse/kuksa/companion/feature/connection/view/HorizontalConnectionStatusView.kt b/...lin/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/...otlin/org/eclipse/kuksa/companion/feature/connection/view/VerticalConnectionStatusView.kt b/...otlin/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
@@ -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/...main/kotlin/org/eclipse/kuksa/companion/feature/navigation/view/AdaptiveNavigationView.kt b/...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)