[Paywalls V2] Ignore top safe area edges for image#4744
Conversation
There was a problem hiding this comment.
Ignoring edges on all views being used as the background
0ccb313 to
b73ce2f
Compare
ajpallares
left a comment
There was a problem hiding this comment.
Looks good to me! Just some very very small comments
| // Applies a top padding to mimmic safe area insets | ||
| // This was designed to be applied to the |
There was a problem hiding this comment.
Small nit: complete explanatory comment
| ComponentsView(componentViewModels: self.viewModel.viewModels, onDismiss: self.onDismiss) | ||
| ComponentsView( | ||
| componentViewModels: self.viewModel.viewModels, | ||
| ignoreSafeArea: self.viewModel.shouldApplySafeAreaInset, |
There was a problem hiding this comment.
The parameter name ignoreSafeArea seems contradictory with sending self.viewModel.shouldApplySafeAreaInset
tonidero
left a comment
There was a problem hiding this comment.
LGTM! Just a couple cases I was thinking about... The edge case might be acceptable for now but I'm wondering if the design of having an image at the top of the paywall but not as a header would be affected with this...
| // If the first view in the first stack is an image, | ||
| // we will ignore safe area pass the safe area insets in to environment | ||
| // If the image is in a ZStack, the ZStack will push non-images | ||
| // down with the inset |
There was a problem hiding this comment.
Talking about an edge case here but what happens if the parent of the image (being the first view within the first stack) is an HStack with an image + some text to the side? I imagine in that situation we might not want to ignore the safe area... So maybe this should only be done if the parent of the image is either a VStack or a ZStack?
There was a problem hiding this comment.
Good point! I just changed the logic so that the image needs to have a width of fill for this to work so... I think that should cover the HStack scenario 🤔
JayShortway
left a comment
There was a problem hiding this comment.
I think this is a great and pragmatic solution! 💪
|
@joshdholtz any ideas on how to control the X (close button) position on top-right of a background image in this case? It seems to be placed differently in your video too. It seems hard to add it on the top-right corner for these devices:
(to be in the same position). Illustration:
Do I need a new issue? I guess this could be solved by telling to a Button/Stack if it should apply top inset or not. |
Motivation
Be smart about when and where to ignore safe area edges so header images expand all the way to the top edge.
Description
ViewModelFactory, find if the first non-container type component is an imageStackViewModelof the containing ZStack that we need to apply safe area inset padding.edgesIgnoringSafeArea(.top)to the entire paywall contents👉 See #4745 for the Paywall Tester changes
Screen.Recording.2025-01-29.at.5.53.51.PM.mov