mirror of
https://github.com/fromchat-messenger/app.git
synced 2026-09-22 19:15:05 +03:00
Optimize layout
This commit is contained in:
@@ -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)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
)
|
}
|
||||||
}
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user