Fixes #279 - Fix plain timeline style layout, fix various TimelineVie…

…ws' previews
element-hq · Nov 2, 2022 · 447d52f · 447d52f
1 parent fabb0bc
commit 447d52f
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 17 deletions.
diff --git a/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemPlainStylerView.swift b/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemPlainStylerView.swift
@@ -44,6 +44,7 @@ struct TimelineItemPlainStylerView<Content: View>: 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<Void, RoomTimelineControllerError> {