Iterate on file attachment rendering in the timeline. Closes #6319

This commit is contained in:
Benoit Marty 2026-03-11 15:30:15 +01:00
parent c146b8772f
commit 4c8ec04954
2 changed files with 11 additions and 12 deletions

View file

@ -9,18 +9,16 @@
package io.element.android.features.messages.impl.timeline.components.event package io.element.android.features.messages.impl.timeline.components.event
import androidx.compose.foundation.background import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import io.element.android.compound.theme.ElementTheme import io.element.android.compound.theme.ElementTheme
@ -73,17 +71,17 @@ private fun TimelineItemAttachmentHeaderView(
val spacing = 8.dp val spacing = 8.dp
Row( Row(
modifier = modifier, modifier = modifier,
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(spacing),
) { ) {
Box( Box(
modifier = Modifier modifier = Modifier
.size(iconSize) .size(iconSize)
.clip(CircleShape) .background(ElementTheme.colors.bgCanvasDefault, RoundedCornerShape(4.dp)),
.background(ElementTheme.colors.bgCanvasDefault),
contentAlignment = Alignment.Center, contentAlignment = Alignment.Center,
) { ) {
icon() icon()
} }
Spacer(Modifier.width(spacing))
Column { Column {
Text( Text(
text = filename, text = filename,

View file

@ -11,20 +11,22 @@ package io.element.android.features.messages.impl.timeline.components.event
import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.rotate
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import io.element.android.compound.theme.ElementTheme import io.element.android.compound.theme.ElementTheme
import io.element.android.compound.tokens.generated.CompoundIcons
import io.element.android.features.messages.impl.timeline.components.layout.ContentAvoidingLayoutData import io.element.android.features.messages.impl.timeline.components.layout.ContentAvoidingLayoutData
import io.element.android.features.messages.impl.timeline.model.event.TimelineItemFileContent import io.element.android.features.messages.impl.timeline.model.event.TimelineItemFileContent
import io.element.android.features.messages.impl.timeline.model.event.TimelineItemFileContentProvider import io.element.android.features.messages.impl.timeline.model.event.TimelineItemFileContentProvider
import io.element.android.libraries.designsystem.icons.CompoundDrawables
import io.element.android.libraries.designsystem.preview.ElementPreview import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.theme.components.Icon import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.ui.strings.CommonStrings import io.element.android.libraries.ui.strings.CommonStrings
/**
* https://www.figma.com/design/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?node-id=2019-6477&t=2yr7kvVEdtsP4p26-4
*/
@Composable @Composable
fun TimelineItemFileView( fun TimelineItemFileView(
content: TimelineItemFileContent, content: TimelineItemFileContent,
@ -39,12 +41,11 @@ fun TimelineItemFileView(
modifier = modifier, modifier = modifier,
icon = { icon = {
Icon( Icon(
resourceId = CompoundDrawables.ic_compound_attachment, imageVector = CompoundIcons.Attachment(),
contentDescription = stringResource(CommonStrings.common_file), contentDescription = stringResource(CommonStrings.common_file),
tint = ElementTheme.colors.iconPrimary, tint = ElementTheme.colors.iconPrimary,
modifier = Modifier modifier = Modifier
.size(16.dp) .size(16.dp),
.rotate(-45f),
) )
} }
) )