Update TimelineMediaPreviewDetailsView to match the latest design. (#5513)

Update the TimelineMediaPreviewDetailsView design.
This commit is contained in:
Doug
2026-04-29 19:34:22 +01:00
committed by GitHub
parent 63592e48c1
commit 8f815aafb2
21 changed files with 74 additions and 51 deletions
@@ -7,6 +7,7 @@
"a11y_edit_room_address_hint" = "The full address will be %1$@";
"a11y_expand_message_text_field" = "Expand message text field";
"a11y_hide_password" = "Hide password";
"a11y_info" = "Info";
"a11y_join_call" = "Join call";
"a11y_jump_to_bottom" = "Jump to bottom";
"a11y_notifications_mentions_only" = "Mentions only";
@@ -36,6 +37,7 @@
"a11y_send_files" = "Send files";
"a11y_sender_location" = "Sender location";
"a11y_session_verification_time_limited_action_required" = "Time limited action required, you have one minute to verify";
"a11y_settings_with_required_action" = "Settings, action required";
"a11y_show_password" = "Show password";
"a11y_start_call" = "Start a call";
"a11y_start_video_call" = "Start a video call";
@@ -88,6 +90,7 @@
"action_discard" = "Discard";
"action_dismiss" = "Dismiss";
"action_done" = "Done";
"action_download" = "Download";
"action_edit" = "Edit";
"action_edit_caption" = "Edit caption";
"action_edit_poll" = "Edit poll";
@@ -204,7 +207,9 @@
"common_beta" = "Beta";
"common_blocked_users" = "Blocked users";
"common_bubbles" = "Bubbles";
"common_call_declined" = "Call declined";
"common_call_started" = "Call started";
"common_call_you_declined" = "You declined a call";
"common_chat_backup" = "Chat backup";
"common_copied_to_clipboard" = "Copied to clipboard";
"common_copyright" = "Copyright";
@@ -942,10 +947,11 @@
"screen_media_browser_media_empty_state_subtitle" = "Images and videos uploaded to this room will be shown here.";
"screen_media_browser_media_empty_state_title" = "No media uploaded yet";
"screen_media_browser_title" = "Media and files";
"screen_media_details_file_format" = "File format";
"screen_media_details_filename" = "File name";
"screen_media_details_file_format" = "Format";
"screen_media_details_filename" = "Name";
"screen_media_details_no_more_files_to_show" = "No more files to show";
"screen_media_details_no_more_media_to_show" = "No more media to show";
"screen_media_details_title" = "File info";
"screen_media_details_uploaded_by" = "Uploaded by";
"screen_media_details_uploaded_on" = "Uploaded on";
"screen_media_picker_error_failed_selection" = "Failed selecting media, please try again.";
@@ -7,6 +7,7 @@
"a11y_edit_room_address_hint" = "The full address will be %1$@";
"a11y_expand_message_text_field" = "Expand message text field";
"a11y_hide_password" = "Hide password";
"a11y_info" = "Info";
"a11y_join_call" = "Join call";
"a11y_jump_to_bottom" = "Jump to bottom";
"a11y_notifications_mentions_only" = "Mentions only";
@@ -36,6 +37,7 @@
"a11y_send_files" = "Send files";
"a11y_sender_location" = "Sender location";
"a11y_session_verification_time_limited_action_required" = "Time limited action required, you have one minute to verify";
"a11y_settings_with_required_action" = "Settings, action required";
"a11y_show_password" = "Show password";
"a11y_start_call" = "Start a call";
"a11y_start_video_call" = "Start a video call";
@@ -88,6 +90,7 @@
"action_discard" = "Discard";
"action_dismiss" = "Dismiss";
"action_done" = "Done";
"action_download" = "Download";
"action_edit" = "Edit";
"action_edit_caption" = "Edit caption";
"action_edit_poll" = "Edit poll";
@@ -204,7 +207,9 @@
"common_beta" = "Beta";
"common_blocked_users" = "Blocked users";
"common_bubbles" = "Bubbles";
"common_call_declined" = "Call declined";
"common_call_started" = "Call started";
"common_call_you_declined" = "You declined a call";
"common_chat_backup" = "Chat backup";
"common_copied_to_clipboard" = "Copied to clipboard";
"common_copyright" = "Copyright";
@@ -942,10 +947,11 @@
"screen_media_browser_media_empty_state_subtitle" = "Images and videos uploaded to this room will be shown here.";
"screen_media_browser_media_empty_state_title" = "No media uploaded yet";
"screen_media_browser_title" = "Media and files";
"screen_media_details_file_format" = "File format";
"screen_media_details_filename" = "File name";
"screen_media_details_file_format" = "Format";
"screen_media_details_filename" = "Name";
"screen_media_details_no_more_files_to_show" = "No more files to show";
"screen_media_details_no_more_media_to_show" = "No more media to show";
"screen_media_details_title" = "File info";
"screen_media_details_uploaded_by" = "Uploaded by";
"screen_media_details_uploaded_on" = "Uploaded on";
"screen_media_picker_error_failed_selection" = "Failed selecting media, please try again.";
+14 -2
View File
@@ -36,6 +36,8 @@ internal enum L10n {
internal static var a11yExpandMessageTextField: String { return L10n.tr("Localizable", "a11y_expand_message_text_field") }
/// Hide password
internal static var a11yHidePassword: String { return L10n.tr("Localizable", "a11y_hide_password") }
/// Info
internal static var a11yInfo: String { return L10n.tr("Localizable", "a11y_info") }
/// Join call
internal static var a11yJoinCall: String { return L10n.tr("Localizable", "a11y_join_call") }
/// Jump to bottom
@@ -116,6 +118,8 @@ internal enum L10n {
internal static var a11ySenderLocation: String { return L10n.tr("Localizable", "a11y_sender_location") }
/// Time limited action required, you have one minute to verify
internal static var a11ySessionVerificationTimeLimitedActionRequired: String { return L10n.tr("Localizable", "a11y_session_verification_time_limited_action_required") }
/// Settings, action required
internal static var a11ySettingsWithRequiredAction: String { return L10n.tr("Localizable", "a11y_settings_with_required_action") }
/// Show password
internal static var a11yShowPassword: String { return L10n.tr("Localizable", "a11y_show_password") }
/// Start a call
@@ -210,6 +214,8 @@ internal enum L10n {
internal static var actionDismiss: String { return L10n.tr("Localizable", "action_dismiss") }
/// Done
internal static var actionDone: String { return L10n.tr("Localizable", "action_done") }
/// Download
internal static var actionDownload: String { return L10n.tr("Localizable", "action_download") }
/// Edit
internal static var actionEdit: String { return L10n.tr("Localizable", "action_edit") }
/// Edit caption
@@ -448,8 +454,12 @@ internal enum L10n {
internal static var commonBlockedUsers: String { return L10n.tr("Localizable", "common_blocked_users") }
/// Bubbles
internal static var commonBubbles: String { return L10n.tr("Localizable", "common_bubbles") }
/// Call declined
internal static var commonCallDeclined: String { return L10n.tr("Localizable", "common_call_declined") }
/// Call started
internal static var commonCallStarted: String { return L10n.tr("Localizable", "common_call_started") }
/// You declined a call
internal static var commonCallYouDeclined: String { return L10n.tr("Localizable", "common_call_you_declined") }
/// Chat backup
internal static var commonChatBackup: String { return L10n.tr("Localizable", "common_chat_backup") }
/// Copied to clipboard
@@ -2200,14 +2210,16 @@ internal enum L10n {
internal static var screenMediaBrowserMediaEmptyStateTitle: String { return L10n.tr("Localizable", "screen_media_browser_media_empty_state_title") }
/// Media and files
internal static var screenMediaBrowserTitle: String { return L10n.tr("Localizable", "screen_media_browser_title") }
/// File format
/// Format
internal static var screenMediaDetailsFileFormat: String { return L10n.tr("Localizable", "screen_media_details_file_format") }
/// File name
/// Name
internal static var screenMediaDetailsFilename: String { return L10n.tr("Localizable", "screen_media_details_filename") }
/// No more files to show
internal static var screenMediaDetailsNoMoreFilesToShow: String { return L10n.tr("Localizable", "screen_media_details_no_more_files_to_show") }
/// No more media to show
internal static var screenMediaDetailsNoMoreMediaToShow: String { return L10n.tr("Localizable", "screen_media_details_no_more_media_to_show") }
/// File info
internal static var screenMediaDetailsTitle: String { return L10n.tr("Localizable", "screen_media_details_title") }
/// Uploaded by
internal static var screenMediaDetailsUploadedBy: String { return L10n.tr("Localizable", "screen_media_details_uploaded_by") }
/// Uploaded on
+2 -3
View File
@@ -100,15 +100,14 @@ enum UserAvatarSizeOnScreen {
28
case .chats, .spaces, .map,
.timeline, .readReceiptSheet, .completionSuggestions,
.blockedUsers, .roomMembersList, .knockingUserBanner,
.mediaPreviewDetails:
.blockedUsers, .roomMembersList, .knockingUserBanner:
32
case .startChat:
36
case .roomDetails:
44
case .inviteUsers, .knockingUserList, .sessionVerification,
.settings, .threadList:
.settings, .threadList, .mediaPreviewDetails:
52
case .roomChangeRoles:
56
@@ -13,8 +13,8 @@ struct TimelineMediaPreviewDetailsView: View {
let item: TimelineMediaPreviewItem.Media
@ObservedObject var context: TimelineMediaPreviewViewModel.Context
var preferredColorScheme: ColorScheme? = .dark
@Binding var sheetHeight: CGFloat
private let topPadding: CGFloat = 19
var body: some View {
@@ -40,9 +40,9 @@ struct TimelineMediaPreviewDetailsView: View {
}
private var details: some View {
VStack(alignment: .leading, spacing: 24) {
VStack(alignment: .leading, spacing: 20) {
DetailsRow(title: L10n.screenMediaDetailsUploadedBy) {
HStack(spacing: 8) {
HStack(spacing: 12) {
LoadableAvatarImage(url: item.sender.avatarURL,
name: item.sender.displayName,
contentID: item.sender.id,
@@ -50,22 +50,22 @@ struct TimelineMediaPreviewDetailsView: View {
mediaProvider: context.mediaProvider)
.accessibilityHidden(true)
VStack(alignment: .leading, spacing: 0) {
VStack(alignment: .leading, spacing: 2) {
if let displayName = item.sender.displayName {
Text(displayName)
.font(.compound.bodyMDSemibold)
.font(.compound.bodyLGSemibold)
.foregroundStyle(.compound.decorativeColor(for: item.sender.id).text)
}
Text(item.sender.id)
.font(.compound.bodySM)
.font(.compound.bodyMD)
.foregroundStyle(.compound.textSecondary)
}
}
}
DetailsRow(title: L10n.screenMediaDetailsUploadedOn) {
Text(item.timestamp.formatted(date: .abbreviated, time: .shortened))
Text(item.timestamp.formatted(date: .long, time: .shortened))
.font(.compound.bodyMD)
.foregroundStyle(.compound.textPrimary)
}
@@ -80,7 +80,7 @@ struct TimelineMediaPreviewDetailsView: View {
DetailsRow(title: L10n.screenMediaDetailsFileFormat) {
Group {
if let fileSize = item.fileSize {
Text(contentType) + Text(" – ") + Text(UInt(fileSize).formatted(.byteCount(style: .file)))
Text(contentType) + Text(" • ") + Text(UInt(fileSize).formatted(.byteCount(style: .file)))
} else {
Text(contentType)
}
@@ -127,9 +127,9 @@ struct TimelineMediaPreviewDetailsView: View {
var body: some View {
VStack(alignment: .leading, spacing: 8) {
Text(title)
.font(.compound.bodyXS)
.font(Compound.supportsGlass ? .compound.bodyMDSemibold : .compound.bodyXS)
.foregroundStyle(.compound.textSecondary)
.textCase(.uppercase)
.textCase(Compound.supportsGlass ? nil : .uppercase)
content()
}