Add custom spacing for modals without buttons on iPad

Author: koke

WooCommerce/Classes/ViewRelated/CardPresentPayments/CardPresentPaymentsModalViewController.swift

@@ -11,6 +11,7 @@ final class CardPresentPaymentsModalViewController: UIViewController {
 
     @IBOutlet weak var containerView: UIView!
     @IBOutlet weak var mainStackView: UIStackView!
+    @IBOutlet weak var bottomPaddingRegular: NSLayoutConstraint!
     @IBOutlet weak var primaryActionButtonsStackView: UIStackView!
     @IBOutlet weak var buttonsSpacer: UIView!
     @IBOutlet private weak var topTitleLabel: UILabel!
@@ -82,6 +83,7 @@ final class CardPresentPaymentsModalViewController: UIViewController {
 
         heightConstraint.priority = .required
         widthConstraint.priority = .required
+        configureSpacer()
     }
 }
 
@@ -117,8 +119,8 @@ private extension CardPresentPaymentsModalViewController {
 
     func styleBottomLabels() {
         actionButtonsView.isHidden = true
-        buttonsSpacer.isHidden = false
         bottomLabels.isHidden = false
+        configureSpacer()
 
         styleBottomTitle()
         styleBottomSubtitle()
@@ -134,8 +136,8 @@ private extension CardPresentPaymentsModalViewController {
 
     func styleActionButtons() {
         actionButtonsView.isHidden = false
-        buttonsSpacer.isHidden = true
         bottomLabels.isHidden = true
+        configureSpacer()
 
         stylePrimaryButton()
         styleSecondaryButton()
@@ -239,7 +241,7 @@ private extension CardPresentPaymentsModalViewController {
 
     func hideActionButtonsView() {
         actionButtonsView.isHidden = true
-        buttonsSpacer.isHidden = false
+        configureSpacer()
     }
 
     func configurePrimaryButton() {
@@ -271,6 +273,30 @@ private extension CardPresentPaymentsModalViewController {
         auxiliaryButton.isHidden = false
         auxiliaryButton.setTitle(viewModel.auxiliaryButtonTitle, for: .normal)
     }
+
+    func configureSpacer() {
+        let enabled = !shouldShowActionButtons()
+
+        if isRegularClassSize {
+            buttonsSpacer.isHidden = true
+            // For iPads, instead of a flexible spacer we expand the bottom margin with an extra 127px.
+            // This would be the space equivalents to the primary and secondary buttons being visible
+            // - 32px of spacing between buttons container and the rest of the content
+            // - 40px for the primary button
+            // - 15px of spacing between buttons
+            // - 40px for the secondary button
+            bottomPaddingRegular.constant = 42 + (enabled ? 127 : 0)
+        } else {
+            // For compact screens (iPhones, or iPad in split mode), we us a flexible spacer with a low
+            // content hugging priority to ensure it takes all the available space, leaving the rest of
+            // the visible items aligned to the top of the stack view
+            buttonsSpacer.isHidden = !enabled
+        }
+    }
+
+    var isRegularClassSize: Bool {
+        traitCollection.verticalSizeClass == .regular && traitCollection.horizontalSizeClass == .regular
+    }
 }
 
 // MARK: - View layout configuration

WooCommerce/Classes/ViewRelated/CardPresentPayments/CardPresentPaymentsModalViewController.xib

@@ -13,6 +13,7 @@
                 <outlet property="actionButtonsView" destination="10Z-y1-ZQ6" id="L1z-Zs-L2J"/>
                 <outlet property="auxiliaryButton" destination="maO-19-PuQ" id="cQA-7p-jmo"/>
                 <outlet property="bottomLabels" destination="k73-qi-GuD" id="LvQ-UE-SBc"/>
+                <outlet property="bottomPaddingRegular" destination="lVZ-pu-Fmb" id="CJM-oy-oSx"/>
                 <outlet property="bottomSubtitleLabel" destination="2Sx-5s-f7J" id="Mco-Vu-Li6"/>
                 <outlet property="bottomTitleLabel" destination="oAj-lv-0k9" id="Clc-oi-Ywf"/>
                 <outlet property="buttonsSpacer" destination="OFI-6w-cag" id="Uva-gQ-T7X"/>