Browse Source
* Redesign chat example * Minor typography improvements * Code cleanup * Update examples/chat/iosApp/iosApp/iosApp.swift Co-authored-by: Ivan Matkov <ivan.matkov@jetbrains.com> * Use JPG instead of PNG * Turn background in to a JPG Add raw PXD file. * Remove TEAM_ID * Move to sp sizes * Make Android text consistent with iOS variant * Prefer light color scheme to prevent unwanted text color switch * Remove PXD --------- Co-authored-by: Ivan Matkov <ivan.matkov@jetbrains.com>pull/3193/head
Sebastian Aigner
2 years ago
committed by
GitHub
15 changed files with 292 additions and 125 deletions
@ -0,0 +1,143 @@ |
|||||||
|
import androidx.compose.foundation.background |
||||||
|
import androidx.compose.foundation.layout.Arrangement |
||||||
|
import androidx.compose.foundation.layout.Box |
||||||
|
import androidx.compose.foundation.layout.Column |
||||||
|
import androidx.compose.foundation.layout.Row |
||||||
|
import androidx.compose.foundation.layout.Spacer |
||||||
|
import androidx.compose.foundation.layout.fillMaxWidth |
||||||
|
import androidx.compose.foundation.layout.padding |
||||||
|
import androidx.compose.foundation.layout.size |
||||||
|
import androidx.compose.foundation.shape.RoundedCornerShape |
||||||
|
import androidx.compose.material.MaterialTheme |
||||||
|
import androidx.compose.material.Text |
||||||
|
import androidx.compose.runtime.Composable |
||||||
|
import androidx.compose.ui.Alignment |
||||||
|
import androidx.compose.ui.Modifier |
||||||
|
import androidx.compose.ui.draw.clip |
||||||
|
import androidx.compose.ui.geometry.Size |
||||||
|
import androidx.compose.ui.graphics.Color |
||||||
|
import androidx.compose.ui.graphics.Outline |
||||||
|
import androidx.compose.ui.graphics.Path |
||||||
|
import androidx.compose.ui.graphics.Shape |
||||||
|
import androidx.compose.ui.text.font.FontWeight |
||||||
|
import androidx.compose.ui.text.style.TextAlign |
||||||
|
import androidx.compose.ui.unit.Density |
||||||
|
import androidx.compose.ui.unit.LayoutDirection |
||||||
|
import androidx.compose.ui.unit.dp |
||||||
|
import androidx.compose.ui.unit.sp |
||||||
|
|
||||||
|
@Composable |
||||||
|
fun Triangle(risingToTheRight: Boolean, background: Color) { |
||||||
|
Box( |
||||||
|
Modifier |
||||||
|
.padding(bottom = 10.dp, start = 0.dp) |
||||||
|
.clip(TriangleEdgeShape(risingToTheRight)) |
||||||
|
.background(background) |
||||||
|
.size(6.dp) |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
@Composable |
||||||
|
inline fun ChatMessage(isMyMessage: Boolean, message: Message) { |
||||||
|
Box( |
||||||
|
modifier = Modifier.fillMaxWidth(), |
||||||
|
contentAlignment = if (isMyMessage) Alignment.CenterEnd else Alignment.CenterStart |
||||||
|
) { |
||||||
|
|
||||||
|
Row(verticalAlignment = Alignment.Bottom) { |
||||||
|
if (!isMyMessage) { |
||||||
|
Column { |
||||||
|
UserPic(message.user) |
||||||
|
} |
||||||
|
Spacer(Modifier.size(2.dp)) |
||||||
|
Column { |
||||||
|
Triangle(true, ChatColors.OTHERS_MESSAGE) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
Column { |
||||||
|
Box( |
||||||
|
Modifier.clip( |
||||||
|
RoundedCornerShape( |
||||||
|
10.dp, |
||||||
|
10.dp, |
||||||
|
if (!isMyMessage) 10.dp else 0.dp, |
||||||
|
if (!isMyMessage) 0.dp else 10.dp |
||||||
|
) |
||||||
|
) |
||||||
|
.background(color = if (!isMyMessage) ChatColors.OTHERS_MESSAGE else ChatColors.MY_MESSAGE) |
||||||
|
.padding(start = 10.dp, top = 5.dp, end = 10.dp, bottom = 5.dp), |
||||||
|
) { |
||||||
|
Column { |
||||||
|
if(!isMyMessage) { |
||||||
|
Row(verticalAlignment = Alignment.Bottom) { |
||||||
|
Text( |
||||||
|
text = message.user.name, |
||||||
|
style = MaterialTheme.typography.body1.copy( |
||||||
|
fontWeight = FontWeight.SemiBold, |
||||||
|
letterSpacing = 0.sp, |
||||||
|
fontSize = 14.sp |
||||||
|
), |
||||||
|
color = message.user.color |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
Spacer(Modifier.size(3.dp)) |
||||||
|
Text( |
||||||
|
text = message.text, |
||||||
|
style = MaterialTheme.typography.body1.copy( |
||||||
|
fontSize = 18.sp, |
||||||
|
letterSpacing = 0.sp |
||||||
|
) |
||||||
|
) |
||||||
|
Spacer(Modifier.size(4.dp)) |
||||||
|
Row( |
||||||
|
horizontalArrangement = Arrangement.End, |
||||||
|
modifier = Modifier.align(Alignment.End) |
||||||
|
) { |
||||||
|
Text( |
||||||
|
text = timeToString(message.timeMs), |
||||||
|
textAlign = TextAlign.End, |
||||||
|
style = MaterialTheme.typography.subtitle1.copy(fontSize = 10.sp), |
||||||
|
color = ChatColors.TIME_TEXT |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
Box(Modifier.size(10.dp)) |
||||||
|
} |
||||||
|
if(isMyMessage) { |
||||||
|
Column { |
||||||
|
Triangle(false, ChatColors.MY_MESSAGE) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Adapted from https://stackoverflow.com/questions/65965852/jetpack-compose-create-chat-bubble-with-arrow-and-border-elevation |
||||||
|
class TriangleEdgeShape(val risingToTheRight: Boolean) : Shape { |
||||||
|
override fun createOutline( |
||||||
|
size: Size, |
||||||
|
layoutDirection: LayoutDirection, |
||||||
|
density: Density |
||||||
|
): Outline { |
||||||
|
val trianglePath = if(risingToTheRight) { |
||||||
|
Path().apply { |
||||||
|
moveTo(x = 0f, y = size.height) |
||||||
|
lineTo(x = size.width, y = 0f) |
||||||
|
lineTo(x = size.width, y = size.height) |
||||||
|
} |
||||||
|
} else { |
||||||
|
Path().apply { |
||||||
|
moveTo(x = 0f, y = 0f) |
||||||
|
lineTo(x = size.width, y = size.height) |
||||||
|
lineTo(x = 0f, y = size.height) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return Outline.Generic(path = trianglePath) |
||||||
|
} |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 468 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 17 KiB |
Loading…
Reference in new issue