AppButton: make buttons larger on iPad

2 files changed, 59 insertions, 10 deletions

diff --git a/ios/MullvadVPN/AppButton.swift b/ios/MullvadVPN/AppButton.swift
index ac0fba7b04..8636c667ee 100644
--- a/ios/MullvadVPN/AppButton.swift
+++ b/ios/MullvadVPN/AppButton.swift
@@ -98,7 +98,16 @@ private extension UIControl.State {
 /// A subclass that implements action buttons used across the app
 @IBDesignable class AppButton: CustomButton {
 
-    static let defaultContentInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
+    var defaultContentInsets: UIEdgeInsets {
+        switch traitCollection.userInterfaceIdiom {
+        case .phone:
+            return UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
+        case .pad:
+            return UIEdgeInsets(top: 15, left: 15, bottom: 15, right: 15)
+        default:
+            return .zero
+        }
+    }
 
     enum Style: Int {
         case `default`
@@ -146,6 +155,8 @@ private extension UIControl.State {
         }
     }
 
+    var overrideContentEdgeInsets = false
+
     init(style: Style) {
         self.style = style
         super.init(frame: .zero)
@@ -168,19 +179,19 @@ private extension UIControl.State {
         var contentInsets = contentEdgeInsets
 
         if contentInsets.top == 0 {
-            contentInsets.top = Self.defaultContentInsets.top
+            contentInsets.top = self.defaultContentInsets.top
         }
 
         if contentInsets.bottom == 0 {
-            contentInsets.bottom = Self.defaultContentInsets.bottom
+            contentInsets.bottom = self.defaultContentInsets.bottom
         }
 
         if contentInsets.right == 0 {
-            contentInsets.right = Self.defaultContentInsets.right
+            contentInsets.right = self.defaultContentInsets.right
         }
 
         if contentInsets.left == 0 {
-            contentInsets.left = Self.defaultContentInsets.left
+            contentInsets.left = self.defaultContentInsets.left
         }
 
         contentEdgeInsets = contentInsets
@@ -205,6 +216,14 @@ private extension UIControl.State {
         setBackgroundImage(style.backgroundImage, for: .normal)
     }
 
+    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
+        super.traitCollectionDidChange(previousTraitCollection)
+
+        if traitCollection.userInterfaceIdiom != previousTraitCollection?.userInterfaceIdiom, !overrideContentEdgeInsets {
+            contentEdgeInsets = self.defaultContentInsets
+        }
+    }
+
 }
 
 /// A custom `UIButton` subclass that implements additional layouts for the image
diff --git a/ios/MullvadVPN/DisconnectSplitButton.swift b/ios/MullvadVPN/DisconnectSplitButton.swift
index 09fa5424cd..be3340d3ce 100644
--- a/ios/MullvadVPN/DisconnectSplitButton.swift
+++ b/ios/MullvadVPN/DisconnectSplitButton.swift
@@ -12,12 +12,23 @@ import UIKit
 class DisconnectSplitButton: UIView {
 
     private var secondaryButtonSize: CGSize {
-        return CGSize(width: 42, height: 42)
+        // TODO: make it less hardcoded
+        switch self.traitCollection.userInterfaceIdiom {
+        case .phone:
+            return CGSize(width: 42, height: 42)
+        case .pad:
+            return CGSize(width: 52, height: 52)
+        default:
+            return .zero
+        }
     }
 
     let primaryButton = AppButton(style: .translucentDangerSplitLeft)
     let secondaryButton = AppButton(style: .translucentDangerSplitRight)
 
+    private let secondaryButtonWidthConstraint: NSLayoutConstraint
+    private let secondaryButtonHeightConstraint: NSLayoutConstraint
+
     private let stackView: UIStackView
 
     init() {
@@ -31,6 +42,10 @@ class DisconnectSplitButton: UIView {
         primaryButton.titleLabel?.font = UIFont.systemFont(ofSize: 18, weight: .semibold)
         secondaryButton.setImage(UIImage(named: "IconReload"), for: .normal)
 
+        primaryButton.overrideContentEdgeInsets = true
+        secondaryButtonWidthConstraint = secondaryButton.widthAnchor.constraint(equalToConstant: 0)
+        secondaryButtonHeightConstraint = secondaryButton.heightAnchor.constraint(equalToConstant: 0)
+
         super.init(frame: .zero)
 
         addSubview(stackView)
@@ -41,19 +56,34 @@ class DisconnectSplitButton: UIView {
             stackView.topAnchor.constraint(equalTo: topAnchor),
             stackView.bottomAnchor.constraint(equalTo: bottomAnchor),
 
-            secondaryButton.widthAnchor.constraint(equalToConstant: self.secondaryButtonSize.width),
-            secondaryButton.heightAnchor.constraint(equalToConstant: self.secondaryButtonSize.height)
+            secondaryButtonWidthConstraint,
+            secondaryButtonHeightConstraint
         ])
 
-        adjustTitleLabelPosition()
+        updateTraitConstraints()
     }
 
     required init?(coder: NSCoder) {
         fatalError("init(coder:) has not been implemented")
     }
 
+    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
+        super.traitCollectionDidChange(previousTraitCollection)
+
+        if traitCollection.userInterfaceIdiom != previousTraitCollection?.userInterfaceIdiom {
+            updateTraitConstraints()
+        }
+    }
+
+    private func updateTraitConstraints() {
+        let newSize = self.secondaryButtonSize
+        secondaryButtonWidthConstraint.constant = newSize.width
+        secondaryButtonHeightConstraint.constant = newSize.height
+        adjustTitleLabelPosition()
+    }
+
     private func adjustTitleLabelPosition() {
-        var contentInsets = AppButton.defaultContentInsets
+        var contentInsets = primaryButton.defaultContentInsets
         contentInsets.left = stackView.spacing + self.secondaryButtonSize.width
         contentInsets.right = 0