begin making not ugly Messages view

app/src/main/java/com/geeksville/mesh/MainActivity.kt

@@ -17,10 +17,7 @@ import androidx.core.content.ContextCompat
 import androidx.ui.core.setContent
 import com.geeksville.android.Logging
 import com.geeksville.mesh.service.*
-import com.geeksville.mesh.ui.MeshApp
-import com.geeksville.mesh.ui.TextMessage
-import com.geeksville.mesh.ui.UIState
-import com.geeksville.mesh.ui.getInitials
+import com.geeksville.mesh.ui.*
 import com.geeksville.util.exceptionReporter
 import com.google.android.gms.auth.api.signin.GoogleSignIn
 import com.google.android.gms.auth.api.signin.GoogleSignInAccount
@@ -315,9 +312,10 @@ class MainActivity : AppCompatActivity(), Logging,
                     when (typ) {
                         MeshProtos.Data.Type.CLEAR_TEXT_VALUE -> {
                             // FIXME - use the real time from the packet
-                            val modded = UIState.messages.value.toMutableList()
+                            // FIXME - don't just slam in a new list each time, it probably causes extra drawing.  Figure out how to be Compose smarter...
+                            val modded = MessagesState.messages.value.toMutableList()
                             modded.add(TextMessage(Date(), sender, payload.toString(utf8)))
-                            UIState.messages.value = modded
+                            MessagesState.messages.value = modded
                         }
                         else -> TODO()
                     }

app/src/main/java/com/geeksville/mesh/ui/MeshApp.kt

@@ -48,31 +48,6 @@ fun HomeContent() {
             NodeInfoCard(it)
         }
 
