From 965569aae2a1136ce66354eacfc08a079cc00abd Mon Sep 17 00:00:00 2001 From: Stefan Ceriu Date: Wed, 2 Nov 2022 14:06:10 +0200 Subject: [PATCH] Fixes #279 - Fix plain timeline style layout, fix various TimelineViews' previews (#284) --- .../Style/TimelineItemPlainStylerView.swift | 1 + .../View/Timeline/EmoteRoomTimelineView.swift | 5 ++++ .../View/Timeline/FormattedBodyText.swift | 29 +++++++++++++++---- .../View/Timeline/ImageRoomTimelineView.swift | 5 ++++ .../Timeline/NoticeRoomTimelineView.swift | 6 +++- .../Timeline/RedactedRoomTimelineView.swift | 2 +- .../View/Timeline/TextRoomTimelineView.swift | 8 +++-- .../RoomScreen/View/TimelineItemList.swift | 2 +- .../Timeline/MockRoomTimelineController.swift | 20 +++++++++---- changelog.d/279.bugfix | 1 + 10 files changed, 62 insertions(+), 17 deletions(-) create mode 100644 changelog.d/279.bugfix diff --git a/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemPlainStylerView.swift b/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemPlainStylerView.swift index a9eb1e93a..5ed4f9d07 100644 --- a/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemPlainStylerView.swift +++ b/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemPlainStylerView.swift @@ -44,6 +44,7 @@ struct TimelineItemPlainStylerView: View { .foregroundColor(.element.primaryContent) .fontWeight(.semibold) .lineLimit(1) + Spacer() Text(timelineItem.timestamp) .foregroundColor(Color.element.tertiaryContent) .font(.element.caption2) diff --git a/ElementX/Sources/Screens/RoomScreen/View/Timeline/EmoteRoomTimelineView.swift b/ElementX/Sources/Screens/RoomScreen/View/Timeline/EmoteRoomTimelineView.swift index 24959da0e..b9bad1300 100644 --- a/ElementX/Sources/Screens/RoomScreen/View/Timeline/EmoteRoomTimelineView.swift +++ b/ElementX/Sources/Screens/RoomScreen/View/Timeline/EmoteRoomTimelineView.swift @@ -39,6 +39,10 @@ struct EmoteRoomTimelineView_Previews: PreviewProvider { static var previews: some View { body.preferredColorScheme(.light) body.preferredColorScheme(.dark) + body.preferredColorScheme(.light) + .timelineStyle(.plain) + body.preferredColorScheme(.dark) + .timelineStyle(.plain) } @ViewBuilder @@ -52,6 +56,7 @@ 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/FormattedBodyText.swift b/ElementX/Sources/Screens/RoomScreen/View/Timeline/FormattedBodyText.swift index 57644d200..299b628aa 100644 --- a/ElementX/Sources/Screens/RoomScreen/View/Timeline/FormattedBodyText.swift +++ b/ElementX/Sources/Screens/RoomScreen/View/Timeline/FormattedBodyText.swift @@ -18,19 +18,32 @@ import Foundation import SwiftUI struct FormattedBodyText: View { + @Environment(\.timelineStyle) private var timelineStyle + let attributedComponents: [AttributedStringBuilderComponent] var body: some View { VStack(alignment: .leading, spacing: 8.0) { ForEach(attributedComponents, id: \.self) { component in if component.isBlockquote { - Text(component.attributedString.mergingAttributes(blockquoteAttributes)) + if timelineStyle == .plain { + HStack(spacing: 4.0) { + Rectangle() + .foregroundColor(Color.red) + .frame(width: 4.0) + Text(component.attributedString) + .foregroundColor(.element.primaryContent) + } .fixedSize(horizontal: false, vertical: true) - .foregroundColor(.element.primaryContent) - .padding(EdgeInsets(top: 6, leading: 12, bottom: 6, trailing: 12)) - .clipped() - .background(Color.element.systemGray4) - .cornerRadius(13) + } else { + Text(component.attributedString.mergingAttributes(blockquoteAttributes)) + .fixedSize(horizontal: false, vertical: true) + .foregroundColor(.element.primaryContent) + .padding(EdgeInsets(top: 6, leading: 12, bottom: 6, trailing: 12)) + .clipped() + .background(Color.element.systemGray4) + .cornerRadius(13) + } } else { Text(component.attributedString) .fixedSize(horizontal: false, vertical: true) @@ -58,6 +71,10 @@ struct FormattedBodyText_Previews: PreviewProvider { static var previews: some View { body.preferredColorScheme(.light) body.preferredColorScheme(.dark) + body.preferredColorScheme(.light) + .timelineStyle(.plain) + body.preferredColorScheme(.dark) + .timelineStyle(.plain) } @ViewBuilder diff --git a/ElementX/Sources/Screens/RoomScreen/View/Timeline/ImageRoomTimelineView.swift b/ElementX/Sources/Screens/RoomScreen/View/Timeline/ImageRoomTimelineView.swift index 43ffba9fe..bfcbab98f 100644 --- a/ElementX/Sources/Screens/RoomScreen/View/Timeline/ImageRoomTimelineView.swift +++ b/ElementX/Sources/Screens/RoomScreen/View/Timeline/ImageRoomTimelineView.swift @@ -54,6 +54,10 @@ struct ImageRoomTimelineView_Previews: PreviewProvider { static var previews: some View { body.preferredColorScheme(.light) body.preferredColorScheme(.dark) + body.preferredColorScheme(.light) + .timelineStyle(.plain) + body.preferredColorScheme(.dark) + .timelineStyle(.plain) } @ViewBuilder @@ -88,5 +92,6 @@ 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 3cc4c3a35..22e67d20a 100644 --- a/ElementX/Sources/Screens/RoomScreen/View/Timeline/NoticeRoomTimelineView.swift +++ b/ElementX/Sources/Screens/RoomScreen/View/Timeline/NoticeRoomTimelineView.swift @@ -39,6 +39,10 @@ struct NoticeRoomTimelineView_Previews: PreviewProvider { static var previews: some View { body.preferredColorScheme(.light) body.preferredColorScheme(.dark) + body.preferredColorScheme(.light) + .timelineStyle(.plain) + body.preferredColorScheme(.dark) + .timelineStyle(.plain) } @ViewBuilder @@ -52,7 +56,7 @@ struct NoticeRoomTimelineView_Previews: PreviewProvider { timestamp: "Later", senderId: "Anne")) } - .padding() + .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 9e3c2d583..d2bd19435 100644 --- a/ElementX/Sources/Screens/RoomScreen/View/Timeline/RedactedRoomTimelineView.swift +++ b/ElementX/Sources/Screens/RoomScreen/View/Timeline/RedactedRoomTimelineView.swift @@ -44,7 +44,7 @@ struct RedactedRoomTimelineView_Previews: PreviewProvider { timestamp: "Later", senderId: "Anne")) } - .padding() + .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 46bdc76ab..41551a54c 100644 --- a/ElementX/Sources/Screens/RoomScreen/View/Timeline/TextRoomTimelineView.swift +++ b/ElementX/Sources/Screens/RoomScreen/View/Timeline/TextRoomTimelineView.swift @@ -36,6 +36,10 @@ struct TextRoomTimelineView_Previews: PreviewProvider { static var previews: some View { body.preferredColorScheme(.light) body.preferredColorScheme(.dark) + body.preferredColorScheme(.light) + .timelineStyle(.plain) + body.preferredColorScheme(.dark) + .timelineStyle(.plain) } @ViewBuilder @@ -55,15 +59,13 @@ struct TextRoomTimelineView_Previews: PreviewProvider { timestamp: "Now", isOutgoing: false, senderId: "Bob")) - .timelineStyle(.plain) TextRoomTimelineView(timelineItem: itemWith(text: "Some other text", timestamp: "Later", isOutgoing: true, senderId: "Anne")) - .timelineStyle(.plain) } - .padding(.horizontal, 8) + .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 38b38171e..480daef57 100644 --- a/ElementX/Sources/Screens/RoomScreen/View/TimelineItemList.swift +++ b/ElementX/Sources/Screens/RoomScreen/View/TimelineItemList.swift @@ -39,7 +39,7 @@ struct TimelineItemList: View { .opacity(context.viewState.isBackPaginating ? 1.0 : 0.0) .animation(.elementDefault, value: context.viewState.isBackPaginating) - LazyVStack(spacing: 0.0) { + LazyVStack(alignment: .leading, spacing: 0.0) { ForEach(isRunningPreviews ? context.viewState.items : timelineItems) { item in item .contextMenu { diff --git a/ElementX/Sources/Services/Timeline/MockRoomTimelineController.swift b/ElementX/Sources/Services/Timeline/MockRoomTimelineController.swift index bc162f08d..2f7d9c42c 100644 --- a/ElementX/Sources/Services/Timeline/MockRoomTimelineController.swift +++ b/ElementX/Sources/Services/Timeline/MockRoomTimelineController.swift @@ -62,16 +62,14 @@ class MockRoomTimelineController: RoomTimelineControllerProtocol { inGroupState: .single, isOutgoing: false, senderId: "", - senderDisplayName: "Helena", - properties: RoomTimelineItemProperties()), + senderDisplayName: "Helena"), TextRoomTimelineItem(id: UUID().uuidString, text: "And John's speech was amazing!", timestamp: "5 PM", inGroupState: .beginning, isOutgoing: true, senderId: "", - senderDisplayName: "Bob", - properties: RoomTimelineItemProperties()), + senderDisplayName: "Bob"), TextRoomTimelineItem(id: UUID().uuidString, text: "New home office set up!", timestamp: "5 PM", @@ -82,7 +80,19 @@ class MockRoomTimelineController: RoomTimelineControllerProtocol { properties: RoomTimelineItemProperties(reactions: [ AggregatedReaction(key: "🙏", count: 1, isHighlighted: false), AggregatedReaction(key: "😁", count: 3, isHighlighted: false) - ])) + ])), + TextRoomTimelineItem(id: UUID().uuidString, + text: "", + attributedComponents: [ + AttributedStringBuilderComponent(attributedString: "Hol' up", isBlockquote: false), + AttributedStringBuilderComponent(attributedString: "New home office set up!", isBlockquote: true), + AttributedStringBuilderComponent(attributedString: "That's amazing! Congrats 🥳", isBlockquote: false) + ], + timestamp: "5 PM", + inGroupState: .single, + isOutgoing: false, + senderId: "", + senderDisplayName: "Helena") ] func paginateBackwards(_ count: UInt) async -> Result { diff --git a/changelog.d/279.bugfix b/changelog.d/279.bugfix new file mode 100644 index 000000000..98d06299f --- /dev/null +++ b/changelog.d/279.bugfix @@ -0,0 +1 @@ +Fixed blockquote and item layout when using the plain timeline \ No newline at end of file