Merge pull request #6453 from element-hq/feature/bma/increaseIconSize

Increase icon size of audio and files in the timeline

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemAttachmentView.kt

@@ -19,34 +19,39 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import io.element.android.compound.theme.ElementTheme
 import io.element.android.features.messages.impl.timeline.components.layout.ContentAvoidingLayout
 import io.element.android.features.messages.impl.timeline.components.layout.ContentAvoidingLayoutData
+import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Text
 
 /**
  * package-private, you should only use TimelineItemFileView and TimelineItemAudioView.
+ * https://www.figma.com/design/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?node-id=2019-8180
  */
 @Composable
 fun TimelineItemAttachmentView(
+    icon: ImageVector,
+    iconContentDescription: String?,
     filename: String,
     fileExtensionAndSize: String,
     caption: String?,
     onContentLayoutChange: (ContentAvoidingLayoutData) -> Unit,
     modifier: Modifier = Modifier,
-    icon: (@Composable () -> Unit) = {},
 ) {
     Column(
         modifier = modifier,
     ) {
         TimelineItemAttachmentHeaderView(
+            icon = icon,
+            iconContentDescription = iconContentDescription,
             filename = filename,
             fileExtensionAndSize = fileExtensionAndSize,
             hasCaption = caption != null,
             onContentLayoutChange = onContentLayoutChange,
-            icon = icon,
         )
         if (caption != null) {
             TimelineItemAttachmentCaptionView(
@@ -60,14 +65,15 @@ fun TimelineItemAttachmentView(
 
 @Composable
 private fun TimelineItemAttachmentHeaderView(
+    icon: ImageVector,
+    iconContentDescription: String?,
     filename: String,
     fileExtensionAndSize: String,
     hasCaption: Boolean,
     onContentLayoutChange: (ContentAvoidingLayoutData) -> Unit,
     modifier: Modifier = Modifier,
-    icon: (@Composable () -> Unit),
 ) {
-    val iconSize = 32.dp
+    val iconSize = 36.dp
     val spacing = 8.dp
     Row(
         modifier = modifier,
@@ -80,7 +86,12 @@ private fun TimelineItemAttachmentHeaderView(
                 .background(ElementTheme.colors.bgCanvasDefault, RoundedCornerShape(4.dp)),
             contentAlignment = Alignment.Center,
         ) {
-            icon()
+            Icon(
+                imageVector = icon,
+                contentDescription = iconContentDescription,
+                tint = ElementTheme.colors.iconPrimary,
+                modifier = Modifier.size(24.dp),
+            )
         }
         Column {
             Text(

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemAudioView.kt

@@ -8,18 +8,14 @@
 
 package io.element.android.features.messages.impl.timeline.components.event
 
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.PreviewParameter
-import androidx.compose.ui.unit.dp
-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.model.event.TimelineItemAudioContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemAudioContentProvider
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
-import io.element.android.libraries.designsystem.theme.components.Icon
 
 @Composable
 fun TimelineItemAudioView(
@@ -28,20 +24,13 @@ fun TimelineItemAudioView(
     modifier: Modifier = Modifier,
 ) {
     TimelineItemAttachmentView(
+        icon = CompoundIcons.Audio(),
+        iconContentDescription = null,
         filename = content.filename,
         fileExtensionAndSize = content.fileExtensionAndSize,
         caption = content.caption,
         onContentLayoutChange = onContentLayoutChange,
         modifier = modifier,
-        icon = {
-            Icon(
-                imageVector = CompoundIcons.Audio(),
-                contentDescription = null,
-                tint = ElementTheme.colors.iconPrimary,
-                modifier = Modifier
-                    .size(16.dp),
-            )
-        }
     )
 }
 

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemFileView.kt

@@ -8,19 +8,15 @@
 
 package io.element.android.features.messages.impl.timeline.components.event
 
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.PreviewParameter
-import androidx.compose.ui.unit.dp
-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.model.event.TimelineItemFileContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemFileContentProvider
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
-import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.ui.strings.CommonStrings
 
 /**
@@ -33,20 +29,13 @@ fun TimelineItemFileView(
     modifier: Modifier = Modifier,
 ) {
     TimelineItemAttachmentView(
+        icon = CompoundIcons.Attachment(),
+        iconContentDescription = stringResource(CommonStrings.common_file),
         filename = content.filename,
         fileExtensionAndSize = content.fileExtensionAndSize,
         caption = content.caption,
         onContentLayoutChange = onContentLayoutChange,
         modifier = modifier,
-        icon = {
-            Icon(
-                imageVector = CompoundIcons.Attachment(),
-                contentDescription = stringResource(CommonStrings.common_file),
-                tint = ElementTheme.colors.iconPrimary,
-                modifier = Modifier
-                    .size(16.dp),
-            )
-        }
     )
 }
 

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/AttachmentThumbnail.kt

@@ -19,7 +19,6 @@ 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.draw.rotate
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.tooling.preview.PreviewParameter
@@ -95,7 +94,6 @@ fun AttachmentThumbnail(
                     Icon(
                         imageVector = CompoundIcons.Attachment(),
                         contentDescription = info.textContent,
-                        modifier = Modifier.rotate(-45f)
                     )
                 }
                 AttachmentThumbnailType.Location -> {

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/messages/reply/InReplyToView.kt

@@ -49,6 +49,9 @@ import io.element.android.libraries.matrix.ui.messages.sender.SenderName
 import io.element.android.libraries.matrix.ui.messages.sender.SenderNameMode
 import io.element.android.libraries.ui.strings.CommonStrings
 
+/**
+ * https://www.figma.com/design/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?node-id=2019-6286
+ */
 @Composable
 fun InReplyToView(
     inReplyTo: InReplyToDetails,