From 0f1a19aeaef51abb3322277cb6d1d6544d876172 Mon Sep 17 00:00:00 2001 From: geeksville Date: Mon, 17 Feb 2020 12:55:48 -0800 Subject: [PATCH] user usericons --- TODO.md | 1 + .../java/com/geeksville/mesh/ui/Messages.kt | 33 ++++++++--------- .../com/geeksville/mesh/ui/NodeInfoCard.kt | 12 +++---- .../java/com/geeksville/mesh/ui/UserIcon.kt | 36 +++++++++++++++++++ 4 files changed, 58 insertions(+), 24 deletions(-) create mode 100644 app/src/main/java/com/geeksville/mesh/ui/UserIcon.kt diff --git a/TODO.md b/TODO.md index 1d9170756..bbd23134b 100644 --- a/TODO.md +++ b/TODO.md @@ -8,6 +8,7 @@ MVP features required for first public alpha * let user set name and shortname * take video +* show pointer arrow on the outside of the user icons, always pointing towoards them * stop scan when we start the service * set the radio by using the service * startforegroundservice only if we have a valid radio diff --git a/app/src/main/java/com/geeksville/mesh/ui/Messages.kt b/app/src/main/java/com/geeksville/mesh/ui/Messages.kt index a828785ab..0cf9c6e4d 100644 --- a/app/src/main/java/com/geeksville/mesh/ui/Messages.kt +++ b/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) ) { diff --git a/app/src/main/java/com/geeksville/mesh/ui/NodeInfoCard.kt b/app/src/main/java/com/geeksville/mesh/ui/NodeInfoCard.kt index 67e4c4843..efd63658e 100644 --- a/app/src/main/java/com/geeksville/mesh/ui/NodeInfoCard.kt +++ b/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) } } diff --git a/app/src/main/java/com/geeksville/mesh/ui/UserIcon.kt b/app/src/main/java/com/geeksville/mesh/ui/UserIcon.kt new file mode 100644 index 000000000..8016b84fd --- /dev/null +++ b/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() + } +}