From 7db29340c097e684cda75ccf76ee69c07c8be0e9 Mon Sep 17 00:00:00 2001 From: Stefan Ceriu Date: Fri, 4 Nov 2022 17:16:39 +0200 Subject: [PATCH] Fixes #271 - Allow bubbles to horizontally fill the available space (#290) * Fixes #271 - Allow bubbles to horizontally fill the available space * Set the existing timelineItems on the timeline when appearing. This fixes UI tests in which items exists without the need for backpagination. It also presumably will fix the timeline when having cached data. --- .../Style/TimelineItemBubbledStylerView.swift | 19 +------------------ .../RoomScreen/View/Style/TimelineStyle.swift | 19 ------------------- .../View/Timeline/EmoteRoomTimelineView.swift | 1 - .../View/Timeline/ImageRoomTimelineView.swift | 1 - .../Timeline/NoticeRoomTimelineView.swift | 1 - .../Timeline/RedactedRoomTimelineView.swift | 1 - .../View/Timeline/TextRoomTimelineView.swift | 1 - .../RoomScreen/View/TimelineItemList.swift | 2 +- 8 files changed, 2 insertions(+), 43 deletions(-) diff --git a/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemBubbledStylerView.swift b/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemBubbledStylerView.swift index 40ef28b38..53717dcff 100644 --- a/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemBubbledStylerView.swift +++ b/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemBubbledStylerView.swift @@ -24,10 +24,7 @@ struct TimelineItemBubbledStylerView: View { @ViewBuilder let content: () -> Content @Environment(\.colorScheme) private var colorScheme - @Environment(\.timelineWidth) private var timelineWidth @ScaledMetric private var senderNameVerticalPadding = 3 - private let bubbleWidthPercentIncoming = 0.72 // 281/390 - private let bubbleWidthPercentOutgoing = 0.68 // 267/390 var body: some View { VStack(alignment: alignment, spacing: -12) { @@ -84,7 +81,6 @@ struct TimelineItemBubbledStylerView: View { alignment: .leading) { key in context.send(viewAction: .sendReaction(key: key, eventID: timelineItem.id)) } - .frame(width: bubbleWidth - 24) .padding(.horizontal, 12) } } @@ -105,13 +101,11 @@ struct TimelineItemBubbledStylerView: View { if shouldAvoidBubbling { content() - .frame(width: bubbleWidth) .cornerRadius(12, inGroupState: timelineItem.inGroupState) .padding(.top, topPadding) } else { VStack(alignment: .trailing, spacing: 4) { content() - .frame(width: bubbleWidth - 24, alignment: .leading) if timelineItem.properties.isEdited { Text(ElementL10n.editedSuffix) @@ -130,12 +124,10 @@ struct TimelineItemBubbledStylerView: View { var styledContentIncoming: some View { if shouldAvoidBubbling { content() - .frame(width: bubbleWidth) .cornerRadius(12, inGroupState: timelineItem.inGroupState) } else { VStack(alignment: .trailing, spacing: 4) { content() - .frame(width: bubbleWidth - 24, alignment: .leading) if timelineItem.properties.isEdited { Text(ElementL10n.editedSuffix) @@ -145,11 +137,7 @@ struct TimelineItemBubbledStylerView: View { } .padding(EdgeInsets(top: 6, leading: 12, bottom: 6, trailing: 12)) .background(Color.element.systemGray6) // Demo time! - .cornerRadius(12, inGroupState: timelineItem.inGroupState) // Demo time! -// .overlay( -// RoundedCornerShape(radius: 18, inGroupState: timelineItem.inGroupState) -// .stroke(Color.element.systemGray5) -// ) + .cornerRadius(12, inGroupState: timelineItem.inGroupState) } } @@ -160,10 +148,6 @@ struct TimelineItemBubbledStylerView: View { private var alignment: HorizontalAlignment { timelineItem.isOutgoing ? .trailing : .leading } - - private var bubbleWidth: CGFloat { - timelineWidth * (timelineItem.isOutgoing ? bubbleWidthPercentOutgoing : bubbleWidthPercentIncoming) - } } struct TimelineItemBubbledStylerView_Previews: PreviewProvider { @@ -181,7 +165,6 @@ struct TimelineItemBubbledStylerView_Previews: PreviewProvider { } } .timelineStyle(.bubbles) - .timelineWidth(390) .padding(.horizontal, 8) .previewLayout(.sizeThatFits) } diff --git a/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineStyle.swift b/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineStyle.swift index 9ca0ff8fa..6dcde8c02 100644 --- a/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineStyle.swift +++ b/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineStyle.swift @@ -50,22 +50,3 @@ extension View { environment(\.timelineStyle, style) } } - -// MARK: - Timeline Width - -private struct TimelineWidthKey: EnvironmentKey { - static let defaultValue: CGFloat = 0 -} - -extension EnvironmentValues { - var timelineWidth: CGFloat { - get { self[TimelineWidthKey.self] } - set { self[TimelineWidthKey.self] = newValue } - } -} - -extension View { - func timelineWidth(_ width: CGFloat) -> some View { - environment(\.timelineWidth, width) - } -} diff --git a/ElementX/Sources/Screens/RoomScreen/View/Timeline/EmoteRoomTimelineView.swift b/ElementX/Sources/Screens/RoomScreen/View/Timeline/EmoteRoomTimelineView.swift index b9bad1300..78fbdf775 100644 --- a/ElementX/Sources/Screens/RoomScreen/View/Timeline/EmoteRoomTimelineView.swift +++ b/ElementX/Sources/Screens/RoomScreen/View/Timeline/EmoteRoomTimelineView.swift @@ -56,7 +56,6 @@ struct EmoteRoomTimelineView_Previews: PreviewProvider { timestamp: "Later", senderId: "Anne")) } - .environment(\.timelineWidth, 400) } private static func itemWith(text: String, timestamp: String, senderId: String) -> EmoteRoomTimelineItem { diff --git a/ElementX/Sources/Screens/RoomScreen/View/Timeline/ImageRoomTimelineView.swift b/ElementX/Sources/Screens/RoomScreen/View/Timeline/ImageRoomTimelineView.swift index bfcbab98f..55fde92b7 100644 --- a/ElementX/Sources/Screens/RoomScreen/View/Timeline/ImageRoomTimelineView.swift +++ b/ElementX/Sources/Screens/RoomScreen/View/Timeline/ImageRoomTimelineView.swift @@ -92,6 +92,5 @@ struct ImageRoomTimelineView_Previews: PreviewProvider { aspectRatio: 0.7, blurhash: "L%KUc%kqS$RP?Ks,WEf8OlrqaekW")) } - .environment(\.timelineWidth, 400) } } diff --git a/ElementX/Sources/Screens/RoomScreen/View/Timeline/NoticeRoomTimelineView.swift b/ElementX/Sources/Screens/RoomScreen/View/Timeline/NoticeRoomTimelineView.swift index 22e67d20a..b79cd54be 100644 --- a/ElementX/Sources/Screens/RoomScreen/View/Timeline/NoticeRoomTimelineView.swift +++ b/ElementX/Sources/Screens/RoomScreen/View/Timeline/NoticeRoomTimelineView.swift @@ -56,7 +56,6 @@ struct NoticeRoomTimelineView_Previews: PreviewProvider { timestamp: "Later", senderId: "Anne")) } - .environment(\.timelineWidth, 400) } private static func itemWith(text: String, timestamp: String, senderId: String) -> NoticeRoomTimelineItem { diff --git a/ElementX/Sources/Screens/RoomScreen/View/Timeline/RedactedRoomTimelineView.swift b/ElementX/Sources/Screens/RoomScreen/View/Timeline/RedactedRoomTimelineView.swift index d2bd19435..7ef366662 100644 --- a/ElementX/Sources/Screens/RoomScreen/View/Timeline/RedactedRoomTimelineView.swift +++ b/ElementX/Sources/Screens/RoomScreen/View/Timeline/RedactedRoomTimelineView.swift @@ -44,7 +44,6 @@ struct RedactedRoomTimelineView_Previews: PreviewProvider { timestamp: "Later", senderId: "Anne")) } - .environment(\.timelineWidth, 400) } private static func itemWith(text: String, timestamp: String, senderId: String) -> RedactedRoomTimelineItem { diff --git a/ElementX/Sources/Screens/RoomScreen/View/Timeline/TextRoomTimelineView.swift b/ElementX/Sources/Screens/RoomScreen/View/Timeline/TextRoomTimelineView.swift index 41551a54c..6e803a32a 100644 --- a/ElementX/Sources/Screens/RoomScreen/View/Timeline/TextRoomTimelineView.swift +++ b/ElementX/Sources/Screens/RoomScreen/View/Timeline/TextRoomTimelineView.swift @@ -65,7 +65,6 @@ struct TextRoomTimelineView_Previews: PreviewProvider { isOutgoing: true, senderId: "Anne")) } - .environment(\.timelineWidth, 400) } private static func itemWith(text: String, timestamp: String, isOutgoing: Bool, senderId: String) -> TextRoomTimelineItem { diff --git a/ElementX/Sources/Screens/RoomScreen/View/TimelineItemList.swift b/ElementX/Sources/Screens/RoomScreen/View/TimelineItemList.swift index ba78affbe..c73690320 100644 --- a/ElementX/Sources/Screens/RoomScreen/View/TimelineItemList.swift +++ b/ElementX/Sources/Screens/RoomScreen/View/TimelineItemList.swift @@ -97,9 +97,9 @@ struct TimelineItemList: View { } .scrollDismissesKeyboard(.immediately) .background(ViewFrameReader(frame: $viewFrame)) - .environment(\.timelineWidth, viewFrame.width) .timelineStyle(settings.timelineStyle) .onAppear { + timelineItems = context.viewState.items requestBackPagination() } // Allow SwiftUI to layout the views properly before checking if the top is visible