From 71d4e16d9d8aa5f243d9838a4c0a289208fed65d Mon Sep 17 00:00:00 2001 From: Jon Petersson Date: Wed, 13 Sep 2023 14:20:50 +0200 Subject: [PATCH] Fix voucher dialog margins --- .../CreateAccountVoucherCoordinator.swift | 20 ++++++++++++++++++- .../ProfileVoucherCoordinator.swift | 5 ++++- ios/MullvadVPN/UI appearance/UIMetrics.swift | 2 +- .../RedeemVoucherContentView.swift | 18 ++++++----------- .../RedeemVoucherViewConfiguration.swift | 4 +++- 5 files changed, 33 insertions(+), 16 deletions(-) diff --git a/ios/MullvadVPN/Coordinators/CreateAccountVoucherCoordinator.swift b/ios/MullvadVPN/Coordinators/CreateAccountVoucherCoordinator.swift index 1407c61808e3..26e7cdcce310 100644 --- a/ios/MullvadVPN/Coordinators/CreateAccountVoucherCoordinator.swift +++ b/ios/MullvadVPN/Coordinators/CreateAccountVoucherCoordinator.swift @@ -26,8 +26,15 @@ public class CreateAccountVoucherCoordinator: Coordinator { self.navigationController = navigationController self.interactor = interactor + var layoutMargins = navigationController.view.layoutMargins.toDirectionalInsets + layoutMargins.top += UIMetrics.contentLayoutMargins.top + layoutMargins.bottom += UIMetrics.contentLayoutMargins.bottom + viewController = RedeemVoucherViewController( - configuration: RedeemVoucherViewConfiguration(adjustViewWhenKeyboardAppears: true), + configuration: RedeemVoucherViewConfiguration( + adjustViewWhenKeyboardAppears: true, + layoutMargins: layoutMargins + ), interactor: interactor ) } @@ -64,3 +71,14 @@ extension CreateAccountVoucherCoordinator: RedeemVoucherViewControllerDelegate { didCancel?(self) } } + +private extension UIEdgeInsets { + var toDirectionalInsets: NSDirectionalEdgeInsets { + NSDirectionalEdgeInsets( + top: top, + leading: left, + bottom: bottom, + trailing: right + ) + } +} diff --git a/ios/MullvadVPN/Coordinators/ProfileVoucherCoordinator.swift b/ios/MullvadVPN/Coordinators/ProfileVoucherCoordinator.swift index 8e166985b900..4ea0e33d6b45 100644 --- a/ios/MullvadVPN/Coordinators/ProfileVoucherCoordinator.swift +++ b/ios/MullvadVPN/Coordinators/ProfileVoucherCoordinator.swift @@ -24,7 +24,10 @@ final class ProfileVoucherCoordinator: Coordinator, Presentable { ) { self.navigationController = navigationController viewController = RedeemVoucherViewController( - configuration: RedeemVoucherViewConfiguration(adjustViewWhenKeyboardAppears: false), + configuration: RedeemVoucherViewConfiguration( + adjustViewWhenKeyboardAppears: false, + layoutMargins: UIMetrics.SettingsRedeemVoucher.contentLayoutMargins + ), interactor: interactor ) } diff --git a/ios/MullvadVPN/UI appearance/UIMetrics.swift b/ios/MullvadVPN/UI appearance/UIMetrics.swift index b257d5d46a8d..41b380336796 100644 --- a/ios/MullvadVPN/UI appearance/UIMetrics.swift +++ b/ios/MullvadVPN/UI appearance/UIMetrics.swift @@ -38,7 +38,7 @@ enum UIMetrics { enum SettingsRedeemVoucher { static let cornerRadius = 8.0 static let preferredContentSize = CGSize(width: 280, height: 260) - static let contentLayoutMargins = NSDirectionalEdgeInsets(top: 16, leading: 0, bottom: 16, trailing: 0) + static let contentLayoutMargins = NSDirectionalEdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16) } enum AccountDeletion { diff --git a/ios/MullvadVPN/View controllers/RedeemVoucher/RedeemVoucherContentView.swift b/ios/MullvadVPN/View controllers/RedeemVoucher/RedeemVoucherContentView.swift index f5061d570d26..4f710b612c00 100644 --- a/ios/MullvadVPN/View controllers/RedeemVoucher/RedeemVoucherContentView.swift +++ b/ios/MullvadVPN/View controllers/RedeemVoucher/RedeemVoucherContentView.swift @@ -40,7 +40,6 @@ final class RedeemVoucherContentView: UIView { comment: "" ) label.textColor = .white - label.translatesAutoresizingMaskIntoConstraints = false label.numberOfLines = 0 return label }() @@ -61,7 +60,6 @@ final class RedeemVoucherContentView: UIView { private let activityIndicator: SpinnerActivityIndicatorView = { let activityIndicator = SpinnerActivityIndicatorView(style: .medium) - activityIndicator.translatesAutoresizingMaskIntoConstraints = false activityIndicator.tintColor = .white activityIndicator.setContentHuggingPriority(.defaultHigh, for: .horizontal) activityIndicator.setContentCompressionResistancePriority(.defaultHigh, for: .horizontal) @@ -111,8 +109,6 @@ final class RedeemVoucherContentView: UIView { private lazy var statusStack: UIStackView = { let stackView = UIStackView(arrangedSubviews: [activityIndicator, statusLabel]) - stackView.translatesAutoresizingMaskIntoConstraints = false - stackView.axis = .horizontal stackView.spacing = UIMetrics.padding8 return stackView }() @@ -124,7 +120,6 @@ final class RedeemVoucherContentView: UIView { statusStack, logoutViewForAccountNumberIsEntered, ]) - stackView.translatesAutoresizingMaskIntoConstraints = false stackView.axis = .vertical stackView.setCustomSpacing(UIMetrics.padding16, after: titleLabel) stackView.setCustomSpacing(UIMetrics.padding8, after: textField) @@ -136,7 +131,6 @@ final class RedeemVoucherContentView: UIView { private lazy var buttonsStackView: UIStackView = { let stackView = UIStackView(arrangedSubviews: [redeemButton, cancelButton]) - stackView.translatesAutoresizingMaskIntoConstraints = false stackView.axis = .vertical stackView.spacing = UIMetrics.padding16 stackView.setContentCompressionResistancePriority(.required, for: .vertical) @@ -238,9 +232,7 @@ final class RedeemVoucherContentView: UIView { } required init?(coder: NSCoder) { - self.configuration = RedeemVoucherViewConfiguration(adjustViewWhenKeyboardAppears: true) - super.init(coder: coder) - commonInit() + fatalError("init(coder:) has not been implemented") } private func commonInit() { @@ -260,14 +252,15 @@ final class RedeemVoucherContentView: UIView { private func configureUI() { addConstrainedSubviews([scrollView]) { - scrollView.pinEdgesToSuperviewMargins() + scrollView.pinEdgesToSuperview(.all(configuration.layoutMargins)) } scrollView.addConstrainedSubviews([contentHolderView]) { contentHolderView.pinEdgesToSuperview() - contentHolderView.widthAnchor.constraint(equalTo: scrollView.widthAnchor, multiplier: 1.0) - contentHolderView.heightAnchor.constraint(greaterThanOrEqualTo: scrollView.heightAnchor, multiplier: 1.0) + contentHolderView.widthAnchor.constraint(equalTo: scrollView.widthAnchor) + contentHolderView.heightAnchor.constraint(greaterThanOrEqualTo: scrollView.heightAnchor) } + contentHolderView.addConstrainedSubviews([voucherCodeStackView, buttonsStackView]) { voucherCodeStackView.pinEdgesToSuperview(.all().excluding(.bottom)) buttonsStackView.pinEdgesToSuperview(PinnableEdges([.leading(.zero), .trailing(.zero)])) @@ -276,6 +269,7 @@ final class RedeemVoucherContentView: UIView { constant: -UIMetrics.padding16 ) } + bottomsOfButtonsConstraint = buttonsStackView.pinEdgesToSuperview(PinnableEdges([.bottom(.zero)])).first bottomsOfButtonsConstraint?.isActive = true } diff --git a/ios/MullvadVPN/View controllers/RedeemVoucher/RedeemVoucherViewConfiguration.swift b/ios/MullvadVPN/View controllers/RedeemVoucher/RedeemVoucherViewConfiguration.swift index 32052230da23..7c20f3299be1 100644 --- a/ios/MullvadVPN/View controllers/RedeemVoucher/RedeemVoucherViewConfiguration.swift +++ b/ios/MullvadVPN/View controllers/RedeemVoucher/RedeemVoucherViewConfiguration.swift @@ -6,7 +6,9 @@ // Copyright © 2023 Mullvad VPN AB. All rights reserved. // -import Foundation +import UIKit + struct RedeemVoucherViewConfiguration { let adjustViewWhenKeyboardAppears: Bool + let layoutMargins: NSDirectionalEdgeInsets }