Improvements to the rendering of chat headers

This commit is contained in:
Vitor Pamplona 2023-12-13 18:50:36 -05:00
parent 9ba9ddee50
commit d4f060d509
3 changed files with 44 additions and 54 deletions

View File

@ -6,6 +6,7 @@ import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.Divider
@ -45,16 +46,12 @@ fun ChannelNamePreview() {
)
},
firstRow = {
Row(verticalAlignment = Alignment.CenterVertically) {
Text("This is my author", Modifier.weight(1f))
TimeAgo(TimeUtils.now())
}
Text("This is my author", Modifier.weight(1f))
TimeAgo(TimeUtils.now())
},
secondRow = {
Row(verticalAlignment = Alignment.CenterVertically) {
Text("This is a message from this person", Modifier.weight(1f))
NewItemsBubble()
}
Text("This is a message from this person", Modifier.weight(1f))
NewItemsBubble()
},
onClick = {
}
@ -90,8 +87,8 @@ fun ChannelNamePreview() {
@Composable
fun ChatHeaderLayout(
channelPicture: @Composable () -> Unit,
firstRow: @Composable () -> Unit,
secondRow: @Composable () -> Unit,
firstRow: @Composable RowScope.() -> Unit,
secondRow: @Composable RowScope.() -> Unit,
onClick: () -> Unit
) {
Column(modifier = remember { Modifier.clickable(onClick = onClick) }) {
@ -108,11 +105,19 @@ fun ChatHeaderLayout(
Column(
modifier = Modifier.fillMaxWidth()
) {
firstRow()
Row(
verticalAlignment = Alignment.CenterVertically
) {
firstRow()
}
Spacer(modifier = Height4dpModifier)
secondRow()
Row(
verticalAlignment = Alignment.CenterVertically
) {
secondRow()
}
}
}

View File

@ -4,7 +4,6 @@ import androidx.compose.animation.Crossfade
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
@ -282,8 +281,8 @@ fun RoomNameDisplay(room: ChatroomKey, modifier: Modifier, accountViewModel: Acc
it.user.privateChatrooms[room]?.subject
}.distinctUntilChanged().observeAsState(accountViewModel.userProfile().privateChatrooms[room]?.subject)
Crossfade(targetState = roomSubject, modifier) {
if (it != null && it.isNotBlank()) {
Crossfade(targetState = roomSubject, modifier, label = "RoomNameDisplay") {
if (!it.isNullOrBlank()) {
if (room.users.size > 1) {
DisplayRoomSubject(it)
} else {
@ -465,58 +464,43 @@ fun ChannelName(
ChatHeaderLayout(
channelPicture = channelPicture,
firstRow = {
Row(
verticalAlignment = Alignment.CenterVertically
) {
FirstRow(channelTitle, channelLastTime, remember { Modifier.weight(1f) })
}
channelTitle(Modifier.weight(1f))
TimeAgo(channelLastTime)
},
secondRow = {
Row(
modifier = Modifier.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically
) {
SecondRow(channelLastContent, hasNewMessages, remember { Modifier.weight(1f) })
if (channelLastContent != null) {
Text(
channelLastContent,
color = MaterialTheme.colorScheme.grayText,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
style = LocalTextStyle.current.copy(textDirection = TextDirection.Content),
modifier = Modifier.weight(1f)
)
} else {
Text(
stringResource(R.string.referenced_event_not_found),
color = MaterialTheme.colorScheme.grayText,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
modifier = Modifier.weight(1f)
)
}
if (hasNewMessages.value) {
NewItemsBubble()
}
},
onClick = onClick
)
}
@Composable
private fun SecondRow(channelLastContent: String?, hasNewMessages: MutableState<Boolean>, modifier: Modifier) {
if (channelLastContent != null) {
Text(
channelLastContent,
color = MaterialTheme.colorScheme.grayText,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
style = LocalTextStyle.current.copy(textDirection = TextDirection.Content),
modifier = modifier
)
} else {
Text(
stringResource(R.string.referenced_event_not_found),
color = MaterialTheme.colorScheme.grayText,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
modifier = modifier
)
}
if (hasNewMessages.value) {
NewItemsBubble()
}
}
@Composable
private fun FirstRow(
channelTitle: @Composable (Modifier) -> Unit,
channelLastTime: Long?,
modifier: Modifier
) {
channelTitle(modifier)
TimeAgo(channelLastTime)
}
@Composable

View File

@ -34,6 +34,7 @@ import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.State
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
@ -254,7 +255,7 @@ fun MainScreen(
}
val bottomBarHeightPx = with(LocalDensity.current) { 50.dp.roundToPx().toFloat() }
val bottomBarOffsetHeightPx = remember { mutableStateOf(0f) }
val bottomBarOffsetHeightPx = remember { mutableFloatStateOf(0f) }
val shouldShow = remember { mutableStateOf(true) }
val nestedScrollConnection = remember {