-        UIState.messages.value.forEach {
-            Text("Text: ${it.text}")
-        }
-
-        val message = state { "text message" }
-        Surface(color = Color.Yellow) {
-            Row {
-                Clip(shape = RoundedCornerShape(15.dp)) {
-                    Padding(padding = 15.dp) {
-                        TextField(
-                            value = message.value,
-                            onValueChange = { message.value = it },
-                            textStyle = TextStyle(
-                                color = Color.DarkGray
-                            ),
-                            imeAction = ImeAction.Send,
-                            onImeActionPerformed = {
-                                UILog.info("did IME action")
-                            }
-                        )
-                    }
-                }
-            }
-        }
-
         val state = state { "fixme bob" }
         Surface(color = Color.LightGray) {
             Row {
@@ -187,7 +162,7 @@ private fun AppContent(openDrawer: () -> Unit) {
 
                 VerticalScroller(modifier = LayoutFlexible(1f)) {
                     when (screen) {
-                        Screen.messages -> HomeContent()
+                        Screen.messages -> MessagesContent()
                         Screen.settings -> BTScanScreen()
                         Screen.users -> HomeContent()
                         Screen.channel -> HomeContent()

app/src/main/java/com/geeksville/mesh/ui/Messages.kt

@@ -0,0 +1,81 @@
+package com.geeksville.mesh.ui
+
+import androidx.compose.Composable
+import androidx.compose.mutableStateOf
+import androidx.compose.state
+import androidx.ui.core.Clip
+import androidx.ui.core.Text
+import androidx.ui.core.TextField
+import androidx.ui.foundation.shape.corner.RoundedCornerShape
+import androidx.ui.graphics.Color
+import androidx.ui.input.ImeAction
+import androidx.ui.layout.Column
+import androidx.ui.layout.Padding
+import androidx.ui.layout.Row
+import androidx.ui.material.MaterialTheme
+import androidx.ui.material.darkColorPalette
+import androidx.ui.material.surface.Surface
+import androidx.ui.text.TextStyle
+import androidx.ui.tooling.preview.Preview
+import androidx.ui.unit.dp
+import com.geeksville.android.Logging
+import com.geeksville.mesh.ui.MessagesState.messages
+import java.util.*
+
+
+data class TextMessage(val date: Date, val from: String, val text: String)
+
+
+object MessagesState : Logging {
+    val testTexts = listOf(
+        TextMessage(Date(), "+6508675310", "I found the cache"),
+        TextMessage(Date(), "+6508675311", "Help! I've fallen and I can't get up.")
+    )
+
+    // If the following (unused otherwise) line is commented out, the IDE preview window works.
+    // if left in the preview always renders as empty.
+    val messages = mutableStateOf(MessagesState.testTexts)
+}
+
+@Composable
+fun MessagesContent() {
+    Column {
+
+        Text("hi")
+
+        messages.value.forEach {
+            Text("Text: ${it.text}")
+        }
+
+        val message = state { "text message" }
+        Surface(color = Color.Yellow) {
+            Row {
+                Clip(shape = RoundedCornerShape(15.dp)) {
+                    Padding(padding = 15.dp) {
+                        TextField(
+                            value = message.value,
+                            onValueChange = { message.value = it },
+                            textStyle = TextStyle(
+                                color = Color.DarkGray
+                            ),
+                            imeAction = ImeAction.Send,
+                            onImeActionPerformed = {
+                                MessagesState.info("did IME action")
+                            }
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+@Preview
+@Composable
+fun previewMessagesView() {
+    // another bug? It seems modaldrawerlayout not yet supported in preview
+    MaterialTheme(colors = darkColorPalette()) {
+        MessagesContent()
+    }
+}

app/src/main/java/com/geeksville/mesh/ui/NodeInfoCard.kt

@@ -45,7 +45,11 @@ fun CompassHeading(modifier: Modifier1 = Modifier1.None, node: NodeInfo) {
 @Composable
 fun NodeHeading(node: NodeInfo) {
     ProvideEmphasis(emphasis = EmphasisLevels().high) {
-        Text(node.user?.longName ?: "unknown", style = MaterialTheme.typography().subtitle1)
+        Text(
+            node.user?.longName ?: "unknown",
+            style = MaterialTheme.typography().subtitle1
+            //modifier = LayoutWidth.Fill
+        )
     }
 }
 

app/src/main/java/com/geeksville/mesh/ui/Status.kt

@@ -5,7 +5,6 @@ import androidx.compose.Model
 import androidx.compose.mutableStateOf
 import com.geeksville.mesh.*
 import com.google.android.gms.auth.api.signin.GoogleSignInClient
-import java.util.*
 
 
 data class ScreenInfo(val icon: Int, val label: String)
@@ -24,8 +23,6 @@ object AppStatus {
     var currentScreen: ScreenInfo = Screen.messages
 }
 
-data class TextMessage(val date: Date, val from: String, val text: String)
-
 /// FIXME - figure out how to merge this staate with the AppStatus Model
 object UIState {
 
@@ -66,16 +63,10 @@ object UIState {
         )
     }
 
-    val testTexts = listOf(
-        TextMessage(Date(), "+6508675310", "I found the cache"),
-        TextMessage(Date(), "+6508675311", "Help! I've fallen and I can't get up.")
-    )
 
     /// A map from nodeid to to nodeinfo
     val nodes = mutableStateOf(testNodes.map { it.user!!.id to it }.toMap())
 
-    val messages = mutableStateOf(testTexts)
-
     /// Are we connected to our radio device
     val isConnected = mutableStateOf(false)
 

app/src/main/java/com/geeksville/mesh/ui/Vectors.kt

@@ -11,17 +11,28 @@ import androidx.ui.layout.Container
 import androidx.ui.layout.LayoutSize
 import androidx.ui.material.ripple.Ripple
 import androidx.ui.res.vectorResource
+import androidx.ui.unit.dp
 
 
 @Composable
 fun VectorImageButton(@DrawableRes id: Int, onClick: () -> Unit) {
     Ripple(bounded = false) {
         Clickable(onClick = onClick) {
-            VectorImage(id = id)
+            VectorImage(id = id, modifier = LayoutSize(40.dp, 40.dp))
         }
     }
 }
 
+/* fun AppBarIcon(icon: Image, onClick: () -> Unit) {
+    Container(width = ActionIconDiameter, height = ActionIconDiameter) {
+        Ripple(bounded = false) {
+            Clickable(onClick = onClick) {
+                SimpleImage(icon)
+            }
+        }
+    }
+} */
+
 @Composable
 fun VectorImage(
     modifier: Modifier = Modifier.None, @DrawableRes id: Int,