Browse Source

android chat: refine message bubble colors and shadows

master
evgeny 6 days ago
parent
commit
c19eff67f6
  1. 13
      tools/chatgui-android/app/src/main/java/com/utun/chat/ui/components/MessageBubble.kt
  2. 8
      tools/chatgui-android/app/src/main/java/com/utun/chat/ui/theme/Theme.kt

13
tools/chatgui-android/app/src/main/java/com/utun/chat/ui/components/MessageBubble.kt

@ -26,6 +26,8 @@ import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.focus.FocusRequester
@ -101,7 +103,7 @@ fun MessageBubble(message: Message, playbackState: ChatViewModel.PlaybackState =
onOpenFile: (Message) -> Unit = {},
onOpenImage: (Message) -> Unit = {},
onPlayVideo: (Message) -> Unit = {}) {
val bgColor = if (message.isOutgoing) ChatColors.Outgoing else ChatColors.Raised
val bgColor = if (message.isOutgoing) ChatColors.OutgoingBubble else ChatColors.IncomingBubble
val textColor = ChatColors.Text
val alignment = if (message.isOutgoing) Arrangement.End else Arrangement.Start
val minBubbleWidth = (LocalConfiguration.current.screenWidthDp / 3).dp
@ -134,7 +136,14 @@ fun MessageBubble(message: Message, playbackState: ChatViewModel.PlaybackState =
) {
Column(
modifier = Modifier
.widthIn(min = minBubbleWidth, max = if (isVoice) voiceMaxWidth else 300.dp)
.widthIn(min = minBubbleWidth, max = if (isVoice) voiceMaxWidth else 300.dp)
// Тень рисуем до clip, чтобы выступающие справа и снизу края оставались видны.
.drawBehind {
val offset = 2.dp.toPx()
val radius = 12.dp.toPx()
drawRoundRect(ChatColors.BubbleShadow, topLeft = Offset(offset, offset), size = size,
cornerRadius = CornerRadius(radius, radius))
}
.clip(RoundedCornerShape(12.dp))
.background(bgColor)
.padding(12.dp)

8
tools/chatgui-android/app/src/main/java/com/utun/chat/ui/theme/Theme.kt

@ -16,6 +16,9 @@ object ChatColors {
val Panel = Color(0xFF1B2733)
val Raised = Color(0xFF24323D)
val Outgoing = Color(0xFF214563)
val IncomingBubble = Color(0xFF161E25)
val OutgoingBubble = Color(0xFF112332)
val BubbleShadow = Color.Black.copy(alpha = 0.3f)
val Text = Color(0xFFE6EDF3)
val Secondary = Color(0xFFAEBCC8)
val Accent = Color(0xFF79B8FF)
@ -43,7 +46,10 @@ private val DarkColors = darkColorScheme(
@Composable
fun VibeChatTheme(content: @Composable () -> Unit) {
LaunchedEffect(Unit) { LogManager.addLog("INFO", "UI", "Dark theme active: screens, dialogs and message palette") }
LaunchedEffect(Unit) {
LogManager.addLog("INFO", "UI", "Dark theme active: message bubbles incoming=#161E25 outgoing=#112332 " +
"shadow=black shadow_alpha=0.3 shadow_offset_dp=2")
}
MaterialTheme(colorScheme = DarkColors) {
Surface(modifier = Modifier.fillMaxSize(), color = ChatColors.Background, content = content)
}

Loading…
Cancel
Save