android: restyle chat composer to telegram-like container
Some checks are pending
CI / test (push) Has started running
Some checks are pending
CI / test (push) Has started running
This commit is contained in:
@@ -212,3 +212,8 @@
|
||||
- Updated chat top app bar layout to Telegram-like structure: back, avatar, title, status, call action, menu action.
|
||||
- Kept load-more behavior accessible via menu placeholder action button.
|
||||
- Updated Telegram UI batch-2 checklist item for chat top app bar.
|
||||
|
||||
### Step 34 - Chat UI / composer restyling
|
||||
- Reworked chat composer into rounded Telegram-like container with emoji slot, text input, attach button, and send/voice state button.
|
||||
- Preserved send/upload state guards and existing insets handling (`navigationBarsPadding` + `imePadding`).
|
||||
- Updated Telegram UI batch-2 checklist composer-related items.
|
||||
|
||||
@@ -333,36 +333,51 @@ fun ChatScreen(
|
||||
}
|
||||
}
|
||||
|
||||
Row(
|
||||
Surface(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.navigationBarsPadding()
|
||||
.imePadding()
|
||||
.padding(horizontal = 12.dp, vertical = 8.dp),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
horizontalArrangement = Arrangement.spacedBy(8.dp),
|
||||
.padding(horizontal = 10.dp, vertical = 8.dp),
|
||||
color = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.92f),
|
||||
shape = RoundedCornerShape(22.dp),
|
||||
) {
|
||||
Button(
|
||||
onClick = onPickMedia,
|
||||
enabled = state.canSendMessages && !state.isUploadingMedia,
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(horizontal = 8.dp, vertical = 6.dp),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
horizontalArrangement = Arrangement.spacedBy(6.dp),
|
||||
) {
|
||||
Text(if (state.isUploadingMedia) "..." else "Attach")
|
||||
}
|
||||
OutlinedTextField(
|
||||
value = state.inputText,
|
||||
onValueChange = onInputChanged,
|
||||
modifier = Modifier.weight(1f),
|
||||
label = { Text("Message") },
|
||||
maxLines = 4,
|
||||
)
|
||||
Button(
|
||||
onClick = onSendClick,
|
||||
enabled = state.canSendMessages &&
|
||||
Button(
|
||||
onClick = { /* emoji placeholder */ },
|
||||
enabled = state.canSendMessages,
|
||||
) {
|
||||
Text("\uD83D\uDE03")
|
||||
}
|
||||
OutlinedTextField(
|
||||
value = state.inputText,
|
||||
onValueChange = onInputChanged,
|
||||
modifier = Modifier.weight(1f),
|
||||
placeholder = { Text("Message") },
|
||||
maxLines = 4,
|
||||
)
|
||||
Button(
|
||||
onClick = onPickMedia,
|
||||
enabled = state.canSendMessages && !state.isUploadingMedia,
|
||||
) {
|
||||
Text(if (state.isUploadingMedia) "..." else "\uD83D\uDCCE")
|
||||
}
|
||||
val canSend = state.canSendMessages &&
|
||||
!state.isSending &&
|
||||
!state.isUploadingMedia &&
|
||||
state.inputText.isNotBlank(),
|
||||
) {
|
||||
Text(if (state.isSending) "..." else "Send")
|
||||
state.inputText.isNotBlank()
|
||||
Button(
|
||||
onClick = { if (canSend) onSendClick() },
|
||||
enabled = state.canSendMessages && !state.isUploadingMedia,
|
||||
) {
|
||||
Text(if (canSend) "\u27A4" else "\uD83C\uDFA4")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -6,10 +6,10 @@
|
||||
## P0 — Chat Screen Parity (must-have)
|
||||
- [x] Top app bar чата: back + avatar + name + status + call + menu, полупрозрачная подложка на фоне обоев.
|
||||
- [x] Закреплённое сообщение блоком под app bar (2 строки, иконки pin/close, tap для перехода).
|
||||
- [ ] Message composer Telegram-стиля:
|
||||
- [ ] Полупрозрачный rounded input контейнер.
|
||||
- [ ] Иконка emoji слева, поле ввода, скрепка, кнопка отправки/голосового.
|
||||
- [ ] Корректные отступы от nav bar + IME.
|
||||
- [x] Message composer Telegram-стиля:
|
||||
- [x] Полупрозрачный rounded input контейнер.
|
||||
- [x] Иконка emoji слева, поле ввода, скрепка, кнопка отправки/голосового.
|
||||
- [x] Корректные отступы от nav bar + IME.
|
||||
- [ ] Сообщения вход/выход: плотные пузыри, время и delivery статус внизу справа.
|
||||
- [x] Reply-preview внутри outgoing bubble (вертикальная полоска, автор, snippet).
|
||||
- [x] Forwarded header в сообщении ("Переслано от ...") + мини-аватар.
|
||||
|
||||
Reference in New Issue
Block a user