Room screen: timeline message bubbles (#91)

* #34 Create `TimelineItemStylerView` * #34 Add styler view into different type of cells * #34 Use placeholder avatar image on room list * #34 Add `isOutgoing` param to event based timeline item * #34 Compute `isOutgoing` for timeline items * #34 Update sender info view in timeline * #34 Update mock timeline items * #34 Rename `EventBasedTimelineView` to `EventBasedTimelineSenderView` * #34 Change padding on timeline cells * #34 Create `TimelineItemStylerView` to move content into a bubble if needed * #34 Use styler view in all of the timeline item views * #34 Make timestamp more readable on images * #34 Little layout tweaks * #34 Add changelog * #34 Fix code smells * #34 Set text colors on timeline items * #34 Fix background color of the timeline * #34 Fix PR remarks * #34 Set background colors explicitly on remaining screens * #34 Reduce min bubble width and make it a scaled metric * #34 Refactor `PlaceholderAvatarImage` to accept a text only * #34 Fix code smell * #34 Fix further comments
2026-11-03 06:55:59 +00:00 · 2022-06-23 14:54:29 +03:00
parent 5df1411a7e
commit b6b8b4be26
28 changed files with 451 additions and 162 deletions
@@ -0,0 +1,93 @@
+//
+//  EventBasedTimelineSenderView.swift
+//  ElementX
+//
+//  Created by Stefan Ceriu on 18/03/2022.
+//  Copyright © 2022 Element. All rights reserved.
+//
+
+import Foundation
+import SwiftUI
+
+struct EventBasedTimelineSenderView: View {
+    let timelineItem: EventBasedTimelineItemProtocol
+
+    @ScaledMetric private var avatarSize = 26
+    
+    var body: some View {
+        if timelineItem.shouldShowSenderDetails {
+            VStack {
+                Spacer()
+                    .frame(height: 8)
+                HStack(alignment: .top, spacing: 4) {
+                    avatar
+                    Text(timelineItem.senderDisplayName ?? timelineItem.senderId)
+                        .font(.body)
+                        .foregroundColor(.element.primaryContent)
+                        .fontWeight(.semibold)
+                        .lineLimit(1)
+                }
+            }
+        }
+    }
+    
+    @ViewBuilder private var avatar: some View {
+        ZStack(alignment: .center) {
+            if let avatar = timelineItem.senderAvatar {
+                Image(uiImage: avatar)
+                    .resizable()
+                    .scaledToFill()
+                    .overlay(Circle().stroke(Color.element.accent))
+            } else {
+                PlaceholderAvatarImage(text: timelineItem.senderDisplayName ?? timelineItem.senderId)
+            }
+        }
+        .clipShape(Circle())
+        .frame(width: avatarSize, height: avatarSize)
+        .overlay(
+            Circle()
+                .stroke(Color.element.background, lineWidth: 2)
+        )
+
+        .animation(.default, value: timelineItem.senderAvatar)
+    }
+}
+
+struct EventBasedTimelineSenderView_Previews: PreviewProvider {
+    static var previews: some View {
+        body.preferredColorScheme(.light)
+        body.preferredColorScheme(.dark)
+    }
+    
+    @ViewBuilder
+    static var body: some View {
+        VStack(alignment: .leading, spacing: 20.0) {
+            EventBasedTimelineSenderView(timelineItem: item1)
+            
+            EventBasedTimelineSenderView(timelineItem: item2)
+        }
+        .frame(maxHeight: 160)
+        .previewLayout(.sizeThatFits)
+    }
+
+    private static var item1: EventBasedTimelineItemProtocol {
+        TextRoomTimelineItem(id: UUID().uuidString,
+                             text: "Some text",
+                             timestamp: "",
+                             shouldShowSenderDetails: true,
+                             isOutgoing: false,
+                             senderId: "",
+                             senderDisplayName: "Bob")
+    }
+
+    private static var item2: EventBasedTimelineItemProtocol {
+        TextRoomTimelineItem(id: UUID().uuidString,
+                             text: "Some text",
+                             timestamp: "",
+                             shouldShowSenderDetails: true,
+                             isOutgoing: false,
+                             senderId: "",
+                             senderDisplayName: "Some long display name for a user")
+    }
+
+}