Extract AvatarRow to its own file
This commit is contained in:
parent
905439b118
commit
f863bbc43f
2 changed files with 76 additions and 47 deletions
|
|
@ -0,0 +1,65 @@
|
||||||
|
/*
|
||||||
|
* Copyright 2024 New Vector Ltd.
|
||||||
|
*
|
||||||
|
* SPDX-License-Identifier: AGPL-3.0-only
|
||||||
|
* Please see LICENSE in the repository root for full details.
|
||||||
|
*/
|
||||||
|
|
||||||
|
package io.element.android.features.knockrequests.impl.banner
|
||||||
|
|
||||||
|
import androidx.compose.foundation.layout.Box
|
||||||
|
import androidx.compose.foundation.layout.padding
|
||||||
|
import androidx.compose.foundation.layout.size
|
||||||
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.ui.Modifier
|
||||||
|
import androidx.compose.ui.draw.drawWithContent
|
||||||
|
import androidx.compose.ui.geometry.Offset
|
||||||
|
import androidx.compose.ui.graphics.BlendMode
|
||||||
|
import androidx.compose.ui.graphics.Color
|
||||||
|
import androidx.compose.ui.graphics.CompositingStrategy
|
||||||
|
import androidx.compose.ui.graphics.graphicsLayer
|
||||||
|
import androidx.compose.ui.unit.dp
|
||||||
|
import io.element.android.libraries.designsystem.components.avatar.Avatar
|
||||||
|
import io.element.android.libraries.designsystem.components.avatar.AvatarData
|
||||||
|
|
||||||
|
@Composable
|
||||||
|
fun AvatarRow(
|
||||||
|
avatarDataList: List<AvatarData>,
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
) {
|
||||||
|
Box(
|
||||||
|
modifier = modifier,
|
||||||
|
) {
|
||||||
|
val lastItemIndex = avatarDataList.size - 1
|
||||||
|
val avatarSize = avatarDataList.firstOrNull()?.size?.dp ?: return
|
||||||
|
avatarDataList
|
||||||
|
.reversed()
|
||||||
|
.forEachIndexed { index, avatarData ->
|
||||||
|
Avatar(
|
||||||
|
modifier = Modifier
|
||||||
|
.padding(start = avatarSize / 2 * (lastItemIndex - index))
|
||||||
|
.graphicsLayer {
|
||||||
|
compositingStrategy = CompositingStrategy.Offscreen
|
||||||
|
}
|
||||||
|
.drawWithContent {
|
||||||
|
// Draw content and clear the pixels for the avatar on the left.
|
||||||
|
drawContent()
|
||||||
|
if (index < lastItemIndex) {
|
||||||
|
drawCircle(
|
||||||
|
color = Color.Black,
|
||||||
|
center = Offset(
|
||||||
|
x = 0f,
|
||||||
|
y = size.height / 2,
|
||||||
|
),
|
||||||
|
radius = avatarSize.toPx() / 2,
|
||||||
|
blendMode = BlendMode.Clear,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.size(size = avatarSize)
|
||||||
|
.padding(2.dp),
|
||||||
|
avatarData = avatarData,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -19,19 +19,12 @@ import androidx.compose.foundation.layout.Spacer
|
||||||
import androidx.compose.foundation.layout.fillMaxWidth
|
import androidx.compose.foundation.layout.fillMaxWidth
|
||||||
import androidx.compose.foundation.layout.height
|
import androidx.compose.foundation.layout.height
|
||||||
import androidx.compose.foundation.layout.padding
|
import androidx.compose.foundation.layout.padding
|
||||||
import androidx.compose.foundation.layout.size
|
|
||||||
import androidx.compose.foundation.layout.statusBarsPadding
|
import androidx.compose.foundation.layout.statusBarsPadding
|
||||||
import androidx.compose.foundation.layout.width
|
import androidx.compose.foundation.layout.width
|
||||||
import androidx.compose.material3.MaterialTheme
|
import androidx.compose.material3.MaterialTheme
|
||||||
import androidx.compose.runtime.Composable
|
import androidx.compose.runtime.Composable
|
||||||
import androidx.compose.runtime.LaunchedEffect
|
import androidx.compose.runtime.LaunchedEffect
|
||||||
import androidx.compose.ui.Modifier
|
import androidx.compose.ui.Modifier
|
||||||
import androidx.compose.ui.draw.drawWithContent
|
|
||||||
import androidx.compose.ui.geometry.Offset
|
|
||||||
import androidx.compose.ui.graphics.BlendMode
|
|
||||||
import androidx.compose.ui.graphics.Color
|
|
||||||
import androidx.compose.ui.graphics.CompositingStrategy
|
|
||||||
import androidx.compose.ui.graphics.graphicsLayer
|
|
||||||
import androidx.compose.ui.res.stringResource
|
import androidx.compose.ui.res.stringResource
|
||||||
import androidx.compose.ui.text.style.TextAlign
|
import androidx.compose.ui.text.style.TextAlign
|
||||||
import androidx.compose.ui.text.style.TextOverflow
|
import androidx.compose.ui.text.style.TextOverflow
|
||||||
|
|
@ -120,9 +113,9 @@ private fun KnockRequestsBannerContent(
|
||||||
}
|
}
|
||||||
|
|
||||||
Column(
|
Column(
|
||||||
modifier
|
modifier
|
||||||
.fillMaxWidth()
|
.fillMaxWidth()
|
||||||
.padding(all = 16.dp)
|
.padding(all = 16.dp)
|
||||||
) {
|
) {
|
||||||
Row {
|
Row {
|
||||||
KnockRequestAvatarView(
|
KnockRequestAvatarView(
|
||||||
|
|
@ -212,44 +205,15 @@ private fun KnockRequestAvatarListView(
|
||||||
knockRequests: ImmutableList<KnockRequestPresentable>,
|
knockRequests: ImmutableList<KnockRequestPresentable>,
|
||||||
modifier: Modifier = Modifier,
|
modifier: Modifier = Modifier,
|
||||||
) {
|
) {
|
||||||
val avatarSize = AvatarSize.KnockRequestBanner.dp
|
val avatars = knockRequests
|
||||||
Box(
|
.take(MAX_AVATAR_COUNT)
|
||||||
|
.map { knockRequest ->
|
||||||
|
knockRequest.getAvatarData(AvatarSize.KnockRequestBanner)
|
||||||
|
}
|
||||||
|
AvatarRow(
|
||||||
|
avatarDataList = avatars,
|
||||||
modifier = modifier,
|
modifier = modifier,
|
||||||
) {
|
)
|
||||||
knockRequests
|
|
||||||
.take(MAX_AVATAR_COUNT)
|
|
||||||
.reversed()
|
|
||||||
.let { smallReversedList ->
|
|
||||||
val lastItemIndex = smallReversedList.size - 1
|
|
||||||
smallReversedList.forEachIndexed { index, knockRequest ->
|
|
||||||
Avatar(
|
|
||||||
modifier = Modifier
|
|
||||||
.padding(start = avatarSize / 2 * (lastItemIndex - index))
|
|
||||||
.graphicsLayer {
|
|
||||||
compositingStrategy = CompositingStrategy.Offscreen
|
|
||||||
}
|
|
||||||
.drawWithContent {
|
|
||||||
// Draw content and clear the pixels for the avatar on the left.
|
|
||||||
drawContent()
|
|
||||||
if (index < lastItemIndex) {
|
|
||||||
drawCircle(
|
|
||||||
color = Color.Black,
|
|
||||||
center = Offset(
|
|
||||||
x = 0f,
|
|
||||||
y = size.height / 2,
|
|
||||||
),
|
|
||||||
radius = avatarSize.toPx() / 2,
|
|
||||||
blendMode = BlendMode.Clear,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.size(size = avatarSize)
|
|
||||||
.padding(2.dp),
|
|
||||||
avatarData = knockRequest.getAvatarData(AvatarSize.KnockRequestBanner),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@Composable
|
@Composable
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue