Optimize layout

This commit is contained in:
2025-12-25 15:43:55 +03:00
Unverified
parent b57ca01596
commit 3f4cddf781
@@ -167,110 +167,106 @@ fun ChatInput(
} }
} }
Column( Box(
Modifier.windowInsetsPadding(WindowInsets.navigationBars) modifier = Modifier
.fillMaxWidth()
.background(Color.Transparent)
.windowInsetsPadding(WindowInsets.navigationBars)
.padding(start = 8.dp, end = 8.dp, bottom = 8.dp)
) { ) {
// Input field with blur val shape = RoundedCornerShape(24.dp)
Box(
Column(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.background(Color.Transparent) .border(
.padding(horizontal = 8.dp, vertical = 8.dp) Dp.Hairline,
MaterialTheme.colorScheme.outline.copy(alpha = 0.5f),
shape
)
.clip(shape)
.hazeEffect(
state = hazeState,
style = HazeMaterials.thin()
)
) { ) {
val shape = RoundedCornerShape(24.dp) AnimatedPreviewBar(replyTo) { replyTo ->
PreviewBar(
icon = Icons.AutoMirrored.Filled.Reply,
title = "Replying to ${replyTo.username}",
subtitle = replyTo.content.take(50) + if (replyTo.content.length > 50) "..." else "",
onClose = { onClearReply() }
)
}
Column( AnimatedPreviewBar(editingMessage) { message ->
PreviewBar(
icon = Icons.Filled.Edit,
title = "Editing message",
subtitle = message.content.take(50) + if (message.content.length > 50) "..." else "",
onClose = { onClearEdit() }
)
}
OutlinedTextField(
value = text,
onValueChange = onTextChange,
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.border( .animateContentSize(),
Dp.Hairline, placeholder = {
MaterialTheme.colorScheme.outline.copy(alpha = 0.5f), Text(
shape text = stringResource(Res.string.message_placeholder),
color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.6f)
) )
.clip(shape) },
.hazeEffect( shape = shape,
state = hazeState, maxLines = 5,
style = HazeMaterials.thin() singleLine = false,
) colors = OutlinedTextFieldDefaults.colors(
) { focusedContainerColor = Color.Transparent,
AnimatedPreviewBar(replyTo) { replyTo -> unfocusedContainerColor = Color.Transparent,
PreviewBar( errorContainerColor = Color.Transparent,
icon = Icons.AutoMirrored.Filled.Reply, disabledContainerColor = Color.Transparent,
title = "Replying to ${replyTo.username}", focusedBorderColor = Color.Transparent,
subtitle = replyTo.content.take(50) + if (replyTo.content.length > 50) "..." else "", errorBorderColor = Color.Transparent,
onClose = { onClearReply() } disabledBorderColor = Color.Transparent,
) unfocusedBorderColor = Color.Transparent
} ),
trailingIcon = {
val offset = with(LocalDensity.current) { 20.dp.toPx().toInt() }
AnimatedPreviewBar(editingMessage) { message -> AnimatedVisibility(
PreviewBar( visible = text.isNotBlank(),
icon = Icons.Filled.Edit, enter = slideInHorizontally(
title = "Editing message", initialOffsetX = { it + offset },
subtitle = message.content.take(50) + if (message.content.length > 50) "..." else "", animationSpec = tween(durationMillis = 300)
onClose = { onClearEdit() } ),
) exit = slideOutHorizontally(
} targetOffsetX = { it + offset },
animationSpec = tween(durationMillis = 200)
OutlinedTextField(
value = text,
onValueChange = onTextChange,
modifier = Modifier
.fillMaxWidth()
.animateContentSize(),
placeholder = {
Text(
text = stringResource(Res.string.message_placeholder),
color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.6f)
) )
}, ) {
shape = shape, Box(Modifier.padding(end = 5.dp)) {
maxLines = 5, FilledIconButton(
singleLine = false, onClick = {
colors = OutlinedTextFieldDefaults.colors( onSend(text.trim())
focusedContainerColor = Color.Transparent, onTextChange("")
unfocusedContainerColor = Color.Transparent, typingHandler.stopTyping()
errorContainerColor = Color.Transparent, },
disabledContainerColor = Color.Transparent, modifier = Modifier.size(36.dp)
focusedBorderColor = Color.Transparent, ) {
errorBorderColor = Color.Transparent, Icon(
disabledBorderColor = Color.Transparent, imageVector = Icons.AutoMirrored.Filled.Send,
unfocusedBorderColor = Color.Transparent contentDescription = "Send",
), tint = MaterialTheme.colorScheme.onPrimary,
trailingIcon = { modifier = Modifier.size(18.dp)
val offset = with(LocalDensity.current) { 20.dp.toPx().toInt() } )
AnimatedVisibility(
visible = text.isNotBlank(),
enter = slideInHorizontally(
initialOffsetX = { it + offset },
animationSpec = tween(durationMillis = 300)
),
exit = slideOutHorizontally(
targetOffsetX = { it + offset },
animationSpec = tween(durationMillis = 200)
)
) {
Box(Modifier.padding(end = 5.dp)) {
FilledIconButton(
onClick = {
onSend(text.trim())
onTextChange("")
typingHandler.stopTyping()
},
modifier = Modifier.size(36.dp)
) {
Icon(
imageVector = Icons.AutoMirrored.Filled.Send,
contentDescription = "Send",
tint = MaterialTheme.colorScheme.onPrimary,
modifier = Modifier.size(18.dp)
)
}
} }
} }
} }
) }
} )
} }
} }
} }