mirror of
https://github.com/Novaloop-AG/element-x-ios.git
synced 2026-11-02 12:07:55 +00:00
Update TimelineMediaPreviewDetailsView to match the latest design. (#5513)
Update the TimelineMediaPreviewDetailsView design.
This commit is contained in:
@@ -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.";
|
||||
|
||||
@@ -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,
|
||||
.mediaPreviewDetails:
|
||||
.blockedUsers, .roomMembersList, .knockingUserBanner:
|
||||
32
|
||||
case .startChat:
|
||||
36
|
||||
case .roomDetails:
|
||||
44
|
||||
case .inviteUsers, .knockingUserList, .sessionVerification,
|
||||
.settings, .threadList:
|
||||
.settings, .threadList, .mediaPreviewDetails:
|
||||
52
|
||||
case .roomChangeRoles:
|
||||
56
|
||||
|
||||
+10
-10
@@ -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()
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user