From ce6b0041d28a2e4954752231af73549a457d46ed Mon Sep 17 00:00:00 2001 From: Stefan Ceriu Date: Mon, 14 Nov 2022 10:28:13 +0200 Subject: [PATCH] Fixes #296 - Improved bubble timeline item corner radii --- .../SwiftUI/Views/RoundedCornerShape.swift | 8 ----- .../Style/TimelineItemBubbledStylerView.swift | 10 +++--- .../EventBasedTimelineItemProtocol.swift | 34 ++++++++++++------- 3 files changed, 26 insertions(+), 26 deletions(-) diff --git a/ElementX/Sources/Other/SwiftUI/Views/RoundedCornerShape.swift b/ElementX/Sources/Other/SwiftUI/Views/RoundedCornerShape.swift index 7729a400e..32abce161 100644 --- 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 index 2cd87a0b1..a9b607029 100644 --- a/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemBubbledStylerView.swift +++ b/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemBubbledStylerView.swift @@ -101,7 +101,7 @@ struct TimelineItemBubbledStylerView: 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: 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: 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: 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 index 15a78f424..5c4d1931e 100644 --- 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] + } + } + } }