Sulkta-OSS/element-x-ada
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #4923 from element-hq/feature/bma/spaceAvatar2

Browse source 
Iterate on avatar to be able to render Space avatar Part2
This commit is contained in:
Benoit Marty 2025-06-24 12:05:59 +02:00 • committed by GitHub
commit 004863208a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
56 changed files with 386 additions and 193 deletions
Download patch file Download diff file Expand all files Collapse all files

4
features/call/impl/src/main/kotlin/io/element/android/features/call/impl/ui/IncomingCallScreen.kt
View file

@ -39,6 +39,7 @@ import io.element.android.libraries.designsystem.background.OnboardingBackground
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.theme.components.Icon
@ -74,7 +75,8 @@ internal fun IncomingCallScreen(
name = notificationData.senderName,
url = notificationData.avatarUrl,
size = AvatarSize.IncomingCall,
)
),
avatarType = AvatarType.User,
)
Spacer(modifier = Modifier.height(24.dp))
Text(

2
features/createroom/impl/src/main/kotlin/io/element/android/features/createroom/impl/configureroom/ConfigureRoomView.kt
View file

@ -40,6 +40,7 @@ import io.element.android.libraries.designsystem.atomic.atoms.RoundedIconAtom
import io.element.android.libraries.designsystem.atomic.atoms.RoundedIconAtomSize
import io.element.android.libraries.designsystem.components.async.AsyncActionView
import io.element.android.libraries.designsystem.components.async.AsyncActionViewDefaults
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.components.button.BackButton
import io.element.android.libraries.designsystem.components.list.ListItemContent
@ -220,6 +221,7 @@ private fun RoomNameWithAvatar(
) {
UnsavedAvatar(
avatarUri = avatarUri,
avatarSize = AvatarSize.EditRoomDetails,
avatarType = AvatarType.Room(),
modifier = Modifier.clickable(onClick = onAvatarClick),
)

2
features/ftue/impl/src/main/kotlin/io/element/android/features/ftue/impl/notifications/NotificationsOptInView.kt
View file

@ -38,6 +38,7 @@ import io.element.android.libraries.designsystem.components.PageTitle
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.theme.components.Button
@ -149,6 +150,7 @@ private fun NotificationRow(
) {
Avatar(
avatarData = AvatarData(id = avatarColorsId, name = avatarLetter, size = AvatarSize.NotificationsOptIn),
avatarType = AvatarType.User,
)
Column(Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(12.dp)) {
Box(

57
features/knockrequests/impl/src/main/kotlin/io/element/android/features/knockrequests/impl/banner/AvatarRow.kt
View file

@ -26,6 +26,7 @@ import androidx.compose.ui.unit.dp
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.text.toPx
@ -36,6 +37,7 @@ import kotlinx.collections.immutable.toImmutableList
* Draw a row of avatars (they must all have the same size), from start to end.
* @param avatarDataList the avatars to render. Note: they will all be rendered, the caller may
* want to limit the list size
* @param avatarType the type of avatars to render
* @param modifier Jetpack Compose modifier
* @param overlapRatio the overlap ration. When 0f, avatars will render without overlap, when 1f
* only the first avatar will be visible
@ -43,6 +45,7 @@ import kotlinx.collections.immutable.toImmutableList
@Composable
fun AvatarRow(
avatarDataList: ImmutableList<AvatarData>,
avatarType: AvatarType,
modifier: Modifier = Modifier,
overlapRatio: Float = 0.5f,
) {
@ -58,35 +61,36 @@ fun AvatarRow(
.forEachIndexed { index, avatarData ->
Avatar(
modifier = Modifier
.padding(start = avatarSize * (1 - overlapRatio) * (lastItemIndex - index))
.graphicsLayer {
compositingStrategy = CompositingStrategy.Offscreen
.padding(start = avatarSize * (1 - overlapRatio) * (lastItemIndex - index))
.graphicsLayer {
compositingStrategy = CompositingStrategy.Offscreen
}
.drawWithContent {
// Draw content and clear the pixels for the avatar on the left (right in RTL).
drawContent()
val xOffset = if (isRtl) {
size.width - avatarSizePx * (overlapRatio - 0.5f)
} else {
0f + avatarSizePx * (overlapRatio - 0.5f)
}
.drawWithContent {
// Draw content and clear the pixels for the avatar on the left (right in RTL).
drawContent()
val xOffset = if (isRtl) {
size.width - avatarSizePx * (overlapRatio - 0.5f)
} else {
0f + avatarSizePx * (overlapRatio - 0.5f)
}
if (index < lastItemIndex) {
drawCircle(
color = Color.Black,
center = Offset(
x = xOffset,
y = size.height / 2,
),
radius = avatarSizePx / 2,
blendMode = BlendMode.Clear,
)
}
if (index < lastItemIndex) {
drawCircle(
color = Color.Black,
center = Offset(
x = xOffset,
y = size.height / 2,
),
radius = avatarSizePx / 2,
blendMode = BlendMode.Clear,
)
}
.size(size = avatarSize)
// Keep internal padding, it has the advantage to not reduce the size of the Avatar image,
// which is already small in our use case.
.padding(2.dp),
}
.size(size = avatarSize)
// Keep internal padding, it has the advantage to not reduce the size of the Avatar image,
// which is already small in our use case.
.padding(2.dp),
avatarData = avatarData,
avatarType = avatarType,
)
}
}
@ -122,6 +126,7 @@ private fun ContentToPreview(overlapRatio: Float) {
size = AvatarSize.RoomListItem,
)
}.toImmutableList(),
avatarType = AvatarType.User,
overlapRatio = overlapRatio,
)
}

7
features/knockrequests/impl/src/main/kotlin/io/element/android/features/knockrequests/impl/banner/KnockRequestsBannerView.kt
View file

@ -39,6 +39,7 @@ import io.element.android.libraries.designsystem.components.async.AsyncIndicator
import io.element.android.libraries.designsystem.components.async.rememberAsyncIndicatorState
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.theme.components.Button
@ -195,7 +196,10 @@ private fun KnockRequestAvatarView(
Box(modifier) {
when (knockRequests.size) {
0 -> Unit
1 -> Avatar(knockRequests.first().getAvatarData(AvatarSize.KnockRequestBanner))
1 -> Avatar(
avatarData = knockRequests.first().getAvatarData(AvatarSize.KnockRequestBanner),
avatarType = AvatarType.User,
)
else -> KnockRequestAvatarListView(knockRequests)
}
}
@ -214,6 +218,7 @@ private fun KnockRequestAvatarListView(
.toImmutableList()
AvatarRow(
avatarDataList = avatars,
avatarType = AvatarType.User,
modifier = modifier,
)
}

6
features/knockrequests/impl/src/main/kotlin/io/element/android/features/knockrequests/impl/list/KnockRequestsListView.kt
View file

@ -56,6 +56,7 @@ import io.element.android.libraries.designsystem.components.ProgressDialog
import io.element.android.libraries.designsystem.components.async.AsyncActionView
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.components.button.BackButton
import io.element.android.libraries.designsystem.components.dialogs.ConfirmationDialog
import io.element.android.libraries.designsystem.preview.ElementPreview
@ -318,7 +319,10 @@ private fun KnockRequestItem(
.fillMaxWidth()
.padding(horizontal = 16.dp, vertical = 12.dp)
) {
Avatar(knockRequest.getAvatarData(AvatarSize.KnockRequestItem))
Avatar(
avatarData = knockRequest.getAvatarData(AvatarSize.KnockRequestItem),
avatarType = AvatarType.User,
)
Spacer(modifier = Modifier.width(16.dp))
Column {
// Name and date

8
features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/actionlist/ActionListView.kt
View file

@ -74,6 +74,7 @@ import io.element.android.features.messages.impl.timeline.model.event.TimelineIt
import io.element.android.features.messages.impl.utils.messagesummary.DefaultMessageSummaryFormatter
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.components.list.ListItemContent
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@ -256,7 +257,12 @@ private fun MessageSummary(
modifier: Modifier = Modifier,
) {
val content: @Composable () -> Unit
val icon: @Composable () -> Unit = { Avatar(avatarData = event.senderAvatar.copy(size = AvatarSize.MessageActionSender)) }
val icon: @Composable () -> Unit = {
Avatar(
avatarData = event.senderAvatar.copy(size = AvatarSize.MessageActionSender),
avatarType = AvatarType.User,
)
}
val contentStyle = ElementTheme.typography.fontBodyMdRegular.copy(color = ElementTheme.colors.textSecondary)
@Composable

6
features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemCallNotifyView.kt
View file

@ -33,6 +33,7 @@ import io.element.android.features.messages.impl.timeline.model.event.TimelineIt
import io.element.android.features.roomcall.api.RoomCallState
import io.element.android.features.roomcall.api.RoomCallStateProvider
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.text.toDp
@ -55,7 +56,10 @@ internal fun TimelineItemCallNotifyView(
horizontalArrangement = Arrangement.spacedBy(12.dp),
verticalAlignment = Alignment.CenterVertically,
) {
Avatar(avatarData = event.senderAvatar)
Avatar(
avatarData = event.senderAvatar,
avatarType = AvatarType.User,
)
Column(modifier = Modifier.weight(1f)) {
Text(
text = event.safeSenderName,

2
features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemEventRow.kt
View file

@ -76,6 +76,7 @@ import io.element.android.libraries.designsystem.colors.AvatarColorsProvider
import io.element.android.libraries.designsystem.components.EqualWidthColumn
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.swipe.SwipeableActionsState
@ -441,6 +442,7 @@ private fun MessageSenderInformation(
.clip(CircleShape)
.clickable(onClick = onClick),
avatarData = senderAvatar,
avatarType = AvatarType.User,
)
SenderName(
modifier = Modifier

6
features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/reactionsummary/ReactionSummaryView.kt
View file

@ -62,6 +62,7 @@ import io.element.android.features.messages.impl.timeline.model.AggregatedReacti
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.text.toDp
@ -249,7 +250,10 @@ private fun SenderRow(
.semantics(mergeDescendants = true) {},
verticalAlignment = Alignment.CenterVertically
) {
Avatar(avatarData)
Avatar(
avatarData = avatarData,
avatarType = AvatarType.User,
)
Column(
modifier = Modifier.padding(start = 12.dp),
) {

28
features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/receipt/TimelineItemReadReceiptView.kt
View file

@ -37,6 +37,7 @@ import io.element.android.compound.tokens.generated.CompoundIcons
import io.element.android.features.messages.impl.timeline.model.ReadReceiptData
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.components.avatar.getBestName
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@ -65,11 +66,11 @@ fun TimelineItemReadReceiptView(
ReadReceiptsAvatars(
receipts = state.receipts,
modifier = Modifier
.clip(RoundedCornerShape(4.dp))
.clickable {
onReadReceiptsClick()
}
.padding(2.dp)
.clip(RoundedCornerShape(4.dp))
.clickable {
onReadReceiptsClick()
}
.padding(2.dp)
)
}
}
@ -112,9 +113,9 @@ private fun ReadReceiptsRow(
) {
Row(
modifier = modifier
.fillMaxWidth()
.height(AvatarSize.TimelineReadReceipt.dp + 8.dp)
.padding(horizontal = 18.dp),
.fillMaxWidth()
.height(AvatarSize.TimelineReadReceipt.dp + 8.dp)
.padding(horizontal = 18.dp),
horizontalArrangement = Arrangement.End,
verticalAlignment = Alignment.CenterVertically,
) {
@ -154,15 +155,16 @@ private fun ReadReceiptsAvatars(
.forEachIndexed { index, readReceiptData ->
Box(
modifier = Modifier
.padding(end = (12.dp + avatarStrokeSize * 2) * index)
.size(size = avatarSize + avatarStrokeSize * 2)
.clip(CircleShape)
.background(avatarStrokeColor)
.zIndex(index.toFloat()),
.padding(end = (12.dp + avatarStrokeSize * 2) * index)
.size(size = avatarSize + avatarStrokeSize * 2)
.clip(CircleShape)
.background(avatarStrokeColor)
.zIndex(index.toFloat()),
contentAlignment = Alignment.Center,
) {
Avatar(
avatarData = readReceiptData.avatarData,
avatarType = AvatarType.User,
)
}
}

9
features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/user/editprofile/EditUserProfileStateProvider.kt
View file

@ -7,7 +7,9 @@
package io.element.android.features.preferences.impl.user.editprofile
import android.net.Uri
import androidx.compose.ui.tooling.preview.PreviewParameterProvider
import androidx.core.net.toUri
import io.element.android.libraries.architecture.AsyncAction
import io.element.android.libraries.matrix.api.core.UserId
import io.element.android.libraries.permissions.api.aPermissionsState
@ -17,14 +19,17 @@ open class EditUserProfileStateProvider : PreviewParameterProvider<EditUserProfi
override val values: Sequence<EditUserProfileState>
get() = sequenceOf(
aEditUserProfileState(),
aEditUserProfileState(userAvatarUrl = "example://uri".toUri()),
// Add other states here
)
}
fun aEditUserProfileState() = EditUserProfileState(
fun aEditUserProfileState(
userAvatarUrl: Uri? = null,
) = EditUserProfileState(
userId = UserId("@john.doe:matrix.org"),
displayName = "John Doe",
userAvatarUrl = null,
userAvatarUrl = userAvatarUrl,
avatarActions = persistentListOf(),
saveAction = AsyncAction.Uninitialized,
saveButtonEnabled = true,

6
features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/rolesandpermissions/changeroles/ChangeRolesView.kt
View file

@ -50,6 +50,7 @@ import io.element.android.libraries.designsystem.components.async.rememberAsyncI
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.components.button.BackButton
import io.element.android.libraries.designsystem.components.dialogs.ConfirmationDialog
import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
@ -341,7 +342,10 @@ private fun MemberRow(
.padding(start = 16.dp, top = 4.dp, end = 16.dp, bottom = 4.dp),
verticalAlignment = Alignment.CenterVertically
) {
Avatar(avatarData)
Avatar(
avatarData = avatarData,
avatarType = AvatarType.User,
)
Column(
modifier = Modifier
.padding(start = 12.dp)

2
features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/components/RoomListTopBar.kt
View file

@ -48,6 +48,7 @@ import io.element.android.libraries.designsystem.atomic.atoms.RedIndicatorAtom
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.components.avatarBloom
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@ -297,6 +298,7 @@ private fun NavigationIcon(
Box {
Avatar(
avatarData = avatarData,
avatarType = AvatarType.User,
contentDescription = stringResource(CommonStrings.common_settings),
)
if (showAvatarIndicator) {

2
features/roommembermoderation/impl/src/main/kotlin/io/element/android/features/roommembermoderation/impl/RoomMemberModerationView.kt
View file

@ -38,6 +38,7 @@ import io.element.android.libraries.designsystem.components.async.AsyncIndicator
import io.element.android.libraries.designsystem.components.async.rememberAsyncIndicatorState
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.components.dialogs.ConfirmationDialog
import io.element.android.libraries.designsystem.components.dialogs.TextFieldDialog
import io.element.android.libraries.designsystem.components.list.ListItemContent
@ -223,6 +224,7 @@ private fun RoomMemberActionsBottomSheet(
) {
Avatar(
avatarData = user.getAvatarData(size = AvatarSize.RoomListManageUser),
avatarType = AvatarType.User,
modifier = Modifier
.padding(bottom = 28.dp)
.align(Alignment.CenterHorizontally)

2
features/userprofile/shared/src/main/kotlin/io/element/android/features/userprofile/shared/UserProfileHeaderSection.kt
View file

@ -30,6 +30,7 @@ import io.element.android.libraries.designsystem.atomic.molecules.MatrixBadgeRow
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.modifiers.niceClickable
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@ -61,6 +62,7 @@ fun UserProfileHeaderSection(
) {
Avatar(
avatarData = AvatarData(userId.value, userName, avatarUrl, AvatarSize.UserHeader),
avatarType = AvatarType.User,
modifier = Modifier
.clip(CircleShape)
.clickable(enabled = avatarUrl != null) { openAvatarPreview(avatarUrl!!) }

8
features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/ui/VerificationUserProfileContent.kt
View file

@ -25,6 +25,7 @@ import io.element.android.compound.theme.ElementTheme
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.theme.components.Text
@ -50,10 +51,11 @@ fun VerificationUserProfileContent(
.padding(12.dp),
verticalAlignment = Alignment.CenterVertically,
) {
Avatar(avatarData)
Avatar(
avatarData = avatarData,
avatarType = AvatarType.User,
)
Spacer(modifier = Modifier.padding(12.dp))
Column(verticalArrangement = Arrangement.spacedBy(2.dp)) {
Text(text = displayName ?: userId.value, style = ElementTheme.typography.fontBodyLgMedium, color = ElementTheme.colors.textPrimary)

6
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/molecules/ComposerAlertMolecule.kt
View file

@ -27,6 +27,7 @@ import io.element.android.compound.theme.ElementTheme
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.components.avatar.anAvatarData
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@ -72,7 +73,10 @@ fun ComposerAlertMolecule(
horizontalArrangement = Arrangement.spacedBy(16.dp)
) {
if (avatar != null) {
Avatar(avatarData = avatar)
Avatar(
avatarData = avatar,
avatarType = AvatarType.User,
)
}
Text(
text = content,

2
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/Bloom.kt
View file

@ -94,6 +94,7 @@ import io.element.android.libraries.designsystem.colors.AvatarColorsProvider
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@ -498,6 +499,7 @@ internal fun BloomPreview() {
url = "aURL",
size = AvatarSize.CurrentUserTopBar,
),
avatarType = AvatarType.User,
)
},
actions = {

37
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/Avatar.kt
View file

@ -16,6 +16,9 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import io.element.android.libraries.designsystem.components.avatar.internal.RoomAvatar
import io.element.android.libraries.designsystem.components.avatar.internal.SpaceAvatar
import io.element.android.libraries.designsystem.components.avatar.internal.UserAvatar
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup
import io.element.android.libraries.designsystem.theme.components.Text
@ -24,8 +27,8 @@ import io.element.android.libraries.designsystem.utils.CommonDrawables
@Composable
fun Avatar(
avatarData: AvatarData,
avatarType: AvatarType,
modifier: Modifier = Modifier,
avatarType: AvatarType = AvatarType.User,
contentDescription: String? = null,
// If not null, will be used instead of the size from avatarData
forcedAvatarSize: Dp? = null,
@ -38,6 +41,7 @@ fun Avatar(
avatarType = avatarType,
modifier = modifier,
hideAvatarImage = hideImage,
forcedAvatarSize = forcedAvatarSize,
contentDescription = contentDescription,
)
AvatarType.User -> UserAvatar(
@ -52,33 +56,7 @@ fun Avatar(
avatarType = avatarType,
modifier = modifier,
hideAvatarImage = hideImage,
contentDescription = contentDescription,
)
}
}
@Composable
private fun UserAvatar(
avatarData: AvatarData,
modifier: Modifier = Modifier,
contentDescription: String? = null,
forcedAvatarSize: Dp? = null,
hideImage: Boolean = false,
) {
if (avatarData.url.isNullOrBlank() || hideImage) {
InitialLetterAvatar(
avatarData = avatarData,
avatarType = AvatarType.User,
forcedAvatarSize = forcedAvatarSize,
modifier = modifier,
contentDescription = contentDescription,
)
} else {
ImageAvatar(
avatarData = avatarData,
avatarType = AvatarType.User,
forcedAvatarSize = forcedAvatarSize,
modifier = modifier,
contentDescription = contentDescription,
)
}
@ -94,7 +72,10 @@ internal fun AvatarPreview(@PreviewParameter(AvatarDataProvider::class) avatarDa
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(16.dp)
) {
Avatar(avatarData)
Avatar(
avatarData = avatarData,
avatarType = AvatarType.User,
)
Text(text = avatarData.size.name + " " + avatarData.size.dp)
}
}

2
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/AvatarDataProvider.kt
View file

@ -11,7 +11,7 @@ import androidx.compose.ui.tooling.preview.PreviewParameterProvider
open class AvatarDataProvider : PreviewParameterProvider<AvatarData> {
override val values: Sequence<AvatarData>
get() = AvatarSize.values()
get() = AvatarSize.entries
.asSequence()
.map {
sequenceOf(

18
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/AvatarShape.kt
View file

@ -11,12 +11,22 @@ import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.unit.Dp
@Composable
fun AvatarType.avatarShape(): Shape {
fun AvatarType.User.avatarShape() = CircleShape
@Composable
fun AvatarType.Room.avatarShape() = CircleShape
@Composable
fun AvatarType.Space.avatarShape(avatarSize: Dp) = RoundedCornerShape(avatarSize * 0.25f)
@Composable
fun AvatarType.avatarShape(avatarSize: Dp): Shape {
return when (this) {
is AvatarType.Space -> RoundedCornerShape(cornerSize)
is AvatarType.Room,
AvatarType.User -> CircleShape
is AvatarType.Space -> avatarShape(avatarSize)
is AvatarType.Room -> avatarShape()
is AvatarType.User -> avatarShape()
}
}

2
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/AvatarType.kt
View file

@ -8,7 +8,6 @@
package io.element.android.libraries.designsystem.components.avatar
import androidx.compose.runtime.Immutable
import androidx.compose.ui.unit.Dp
import kotlinx.collections.immutable.ImmutableList
import kotlinx.collections.immutable.persistentListOf
@ -22,7 +21,6 @@ sealed interface AvatarType {
) : AvatarType
data class Space(
val cornerSize: Dp,
val isTombstoned: Boolean = false,
) : AvatarType
}

2
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/DmAvatars.kt
View file

@ -55,6 +55,7 @@ fun DmAvatars(
// Draw user avatar and cut top end corner
Avatar(
avatarData = userAvatarData,
avatarType = AvatarType.User,
modifier = Modifier
.align(Alignment.BottomStart)
.graphicsLayer {
@ -85,6 +86,7 @@ fun DmAvatars(
// Draw other user avatar
Avatar(
avatarData = otherUserAvatarData,
avatarType = AvatarType.User,
modifier = Modifier
.align(Alignment.TopEnd)
.clip(CircleShape)

47
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/AvatarCluster.kt → libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/internal/AvatarCluster.kt
View file

@ -5,10 +5,11 @@
* Please see LICENSE files in the repository root for full details.
*/
package io.element.android.libraries.designsystem.components.avatar
package io.element.android.libraries.designsystem.components.avatar.internal
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.offset
import androidx.compose.foundation.layout.size
@ -19,6 +20,10 @@ import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.components.avatar.anAvatarData
import io.element.android.libraries.designsystem.components.avatar.avatarShape
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup
import kotlinx.collections.immutable.ImmutableList
@ -33,8 +38,8 @@ private const val MAX_AVATAR_COUNT = 4
@Composable
internal fun AvatarCluster(
avatars: ImmutableList<AvatarData>,
avatarType: AvatarType,
modifier: Modifier = Modifier,
avatarType: AvatarType = AvatarType.User,
hideAvatarImages: Boolean = false,
contentDescription: String? = null,
) {
@ -49,12 +54,13 @@ internal fun AvatarCluster(
error("Unsupported number of avatars: 0")
}
1 -> {
Avatar(
InitialOrImageAvatar(
avatarData = limitedAvatars[0],
avatarType = avatarType,
hideAvatarImage = hideAvatarImages,
avatarShape = avatarType.avatarShape(limitedAvatars[0].size.dp),
forcedAvatarSize = null,
modifier = modifier,
contentDescription = contentDescription,
hideImage = hideAvatarImages
)
}
else -> {
@ -97,11 +103,13 @@ internal fun AvatarCluster(
y = yOffset,
)
) {
Avatar(
InitialOrImageAvatar(
avatarData = heroAvatar,
hideAvatarImage = hideAvatarImages,
avatarShape = avatarType.avatarShape(heroAvatarSize),
forcedAvatarSize = heroAvatarSize,
avatarType = avatarType,
hideImage = hideAvatarImages,
modifier = Modifier,
contentDescription = contentDescription,
)
}
}
@ -113,13 +121,24 @@ internal fun AvatarCluster(
@Preview(group = PreviewGroup.Avatars)
@Composable
internal fun AvatarClusterPreview() = ElementThemedPreview {
Row(
horizontalArrangement = Arrangement.spacedBy(8.dp)
Column(
verticalArrangement = Arrangement.spacedBy(8.dp),
) {
for (ngOfAvatars in 1..5) {
AvatarCluster(
avatars = List(ngOfAvatars) { anAvatarData(it) }.toPersistentList(),
)
listOf(
AvatarType.User,
AvatarType.Room(),
AvatarType.Space(),
).forEach { avatarType ->
Row(
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
for (ngOfAvatars in 1..5) {
AvatarCluster(
avatars = List(ngOfAvatars) { anAvatarData(it) }.toPersistentList(),
avatarType = avatarType,
)
}
}
}
}
}

16
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/ImageAvatar.kt → libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/internal/ImageAvatar.kt
View file

@ -5,7 +5,7 @@
* Please see LICENSE files in the repository root for full details.
*/
package io.element.android.libraries.designsystem.components.avatar
package io.element.android.libraries.designsystem.components.avatar.internal
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
@ -14,19 +14,21 @@ import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.unit.Dp
import coil3.compose.AsyncImagePainter
import coil3.compose.SubcomposeAsyncImage
import coil3.compose.SubcomposeAsyncImageContent
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import timber.log.Timber
@Composable
internal fun ImageAvatar(
avatarData: AvatarData,
avatarType: AvatarType,
avatarShape: Shape,
forcedAvatarSize: Dp?,
modifier: Modifier = Modifier.Companion,
modifier: Modifier = Modifier,
contentDescription: String? = null,
) {
val size = forcedAvatarSize ?: avatarData.size.dp
@ -35,8 +37,8 @@ internal fun ImageAvatar(
contentDescription = contentDescription,
contentScale = ContentScale.Companion.Crop,
modifier = modifier
.size(size)
.clip(avatarType.avatarShape())
.size(size)
.clip(avatarShape)
) {
val collectedState by painter.state.collectAsState()
when (val state = collectedState) {
@ -50,14 +52,14 @@ internal fun ImageAvatar(
}
InitialLetterAvatar(
avatarData = avatarData,
avatarType = avatarType,
avatarShape = avatarShape,
forcedAvatarSize = forcedAvatarSize,
contentDescription = contentDescription,
)
}
else -> InitialLetterAvatar(
avatarData = avatarData,
avatarType = avatarType,
avatarShape = avatarShape,
forcedAvatarSize = forcedAvatarSize,
contentDescription = contentDescription,
)

10
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/InitialLetterAvatar.kt → libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/internal/InitialLetterAvatar.kt
View file

@ -5,26 +5,28 @@
* Please see LICENSE files in the repository root for full details.
*/
package io.element.android.libraries.designsystem.components.avatar
package io.element.android.libraries.designsystem.components.avatar.internal
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.unit.Dp
import io.element.android.libraries.designsystem.colors.AvatarColorsProvider
import io.element.android.libraries.designsystem.components.avatar.AvatarData
@Composable
internal fun InitialLetterAvatar(
avatarData: AvatarData,
avatarType: AvatarType,
avatarShape: Shape,
forcedAvatarSize: Dp?,
contentDescription: String?,
modifier: Modifier = Modifier.Companion,
modifier: Modifier = Modifier,
) {
val avatarColors = AvatarColorsProvider.provide(avatarData.id)
TextAvatar(
text = avatarData.initialLetter,
size = forcedAvatarSize ?: avatarData.size.dp,
avatarType = avatarType,
avatarShape = avatarShape,
colors = avatarColors,
contentDescription = contentDescription,
modifier = modifier

41
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/internal/InitialOrImageAvatar.kt Normal file
View file

@ -0,0 +1,41 @@
/*
* Copyright 2025 New Vector Ltd.
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
* Please see LICENSE files in the repository root for full details.
*/
package io.element.android.libraries.designsystem.components.avatar.internal
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.unit.Dp
import io.element.android.libraries.designsystem.components.avatar.AvatarData
@Composable
internal fun InitialOrImageAvatar(
avatarData: AvatarData,
hideAvatarImage: Boolean,
forcedAvatarSize: Dp?,
avatarShape: Shape,
contentDescription: String?,
modifier: Modifier = Modifier,
) {
when {
avatarData.url.isNullOrBlank() || hideAvatarImage -> InitialLetterAvatar(
avatarData = avatarData,
avatarShape = avatarShape,
forcedAvatarSize = forcedAvatarSize,
modifier = modifier,
contentDescription = contentDescription,
)
else -> ImageAvatar(
avatarData = avatarData,
avatarShape = avatarShape,
forcedAvatarSize = forcedAvatarSize,
modifier = modifier,
contentDescription = contentDescription,
)
}
}

38
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/RoomAvatar.kt → libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/internal/RoomAvatar.kt
View file

@ -5,10 +5,14 @@
* Please see LICENSE files in the repository root for full details.
*/
package io.element.android.libraries.designsystem.components.avatar
package io.element.android.libraries.designsystem.components.avatar.internal
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.Dp
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.components.avatar.avatarShape
@Composable
internal fun RoomAvatar(
@ -16,39 +20,33 @@ internal fun RoomAvatar(
avatarType: AvatarType.Room,
modifier: Modifier = Modifier,
hideAvatarImage: Boolean = false,
forcedAvatarSize: Dp? = null,
contentDescription: String? = null,
) {
when {
avatarType.isTombstoned -> {
TombstonedRoomAvatar(
size = avatarData.size,
size = forcedAvatarSize ?: avatarData.size.dp,
modifier = modifier,
avatarType = avatarType,
avatarShape = avatarType.avatarShape(),
contentDescription = contentDescription
)
}
avatarData.url != null || avatarType.heroes.isEmpty() -> {
if (avatarData.url.isNullOrBlank() || hideAvatarImage) {
InitialLetterAvatar(
avatarData = avatarData,
avatarType = avatarType,
modifier = modifier,
contentDescription = contentDescription,
forcedAvatarSize = null,
)
} else {
ImageAvatar(
avatarData = avatarData,
avatarType = avatarType,
forcedAvatarSize = null,
modifier = modifier,
contentDescription = contentDescription,
)
}
InitialOrImageAvatar(
avatarData = avatarData,
hideAvatarImage = hideAvatarImage,
avatarShape = avatarType.avatarShape(),
forcedAvatarSize = forcedAvatarSize,
modifier = modifier,
contentDescription = contentDescription,
)
}
else -> {
AvatarCluster(
avatars = avatarType.heroes,
// Note: even for a room avatar, we use UserAvatarType here to display the avatar of heroes
avatarType = AvatarType.User,
modifier = modifier,
hideAvatarImages = hideAvatarImage,
contentDescription = contentDescription

32
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/SpaceAvatar.kt → libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/internal/SpaceAvatar.kt
View file

@ -5,7 +5,7 @@
* Please see LICENSE files in the repository root for full details.
*/
package io.element.android.libraries.designsystem.components.avatar
package io.element.android.libraries.designsystem.components.avatar.internal
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
@ -13,37 +13,38 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.components.avatar.anAvatarData
import io.element.android.libraries.designsystem.components.avatar.avatarShape
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup
import io.element.android.libraries.designsystem.utils.CommonDrawables
@Composable
fun SpaceAvatar(
internal fun SpaceAvatar(
avatarData: AvatarData,
avatarType: AvatarType.Space,
modifier: Modifier = Modifier,
forcedAvatarSize: Dp? = null,
hideAvatarImage: Boolean = false,
contentDescription: String? = null,
) {
val size = forcedAvatarSize ?: avatarData.size.dp
when {
avatarType.isTombstoned -> TombstonedRoomAvatar(
size = avatarData.size,
avatarType = avatarType,
size = size,
avatarShape = avatarType.avatarShape(size),
modifier = modifier,
contentDescription = contentDescription,
)
avatarData.url.isNullOrBlank() || hideAvatarImage -> InitialLetterAvatar(
else -> InitialOrImageAvatar(
avatarData = avatarData,
avatarType = avatarType,
modifier = modifier,
contentDescription = contentDescription,
forcedAvatarSize = null,
)
else -> ImageAvatar(
avatarData = avatarData,
avatarType = avatarType,
forcedAvatarSize = null,
hideAvatarImage = hideAvatarImage,
avatarShape = avatarType.avatarShape(size),
forcedAvatarSize = forcedAvatarSize,
modifier = modifier,
contentDescription = contentDescription,
)
@ -62,12 +63,11 @@ internal fun SpaceAvatarPreview() =
) {
SpaceAvatar(
avatarData = anAvatarData(),
avatarType = AvatarType.Space(cornerSize = 16.dp),
avatarType = AvatarType.Space(),
)
SpaceAvatar(
avatarData = anAvatarData(),
avatarType = AvatarType.Space(
cornerSize = 16.dp,
isTombstoned = true,
),
)

13
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/TextAvatar.kt → libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/internal/TextAvatar.kt
View file

@ -5,7 +5,7 @@
* Please see LICENSE files in the repository root for full details.
*/
package io.element.android.libraries.designsystem.components.avatar
package io.element.android.libraries.designsystem.components.avatar.internal
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
@ -17,6 +17,7 @@ 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.graphics.Shape
import androidx.compose.ui.semantics.clearAndSetSemantics
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.tooling.preview.Preview
@ -25,6 +26,8 @@ import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import io.element.android.compound.theme.AvatarColors
import io.element.android.compound.theme.ElementTheme
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.components.avatar.avatarShape
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup
import io.element.android.libraries.designsystem.text.toSp
@ -36,13 +39,13 @@ internal fun TextAvatar(
size: Dp,
colors: AvatarColors,
contentDescription: String?,
avatarType: AvatarType,
avatarShape: Shape,
modifier: Modifier = Modifier,
) {
Box(
modifier
.size(size)
.clip(avatarType.avatarShape())
.clip(avatarShape)
.background(color = colors.background)
) {
val fontSize = size.toSp() / 2
@ -74,7 +77,7 @@ internal fun TextAvatarPreview() = ElementPreview {
listOf(
AvatarType.User,
AvatarType.Room(),
AvatarType.Space(8.dp),
AvatarType.Space(),
).forEach { avatarType ->
TextAvatar(
text = "AB",
@ -83,7 +86,7 @@ internal fun TextAvatarPreview() = ElementPreview {
background = ElementTheme.colors.bgSubtlePrimary,
foreground = ElementTheme.colors.iconPrimary,
),
avatarType = avatarType,
avatarShape = avatarType.avatarShape(40.dp),
contentDescription = null,
)
}

18
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/TombstonedRoomAvatar.kt → libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/internal/TombstonedRoomAvatar.kt
View file

@ -5,11 +5,15 @@
* Please see LICENSE files in the repository root for full details.
*/
package io.element.android.libraries.designsystem.components.avatar
package io.element.android.libraries.designsystem.components.avatar.internal
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import io.element.android.compound.theme.AvatarColors
import io.element.android.compound.theme.ElementTheme
import io.element.android.libraries.designsystem.preview.ElementPreview
@ -17,20 +21,20 @@ import io.element.android.libraries.designsystem.preview.PreviewGroup
@Composable
internal fun TombstonedRoomAvatar(
size: AvatarSize,
avatarType: AvatarType,
size: Dp,
avatarShape: Shape,
modifier: Modifier = Modifier,
contentDescription: String? = null,
) {
TextAvatar(
text = "!",
size = size.dp,
size = size,
colors = AvatarColors(
background = ElementTheme.colors.bgSubtlePrimary,
foreground = ElementTheme.colors.iconTertiary
),
modifier = modifier,
avatarType = avatarType,
avatarShape = avatarShape,
contentDescription = contentDescription,
)
}
@ -39,8 +43,8 @@ internal fun TombstonedRoomAvatar(
@Composable
internal fun TombstonedRoomAvatarPreview() = ElementPreview {
TombstonedRoomAvatar(
size = AvatarSize.RoomListItem,
avatarType = AvatarType.Room(),
size = 52.dp,
avatarShape = CircleShape,
contentDescription = null,
)
}

33
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/internal/UserAvatar.kt Normal file
View file

@ -0,0 +1,33 @@
/*
* Copyright 2025 New Vector Ltd.
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
* Please see LICENSE files in the repository root for full details.
*/
package io.element.android.libraries.designsystem.components.avatar.internal
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.Dp
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.components.avatar.avatarShape
@Composable
internal fun UserAvatar(
avatarData: AvatarData,
modifier: Modifier = Modifier,
contentDescription: String? = null,
forcedAvatarSize: Dp? = null,
hideImage: Boolean = false,
) {
InitialOrImageAvatar(
avatarData = avatarData,
hideAvatarImage = hideImage,
avatarShape = AvatarType.User.avatarShape(),
modifier = modifier,
contentDescription = contentDescription,
forcedAvatarSize = forcedAvatarSize,
)
}

10
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/UserAvatarPreview.kt → libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/internal/UserAvatarPreview.kt
View file

@ -5,7 +5,7 @@
* Please see LICENSE files in the repository root for full details.
*/
package io.element.android.libraries.designsystem.components.avatar
package io.element.android.libraries.designsystem.components.avatar.internal
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
@ -16,6 +16,9 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import io.element.android.compound.theme.avatarColors
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.components.avatar.anAvatarData
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.theme.components.Text
@ -33,7 +36,10 @@ internal fun UserAvatarColorsPreview() = ElementPreview {
verticalAlignment = Alignment.CenterVertically,
) {
// Note: it's OK, since the hash of "0" is 0, the hash of "1" is 1, etc.
Avatar(anAvatarData(id = "$it"))
Avatar(
avatarData = anAvatarData(id = "$it"),
avatarType = AvatarType.User,
)
Text(text = "Color index $it")
}
}

2
libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/CreateDmConfirmationBottomSheet.kt
View file

@ -25,6 +25,7 @@ import io.element.android.compound.theme.ElementTheme
import io.element.android.compound.tokens.generated.CompoundIcons
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.theme.components.Button
@ -62,6 +63,7 @@ fun CreateDmConfirmationBottomSheet(
Spacer(modifier = Modifier.height(24.dp))
Avatar(
avatarData = matrixUser.getAvatarData(AvatarSize.DmCreationConfirmation),
avatarType = AvatarType.User,
)
Spacer(modifier = Modifier.height(16.dp))
Text(

12
libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/EditableAvatarView.kt
View file

@ -13,7 +13,6 @@ import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
@ -61,7 +60,6 @@ fun EditableAvatarView(
val a11yAvatar = stringResource(CommonStrings.a11y_avatar)
Box(
modifier = Modifier
.size(avatarSize.dp)
.clickable(
interactionSource = remember { MutableInteractionSource() },
onClick = onAvatarClick,
@ -75,16 +73,20 @@ fun EditableAvatarView(
when (avatarUrl?.scheme) {
null, "mxc" -> {
Avatar(
avatarData = AvatarData(matrixId, displayName, avatarUrl?.toString(), size = avatarSize),
avatarData = AvatarData(
id = matrixId,
name = displayName,
url = avatarUrl?.toString(),
size = avatarSize,
),
avatarType = avatarType,
modifier = Modifier.fillMaxSize(),
)
}
else -> {
UnsavedAvatar(
avatarUri = avatarUrl,
avatarSize = avatarSize,
avatarType = avatarType,
modifier = Modifier.fillMaxSize(),
)
}
}

7
libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/InviteSenderView.kt
View file

@ -18,6 +18,7 @@ import io.element.android.compound.theme.ElementTheme
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.theme.components.Text
@ -35,7 +36,11 @@ fun InviteSenderView(
modifier = modifier,
) {
Box(modifier = Modifier.padding(vertical = 2.dp)) {
Avatar(avatarData = inviteSender.avatarData, hideImage = hideAvatarImage)
Avatar(
avatarData = inviteSender.avatarData,
avatarType = AvatarType.User,
hideImage = hideAvatarImage,
)
}
Text(
text = inviteSender.annotatedString(),

2
libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/MatrixUserHeader.kt
View file

@ -23,6 +23,7 @@ import androidx.compose.ui.unit.dp
import io.element.android.compound.theme.ElementTheme
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.theme.components.Text
@ -65,6 +66,7 @@ private fun MatrixUserHeaderContent(
modifier = Modifier
.padding(vertical = 12.dp),
avatarData = matrixUser.getAvatarData(size = AvatarSize.UserPreference),
avatarType = AvatarType.User,
)
Spacer(modifier = Modifier.width(16.dp))
Column(

6
libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SelectedUser.kt
View file

@ -30,6 +30,7 @@ import io.element.android.compound.theme.ElementTheme
import io.element.android.compound.tokens.generated.CompoundIcons
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.theme.components.Icon
@ -54,7 +55,10 @@ fun SelectedUser(
Column(
horizontalAlignment = Alignment.CenterHorizontally,
) {
Avatar(matrixUser.getAvatarData(size = AvatarSize.SelectedUser))
Avatar(
avatarData = matrixUser.getAvatarData(size = AvatarSize.SelectedUser),
avatarType = AvatarType.User,
)
Text(
modifier = Modifier.clipToBounds(),
text = matrixUser.getBestName(),

6
libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/UnresolvedUserRow.kt
View file

@ -27,6 +27,7 @@ import io.element.android.compound.tokens.generated.CompoundIcons
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.Text
@ -46,7 +47,10 @@ fun UnresolvedUserRow(
.padding(start = 16.dp, top = 8.dp, end = 16.dp, bottom = 8.dp),
verticalAlignment = Alignment.CenterVertically
) {
Avatar(avatarData)
Avatar(
avatarData = avatarData,
avatarType = AvatarType.User,
)
Column(
modifier = Modifier
.padding(start = 12.dp),

16
libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/UnsavedAvatar.kt
View file

@ -28,6 +28,7 @@ import androidx.compose.ui.unit.dp
import coil3.compose.AsyncImage
import coil3.request.ImageRequest
import io.element.android.compound.theme.ElementTheme
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.components.avatar.avatarShape
import io.element.android.libraries.designsystem.preview.ElementPreview
@ -43,12 +44,13 @@ import io.element.android.libraries.designsystem.theme.temporaryColorBgSpecial
@Composable
fun UnsavedAvatar(
avatarUri: Uri?,
avatarSize: AvatarSize,
avatarType: AvatarType,
modifier: Modifier = Modifier,
) {
val commonModifier = modifier
.size(70.dp)
.clip(avatarType.avatarShape())
.size(avatarSize.dp)
.clip(avatarType.avatarShape(avatarSize.dp))
if (avatarUri != null) {
val context = LocalContext.current
@ -69,7 +71,7 @@ fun UnsavedAvatar(
contentDescription = null,
modifier = Modifier
.align(Alignment.Center)
.size(40.dp),
.size(avatarSize.dp * 4 / 7),
tint = ElementTheme.colors.iconSecondary,
)
}
@ -83,9 +85,9 @@ internal fun UnsavedAvatarPreview() = ElementPreview {
modifier = Modifier.padding(8.dp),
horizontalArrangement = Arrangement.spacedBy(8.dp),
) {
UnsavedAvatar(null, AvatarType.User)
UnsavedAvatar(Uri.EMPTY, AvatarType.User)
UnsavedAvatar(null, AvatarType.Space(8.dp))
UnsavedAvatar(Uri.EMPTY, AvatarType.Space(8.dp))
UnsavedAvatar(null, AvatarSize.EditRoomDetails, AvatarType.User)
UnsavedAvatar(Uri.EMPTY, AvatarSize.EditRoomDetails, AvatarType.User)
UnsavedAvatar(null, AvatarSize.EditRoomDetails, AvatarType.Space())
UnsavedAvatar(Uri.EMPTY, AvatarSize.EditRoomDetails, AvatarType.Space())
}
}

6
libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/UserRow.kt
View file

@ -21,6 +21,7 @@ import androidx.compose.ui.unit.dp
import io.element.android.compound.theme.ElementTheme
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.theme.components.Text
@Composable
@ -38,7 +39,10 @@ internal fun UserRow(
.padding(start = 16.dp, top = 4.dp, end = 16.dp, bottom = 4.dp),
verticalAlignment = Alignment.CenterVertically
) {
Avatar(avatarData)
Avatar(
avatarData = avatarData,
avatarType = AvatarType.User,
)
Column(
modifier = Modifier
.padding(start = 12.dp)

6
libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/details/MediaDetailsBottomSheet.kt
View file

@ -29,6 +29,7 @@ import io.element.android.libraries.designsystem.colors.AvatarColorsProvider
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.components.avatar.AvatarType
import io.element.android.libraries.designsystem.components.list.ListItemContent
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@ -139,12 +140,13 @@ private fun SenderRow(
) {
val id = mediaInfo.senderId?.value ?: "@Alice:domain"
Avatar(
AvatarData(
avatarData = AvatarData(
id = id,
name = mediaInfo.senderName,
url = mediaInfo.senderAvatar,
size = AvatarSize.MediaSender,
)
),
avatarType = AvatarType.User,
)
Column(
modifier = Modifier

3
tests/uitests/src/test/snapshots/images/features.preferences.impl.user.editprofile_EditUserProfileView_Day_1_en.png Normal file
View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:69fdae3edcd02635868f209a2c1ff21ce807ffb4c6d44dcf89fb0f54e1b9c1f3
size 68396

3
tests/uitests/src/test/snapshots/images/features.preferences.impl.user.editprofile_EditUserProfileView_Night_1_en.png Normal file
View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:6da7fb8d713d5d8255593f2007edf068870dbd05225fe2c0562d197a1739b876
size 67313

3
tests/uitests/src/test/snapshots/images/libraries.designsystem.components.avatar.internal_AvatarCluster_Avatars_en.png Normal file
View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:3c7a7b64a83f68670c0c38eac2782ad5121fe18638c6a21f3b868d0cb4820c7c
size 59391

3
tests/uitests/src/test/snapshots/images/libraries.designsystem.components.avatar.internal_SpaceAvatar_Avatars_en.png Normal file
View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:57545d6b9690b892859f7bf2d2aa92d3fdc1a3ae7b4849e39cf6df10bb0dbbb4
size 8719

3
tests/uitests/src/test/snapshots/images/libraries.designsystem.components.avatar.internal_TextAvatar_Avatars_en.png Normal file
View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:def7dc550efea75745153ad0cf71c7d92905205549965ba1f192ee3612cec9c4
size 8041

0
tests/uitests/src/test/snapshots/images/libraries.designsystem.components.avatar_TombstonedRoomAvatar_Avatars_en.png → tests/uitests/src/test/snapshots/images/libraries.designsystem.components.avatar.internal_TombstonedRoomAvatar_Avatars_en.png
View file

0
tests/uitests/src/test/snapshots/images/libraries.designsystem.components.avatar_UserAvatarColors_Day_0_en.png → tests/uitests/src/test/snapshots/images/libraries.designsystem.components.avatar.internal_UserAvatarColors_Day_0_en.png
View file

0
tests/uitests/src/test/snapshots/images/libraries.designsystem.components.avatar_UserAvatarColors_Night_0_en.png → tests/uitests/src/test/snapshots/images/libraries.designsystem.components.avatar.internal_UserAvatarColors_Night_0_en.png
View file

3
tests/uitests/src/test/snapshots/images/libraries.designsystem.components.avatar_AvatarCluster_Avatars_en.png
View file

@ -1,3 +0,0 @@
version https://git-lfs.github.com/spec/v1
oid sha256:c6afcae51ee69dcdb9dbf60c8f72e55b9b07e4feb72dfba0a40ffeebed6ab681
size 25730

3
tests/uitests/src/test/snapshots/images/libraries.designsystem.components.avatar_SpaceAvatar_Avatars_en.png
View file

@ -1,3 +0,0 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d61143149a23cbb1549ee11b1ad00fd4eee16d173407bc847bde91c39cd1b5bc
size 9178

3
tests/uitests/src/test/snapshots/images/libraries.designsystem.components.avatar_TextAvatar_Avatars_en.png
View file

@ -1,3 +0,0 @@
version https://git-lfs.github.com/spec/v1
oid sha256:0b632082558328aa485712b8684016a84a9d1eaba7f96cd92b47d364e6c9169f
size 7981

4
tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_UnsavedAvatar_Day_0_en.png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:e20e9a7264a6784fbaf6525e73a07318abd27bcf025541b880fd27ac0cca4ba4
size 69466
oid sha256:82c54bb785e7c2c301109f25b59e527193e1c786fdfda1252b82702c685cfd7d
size 68516

4
tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_UnsavedAvatar_Night_0_en.png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:991318dc36c1e6b86a753241638c36adafb896f852f4d5d0e15dd251fa025311
size 68974
oid sha256:ca5be5bfe66000d7730a9405ffb2992644f638fb58b28ac3f647c0c242ed8c4d
size 68007