fix: input style
This commit is contained in:
@@ -693,7 +693,7 @@ private fun TelegramRotateBar(
|
|||||||
/**
|
/**
|
||||||
* Telegram-style caption input bar
|
* Telegram-style caption input bar
|
||||||
* Меняет внешний вид в зависимости от состояния клавиатуры:
|
* Меняет внешний вид в зависимости от состояния клавиатуры:
|
||||||
* - Клавиатура закрыта: минимальный стиль (камера + текст + синяя стрелка)
|
* - Клавиатура закрыта: стеклянный инпут с blur эффектом (не на всю ширину)
|
||||||
* - Клавиатура открыта: полный стиль (emoji + текст + галочка)
|
* - Клавиатура открыта: полный стиль (emoji + текст + галочка)
|
||||||
*/
|
*/
|
||||||
@Composable
|
@Composable
|
||||||
@@ -705,106 +705,127 @@ private fun TelegramCaptionBar(
|
|||||||
onSend: () -> Unit
|
onSend: () -> Unit
|
||||||
) {
|
) {
|
||||||
// Анимированный переход между стилями
|
// Анимированный переход между стилями
|
||||||
val backgroundAlpha by animateFloatAsState(
|
val cornerRadius by animateDpAsState(
|
||||||
targetValue = if (isKeyboardVisible) 0.75f else 0f,
|
targetValue = if (isKeyboardVisible) 0.dp else 24.dp,
|
||||||
animationSpec = tween(200, easing = TelegramEasing),
|
animationSpec = tween(200, easing = TelegramEasing),
|
||||||
label = "background"
|
label = "corner"
|
||||||
)
|
)
|
||||||
|
|
||||||
Row(
|
val horizontalPadding by animateDpAsState(
|
||||||
|
targetValue = if (isKeyboardVisible) 0.dp else 12.dp,
|
||||||
|
animationSpec = tween(200, easing = TelegramEasing),
|
||||||
|
label = "hPadding"
|
||||||
|
)
|
||||||
|
|
||||||
|
Box(
|
||||||
modifier = Modifier
|
modifier = Modifier
|
||||||
.fillMaxWidth()
|
.fillMaxWidth()
|
||||||
.background(Color.Black.copy(alpha = backgroundAlpha))
|
.padding(horizontal = horizontalPadding)
|
||||||
.padding(horizontal = 12.dp, vertical = 10.dp),
|
.then(
|
||||||
verticalAlignment = Alignment.CenterVertically,
|
if (isKeyboardVisible) {
|
||||||
horizontalArrangement = Arrangement.spacedBy(10.dp)
|
// Клавиатура открыта - полупрозрачный черный фон на всю ширину
|
||||||
) {
|
Modifier.background(Color.Black.copy(alpha = 0.75f))
|
||||||
// Левая иконка: камера когда клавиатура закрыта, emoji когда открыта
|
} else {
|
||||||
AnimatedContent(
|
// Клавиатура закрыта - стеклянный эффект с закруглением
|
||||||
targetState = isKeyboardVisible,
|
Modifier
|
||||||
transitionSpec = {
|
.clip(RoundedCornerShape(cornerRadius))
|
||||||
fadeIn(tween(150)) togetherWith fadeOut(tween(150))
|
.background(Color(0xFF2C2C2E).copy(alpha = 0.85f))
|
||||||
},
|
|
||||||
label = "left_icon"
|
|
||||||
) { keyboardOpen ->
|
|
||||||
if (keyboardOpen) {
|
|
||||||
// Клавиатура открыта - emoji иконка
|
|
||||||
Icon(
|
|
||||||
TablerIcons.MoodSmile,
|
|
||||||
contentDescription = "Emoji",
|
|
||||||
tint = Color.White.copy(alpha = 0.7f),
|
|
||||||
modifier = Modifier.size(26.dp)
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
// Клавиатура закрыта - камера иконка
|
|
||||||
Icon(
|
|
||||||
TablerIcons.Camera,
|
|
||||||
contentDescription = "Camera",
|
|
||||||
tint = Color.White.copy(alpha = 0.7f),
|
|
||||||
modifier = Modifier.size(26.dp)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Caption text field
|
|
||||||
BasicTextField(
|
|
||||||
value = caption,
|
|
||||||
onValueChange = onCaptionChange,
|
|
||||||
modifier = Modifier.weight(1f),
|
|
||||||
textStyle = androidx.compose.ui.text.TextStyle(
|
|
||||||
color = Color.White,
|
|
||||||
fontSize = 16.sp
|
|
||||||
),
|
|
||||||
maxLines = if (isKeyboardVisible) 4 else 1,
|
|
||||||
singleLine = !isKeyboardVisible,
|
|
||||||
decorationBox = { innerTextField ->
|
|
||||||
Box {
|
|
||||||
if (caption.isEmpty()) {
|
|
||||||
Text(
|
|
||||||
"Add a caption...",
|
|
||||||
color = Color.White.copy(alpha = 0.5f),
|
|
||||||
fontSize = 16.sp
|
|
||||||
)
|
|
||||||
}
|
|
||||||
innerTextField()
|
|
||||||
}
|
}
|
||||||
}
|
)
|
||||||
)
|
.padding(horizontal = 12.dp, vertical = 10.dp)
|
||||||
|
) {
|
||||||
// Кнопка отправки
|
Row(
|
||||||
AnimatedContent(
|
modifier = Modifier.fillMaxWidth(),
|
||||||
targetState = isKeyboardVisible,
|
verticalAlignment = Alignment.CenterVertically,
|
||||||
transitionSpec = {
|
horizontalArrangement = Arrangement.spacedBy(10.dp)
|
||||||
fadeIn(tween(150)) togetherWith fadeOut(tween(150))
|
) {
|
||||||
},
|
// Левая иконка: камера когда клавиатура закрыта, emoji когда открыта
|
||||||
label = "send_button"
|
AnimatedContent(
|
||||||
) { keyboardOpen ->
|
targetState = isKeyboardVisible,
|
||||||
Box(
|
transitionSpec = {
|
||||||
modifier = Modifier
|
fadeIn(tween(150)) togetherWith fadeOut(tween(150))
|
||||||
.size(if (keyboardOpen) 32.dp else 36.dp)
|
},
|
||||||
.clip(CircleShape)
|
label = "left_icon"
|
||||||
.background(PrimaryBlue)
|
) { keyboardOpen ->
|
||||||
.clickable(enabled = !isSaving) { onSend() },
|
if (keyboardOpen) {
|
||||||
contentAlignment = Alignment.Center
|
// Клавиатура открыта - emoji иконка
|
||||||
) {
|
Icon(
|
||||||
if (isSaving) {
|
TablerIcons.MoodSmile,
|
||||||
CircularProgressIndicator(
|
contentDescription = "Emoji",
|
||||||
modifier = Modifier.size(if (keyboardOpen) 18.dp else 20.dp),
|
tint = Color.White.copy(alpha = 0.7f),
|
||||||
color = Color.White,
|
modifier = Modifier.size(26.dp)
|
||||||
strokeWidth = 2.dp
|
|
||||||
)
|
)
|
||||||
} else {
|
} else {
|
||||||
// Клавиатура открыта - галочка, закрыта - стрелка отправки
|
// Клавиатура закрыта - камера иконка
|
||||||
Icon(
|
Icon(
|
||||||
if (keyboardOpen) TablerIcons.Check else TablerIcons.Send,
|
TablerIcons.CameraPlus,
|
||||||
contentDescription = "Send",
|
contentDescription = "Camera",
|
||||||
tint = Color.White,
|
tint = Color.White.copy(alpha = 0.7f),
|
||||||
modifier = Modifier
|
modifier = Modifier.size(26.dp)
|
||||||
.size(if (keyboardOpen) 20.dp else 22.dp)
|
|
||||||
.then(if (!keyboardOpen) Modifier.offset(x = 1.dp) else Modifier)
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Caption text field
|
||||||
|
BasicTextField(
|
||||||
|
value = caption,
|
||||||
|
onValueChange = onCaptionChange,
|
||||||
|
modifier = Modifier.weight(1f),
|
||||||
|
textStyle = androidx.compose.ui.text.TextStyle(
|
||||||
|
color = Color.White,
|
||||||
|
fontSize = 16.sp
|
||||||
|
),
|
||||||
|
maxLines = if (isKeyboardVisible) 4 else 1,
|
||||||
|
singleLine = !isKeyboardVisible,
|
||||||
|
decorationBox = { innerTextField ->
|
||||||
|
Box {
|
||||||
|
if (caption.isEmpty()) {
|
||||||
|
Text(
|
||||||
|
"Add a caption...",
|
||||||
|
color = Color.White.copy(alpha = 0.5f),
|
||||||
|
fontSize = 16.sp
|
||||||
|
)
|
||||||
|
}
|
||||||
|
innerTextField()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// Кнопка отправки
|
||||||
|
AnimatedContent(
|
||||||
|
targetState = isKeyboardVisible,
|
||||||
|
transitionSpec = {
|
||||||
|
fadeIn(tween(150)) togetherWith fadeOut(tween(150))
|
||||||
|
},
|
||||||
|
label = "send_button"
|
||||||
|
) { keyboardOpen ->
|
||||||
|
Box(
|
||||||
|
modifier = Modifier
|
||||||
|
.size(if (keyboardOpen) 32.dp else 36.dp)
|
||||||
|
.clip(CircleShape)
|
||||||
|
.background(PrimaryBlue)
|
||||||
|
.clickable(enabled = !isSaving) { onSend() },
|
||||||
|
contentAlignment = Alignment.Center
|
||||||
|
) {
|
||||||
|
if (isSaving) {
|
||||||
|
CircularProgressIndicator(
|
||||||
|
modifier = Modifier.size(if (keyboardOpen) 18.dp else 20.dp),
|
||||||
|
color = Color.White,
|
||||||
|
strokeWidth = 2.dp
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
// Клавиатура открыта - галочка, закрыта - стрелка отправки
|
||||||
|
Icon(
|
||||||
|
if (keyboardOpen) TablerIcons.Check else TablerIcons.Send,
|
||||||
|
contentDescription = "Send",
|
||||||
|
tint = Color.White,
|
||||||
|
modifier = Modifier
|
||||||
|
.size(if (keyboardOpen) 20.dp else 22.dp)
|
||||||
|
.then(if (!keyboardOpen) Modifier.offset(x = 1.dp) else Modifier)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user