feature(TestApp): Slimline ConnectedView

Move Disconnect Button into TopBar

Signed-off-by: Andre Weber <andre.weber3@etas.com>

app/src/main/kotlin/org/eclipse/kuksa/testapp/databroker/view/DataBrokerConnectionView.kt

@@ -52,7 +52,7 @@ import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import org.eclipse.kuksa.testapp.databroker.model.ConnectionInfo
 import org.eclipse.kuksa.testapp.databroker.viewmodel.ConnectionViewModel
-import org.eclipse.kuksa.testapp.databroker.viewmodel.ConnectionViewModel.*
+import org.eclipse.kuksa.testapp.databroker.viewmodel.ConnectionViewModel.ConnectionViewState
 import org.eclipse.kuksa.testapp.extension.compose.Headline
 import org.eclipse.kuksa.testapp.extension.compose.RememberCountdown
 import org.eclipse.kuksa.testapp.extension.fetchFileName
@@ -71,7 +71,9 @@ fun DataBrokerConnection(viewModel: ConnectionViewModel) {
         mutableStateOf(connectionInfoState.value)
     }
 
-    Headline("Connection")
+    if (!viewModel.isConnected) {
+        Headline("Connection")
+    }
     Column {
         AnimatedVisibility(visible = viewModel.isDisconnected) {
             Column {
@@ -223,13 +225,9 @@ fun DataBrokerConnection(viewModel: ConnectionViewModel) {
                             Text(text = "Connecting... ($timeoutSeconds)", textAlign = TextAlign.Center)
                         }
 
-                    ConnectionViewState.CONNECTED ->
-                        Button(
-                            onClick = { viewModel.onDisconnect() },
-                            modifier = Modifier.requiredWidth(MinimumButtonWidth),
-                        ) {
-                            Text(text = "Disconnect")
-                        }
+                    ConnectionViewState.CONNECTED -> {
+                        // intentionally left empty
+                    }
                 }
             }
         }
@@ -238,7 +236,16 @@ fun DataBrokerConnection(viewModel: ConnectionViewModel) {
 
 @Preview
 @Composable
-fun DataBrokerConnectionPreview() {
+fun DataBrokerConnectionPreview_Disconnected() {
     val connectionInfoRepository = ConnectionInfoRepository(LocalContext.current)
     DataBrokerConnection(viewModel = ConnectionViewModel(connectionInfoRepository))
 }
+
+@Preview
+@Composable
+fun DataBrokerConnectionPreview_Connected() {
+    val connectionInfoRepository = ConnectionInfoRepository(LocalContext.current)
+    val viewModel = ConnectionViewModel(connectionInfoRepository)
+    viewModel.updateConnectionState(ConnectionViewState.CONNECTED)
+    DataBrokerConnection(viewModel = viewModel)
+}

app/src/main/kotlin/org/eclipse/kuksa/testapp/databroker/view/DataBrokerView.kt

@@ -66,17 +66,21 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.flow.first
 import kotlinx.coroutines.launch
 import org.eclipse.kuksa.proto.v1.Types.Datapoint.ValueCase
+import org.eclipse.kuksa.testapp.R
 import org.eclipse.kuksa.testapp.databroker.viewmodel.ConnectionViewModel
-import org.eclipse.kuksa.testapp.databroker.viewmodel.ConnectionViewModel.*
 import org.eclipse.kuksa.testapp.databroker.viewmodel.OutputViewModel
 import org.eclipse.kuksa.testapp.databroker.viewmodel.TopAppBarViewModel
 import org.eclipse.kuksa.testapp.databroker.viewmodel.TopAppBarViewModel.DataBrokerMode
@@ -149,46 +153,84 @@ private fun TopBar(
             containerColor = MaterialTheme.colorScheme.primaryContainer,
         ),
         actions = {
-            OverflowMenu {
-                Row(
-                    modifier = Modifier
-                        .clickable(
-                            enabled = connectionViewModel.isDisconnected,
-                        ) {
-                            val newValue = !topAppBarViewModel.isCompatibilityModeEnabled
-                            topAppBarViewModel.isCompatibilityModeEnabled = newValue
-                        }
-                        .padding(horizontal = 16.dp),
+            ConnectionStatusIcon(connectionViewModel)
+            HamburgerMenu(connectionViewModel, topAppBarViewModel)
+        },
+    )
+}
+
+@Composable
+private fun HamburgerMenu(
+    connectionViewModel: ConnectionViewModel,
+    topAppBarViewModel: TopAppBarViewModel,
+) {
+    OverflowMenu {
+        Row(
+            modifier = Modifier
+                .clickable(
+                    enabled = connectionViewModel.isDisconnected,
                 ) {
-                    Checkbox(
-                        checked = topAppBarViewModel.isCompatibilityModeEnabled,
-                        onCheckedChange = null,
-                        enabled = connectionViewModel.isDisconnected,
-                    )
-                    Text(text = "Java Compatibility Mode", modifier = Modifier.padding(start = 16.dp))
+                    val newValue = !topAppBarViewModel.isCompatibilityModeEnabled
+                    topAppBarViewModel.isCompatibilityModeEnabled = newValue
                 }
-                Spacer(modifier = Modifier.padding(top = DefaultElementPadding))
-                Row(
-                    modifier = Modifier
-                        .clickable {
-                            val newMode = if (!topAppBarViewModel.isSpecificationModeEnabled) {
-                                DataBrokerMode.SPECIFICATION
-                            } else {
-                                DataBrokerMode.VSS_PATH
-                            }
-                            topAppBarViewModel.updateDataBrokerMode(newMode)
-                        }
-                        .padding(horizontal = 16.dp),
-                ) {
-                    Checkbox(
-                        checked = topAppBarViewModel.isSpecificationModeEnabled,
-                        onCheckedChange = null,
-                    )
-                    Text(text = "Specification Mode", modifier = Modifier.padding(start = 16.dp))
+                .padding(horizontal = 16.dp),
+        ) {
+            Checkbox(
+                checked = topAppBarViewModel.isCompatibilityModeEnabled,
+                onCheckedChange = null,
+                enabled = connectionViewModel.isDisconnected,
+            )
+            Text(
+                text = "Java Compatibility Mode",
+                modifier = Modifier.padding(start = 16.dp),
+            )
+        }
+        Spacer(modifier = Modifier.padding(top = DefaultElementPadding))
+        Row(
+            modifier = Modifier
+                .clickable {
+                    val newMode = if (!topAppBarViewModel.isSpecificationModeEnabled) {
+                        DataBrokerMode.SPECIFICATION
+                    } else {
+                        DataBrokerMode.VSS_PATH
+                    }
+                    topAppBarViewModel.updateDataBrokerMode(newMode)
                 }
-            }
-        },
-    )
+                .padding(horizontal = 16.dp),
+        ) {
+            Checkbox(
+                checked = topAppBarViewModel.isSpecificationModeEnabled,
+                onCheckedChange = null,
+            )
+            Text(text = "Specification Mode", modifier = Modifier.padding(start = 16.dp))
+        }
+    }
+}
+
+@Composable
+private fun ConnectionStatusIcon(
+    connectionViewModel: ConnectionViewModel,
+) {
+    val modifier: Modifier = Modifier
+    if (connectionViewModel.isConnected) {
+        Icon(
+            painter = painterResource(id = R.drawable.round_power_24),
+            contentDescription = "Disconnect",
+            modifier = modifier.clickable { connectionViewModel.onDisconnect() },
+        )
+    } else {
+        Icon(
+            painter = painterResource(id = R.drawable.round_power_off_24),
+            contentDescription = "Connect",
+            modifier = modifier.clickable {
+                val coroutineScope = CoroutineScope(Dispatchers.Default)
+                coroutineScope.launch {
+                    val connectionInfo = connectionViewModel.connectionInfoFlow.first()
+                    connectionViewModel.onConnect(connectionInfo)
+                }
+            },
+        )
+    }
 }
 
 @Composable

