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
@@ -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()
}