Introduce SpaceMembersView.
Ref: https://www.figma.com/design/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?node-id=3729-605&m=dev
This commit is contained in:
parent
20e2cd0251
commit
31df5204a6
2 changed files with 108 additions and 0 deletions
|
|
@ -65,4 +65,5 @@ enum class AvatarSize(val dp: Dp) {
|
||||||
UserVerification(52.dp),
|
UserVerification(52.dp),
|
||||||
|
|
||||||
OrganizationHeader(64.dp),
|
OrganizationHeader(64.dp),
|
||||||
|
SpaceMember(24.dp),
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,107 @@
|
||||||
|
/*
|
||||||
|
* 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.matrix.ui.components
|
||||||
|
|
||||||
|
import androidx.compose.foundation.layout.Arrangement
|
||||||
|
import androidx.compose.foundation.layout.Row
|
||||||
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.ui.Alignment
|
||||||
|
import androidx.compose.ui.Modifier
|
||||||
|
import androidx.compose.ui.unit.dp
|
||||||
|
import io.element.android.compound.theme.ElementTheme
|
||||||
|
import io.element.android.libraries.designsystem.atomic.molecules.MembersCountMolecule
|
||||||
|
import io.element.android.libraries.designsystem.components.avatar.AvatarData
|
||||||
|
import io.element.android.libraries.designsystem.components.avatar.AvatarRow
|
||||||
|
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
|
||||||
|
import io.element.android.libraries.designsystem.utils.CommonDrawables
|
||||||
|
import io.element.android.libraries.matrix.api.user.MatrixUser
|
||||||
|
import io.element.android.libraries.matrix.ui.model.getAvatarData
|
||||||
|
import kotlinx.collections.immutable.ImmutableList
|
||||||
|
import kotlinx.collections.immutable.persistentListOf
|
||||||
|
import kotlinx.collections.immutable.toImmutableList
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Ref: https://www.figma.com/design/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?node-id=3729-605&m=dev
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun SpaceMembersView(
|
||||||
|
heroes: ImmutableList<MatrixUser>,
|
||||||
|
numberOfMembers: Long,
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
) {
|
||||||
|
if (heroes.isEmpty()) {
|
||||||
|
MembersCountMolecule(
|
||||||
|
memberCount = numberOfMembers,
|
||||||
|
modifier = modifier,
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
SpaceMembersWithAvatar(
|
||||||
|
heroes = heroes
|
||||||
|
.take(3)
|
||||||
|
.map {
|
||||||
|
it.getAvatarData(AvatarSize.SpaceMember)
|
||||||
|
}
|
||||||
|
.toImmutableList(),
|
||||||
|
numberOfMembers = numberOfMembers,
|
||||||
|
modifier = modifier,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Composable
|
||||||
|
private fun SpaceMembersWithAvatar(
|
||||||
|
heroes: ImmutableList<AvatarData>,
|
||||||
|
numberOfMembers: Long,
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
) {
|
||||||
|
Row(
|
||||||
|
modifier = modifier,
|
||||||
|
verticalAlignment = Alignment.CenterVertically,
|
||||||
|
horizontalArrangement = Arrangement.spacedBy(4.dp),
|
||||||
|
) {
|
||||||
|
AvatarRow(
|
||||||
|
avatarDataList = heroes,
|
||||||
|
avatarType = AvatarType.User,
|
||||||
|
lastOnTop = true,
|
||||||
|
)
|
||||||
|
Text(
|
||||||
|
text = "$numberOfMembers",
|
||||||
|
style = ElementTheme.typography.fontBodyMdRegular,
|
||||||
|
color = ElementTheme.colors.textSecondary,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Composable
|
||||||
|
@PreviewsDayNight
|
||||||
|
internal fun SpaceMembersViewNoHeroesPreview() = ElementPreview {
|
||||||
|
SpaceMembersView(
|
||||||
|
heroes = persistentListOf(),
|
||||||
|
numberOfMembers = 123,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
@Composable
|
||||||
|
@PreviewsDayNight
|
||||||
|
internal fun SpaceMembersViewPreview() = ElementPreview(
|
||||||
|
drawableFallbackForImages = CommonDrawables.sample_avatar,
|
||||||
|
) {
|
||||||
|
SpaceMembersView(
|
||||||
|
heroes = persistentListOf(
|
||||||
|
aMatrixUser(id = "1", displayName = "Alice", avatarUrl = "aUrl"),
|
||||||
|
aMatrixUser(id = "2", displayName = "Bob"),
|
||||||
|
aMatrixUser(id = "3", displayName = "Charlie", avatarUrl = "aUrl"),
|
||||||
|
aMatrixUser(id = "4", displayName = "Dave"),
|
||||||
|
),
|
||||||
|
numberOfMembers = 123,
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue