diff --git a/src/main/kotlin/org/briarproject/briar/desktop/contact/ContactCard.kt b/src/main/kotlin/org/briarproject/briar/desktop/contact/ContactCard.kt index a6748b3817e4fde719859d2345a3260d914315e7..ce4fa988965b10e2056124b9b470f403600ec8ac 100644 --- a/src/main/kotlin/org/briarproject/briar/desktop/contact/ContactCard.kt +++ b/src/main/kotlin/org/briarproject/briar/desktop/contact/ContactCard.kt @@ -7,8 +7,8 @@ import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.defaultMinSize import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.offset import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size @@ -19,6 +19,7 @@ import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.text.style.TextOverflow.Companion.Ellipsis import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import org.briarproject.bramble.api.contact.ContactId @@ -72,13 +73,16 @@ fun ContactCard( val briarSurfaceVar = MaterialTheme.colors.surfaceVariant Card( - modifier = Modifier.fillMaxWidth().height(HEADER_SIZE).clickable(onClick = onSel), + modifier = Modifier.fillMaxWidth().defaultMinSize(minHeight = HEADER_SIZE).clickable(onClick = onSel), shape = RoundedCornerShape(0.dp), backgroundColor = bgColor, contentColor = MaterialTheme.colors.onSurface ) { Row(horizontalArrangement = Arrangement.SpaceBetween, modifier = Modifier.padding(padding)) { - Row(modifier = Modifier.align(Alignment.CenterVertically).padding(horizontal = 16.dp)) { + Row( + modifier = Modifier.align(Alignment.CenterVertically).padding(horizontal = 16.dp) + .weight(1f, fill = false) + ) { when (contactItem) { is ContactItem -> { Box(modifier = Modifier.align(Alignment.CenterVertically)) { @@ -104,7 +108,7 @@ fun ContactCard( } if (contactItem is ContactItem) Canvas( - modifier = Modifier.padding(start = 32.dp, end = 18.dp).size(22.dp) + modifier = Modifier.padding(end = 18.dp).size(22.dp) .align(Alignment.CenterVertically), onDraw = { val size = 16.dp @@ -126,6 +130,8 @@ fun RealContactInfo(contactItem: ContactItem, modifier: Modifier = Modifier) { Text( contactItem.displayName, fontSize = 14.sp, + maxLines = 3, + overflow = Ellipsis, modifier = Modifier.align(Alignment.Start).padding(bottom = 2.dp) ) Text( @@ -144,6 +150,8 @@ fun PendingContactInfo(contactItem: PendingContactItem, modifier: Modifier = Mod Text( contactItem.displayName, fontSize = 14.sp, + maxLines = 3, + overflow = Ellipsis, modifier = Modifier.align(Alignment.Start).padding(bottom = 2.dp) ) Text( diff --git a/src/main/kotlin/org/briarproject/briar/desktop/conversation/ConversationHeader.kt b/src/main/kotlin/org/briarproject/briar/desktop/conversation/ConversationHeader.kt index 87edcda219c24910d3b5d41402fe864437640d84..3e240e9c458a86a00af54cce3588f2c8736c4777 100644 --- a/src/main/kotlin/org/briarproject/briar/desktop/conversation/ConversationHeader.kt +++ b/src/main/kotlin/org/briarproject/briar/desktop/conversation/ConversationHeader.kt @@ -1,8 +1,10 @@ package org.briarproject.briar.desktop.conversation import androidx.compose.foundation.Canvas +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding @@ -19,6 +21,7 @@ import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.drawscope.withTransform +import androidx.compose.ui.text.style.TextOverflow.Companion.Ellipsis import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import org.briarproject.briar.desktop.contact.ContactDropDown @@ -42,30 +45,40 @@ fun ConversationHeader( val outlineColor = MaterialTheme.colors.outline Box(modifier = Modifier.fillMaxWidth().height(HEADER_SIZE + 1.dp)) { - Row(modifier = Modifier.align(Alignment.Center)) { - ProfileCircle(36.dp, contactItem) - Canvas( - modifier = Modifier.align(Alignment.CenterVertically), - onDraw = { - val size = 10.dp.toPx() - withTransform({ translate(left = -6f, top = 12f) }) { - drawCircle(color = outlineColor, radius = (size + 2.dp.toPx()) / 2f) - drawCircle(color = onlineColor, radius = size / 2f) - } - } - ) - Text( - contactItem.displayName, - modifier = Modifier.align(Alignment.CenterVertically).padding(start = 12.dp), - fontSize = 20.sp - ) - } - IconButton( - onClick = { setExpanded(!isExpanded) }, - modifier = Modifier.align(Alignment.CenterEnd).padding(end = 16.dp) + Row( + horizontalArrangement = Arrangement.SpaceBetween, + modifier = Modifier.fillMaxWidth().align(Alignment.Center) ) { - Icon(Icons.Filled.MoreVert, i18n("access.contact.menu"), modifier = Modifier.size(24.dp)) - ContactDropDown(isExpanded, { setExpanded(false) }, onMakeIntroduction, onDeleteAllMessages) + Row(modifier = Modifier.fillMaxHeight().padding(start = 8.dp).weight(1f, fill = false)) { + Box(modifier = Modifier.align(Alignment.CenterVertically)) { + ProfileCircle(36.dp, contactItem) + Canvas( + modifier = Modifier, + onDraw = { + val size = 10.dp.toPx() + withTransform({ translate(left = 30f, top = 30f) }) { + drawCircle(color = outlineColor, radius = (size + 2.dp.toPx()) / 2f) + drawCircle(color = onlineColor, radius = size / 2f) + } + } + ) + } + Text( + contactItem.displayName, + modifier = Modifier.align(Alignment.CenterVertically).padding(start = 12.dp) + .weight(1f, fill = false), + maxLines = 2, + overflow = Ellipsis, + fontSize = 20.sp + ) + } + IconButton( + onClick = { setExpanded(!isExpanded) }, + modifier = Modifier.align(Alignment.CenterVertically).padding(end = 16.dp) + ) { + Icon(Icons.Filled.MoreVert, i18n("access.contact.menu"), modifier = Modifier.size(24.dp)) + ContactDropDown(isExpanded, { setExpanded(false) }, onMakeIntroduction, onDeleteAllMessages) + } } HorizontalDivider(modifier = Modifier.align(Alignment.BottomCenter)) }