diff --git a/app/src/main/java/com/geeksville/mesh/ui/contact/ContactItem.kt b/app/src/main/java/com/geeksville/mesh/ui/contact/ContactItem.kt index e344e020d..ec40b0560 100644 --- a/app/src/main/java/com/geeksville/mesh/ui/contact/ContactItem.kt +++ b/app/src/main/java/com/geeksville/mesh/ui/contact/ContactItem.kt @@ -22,10 +22,13 @@ import androidx.compose.foundation.background import androidx.compose.foundation.combinedClickable import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.IntrinsicSize import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.defaultMinSize import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape @@ -72,88 +75,118 @@ fun ContactItem( .combinedClickable(onClick = onClick, onLongClick = onLongClick) .background(color = if (selected) Color.Gray else MaterialTheme.colorScheme.background) .fillMaxWidth() - .padding(horizontal = 8.dp, vertical = 6.dp) + .padding(horizontal = 8.dp, vertical = 4.dp) .semantics { contentDescription = shortName }, shape = RoundedCornerShape(12.dp), ) { - val colors = - if (contact.nodeColors != null) { - AssistChipDefaults.assistChipColors( - labelColor = Color(contact.nodeColors.first), - containerColor = Color(contact.nodeColors.second), - ) - } else { - AssistChipDefaults.assistChipColors() - } + Column(modifier = Modifier.fillMaxWidth().padding(8.dp)) { + ContactHeader(contact = contact, channels = channels, onNodeChipClick = onNodeChipClick) - Row(modifier = Modifier.fillMaxWidth().padding(8.dp), verticalAlignment = Alignment.CenterVertically) { - AssistChip( - onClick = onNodeChipClick, - modifier = Modifier.padding(end = 8.dp).width(72.dp).semantics { contentDescription = shortName }, - label = { - Text( - text = shortName, - modifier = Modifier.fillMaxWidth(), - fontSize = MaterialTheme.typography.labelLarge.fontSize, - fontWeight = FontWeight.Normal, - textAlign = TextAlign.Center, - ) - }, - colors = colors, + ChatMetadata(modifier = Modifier.padding(top = 4.dp), contact = contact) + } + } +} + +@Composable +private fun ContactHeader( + contact: Contact, + channels: AppOnlyProtos.ChannelSet?, + modifier: Modifier = Modifier, + onNodeChipClick: () -> Unit = {}, +) { + val colors = + if (contact.nodeColors != null) { + AssistChipDefaults.assistChipColors( + labelColor = Color(contact.nodeColors.first), + containerColor = Color(contact.nodeColors.second), ) - Column(modifier = Modifier.weight(1f)) { - Row( - modifier = Modifier.fillMaxWidth(), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(8.dp), - ) { - // Show unlock icon for broadcast with default PSK - val isBroadcast = - contact.contactKey.getOrNull(1) == '^' || - contact.contactKey.endsWith("^all") || - contact.contactKey.endsWith("^broadcast") - if (isBroadcast && channels != null) { - val channelIndex = contact.contactKey[0].digitToIntOrNull() - channelIndex?.let { index -> SecurityIcon(channels, index) } - } + } else { + AssistChipDefaults.assistChipColors() + } - Text(text = longName) - Spacer(modifier = Modifier.weight(1f)) - Text( - text = lastMessageTime.orEmpty(), - color = MaterialTheme.colorScheme.onSurface, - fontSize = MaterialTheme.typography.labelLarge.fontSize, - modifier = Modifier.width(80.dp), - ) + Row(modifier = modifier.padding(0.dp), verticalAlignment = Alignment.CenterVertically) { + AssistChip( + onClick = onNodeChipClick, + modifier = + Modifier.width(IntrinsicSize.Min).height(32.dp).semantics { contentDescription = contact.shortName }, + label = { + Text( + text = contact.shortName, + modifier = Modifier.fillMaxWidth(), + style = MaterialTheme.typography.labelLarge, + textAlign = TextAlign.Center, + ) + }, + colors = colors, + ) + + // Show unlock icon for broadcast with default PSK + val isBroadcast = with(contact.contactKey) { getOrNull(1) == '^' || endsWith("^all") || endsWith("^broadcast") } + + if (isBroadcast && channels != null) { + val channelIndex = contact.contactKey[0].digitToIntOrNull() + channelIndex?.let { index -> SecurityIcon(channels, index) } + } + + Text( + modifier = Modifier.padding(start = 8.dp).weight(1f), + style = MaterialTheme.typography.bodyLarge, + fontWeight = FontWeight.Medium, + overflow = TextOverflow.Ellipsis, + maxLines = 1, + text = contact.longName, + ) + Text( + text = contact.lastMessageTime.orEmpty(), + color = MaterialTheme.colorScheme.onSurfaceVariant, + style = MaterialTheme.typography.labelSmall, + modifier = Modifier, + ) + } +} + +private const val UNREAD_MESSAGE_LIMIT = 99 + +@Composable +private fun ChatMetadata(contact: Contact, modifier: Modifier = Modifier) { + Row( + modifier = modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.SpaceBetween, + verticalAlignment = Alignment.CenterVertically, + ) { + Text( + text = contact.lastMessageText.orEmpty(), + modifier = Modifier.weight(1f), + style = MaterialTheme.typography.bodyMedium, + overflow = TextOverflow.Ellipsis, + maxLines = 2, + ) + AnimatedVisibility(visible = contact.isMuted) { + Icon( + modifier = Modifier.padding(start = 4.dp).size(20.dp), + imageVector = Icons.AutoMirrored.TwoTone.VolumeOff, + contentDescription = null, + ) + } + AnimatedVisibility(modifier = Modifier.padding(start = 4.dp), visible = contact.unreadCount > 0) { + val text = + if (contact.unreadCount > UNREAD_MESSAGE_LIMIT) { + "$UNREAD_MESSAGE_LIMIT+" + } else { + contact.unreadCount.toString() } - Row( - modifier = Modifier.fillMaxWidth().padding(top = 8.dp), - horizontalArrangement = Arrangement.SpaceBetween, - verticalAlignment = Alignment.CenterVertically, - ) { - Text( - text = lastMessageText.orEmpty(), - modifier = Modifier.weight(1f), - color = MaterialTheme.colorScheme.onSurface, - fontSize = MaterialTheme.typography.labelLarge.fontSize, - overflow = TextOverflow.Ellipsis, - maxLines = 2, - ) - AnimatedVisibility(visible = isMuted) { - Icon(imageVector = Icons.AutoMirrored.TwoTone.VolumeOff, contentDescription = null) - } - AnimatedVisibility(visible = unreadCount > 0) { - Text( - text = unreadCount.toString(), - modifier = - Modifier.background(MaterialTheme.colorScheme.primary, shape = CircleShape) - .padding(horizontal = 6.dp, vertical = 3.dp), - color = MaterialTheme.colorScheme.onPrimary, - style = MaterialTheme.typography.bodySmall, - ) - } - } - } + + Text( + text = text, + modifier = + Modifier.background(MaterialTheme.colorScheme.primary, shape = CircleShape) + .defaultMinSize(minWidth = 20.dp) + .padding(horizontal = 6.dp, vertical = 2.dp), + textAlign = TextAlign.Center, + color = MaterialTheme.colorScheme.onPrimary, + style = MaterialTheme.typography.labelSmall, + maxLines = 1, + ) } } } @@ -161,21 +194,28 @@ fun ContactItem( @PreviewLightDark @Composable private fun ContactItemPreview() { - AppTheme { - ContactItem( - contact = - Contact( - contactKey = "0^all", - shortName = stringResource(R.string.some_username), - longName = stringResource(R.string.unknown_username), - lastMessageTime = "3 minutes ago", - lastMessageText = stringResource(R.string.sample_message), - unreadCount = 2, - messageCount = 10, - isMuted = true, - isUnmessageable = false, - ), - selected = false, + val sampleContact = + Contact( + contactKey = "0^all", + shortName = stringResource(R.string.some_username), + longName = stringResource(R.string.unknown_username), + lastMessageTime = "Mon", + lastMessageText = stringResource(R.string.sample_message), + unreadCount = 2, + messageCount = 10, + isMuted = true, + isUnmessageable = false, ) - } + + val contactsList = + listOf( + sampleContact, + sampleContact.copy( + shortName = "0", + longName = "A very long contact name that should be truncated.", + lastMessageTime = "15 minutes ago", + ), + ) + + AppTheme { Column { contactsList.forEach { contact -> ContactItem(contact = contact, selected = false) } } } }