user usericons

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

@@ -9,10 +9,7 @@ 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.LayoutPadding
-import androidx.ui.layout.LayoutSize
-import androidx.ui.layout.Row
+import androidx.ui.layout.*
 import androidx.ui.material.Emphasis
 import androidx.ui.material.MaterialTheme
 import androidx.ui.material.ProvideEmphasis
@@ -21,7 +18,6 @@ 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.R
 import com.geeksville.mesh.ui.MessagesState.messages
 import java.text.SimpleDateFormat
 import java.util.*
@@ -58,6 +54,7 @@ val TimestampEmphasis = object : Emphasis {
     override fun emphasize(color: Color) = color.copy(alpha = 0.12f)
 }
 
+
 /**
  * A pretty version the text, with user icon to the left, name and time of arrival (copy slack look and feel)
  */
@@ -66,9 +63,9 @@ fun MessageCard(msg: TextMessage, modifier: Modifier = Modifier.None) {
 
 
     Row(modifier = modifier) {
-        VectorImage(id = R.drawable.ic_twotone_person_24, tint = palette.onSecondary)
+        UserIcon(null)
 
-        Column {
+        Column(modifier = LayoutPadding(left = 12.dp)) {
             Row {
                 val nodes = NodeDB.nodes.value
 
@@ -100,23 +97,23 @@ fun MessagesContent() {
         val sidePad = 8.dp
         val topPad = 4.dp
 
-        messages.value.forEach {
-            MessageCard(
-                it, modifier = LayoutPadding(
-                    left = sidePad,
-                    right = sidePad,
-                    top = topPad,
-                    bottom = topPad
+        Column(modifier = LayoutGravity.Start) {
+            messages.value.forEach {
+                MessageCard(
+                    it, modifier = LayoutPadding(
+                        left = sidePad,
+                        right = sidePad,
+                        top = topPad,
+                        bottom = topPad
+                    )
                 )
-            )
+            }
         }
 
         val message = state { "text message" }
-
         val backgroundColor = palette.secondary.copy(alpha = 0.12f)
-
         Surface(
-            modifier = LayoutPadding(8.dp),
+            modifier = LayoutPadding(8.dp) + LayoutSize.Min(40.dp, 40.dp) + LayoutGravity.End,
             color = backgroundColor,
             shape = RoundedCornerShape(4.dp)
         ) {

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

@@ -13,6 +13,7 @@ import com.geeksville.mesh.R
 import androidx.ui.core.Modifier as Modifier1
 
 
+/*
 @Composable
 fun NodeIcon(modifier: Modifier1 = Modifier1.None, node: NodeInfo) {
     Column {
@@ -27,6 +28,7 @@ fun NodeIcon(modifier: Modifier1 = Modifier1.None, node: NodeInfo) {
 
     }
 }
+ */
 
 @Composable
 fun CompassHeading(modifier: Modifier1 = Modifier1.None, node: NodeInfo) {
@@ -56,26 +58,24 @@ fun NodeHeading(node: NodeInfo) {
 /**
  * An info card for a node:
  *
- * on left, the icon for the user (or shortname if that is all we have)
+ * on left, the icon for the user (or shortname if that is all we have) (this includes user's distance and heading arrow)
  *
  * Middle is users fullname
  *
- * on right a compass rose with a pointer to the user and distance
- *
  */
 @Composable
 fun NodeInfoCard(node: NodeInfo) {
     // Text("Node: ${it.user?.longName}")
     Row(modifier = LayoutPadding(16.dp)) {
-        NodeIcon(
+        UserIcon(
             modifier = LayoutPadding(left = 0.dp, top = 0.dp, right = 0.dp, bottom = 0.dp),
-            node = node
+            user = node
         )
 
         NodeHeading(node)
 
         // FIXME - show compass instead
-        CompassHeading(node = node)
+        // CompassHeading(node = node)
     }
 }
 

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

@@ -0,0 +1,36 @@
+package com.geeksville.mesh.ui
+
+import androidx.compose.Composable
+import androidx.ui.core.Modifier
+import androidx.ui.core.Text
+import androidx.ui.layout.Column
+import androidx.ui.layout.LayoutGravity
+import androidx.ui.material.MaterialTheme
+import androidx.ui.tooling.preview.Preview
+import com.geeksville.mesh.NodeInfo
+import com.geeksville.mesh.R
+
+/**
+ * Show the user icon for a particular user with distance from the operator and a small pointer
+ * indicating their direction
+ */
+@Composable
+fun UserIcon(user: NodeInfo? = null, modifier: Modifier = Modifier.None) {
+    Column(modifier = modifier) {
+        VectorImage(
+            id = R.drawable.ic_twotone_person_24,
+            tint = palette.onSecondary,
+            modifier = LayoutGravity.Center
+        )
+        Text("1.2 km", modifier = LayoutGravity.Center)
+    }
+}
+
+@Preview
+@Composable
+fun previewUserIcon() {
+    // another bug? It seems modaldrawerlayout not yet supported in preview
+    MaterialTheme(colors = palette) {
+        UserIcon()
+    }
+}