app/src/main/res/drawable/round_power_24.xml

@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#000000"
+    android:viewportHeight="24" android:viewportWidth="24"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@android:color/white" android:pathData="M16.01,7L16,4c0,-0.55 -0.45,-1 -1,-1s-1,0.45 -1,1v3h-4V4c0,-0.55 -0.45,-1 -1,-1s-1,0.45 -1,1v3h-0.01C6.9,7 6,7.9 6,8.99v4.66c0,0.53 0.21,1.04 0.58,1.41L9.5,18v2c0,0.55 0.45,1 1,1h3c0.55,0 1,-0.45 1,-1v-2l2.92,-2.92c0.37,-0.38 0.58,-0.89 0.58,-1.42V8.99C18,7.89 17.11,7 16.01,7z"/>
+</vector>

app/src/main/res/drawable/round_power_off_24.xml

@@ -0,0 +1,24 @@
+<!--
+  ~ 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
+  ~
+  -->
+
+<vector android:height="24dp" android:tint="#000000"
+    android:viewportHeight="24" android:viewportWidth="24"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@android:color/white" android:pathData="M18,13.66L18,8.99c0,-1 -1.01,-2 -2,-1.99L16,4c0,-0.55 -0.45,-1 -1,-1s-1,0.45 -1,1v3h-3.88l7.63,7.63c0.15,-0.3 0.25,-0.63 0.25,-0.97zM10,4c0,-0.55 -0.45,-1 -1,-1s-1,0.45 -1,1v0.88l2,2L10,4zM20.15,19.86l-7.66,-7.66 -5.1,-5.1 -2.56,-2.56c-0.39,-0.39 -1.02,-0.39 -1.41,0 -0.39,0.39 -0.39,1.02 0,1.41l2.63,2.63c-0.03,0.13 -0.05,0.27 -0.05,0.41v4.66c0,0.53 0.21,1.04 0.58,1.41L9.5,18v2c0,0.55 0.45,1 1,1h3c0.55,0 1,-0.45 1,-1v-2l0.48,-0.48 3.76,3.76c0.39,0.39 1.02,0.39 1.41,0 0.39,-0.39 0.39,-1.03 0,-1.42z"/>
+</vector>