android chat: refine message bubble colors and shadows
This commit is contained in:
1 parent
5c74b7cd3e
commit
c19eff67f6
2 files changed
+18
-3
No files matched your search
+11
-2
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user