Skip to content

Commit 93292e6

Browse files
committed
Add SpaceHeaderView.
1 parent d5d7ac4 commit 93292e6

File tree

2 files changed

+109
-0
lines changed
  • libraries
    • designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar
    • matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components

2 files changed

+109
-0
lines changed

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/AvatarSize.kt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,5 +65,6 @@ enum class AvatarSize(val dp: Dp) {
6565
UserVerification(52.dp),
6666

6767
OrganizationHeader(64.dp),
68+
SpaceHeader(64.dp),
6869
SpaceMember(24.dp),
6970
}
Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
/*
2+
* Copyright 2025 New Vector Ltd.
3+
*
4+
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
5+
* Please see LICENSE files in the repository root for full details.
6+
*/
7+
8+
package io.element.android.libraries.matrix.ui.components
9+
10+
import androidx.compose.foundation.layout.Arrangement
11+
import androidx.compose.foundation.layout.Column
12+
import androidx.compose.foundation.layout.fillMaxWidth
13+
import androidx.compose.foundation.layout.padding
14+
import androidx.compose.material3.Text
15+
import androidx.compose.runtime.Composable
16+
import androidx.compose.ui.Alignment
17+
import androidx.compose.ui.Modifier
18+
import androidx.compose.ui.text.style.TextAlign
19+
import androidx.compose.ui.text.style.TextOverflow
20+
import androidx.compose.ui.tooling.preview.datasource.LoremIpsum
21+
import androidx.compose.ui.unit.dp
22+
import io.element.android.compound.theme.ElementTheme
23+
import io.element.android.libraries.designsystem.components.avatar.Avatar
24+
import io.element.android.libraries.designsystem.components.avatar.AvatarData
25+
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
26+
import io.element.android.libraries.designsystem.components.avatar.AvatarType
27+
import io.element.android.libraries.designsystem.components.avatar.anAvatarData
28+
import io.element.android.libraries.designsystem.preview.ElementPreview
29+
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
30+
import io.element.android.libraries.matrix.api.room.join.JoinRule
31+
import io.element.android.libraries.matrix.api.user.MatrixUser
32+
import kotlinx.collections.immutable.ImmutableList
33+
import kotlinx.collections.immutable.persistentListOf
34+
35+
/**
36+
* Ref: https://www.figma.com/design/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?node-id=3643-2429&m=dev
37+
*/
38+
@Composable
39+
fun SpaceHeaderView(
40+
avatarData: AvatarData,
41+
name: String,
42+
topic: String,
43+
joinRule: JoinRule,
44+
heroes: ImmutableList<MatrixUser>,
45+
numberOfMembers: Long,
46+
numberOfRooms: Int,
47+
modifier: Modifier = Modifier,
48+
topicMaxLines: Int = Int.MAX_VALUE,
49+
) {
50+
Column(
51+
modifier = modifier
52+
.fillMaxWidth()
53+
.padding(top = 32.dp, bottom = 24.dp, start = 16.dp, end = 16.dp),
54+
horizontalAlignment = Alignment.CenterHorizontally,
55+
verticalArrangement = Arrangement.spacedBy(16.dp)
56+
) {
57+
Avatar(
58+
avatarData = avatarData,
59+
avatarType = AvatarType.Space(false),
60+
)
61+
Text(
62+
text = name,
63+
style = ElementTheme.typography.fontHeadingLgBold,
64+
color = ElementTheme.colors.textPrimary,
65+
textAlign = TextAlign.Center,
66+
)
67+
SpaceInfoRow(
68+
joinRule = joinRule,
69+
numberOfRooms = numberOfRooms,
70+
)
71+
SpaceMembersView(
72+
heroes = heroes,
73+
numberOfMembers = numberOfMembers,
74+
modifier = Modifier.padding(horizontal = 32.dp),
75+
)
76+
Text(
77+
text = topic,
78+
style = ElementTheme.typography.fontBodyMdRegular,
79+
color = ElementTheme.colors.textPrimary,
80+
textAlign = TextAlign.Center,
81+
maxLines = topicMaxLines,
82+
overflow = TextOverflow.Ellipsis,
83+
)
84+
}
85+
}
86+
87+
@PreviewsDayNight
88+
@Composable
89+
internal fun SpaceHeaderViewPreview() = ElementPreview {
90+
SpaceHeaderView(
91+
avatarData = anAvatarData(
92+
url = "anUrl",
93+
size = AvatarSize.SpaceHeader,
94+
),
95+
name = "Space name",
96+
topic = "Space topic: " + LoremIpsum(40).values.first(),
97+
topicMaxLines = 2,
98+
joinRule = JoinRule.Public,
99+
heroes = persistentListOf(
100+
aMatrixUser(id = "@1:d", displayName = "Alice", avatarUrl = "aUrl"),
101+
aMatrixUser(id = "@2:d", displayName = "Bob"),
102+
aMatrixUser(id = "@3:d", displayName = "Charlie", avatarUrl = "aUrl"),
103+
aMatrixUser(id = "@4:d", displayName = "Dave"),
104+
),
105+
numberOfMembers = 999,
106+
numberOfRooms = 10,
107+
)
108+
}

0 commit comments

Comments
 (0)