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

Update the TimelineMediaPreviewDetailsView design.
2026-11-05 20:09:04 +00:00 · 2026-04-29 19:34:22 +01:00
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_file_format" = "Format";
-"screen_media_details_filename" = "File name";
+"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_file_format" = "Format";
-"screen_media_details_filename" = "File name";
+"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.";
@@ -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
@@ -100,15 +100,14 @@ enum UserAvatarSizeOnScreen {
            28
        case .chats, .spaces, .map,
             .timeline, .readReceiptSheet, .completionSuggestions,
-             .blockedUsers, .roomMembersList, .knockingUserBanner,
+             .blockedUsers, .roomMembersList, .knockingUserBanner:
             .mediaPreviewDetails:
            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()
            }
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:dfe7dfa9584bf529fd44ac12184aee1ec65208822499efd4a22362ee1ae31f37
+oid sha256:b93c230eb1ec5fb47b7f32255185f1a31be9e63cd2ebdb48d71609ac84fe5070
-size 130114
+size 150251
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6ef2890759c94279735a1b56a038402c4e8262f6cb17cefa834611aa3e16766a
+oid sha256:47e8cbbf2361f846f528033e2f3162dd5f20297f45d0b36d7602c6d389d698f9
-size 139919
+size 161620
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:908c6346c67237fac4c521b6bea847fc69e6f37ed1f3af8fa2df74182f535077
+oid sha256:835404f0d0a173ad4ddbabc68aeda3d7a231fbcfdd457f5d713aef6ef2ea61aa
-size 81832
+size 99521
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0114d05e30c175113cc236dcffc587c260327a948d3f1d1c3a3eef5e66afc56f
+oid sha256:26b50e2f7f07b3ae738c756f1ab208b56bafc459cbab2c9e8db117702a99f39f
-size 92749
+size 111277
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:056cd98fea9e111f92fcd14016d5f02d1c5b0030341bf54d47b5a05192451fb7
+oid sha256:22fe6462eb9de68f8c6ce02a1362f45a3768db86553a1f38b0858e7e318ec9c6
-size 112722
+size 133349
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:761842c756c51639a05c0d06520761ba2f4f009fb72c36b81633e807d29ce3c5
+oid sha256:f62126e11f38027fb92b1c75ece757864541966e46c5130ab1bd45a4a528a969
-size 119906
+size 141902
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6fb17b7d7328e46cc53db7d554006ac26188b35c42334eb0fffd82b0a20adf8b
+oid sha256:8628e42e49b2a5b373f058da0f5fb6bac6e011de8bf2835e16c382ff815a2b34
-size 66273
+size 84460
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:dd0ca45510bd9bf23c070542fb5758a1f694add85560bfa2b01e3afdea4e9545
+oid sha256:bb4052cffcf38fa40f413a6599e51daa49821e97f29d775d169f45e03cdf08e1
-size 74268
+size 92649
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b17c46a0f4343cb40be75caa46ed687c75b5588d0c06f0003f34c9f5eb567bab
+oid sha256:671dccc688b9336ec9671f1b63bcbd927a016755cb600c2defd01d952d30f60a
-size 123673
+size 143766
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bbc2866882c27ddea5bcce1ca012e60351d6cb144b2560011824d40dd0826138
+oid sha256:d5229168916a4d0676a23785f57e5af8897f4f8bece9d3510f3643bd7bca4075
-size 133034
+size 154702
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:03ec88b697490faadd8d6f502ac1e1e36c13d9a9469e6c949ebbb9efd575015a
+oid sha256:59571f97f5b4f09e15ed059a14c9c72c58d30af8a2ad7e6a110235614dbcf4f1
-size 76360
+size 93988
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2f2056d3832873a78f4460def078662b735cf867efe0e7f4e3d3b4fdc5062c7f
+oid sha256:65e890e9425ce674577c84682d62697b0a6cc47e894c5433f16c94833eb00022
-size 86055
+size 104635
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6f67712975bcadd446206574c418fa52b58281af52a65d375bc7dae52ba3d92e
+oid sha256:3075970e4d04aa2db2771e1caee5c63c54cf33d069cf2189397b0ef2d67ff437
-size 117232
+size 137869
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a2d67d0bfc3a9f5e8b3daa3bb58ca438d4e2493c96f2b0558f81ace1269f9935
+oid sha256:5a523979a533adc0c496285891b4905a919e53fa90961c74a513d5f01eb61a9e
-size 125213
+size 147167
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:29039b3fad4839f03c046dc17e6d196522869c97cc318af119c4380bb6080c1c
+oid sha256:08c83c0e9300a75f8554421a08ec714169bce0f093d67a289e368cb53aa5049a
-size 70829
+size 89039
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a68001215263a9f2685f40f134f7529aca8bae2379f6b09b82be01e4bdf83e6f
+oid sha256:7b549e6644d2f59e571093bd2b694d36e68bf485dabf96ed8deeaef79575ca3e
-size 79490
+size 97781