MediaDetailsBottomSheet: update wording and dividers.

This commit is contained in:
Benoit Marty 2026-04-21 16:35:52 +02:00
parent 81e61bbbd1
commit ab5b1217ce
5 changed files with 21 additions and 12 deletions

View file

@ -46,6 +46,9 @@ import io.element.android.libraries.mediaviewer.api.MediaInfo
import io.element.android.libraries.mediaviewer.impl.R import io.element.android.libraries.mediaviewer.impl.R
import io.element.android.libraries.ui.strings.CommonStrings import io.element.android.libraries.ui.strings.CommonStrings
/**
* Ref: https://www.figma.com/design/pDlJZGBsri47FNTXMnEdXB/Compound-Android-Templates?node-id=2229-149220
*/
@OptIn(ExperimentalMaterial3Api::class) @OptIn(ExperimentalMaterial3Api::class)
@Composable @Composable
fun MediaDetailsBottomSheet( fun MediaDetailsBottomSheet(
@ -99,6 +102,7 @@ fun MediaDetailsBottomSheet(
onViewInTimeline(state.eventId) onViewInTimeline(state.eventId)
} }
) )
HorizontalDivider()
ListItem( ListItem(
leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.ShareAndroid())), leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.ShareAndroid())),
headlineContent = { Text(stringResource(CommonStrings.action_share)) }, headlineContent = { Text(stringResource(CommonStrings.action_share)) },
@ -115,9 +119,10 @@ fun MediaDetailsBottomSheet(
onForward(state.eventId) onForward(state.eventId)
} }
) )
HorizontalDivider()
ListItem( ListItem(
leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Download())), leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Download())),
headlineContent = { Text(stringResource(CommonStrings.action_save)) }, headlineContent = { Text(stringResource(CommonStrings.action_download)) },
style = ListItemStyle.Primary, style = ListItemStyle.Primary,
onClick = { onClick = {
onDownload(state.eventId) onDownload(state.eventId)
@ -127,7 +132,7 @@ fun MediaDetailsBottomSheet(
HorizontalDivider() HorizontalDivider()
ListItem( ListItem(
leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Delete())), leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Delete())),
headlineContent = { Text(stringResource(CommonStrings.action_remove)) }, headlineContent = { Text(stringResource(CommonStrings.action_delete)) },
style = ListItemStyle.Destructive, style = ListItemStyle.Destructive,
onClick = { onClick = {
onDelete(state.eventId) onDelete(state.eventId)

View file

@ -101,6 +101,9 @@ import me.saket.telephoto.zoomable.rememberZoomableState
val topAppBarHeight = 88.dp val topAppBarHeight = 88.dp
/**
* Ref: https://www.figma.com/design/pDlJZGBsri47FNTXMnEdXB/Compound-Android-Templates?node-id=3361-16623
*/
@Composable @Composable
fun MediaViewerView( fun MediaViewerView(
state: MediaViewerState, state: MediaViewerState,
@ -537,7 +540,7 @@ private fun MediaViewerTopBar(
) { ) {
Icon( Icon(
imageVector = CompoundIcons.Download(), imageVector = CompoundIcons.Download(),
contentDescription = stringResource(id = CommonStrings.action_save), contentDescription = stringResource(id = CommonStrings.action_download),
) )
} }
if (canShowInfo) { if (canShowInfo) {

View file

@ -72,28 +72,28 @@ class MediaDetailsBottomSheetTest {
@Test @Test
@Config(qualifiers = "h1024dp") @Config(qualifiers = "h1024dp")
fun `clicking on Save invokes expected callback`() { fun `clicking on Download invokes expected callback`() {
val state = aMediaDetailsBottomSheetState() val state = aMediaDetailsBottomSheetState()
ensureCalledOnceWithParam(state.eventId) { callback -> ensureCalledOnceWithParam(state.eventId) { callback ->
rule.setMediaDetailsBottomSheet( rule.setMediaDetailsBottomSheet(
state = state, state = state,
onDownload = callback, onDownload = callback,
) )
rule.clickOn(CommonStrings.action_save) rule.clickOn(CommonStrings.action_download)
} }
} }
@Config(qualifiers = "h1024dp") @Config(qualifiers = "h1024dp")
@Test @Test
fun `clicking on Remove invokes expected callback`() { fun `clicking on Delete invokes expected callback`() {
val state = aMediaDetailsBottomSheetState() val state = aMediaDetailsBottomSheetState()
ensureCalledOnceWithParam(state.eventId) { callback -> ensureCalledOnceWithParam(state.eventId) { callback ->
rule.setMediaDetailsBottomSheet( rule.setMediaDetailsBottomSheet(
state = state, state = state,
onDelete = callback, onDelete = callback,
) )
rule.onNodeWithText(rule.activity.getString(CommonStrings.action_remove)).assertExists() rule.onNodeWithText(rule.activity.getString(CommonStrings.action_delete)).assertExists()
rule.clickOn(CommonStrings.action_remove) rule.clickOn(CommonStrings.action_delete)
} }
} }

View file

@ -99,13 +99,13 @@ class MediaViewerViewTest {
} }
@Test @Test
fun `clicking on top action save emits expected Event`() { fun `clicking on top action download emits expected Event`() {
val data = aMediaViewerPageData( val data = aMediaViewerPageData(
downloadedMedia = AsyncData.Success(aLocalMedia(uri = mockMediaUrl)), downloadedMedia = AsyncData.Success(aLocalMedia(uri = mockMediaUrl)),
) )
testMenuAction( testMenuAction(
data, data,
CommonStrings.action_save, CommonStrings.action_download,
MediaViewerEvent.SaveOnDisk(data), MediaViewerEvent.SaveOnDisk(data),
) )
} }
@ -135,11 +135,11 @@ class MediaViewerViewTest {
@Test @Test
@Config(qualifiers = "h1024dp") @Config(qualifiers = "h1024dp")
fun `clicking on save emit expected Event`() { fun `clicking on download emit expected Event`() {
val data = aMediaViewerPageData() val data = aMediaViewerPageData()
testBottomSheetAction( testBottomSheetAction(
data, data,
CommonStrings.action_save, CommonStrings.action_download,
MediaViewerEvent.SaveOnDisk(data), MediaViewerEvent.SaveOnDisk(data),
) )
} }

View file

@ -96,6 +96,7 @@
<string name="action_discard">"Discard"</string> <string name="action_discard">"Discard"</string>
<string name="action_dismiss">"Dismiss"</string> <string name="action_dismiss">"Dismiss"</string>
<string name="action_done">"Done"</string> <string name="action_done">"Done"</string>
<string name="action_download">"Download"</string>
<string name="action_edit">"Edit"</string> <string name="action_edit">"Edit"</string>
<string name="action_edit_caption">"Edit caption"</string> <string name="action_edit_caption">"Edit caption"</string>
<string name="action_edit_poll">"Edit poll"</string> <string name="action_edit_poll">"Edit poll"</string>