fix: enforce SignalInfo single-line layout

closes #1441
meshtastic · Nov 30, 2024 · f4c24db · f4c24db
1 parent e412fae
commit f4c24db
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 22 deletions.
diff --git a/app/src/main/java/com/geeksville/mesh/ui/NodeItem.kt b/app/src/main/java/com/geeksville/mesh/ui/NodeItem.kt
@@ -69,6 +69,7 @@ import com.geeksville.mesh.database.entity.NodeEntity
 import com.geeksville.mesh.ui.components.MenuItemAction
 import com.geeksville.mesh.ui.components.NodeKeyStatusIcon
 import com.geeksville.mesh.ui.components.NodeMenu
+import com.geeksville.mesh.ui.components.SignalInfo
 import com.geeksville.mesh.ui.components.SimpleAlertDialog
 import com.geeksville.mesh.ui.compose.ElevationInfo
 import com.geeksville.mesh.ui.compose.SatelliteCountInfo
@@ -235,8 +236,9 @@ fun NodeItem(
                 Row(
                     modifier = Modifier.fillMaxWidth(),
                     horizontalArrangement = Arrangement.SpaceBetween,
+                    verticalAlignment = Alignment.CenterVertically,
                 ) {
-                    signalInfo(
+                    SignalInfo(
                         node = thatNode,
                         isThisNode = isThisNode
                     )

diff --git a/app/src/main/java/com/geeksville/mesh/ui/components/LoraSignalIndicator.kt b/app/src/main/java/com/geeksville/mesh/ui/components/LoraSignalIndicator.kt
@@ -19,10 +19,14 @@ package com.geeksville.mesh.ui.components
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 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.material.Icon
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
@@ -61,17 +65,23 @@ private enum class Quality(
  * Displays the `snr` and `rssi` color coded based on the signal quality, along with
  * a human readable description and related icon.
  */
+@OptIn(ExperimentalLayoutApi::class)
 @Composable
-fun NodeSignalQuality(snr: Float, rssi: Int) {
+fun NodeSignalQuality(snr: Float, rssi: Int, modifier: Modifier = Modifier) {
     val quality = determineSignalQuality(snr, rssi)
-    Row(
-        modifier = Modifier.fillMaxWidth(),
-        verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.SpaceBetween
+    FlowRow(
+        modifier = modifier,
+        maxLines = 1,
     ) {
         Snr(snr)
+        Spacer(Modifier.width(8.dp))
         Rssi(rssi)
-        Text(text = "${stringResource(R.string.signal)} ${stringResource(quality.nameRes)}")
+        Spacer(Modifier.width(8.dp))
+        Text(
+            text = "${stringResource(R.string.signal)} ${stringResource(quality.nameRes)}",
+            fontSize = MaterialTheme.typography.button.fontSize
+        )
+        Spacer(Modifier.width(8.dp))
         Icon(
             imageVector = quality.imageVector,
             contentDescription = stringResource(R.string.signal_quality),
@@ -129,10 +139,7 @@ private fun Snr(snr: Float) {
     }
 
     Text(
-        text = "%s %.2fdB".format(
-            stringResource(id = R.string.snr),
-            snr
-        ),
+        text = "%s %.2fdB".format(stringResource(id = R.string.snr), snr),
         color = color,
         fontSize = MaterialTheme.typography.button.fontSize
     )
@@ -148,10 +155,7 @@ private fun Rssi(rssi: Int) {
         Quality.BAD.color
     }
     Text(
-        text = "%s %ddB".format(
-            stringResource(id = R.string.rssi),
-            rssi
-        ),
+        text = "%s %ddBm".format(stringResource(id = R.string.rssi), rssi),
         color = color,
         fontSize = MaterialTheme.typography.button.fontSize
     )

diff --git a/...java/com/geeksville/mesh/ui/SignalInfo.kt → ...eksville/mesh/ui/components/SignalInfo.kt b/...java/com/geeksville/mesh/ui/SignalInfo.kt → ...eksville/mesh/ui/components/SignalInfo.kt
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-package com.geeksville.mesh.ui
+package com.geeksville.mesh.ui.components
 
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
@@ -27,15 +27,14 @@ import androidx.compose.ui.tooling.preview.PreviewLightDark
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import com.geeksville.mesh.R
 import com.geeksville.mesh.database.entity.NodeEntity
-import com.geeksville.mesh.ui.components.NodeSignalQuality
 import com.geeksville.mesh.ui.preview.NodeEntityPreviewParameterProvider
 import com.geeksville.mesh.ui.theme.AppTheme
 
 const val MAX_VALID_SNR = 100F
 const val MAX_VALID_RSSI = 0
 
 @Composable
-fun signalInfo(
+fun SignalInfo(
     modifier: Modifier = Modifier,
     node: NodeEntity,
     isThisNode: Boolean
@@ -59,7 +58,7 @@ fun signalInfo(
                 add("ch:${node.channel}")
             }
             if (node.hopsAway != 0) add(hopsString)
-        }.joinToString(" | ")
+        }.joinToString(" ")
     }
     if (text.isNotEmpty()) {
         Text(
@@ -81,7 +80,7 @@ fun signalInfo(
 @Preview(showBackground = true)
 fun SignalInfoSimplePreview() {
     AppTheme {
-        signalInfo(
+        SignalInfo(
             node = NodeEntity(
                 num = 1,
                 lastHeard = 0,
@@ -102,7 +101,7 @@ fun SignalInfoPreview(
     node: NodeEntity
 ) {
     AppTheme {
-        signalInfo(
+        SignalInfo(
             node = node,
             isThisNode = false
         )
@@ -116,7 +115,7 @@ fun SignalInfoSelfPreview(
     node: NodeEntity
 ) {
     AppTheme {
-        signalInfo(
+        SignalInfo(
             node = node,
             isThisNode = true
         )