clean up drawer code

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

@@ -0,0 +1,114 @@
+package com.geeksville.mesh.ui
+
+import androidx.annotation.DrawableRes
+import androidx.compose.Composable
+import androidx.ui.core.Modifier
+import androidx.ui.core.Text
+import androidx.ui.foundation.shape.corner.RoundedCornerShape
+import androidx.ui.graphics.Color
+import androidx.ui.layout.*
+import androidx.ui.material.Button
+import androidx.ui.material.Divider
+import androidx.ui.material.MaterialTheme
+import androidx.ui.material.TextButtonStyle
+import androidx.ui.material.surface.Surface
+import androidx.ui.tooling.preview.Preview
+import androidx.ui.unit.dp
+import com.geeksville.mesh.R
+
+
+@Composable
+fun AppDrawer(
+    currentScreen: ScreenInfo,
+    closeDrawer: () -> Unit
+) {
+    Column(modifier = LayoutSize.Fill) {
+        Spacer(LayoutHeight(24.dp))
+        Row(modifier = LayoutPadding(16.dp)) {
+            VectorImage(
+                id = R.drawable.ic_launcher_new_foreground,
+                tint = (MaterialTheme.colors()).primary
+            )
+            Spacer(LayoutWidth(8.dp))
+            // VectorImage(id = R.drawable.ic_launcher_new_foreground)
+        }
+        Divider(color = Color(0x14333333))
+
+        @Composable
+        fun ScreenButton(screen: ScreenInfo) {
+            DrawerButton(
+                icon = screen.icon,
+                label = screen.label,
+                isSelected = currentScreen == screen
+            ) {
+                navigateTo(screen)
+                closeDrawer()
+            }
+        }
+
+        ScreenButton(Screen.messages)
+        ScreenButton(Screen.users)
+        ScreenButton(Screen.channel)
+        ScreenButton(Screen.settings)
+    }
+}
+
+@Composable
+private fun DrawerButton(
+    modifier: Modifier = Modifier.None,
+    @DrawableRes icon: Int,
+    label: String,
+    isSelected: Boolean,
+    action: () -> Unit
+) {
+    val colors = MaterialTheme.colors()
+    val textIconColor = if (isSelected) {
+        colors.primary
+    } else {
+        colors.onSurface.copy(alpha = 0.6f)
+    }
+    val backgroundColor = if (isSelected) {
+        colors.primary.copy(alpha = 0.12f)
+    } else {
+        colors.surface
+    }
+
+    Surface(
+        modifier = modifier + LayoutPadding(
+            left = 8.dp,
+            top = 8.dp,
+            right = 8.dp,
+            bottom = 0.dp
+        ),
+        color = backgroundColor,
+        shape = RoundedCornerShape(4.dp)
+    ) {
+        Button(onClick = action, style = TextButtonStyle()) {
+            Row {
+                VectorImage(
+                    modifier = LayoutGravity.Center,
+                    id = icon,
+                    tint = textIconColor
+                )
+                Spacer(LayoutWidth(16.dp))
+                Text(
+                    text = label,
+                    style = (MaterialTheme.typography()).body2.copy(
+                        color = textIconColor
+                    ),
+                    modifier = LayoutWidth.Fill
+                )
+            }
+        }
+    }
+}
+
+
+@Preview
+@Composable
+fun previewDrawer() {
+    AppDrawer(
+        currentScreen = AppStatus.currentScreen,
+        closeDrawer = { }
+    )
+}

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

@@ -1,11 +1,9 @@
 package com.geeksville.mesh.ui
 
-import androidx.annotation.DrawableRes
 import androidx.compose.Composable
 import androidx.compose.state
 import androidx.ui.animation.Crossfade
 import androidx.ui.core.Clip
-import androidx.ui.core.Modifier
 import androidx.ui.core.Text
 import androidx.ui.core.TextField
 import androidx.ui.foundation.VerticalScroller
@@ -127,7 +125,7 @@ fun MeshApp() {
     }
 }
 
-// @Preview
+@Preview
 @Composable
 fun previewView() {
     // It seems modaldrawerlayout not yet supported in preview
@@ -136,14 +134,6 @@ fun previewView() {
     }
 }
 
-@Preview
-@Composable
-fun previewDrawer() {
-    AppDrawer(
-        currentScreen = AppStatus.currentScreen,
-        closeDrawer = { }
-    )
-}
 
 @Composable
 private fun AppContent(openDrawer: () -> Unit) {
@@ -173,89 +163,3 @@ private fun AppContent(openDrawer: () -> Unit) {
         }
     }
 }
