[Paywalls] Add support for gradient backgrounds #4522
Conversation
| @@ -20,7 +20,6 @@ enum BackgroundStyle { | |||
|
|
|||
| case color(PaywallComponent.ColorScheme) | |||
| case image(PaywallComponent.ThemeImageUrls) | |||
| case gradient | |||
There was a problem hiding this comment.
Following the spec, gradient is not a different type of background but is encoded as part of the ColorInfo struct.
| @@ -47,7 +46,26 @@ fileprivate extension View { | |||
| func apply(backgroundStyle: BackgroundStyle) -> some View { | |||
| switch backgroundStyle { | |||
| case .color(let color): | |||
| self.background(color.toDynamicColor()) | |||
| switch color.light { | |||
There was a problem hiding this comment.
My assumption is the light and dark colors must be of the same type e.g. both solid or both gradient.
There was a problem hiding this comment.
Modified to support mixed solid and gradient light/dark colors in ColorScheme
|
|
||
| private extension UnitPoint { | ||
|
|
||
| init(angle: Angle) { |
There was a problem hiding this comment.
This is a little helper to transform the degree orientation of the linear gradient into what SwiftUI expects: the starting and endpoints of the gradient in the enclosing rectangle view.
…pport mixed solid and gradient light/dark colors in ColorScheme
| @@ -157,7 +157,7 @@ struct TextComponentStyle { | |||
| let visible: Bool | |||
| let text: String | |||
| let fontWeight: Font.Weight | |||
| let color: Color | |||
| let color: PaywallComponent.ColorScheme | |||
There was a problem hiding this comment.
Storing the ColorScheme instead of the dynamic color now because it can potentially be a gradient.
| } | ||
|
|
||
| @Environment(\.colorScheme) | ||
| private var colorScheme |
There was a problem hiding this comment.
For completeness, and in case we want to use use GradientView somewhere else, I've kept support for light/dark mode here even though we're controlling it in BackgroundStyle and ForegroundColorScheme.
| @@ -20,7 +20,6 @@ enum BackgroundStyle { | |||
|
|
|||
| case color(PaywallComponent.ColorScheme) | |||
| case image(PaywallComponent.ThemeImageUrls) | |||
| case gradient | |||
| var body: some View { | ||
| switch gradientStyle { | ||
| case .linear(let degrees): | ||
| LinearGradient( | ||
| gradient: gradient, | ||
| startPoint: UnitPoint(angle: Angle(degrees: Double(degrees))), | ||
| endPoint: UnitPoint(angle: Angle(degrees: Double(degrees+180))) | ||
| ) | ||
| case .radial: | ||
| RadialGradient( | ||
| gradient: gradient, | ||
| center: .center, | ||
| startRadius: 0, | ||
| endRadius: 100 | ||
| ) | ||
| } | ||
| } |
There was a problem hiding this comment.
Wait... it's this easy to do it?! 😅 I had no idea... I love it 😁
There was a problem hiding this comment.
Can we hadd some SwiftUI previews here of the gradients? 😇
| // Determine the scaling factor to move the point to the edge of the enclosing square | ||
| let scaleFactor = max(abs(xPosition), abs(yPosition)) |
There was a problem hiding this comment.
Thanks a lot for the inspiration here! This was very useful for Android too. 🙏
Quick question: does this work for non-square shapes in SwiftUI, like rectangles? In Compose, I find that the angle isn't quite correct when using a rectangle, as it indeed seems to "pretend" it's a square and draws the angle based on that. Not sure how strict we are with the desired result. There's a bunch of discussion and suggested Compose solutions on this StackOverflow question.
Here's an example of what I mean. Both are set to an angle of 45 degrees, but only the square is actually 45 degrees.
There was a problem hiding this comment.
Will handle in a new PR 👍
This PR adds support for gradient backgrounds.
Supported gradient types are Radial and Linear.
Additionally, gradients as text foreground style are now supported: