feature: Optimize Views for Landscape

app/build.gradle.kts

@@ -142,6 +142,8 @@ dependencies {
 
     implementation(libs.hilt.android)
     kapt(libs.hilt.android.compiler)
+
+    implementation(libs.androidx.material3.window.size.clazz)
 }
 
 // Allow references to generated code

app/src/main/kotlin/org/eclipse/kuksa/companion/CompanionApplication.kt

@@ -22,5 +22,11 @@ package org.eclipse.kuksa.companion
 import android.app.Application
 import dagger.hilt.android.HiltAndroidApp
 
+const val PREVIEW_WIDTH_DP = 400
+const val PREVIEW_HEIGHT_DP = 900
+
+const val SHEET_EXPANDED_HEIGHT = 300
+const val SHEET_COLLAPSED_HEIGHT = 50
+
 @HiltAndroidApp
 class CompanionApplication : Application()

app/src/main/kotlin/org/eclipse/kuksa/companion/MainActivity.kt

@@ -24,9 +24,9 @@ import android.util.Log
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.viewModels
+import androidx.compose.material3.windowsizeclass.ExperimentalMaterial3WindowSizeClassApi
+import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass
 import androidx.lifecycle.lifecycleScope
-import androidx.navigation.compose.NavHost
-import androidx.navigation.compose.rememberNavController
 import dagger.hilt.android.AndroidEntryPoint
 import kotlinx.coroutines.flow.first
 import kotlinx.coroutines.launch
@@ -45,12 +45,8 @@ import org.eclipse.kuksa.companion.feature.door.viewModel.DoorControlViewModel.C
 import org.eclipse.kuksa.companion.feature.door.viewModel.DoorControlViewModel.Companion.DOOR_ALL_OPEN
 import org.eclipse.kuksa.companion.feature.door.viewModel.DoorControlViewModel.Companion.TRUNK_CLOSED
 import org.eclipse.kuksa.companion.feature.door.viewModel.DoorControlViewModel.Companion.TRUNK_OPEN
-import org.eclipse.kuksa.companion.feature.home.view.HOME_SCREEN
-import org.eclipse.kuksa.companion.feature.home.view.RamsesView
-import org.eclipse.kuksa.companion.feature.home.view.homeScreen
+import org.eclipse.kuksa.companion.feature.home.view.AdaptiveAppScreen
 import org.eclipse.kuksa.companion.feature.light.viewmodel.LightControlViewModel
-import org.eclipse.kuksa.companion.feature.settings.navigation.navigateToSettingsScreen
-import org.eclipse.kuksa.companion.feature.settings.navigation.settingsScreen
 import org.eclipse.kuksa.companion.feature.settings.viewModel.SettingsViewModel
 import org.eclipse.kuksa.companion.feature.temperature.viewmodel.TemperatureViewModel
 import org.eclipse.kuksa.companion.feature.wheel.pressure.viewmodel.WheelPressureViewModel
@@ -142,32 +138,25 @@ class MainActivity : ComponentActivity() {
     }
 
     // region: Lifecycle
+    @OptIn(ExperimentalMaterial3WindowSizeClassApi::class)
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
 
         doorVehicleScene = doorVehicleSurface.loadScene(doorControlViewModel)
 
         setContent {
+            val windowSizeClass = calculateWindowSizeClass(activity = this@MainActivity)
             KuksaCompanionTheme {
-                val navController = rememberNavController()
-                RamsesView(callback = doorVehicleSurface)
-                NavHost(navController, startDestination = HOME_SCREEN) {
-                    homeScreen(
-                        connectionStatusViewModel = connectionStatusViewModel,
-                        doorControlViewModel = doorControlViewModel,
-                        temperatureViewModel = temperatureViewModel,
-                        lightControlViewModel = lightControlViewModel,
-                        wheelPressureViewModel = wheelPressureViewModel,
-                        onNavigateToSettingsScreen = { navController.navigateToSettingsScreen() },
-                    )
-
-                    settingsScreen(
-                        settingsViewModel = settingsViewModel,
-                        onNavigateBack = {
-                            navController.navigateUp()
-                        },
-                    )
-                }
+                AdaptiveAppScreen(
+                    callback = doorVehicleSurface,
+                    connectionStatusViewModel = connectionStatusViewModel,
+                    doorControlViewModel = doorControlViewModel,
+                    temperatureViewModel = temperatureViewModel,
+                    lightControlViewModel = lightControlViewModel,
+                    wheelPressureViewModel = wheelPressureViewModel,
+                    settingsViewModel = settingsViewModel,
+                    windowSizeClass = windowSizeClass,
+                )
             }
         }
     }

app/src/main/kotlin/org/eclipse/kuksa/companion/extension/ConfigurationExtension.kt

@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2023 Contributors to the Eclipse Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ */
+
+package org.eclipse.kuksa.companion.extension
+
+import android.content.res.Configuration
+import androidx.compose.material3.windowsizeclass.ExperimentalMaterial3WindowSizeClassApi
+import androidx.compose.material3.windowsizeclass.WindowSizeClass
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.unit.DpSize
+import androidx.compose.ui.unit.dp
+
+@OptIn(ExperimentalMaterial3WindowSizeClassApi::class)
+@Composable
+fun Configuration.getWindowSizeClass(): WindowSizeClass {
+    val screenWidth = screenWidthDp
+    val screenHeight = screenHeightDp
+    val size = DpSize(screenWidth.dp, screenHeight.dp)
+    return WindowSizeClass.calculateFromSize(size)
+}

app/src/main/kotlin/org/eclipse/kuksa/companion/extension/ConstraintScopeExtension.kt

@@ -0,0 +1,93 @@
+/*
+ * Copyright (c) 2023 Contributors to the Eclipse Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ */
+
+package org.eclipse.kuksa.companion.extension
+
+import androidx.compose.material3.windowsizeclass.WindowSizeClass
+import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
+import androidx.constraintlayout.compose.ConstrainScope
+import androidx.constraintlayout.compose.ConstrainedLayoutReference
+import org.eclipse.kuksa.companion.feature.door.view.horizontalMarginAnchorToDoor
+import org.eclipse.kuksa.companion.feature.door.view.verticalMarginAnchorToBackDoor
+import org.eclipse.kuksa.companion.feature.door.view.verticalMarginAnchorToDoor
+
+fun ConstrainScope.alignDriverFrontDoor(
+    windowSizeClass: WindowSizeClass,
+    anchorPoint: ConstrainedLayoutReference,
+) {
+    if (windowSizeClass.widthSizeClass == WindowWidthSizeClass.Compact) {
+        end.linkTo(anchorPoint.start, horizontalMarginAnchorToDoor)
+        top.linkTo(anchorPoint.bottom, verticalMarginAnchorToDoor)
+    } else {
+        end.linkTo(anchorPoint.start, verticalMarginAnchorToDoor)
+        bottom.linkTo(anchorPoint.top, horizontalMarginAnchorToDoor)
+    }
+}
+
+fun ConstrainScope.alignPassengerFrontDoor(
+    windowSizeClass: WindowSizeClass,
+    anchorPoint: ConstrainedLayoutReference,
+) {
+    if (windowSizeClass.widthSizeClass == WindowWidthSizeClass.Compact) {
+        start.linkTo(anchorPoint.end, horizontalMarginAnchorToDoor)
+        top.linkTo(anchorPoint.bottom, verticalMarginAnchorToDoor)
+    } else {
+        end.linkTo(anchorPoint.start, verticalMarginAnchorToDoor)
+        top.linkTo(anchorPoint.bottom, horizontalMarginAnchorToDoor)
+    }
+}
+
+fun ConstrainScope.alignDriverBackDoor(
+    windowSizeClass: WindowSizeClass,
+    anchorPoint: ConstrainedLayoutReference,
+) {
+    if (windowSizeClass.widthSizeClass == WindowWidthSizeClass.Compact) {
+        end.linkTo(anchorPoint.start, horizontalMarginAnchorToDoor)
+        top.linkTo(anchorPoint.bottom, verticalMarginAnchorToBackDoor)
+    } else {
+        end.linkTo(anchorPoint.start, verticalMarginAnchorToBackDoor)
+        bottom.linkTo(anchorPoint.top, horizontalMarginAnchorToDoor)
+    }
+}
+
+fun ConstrainScope.alignPassengerBackDoor(
+    windowSizeClass: WindowSizeClass,
+    anchorPoint: ConstrainedLayoutReference,
+) {
+    if (windowSizeClass.widthSizeClass == WindowWidthSizeClass.Compact) {
+        start.linkTo(anchorPoint.end, horizontalMarginAnchorToDoor)
+        top.linkTo(anchorPoint.bottom, verticalMarginAnchorToBackDoor)
+    } else {
+        end.linkTo(anchorPoint.start, verticalMarginAnchorToBackDoor)
+        top.linkTo(anchorPoint.bottom, horizontalMarginAnchorToDoor)
+    }
+}
+
+fun ConstrainScope.alignTrunk(
+    windowSizeClass: WindowSizeClass,
+    anchorPoint: ConstrainedLayoutReference,
+) {
+    if (windowSizeClass.widthSizeClass == WindowWidthSizeClass.Compact) {
+        centerHorizontallyTo(anchorPoint)
+        bottom.linkTo(parent.bottom)
+    } else {
+        centerVerticallyTo(anchorPoint)
+        start.linkTo(parent.start)
+    }
+}

