Fixes #296 - Improved bubble timeline item corner radii

element-hq · Nov 16, 2022 · ce6b004 · ce6b004
1 parent 2bce779
commit ce6b004
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 26 deletions.
diff --git a/ElementX/Sources/Other/SwiftUI/Views/RoundedCornerShape.swift b/ElementX/Sources/Other/SwiftUI/Views/RoundedCornerShape.swift
@@ -25,10 +25,6 @@ struct RoundedCornerShape: Shape {
         self.corners = corners
     }
 
-    init(radius: CGFloat, inGroupState: TimelineItemInGroupState) {
-        self.init(radius: radius, corners: inGroupState.roundedCorners)
-    }
-
     func path(in rect: CGRect) -> Path {
         let path = UIBezierPath(roundedRect: rect,
                                 byRoundingCorners: corners,
@@ -41,8 +37,4 @@ extension View {
     func cornerRadius(_ radius: CGFloat, corners: UIRectCorner) -> some View {
         clipShape(RoundedCornerShape(radius: radius, corners: corners))
     }
-
-    func cornerRadius(_ radius: CGFloat, inGroupState: TimelineItemInGroupState) -> some View {
-        clipShape(RoundedCornerShape(radius: radius, inGroupState: inGroupState))
-    }
 }
diff --git a/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemBubbledStylerView.swift b/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemBubbledStylerView.swift
@@ -101,7 +101,7 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
 
         if shouldAvoidBubbling {
             content()
-                .cornerRadius(12, inGroupState: timelineItem.inGroupState)
+                .cornerRadius(12, corners: timelineItem.roundedCorners)
                 .padding(.top, topPadding)
         } else {
             VStack(alignment: .trailing, spacing: 4) {
@@ -115,7 +115,7 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
             }
             .padding(EdgeInsets(top: 6, leading: 12, bottom: 6, trailing: 12))
             .background(Color.element.systemGray5)
-            .cornerRadius(12, inGroupState: timelineItem.inGroupState)
+            .cornerRadius(12, corners: timelineItem.roundedCorners)
             .padding(.top, topPadding)
         }
     }
@@ -124,7 +124,7 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
     var styledContentIncoming: some View {
         if shouldAvoidBubbling {
             content()
-                .cornerRadius(12, inGroupState: timelineItem.inGroupState)
+                .cornerRadius(12, corners: timelineItem.roundedCorners)
         } else {
             VStack(alignment: .trailing, spacing: 4) {
                 content()
@@ -136,8 +136,8 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
                 }
             }
             .padding(EdgeInsets(top: 6, leading: 12, bottom: 6, trailing: 12))
-            .background(Color.element.systemGray6) // Demo time!
-            .cornerRadius(12, inGroupState: timelineItem.inGroupState)
+            .background(Color.element.systemGray6)
+            .cornerRadius(12, corners: timelineItem.roundedCorners)
         }
     }
 

diff --git a/ElementX/Sources/Services/Timeline/TimelineItems/EventBasedTimelineItemProtocol.swift b/ElementX/Sources/Services/Timeline/TimelineItems/EventBasedTimelineItemProtocol.swift
@@ -23,19 +23,6 @@ enum TimelineItemInGroupState {
     case middle
     case end
 
-    var roundedCorners: UIRectCorner {
-        switch self {
-        case .single:
-            return .allCorners
-        case .beginning:
-            return [.topLeft, .topRight]
-        case .middle:
-            return []
-        case .end:
-            return [.bottomLeft, .bottomRight]
-        }
-    }
-
     var shouldShowSenderDetails: Bool {
         switch self {
         case .single, .beginning:
@@ -65,4 +52,25 @@ extension EventBasedTimelineItemProtocol {
     var shouldShowSenderDetails: Bool {
         inGroupState.shouldShowSenderDetails
     }
+
+    var roundedCorners: UIRectCorner {
+        switch inGroupState {
+        case .single:
+            return .allCorners
+        case .beginning:
+            if isOutgoing {
+                return [.topLeft, .topRight, .bottomLeft]
+            } else {
+                return [.topLeft, .topRight, .bottomRight]
+            }
+        case .middle:
+            return isOutgoing ? [.topLeft, .bottomLeft] : [.topRight, .bottomRight]
+        case .end:
+            if isOutgoing {
+                return [.topLeft, .bottomLeft, .bottomRight]
+            } else {
+                return [.topRight, .bottomLeft, .bottomRight]
+            }
+        }
+    }
 }