Updates to File Info Bottom Sheet (#5667)

* Updates to File Info Bottom Sheet

Removing buttons, changing labels, adding a title

* Update the underlying actions rather than fixing it at the screen-level.

* Fix the media details sheet height now there's a navigation title.

* Record preview snapshots

---------

Co-authored-by: Doug <douglase@element.io>
Co-authored-by: Element CI <ci@element.io>
This commit is contained in:
Aaron Thornburgh
2026-06-01 15:00:55 +02:00
committed by GitHub
parent a3f78c9005
commit dc7454d161
23 changed files with 66 additions and 75 deletions
@@ -85,7 +85,7 @@ class TimelineMediaPreviewViewModel: TimelineMediaPreviewViewModelType {
case .viewInRoomTimeline:
state.previewControllerDriver.send(.dismissDetailsSheet)
actionsSubject.send(.viewInRoomTimeline(item.timelineItem.id))
case .save:
case .downloadMedia:
Task { await saveCurrentItem() }
case .redact:
state.bindings.redactConfirmationItem = item
@@ -200,7 +200,7 @@ class TimelineMediaPreviewViewModel: TimelineMediaPreviewViewModelType {
}
private func redactItem(_ item: TimelineMediaPreviewItem.Media) {
timelineViewModel.context.send(viewAction: .handleTimelineItemMenuAction(itemID: item.timelineItem.id, action: .redact))
timelineViewModel.context.send(viewAction: .handleTimelineItemMenuAction(itemID: item.timelineItem.id, action: .redact(isMedia: true)))
state.bindings.redactConfirmationItem = nil
state.previewControllerDriver.send(.dismissDetailsSheet)
actionsSubject.send(.dismiss)
@@ -227,7 +227,7 @@ class TimelineMediaPreviewController: QLPreviewController {
private func presentMediaDetails(for mediaItem: TimelineMediaPreviewItem.Media) {
let safeArea = view.safeAreaInsets.bottom
let sheetHeightBinding = Binding { safeArea } set: { [weak self] newValue, _ in
self?.detailsHostingController?.sheetPresentationController?.detents = [.height(newValue + safeArea)]
self?.detailsHostingController?.sheetPresentationController?.detents = [.height(newValue)]
}
let hostingController = UIHostingController(rootView: TimelineMediaPreviewDetailsView(item: mediaItem,
@@ -15,20 +15,24 @@ struct TimelineMediaPreviewDetailsView: View {
var preferredColorScheme: ColorScheme? = .dark
@Binding var sheetHeight: CGFloat
private let topPadding: CGFloat = 19
/// Approximate height of the navigation bar.
private let topPadding: CGFloat = 72
var body: some View {
ScrollView {
VStack(alignment: .leading, spacing: 0) {
details
actions
ElementNavigationStack {
ScrollView {
VStack(alignment: .leading, spacing: 0) {
details
actions
}
.frame(maxWidth: .infinity, alignment: .leading)
.onGeometryChange(for: CGFloat.self, of: \.size.height) { sheetHeight = $0 + topPadding }
}
.frame(maxWidth: .infinity, alignment: .leading)
.readHeight($sheetHeight)
.scrollBounceBehavior(.basedOnSize)
.navigationTitle(L10n.screenMediaDetailsTitle)
.navigationBarTitleDisplayMode(.inline)
}
.scrollBounceBehavior(.basedOnSize)
.padding(.top, topPadding) // For the drag indicator
.presentationDetents([.height(sheetHeight + topPadding)])
.presentationDetents([.height(sheetHeight)])
.presentationDragIndicator(.visible)
.presentationBackground(.compound.bgCanvasDefault)
.preferredColorScheme(preferredColorScheme)
@@ -90,7 +94,6 @@ struct TimelineMediaPreviewDetailsView: View {
}
}
}
.padding(.top, 24)
.padding(.bottom, 32)
.padding(.horizontal, 16)
}
@@ -142,14 +145,7 @@ struct TimelineMediaPreviewDetailsView: View {
let context: TimelineMediaPreviewViewModel.Context
var body: some View {
if action == .share {
if let itemURL = item.fileHandle?.url {
ShareLink(item: itemURL, message: item.caption.map(Text.init)) {
action.label
}
.buttonStyle(.menuSheet)
}
} else if action == .save {
if action == .downloadMedia {
if item.fileHandle?.url != nil {
button
}
@@ -195,9 +195,7 @@ class TimelineInteractionHandler {
analyticsService.trackInteraction(name: .PinnedMessageListViewTimeline)
guard let eventID = itemID.eventID else { return }
actionsSubject.send(.viewInRoomTimeline(eventID: eventID))
case .share:
break // Handled inline in the media preview screen with a ShareLink.
case .save:
case .downloadMedia:
break // Handled inline in the media preview screen.
case .translate:
guard let messageTimelineItem = timelineItem as? EventBasedMessageTimelineItemProtocol else { return }
@@ -65,7 +65,7 @@ enum TimelineItemMenuAction: Identifiable, Hashable {
case removeCaption
case editPoll
case copyPermalink
case redact
case redact(isMedia: Bool)
case reply(isThread: Bool)
case replyInThread
case forward(itemID: TimelineItemIdentifier)
@@ -77,8 +77,7 @@ enum TimelineItemMenuAction: Identifiable, Hashable {
case pin
case unpin
case viewInRoomTimeline
case share
case save
case downloadMedia
var id: Self {
self
@@ -135,7 +134,7 @@ enum TimelineItemMenuAction: Identifiable, Hashable {
var canAppearInMediaDetails: Bool {
switch self {
case .viewInRoomTimeline, .share, .save, .redact, .forward:
case .viewInRoomTimeline, .downloadMedia, .redact, .forward:
true
default:
false
@@ -171,8 +170,8 @@ enum TimelineItemMenuAction: Identifiable, Hashable {
Label(L10n.actionReplyInThread, icon: \.threads)
case .forward:
Label(L10n.actionForward, icon: \.forward)
case .redact:
Label(L10n.actionRemoveMessage, icon: \.delete)
case .redact(let isMedia):
Label(isMedia ? L10n.actionDeleteFile : L10n.actionRemoveMessage, icon: \.delete)
case .viewSource:
Label(L10n.actionViewSource, icon: \.code)
case .report:
@@ -190,10 +189,8 @@ enum TimelineItemMenuAction: Identifiable, Hashable {
Label(L10n.actionUnpin, icon: \.unpin)
case .viewInRoomTimeline:
Label(L10n.actionViewInTimeline, icon: \.visibilityOn)
case .share:
Label(L10n.actionShare, icon: \.shareIos)
case .save:
Label(L10n.actionSave, icon: \.downloadIos)
case .downloadMedia:
Label(L10n.actionDownload, icon: \.downloadIos)
}
}
}
@@ -114,7 +114,8 @@ struct TimelineItemMenuActionProvider {
}
if canRedactItem(item) {
secondaryActions.append(.redact)
let isMedia = if case .media = timelineKind { true } else { false }
secondaryActions.append(.redact(isMedia: isMedia))
}
switch timelineKind {
@@ -122,8 +123,7 @@ struct TimelineItemMenuActionProvider {
actions = actions.filter(\.canAppearInPinnedEventsTimeline)
secondaryActions = secondaryActions.filter(\.canAppearInPinnedEventsTimeline)
case .media:
actions.append(.share)
actions.append(.save)
actions.append(.downloadMedia)
actions = actions.filter(\.canAppearInMediaDetails)
secondaryActions = secondaryActions.filter(\.canAppearInMediaDetails)
case .live, .detached, .thread: