Add BubbleTimestampLayout

element-hq · Jul 26, 2023 · 30a42a2 · 30a42a2
1 parent cb583db
commit 30a42a2
Showing 1 changed file with 37 additions and 22 deletions.
diff --git a/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemBubbledStylerView.swift b/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemBubbledStylerView.swift
@@ -29,7 +29,6 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
 
     @State private var showItemActionMenu = false
 
-    private var isTextItem: Bool { timelineItem is TextBasedRoomTimelineItem }
     private var isEncryptedOneToOneRoom: Bool { context.viewState.isEncryptedOneToOneRoom }
 
     /// The base padding applied to bubbles on either side.
@@ -157,13 +156,19 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
 
     @ViewBuilder
     var contentWithTimestamp: some View {
-        if isTextItem || shouldFillBubble {
-            ZStack(alignment: .bottomTrailing) {
+        switch timelineItem.bubbleTimestampLayout {
+        case .horizontal:
+            HStack(alignment: .bottom, spacing: 4) {
                 contentWithReply
                 interactiveLocalizedSendInfo
             }
-        } else {
-            HStack(alignment: .bottom, spacing: 4) {
+        case .vertical:
+            VStack(alignment: .leading, spacing: 4) {
+                contentWithReply
+                interactiveLocalizedSendInfo
+            }
+        case .overlay:
+            ZStack(alignment: .bottomTrailing) {
                 contentWithReply
                 interactiveLocalizedSendInfo
             }
@@ -184,17 +189,18 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
 
     @ViewBuilder
     var backgroundedLocalizedSendInfo: some View {
-        if shouldFillBubble {
+        switch timelineItem.bubbleTimestampLayout {
+        case .overlay(capsuleStyle: true):
             localizedSendInfo
                 .padding(.horizontal, 4)
                 .padding(.vertical, 2)
                 .background(Color.compound.bgSubtleSecondary)
                 .cornerRadius(10)
                 .padding(.trailing, 4)
                 .padding(.bottom, 4)
-
-        } else {
+        default:
             localizedSendInfo
+                .padding(.bottom, -4)
         }
     }
 
@@ -213,7 +219,6 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
         }
         .font(.compound.bodyXS)
         .foregroundColor(timelineItem.hasFailedToSend ? .compound.textCriticalPrimary : .compound.textSecondary)
-        .padding(.bottom, shouldFillBubble ? 0 : -4)
     }
 
     @ViewBuilder
@@ -248,19 +253,6 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
         guard timelineItem.isOutgoing || isEncryptedOneToOneRoom else { return 0 }
         return timelineGroupStyle == .single || timelineGroupStyle == .first ? 8 : 0
     }
-
-    private var shouldFillBubble: Bool {
-        switch timelineItem {
-        case is ImageRoomTimelineItem,
-             is VideoRoomTimelineItem,
-             is StickerRoomTimelineItem:
-            return true
-        case let locationTimelineItem as LocationRoomTimelineItem:
-            return locationTimelineItem.content.geoURI != nil
-        default:
-            return false
-        }
-    }
 
     private var alignment: HorizontalAlignment {
         timelineItem.isOutgoing ? .trailing : .leading
@@ -300,6 +292,12 @@ private extension View {
     }
 }
 
+enum BubbleTimestampLayout {
+    case horizontal
+    case vertical
+    case overlay(capsuleStyle: Bool)
+}
+
 private extension EventBasedTimelineItemProtocol {
     var bubbleBackgroundColor: Color? {
         let defaultColor: Color = isOutgoing ? .compound._bgBubbleOutgoing : .compound._bgBubbleIncoming
@@ -330,6 +328,23 @@ private extension EventBasedTimelineItemProtocol {
             return defaultPadding
         }
     }
+
+    var bubbleTimestampLayout: BubbleTimestampLayout {
+        let defaultTimestampLayout: BubbleTimestampLayout = .horizontal
+
+        switch self {
+        case is TextBasedRoomTimelineItem:
+            return .overlay(capsuleStyle: false)
+        case is ImageRoomTimelineItem,
+             is VideoRoomTimelineItem,
+             is StickerRoomTimelineItem:
+            return .overlay(capsuleStyle: true)
+        case let locationTimelineItem as LocationRoomTimelineItem:
+            return locationTimelineItem.content.geoURI == nil ? defaultTimestampLayout : .overlay(capsuleStyle: true)
+        default:
+            return defaultTimestampLayout
+        }
+    }
 }
 
 struct TimelineItemBubbledStylerView_Previews: PreviewProvider {