app/src/main/kotlin/org/eclipse/kuksa/companion/extension/ModifierExtension.kt

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2023 Contributors to the Eclipse Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ */
+
+package org.eclipse.kuksa.companion.extension
+
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+
+fun Modifier.isVisible(isVisible: Boolean): Modifier {
+    val alpha = if (isVisible) 1F else 0F
+
+    return then(Modifier.alpha(alpha))
+}

app/src/main/kotlin/org/eclipse/kuksa/companion/feature/connection/view/AdaptiveConnectionStatusView.kt

@@ -0,0 +1,84 @@
+/*
+ * Copyright (c) 2023 Contributors to the Eclipse Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ */
+
+package org.eclipse.kuksa.companion.feature.connection.view
+
+import androidx.compose.foundation.layout.Box
+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 org.eclipse.kuksa.companion.PREVIEW_HEIGHT_DP
+import org.eclipse.kuksa.companion.PREVIEW_WIDTH_DP
+import org.eclipse.kuksa.companion.extension.getWindowSizeClass
+import org.eclipse.kuksa.companion.feature.connection.viewModel.ConnectionStatusViewModel
+
+@Composable
+fun AdaptiveConnectionStatusView(
+    viewModel: ConnectionStatusViewModel,
+    windowSizeClass: WindowSizeClass,
+    modifier: Modifier = Modifier,
+) {
+    if (windowSizeClass.widthSizeClass == WindowWidthSizeClass.Compact) {
+        HorizontalConnectionStatusView(viewModel, modifier)
+    } else {
+        VerticalConnectionStatusView(viewModel, modifier)
+    }
+}
+
+@Preview(widthDp = PREVIEW_WIDTH_DP, heightDp = PREVIEW_HEIGHT_DP)
+@Preview(widthDp = PREVIEW_HEIGHT_DP, heightDp = PREVIEW_WIDTH_DP)
+@Composable
+private fun AdaptiveConnectionStatusViewPreview_Disconnected() {
+    val viewModel = ConnectionStatusViewModel()
+    viewModel.connectionState = ConnectionStatusViewModel.ConnectionState.DISCONNECTED
+
+    val windowSizeClass = LocalConfiguration.current.getWindowSizeClass()
+    Box {
+        AdaptiveConnectionStatusView(viewModel = viewModel, windowSizeClass)
+    }
+}
+
+@Preview(widthDp = PREVIEW_WIDTH_DP, heightDp = PREVIEW_HEIGHT_DP)
+@Preview(widthDp = PREVIEW_HEIGHT_DP, heightDp = PREVIEW_WIDTH_DP)
+@Composable
+private fun AdaptiveConnectionStatusViewPreview_Connecting() {
+    val viewModel = ConnectionStatusViewModel()
+    viewModel.connectionState = ConnectionStatusViewModel.ConnectionState.CONNECTING
+
+    val windowSizeClass = LocalConfiguration.current.getWindowSizeClass()
+    Box {
+        AdaptiveConnectionStatusView(viewModel = viewModel, windowSizeClass)
+    }
+}
+
+@Preview(widthDp = PREVIEW_WIDTH_DP, heightDp = PREVIEW_HEIGHT_DP)
+@Preview(widthDp = PREVIEW_HEIGHT_DP, heightDp = PREVIEW_WIDTH_DP)
+@Composable
+private fun AdaptiveConnectionStatusViewPreview_Connected() {
+    val viewModel = ConnectionStatusViewModel()
+    viewModel.connectionState = ConnectionStatusViewModel.ConnectionState.CONNECTED
+
+    val windowSizeClass = LocalConfiguration.current.getWindowSizeClass()
+    Box {
+        AdaptiveConnectionStatusView(viewModel = viewModel, windowSizeClass)
+    }
+}

app/src/main/kotlin/org/eclipse/kuksa/companion/feature/connection/view/AnimatedLoadingText.kt

@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2023 Contributors to the Eclipse Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ */
+
+package org.eclipse.kuksa.companion.feature.connection.view
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.remember
+import kotlinx.coroutines.delay
+import org.eclipse.kuksa.companion.feature.connection.viewModel.ConnectionStatusViewModel.ConnectionState
+import kotlin.time.Duration.Companion.milliseconds
+
+private const val MAX_NUMBER_OF_DOTS = 3
+private val DelayDuration = 500.milliseconds
+
+@Composable
+fun animateLoadingText(
+    connectionState: ConnectionState,
+    text: String,
+): String {
+    var animatedText = text
+    if (connectionState == ConnectionState.CONNECTING) {
+        val numberOfDots = remember {
+            mutableIntStateOf(0)
+        }
+        repeat(numberOfDots.intValue) {
+            animatedText += "."
+        }
+        LaunchedEffect(Unit) {
+            while (true) {
+                if (numberOfDots.intValue < MAX_NUMBER_OF_DOTS) {
+                    numberOfDots.intValue += 1
+                } else {
+                    numberOfDots.intValue = 0
+                }
+                delay(DelayDuration)
+            }
+        }
+    }
+    return animatedText
+}