-
-@Composable
-private fun AppDrawer(
-    currentScreen: ScreenInfo,
-    closeDrawer: () -> Unit
-) {
-    Column(modifier = LayoutSize.Fill) {
-        Spacer(LayoutHeight(24.dp))
-        Row(modifier = LayoutPadding(16.dp)) {
-            VectorImage(
-                id = R.drawable.ic_launcher_new_foreground,
-                tint = (MaterialTheme.colors()).primary
-            )
-            Spacer(LayoutWidth(8.dp))
-            // VectorImage(id = R.drawable.ic_launcher_new_foreground)
-        }
-        Divider(color = Color(0x14333333))
-
-        @Composable
-        fun ScreenButton(screen: ScreenInfo) {
-            DrawerButton(
-                icon = screen.icon,
-                label = screen.label,
-                isSelected = currentScreen == screen
-            ) {
-                navigateTo(screen)
-                closeDrawer()
-            }
-        }
-
-        ScreenButton(Screen.messages)
-        ScreenButton(Screen.users)
-        ScreenButton(Screen.channel)
-        ScreenButton(Screen.settings)
-    }
-}
-
-@Composable
-private fun DrawerButton(
-    modifier: Modifier = Modifier.None,
-    @DrawableRes icon: Int,
-    label: String,
-    isSelected: Boolean,
-    action: () -> Unit
-) {
-    val colors = MaterialTheme.colors()
-    val textIconColor = if (isSelected) {
-        colors.primary
-    } else {
-        colors.onSurface.copy(alpha = 0.6f)
-    }
-    val backgroundColor = if (isSelected) {
-        colors.primary.copy(alpha = 0.12f)
-    } else {
-        colors.surface
-    }
-
-    Surface(
-        modifier = modifier + LayoutPadding(
-            left = 8.dp,
-            top = 8.dp,
-            right = 8.dp,
-            bottom = 0.dp
-        ),
-        color = backgroundColor,
-        shape = RoundedCornerShape(4.dp)
-    ) {
-        Button(onClick = action, style = TextButtonStyle()) {
-            Row {
-                VectorImage(
-                    modifier = LayoutGravity.Center,
-                    id = icon,
-                    tint = textIconColor
-                )
-                Spacer(LayoutWidth(16.dp))
-                Text(
-                    text = label,
-                    style = (MaterialTheme.typography()).body2.copy(
-                        color = textIconColor
-                    ),
-                    modifier = LayoutWidth.Fill
-                )
-            }
-        }
-    }
-}

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

@@ -3,15 +3,13 @@ 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.layout.LayoutPadding
+import androidx.ui.layout.LayoutSize
 import androidx.ui.material.MaterialTheme
 import androidx.ui.material.darkColorPalette
 import androidx.ui.material.surface.Surface
@@ -23,7 +21,7 @@ import com.geeksville.mesh.ui.MessagesState.messages
 import java.util.*
 
 
-data class TextMessage(val date: Date, val from: String, val text: String)
+data class TextMessage(val date: Date, val from: String, val text: String, val time: Date? = null)
 
 
 object MessagesState : Logging {
@@ -39,33 +37,45 @@ object MessagesState : Logging {
 
 @Composable
 fun MessagesContent() {
-    Column {
+    Column(modifier = LayoutSize.Fill) {
 
-        Text("hi")
+        val sidePad = 8.dp
+        val topPad = 4.dp
 
         messages.value.forEach {
-            Text("Text: ${it.text}")
+            Text(
+                text = "Text: ${it.text}",
+                modifier = LayoutPadding(
+                    left = sidePad,
+                    right = sidePad,
+                    top = topPad,
+                    bottom = topPad
+                )
+            )
         }
 
         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")
-                            }
-                        )
-                    }
-                }
-            }
+
+        val colors = MaterialTheme.colors()
+        val backgroundColor = colors.surface.copy(alpha = 0.12f)
+
+        Surface(
+            modifier = LayoutPadding(8.dp),
+            color = backgroundColor,
+            shape = RoundedCornerShape(4.dp)
+        ) {
+            TextField(
+                value = message.value,
+                onValueChange = { message.value = it },
+                textStyle = TextStyle(
+                    color = colors.onSurface.copy(alpha = 0.8f)
+                ),
+                imeAction = ImeAction.Send,
+                onImeActionPerformed = {
+                    MessagesState.info("did IME action")
+                },
+                modifier = LayoutPadding(4.dp)
+            )
         }
     }
 }