Connect: adapt for iPad

3 files changed, 63 insertions, 8 deletions

diff --git a/ios/MullvadVPN/ConnectMainContentView.swift b/ios/MullvadVPN/ConnectMainContentView.swift
index 95e97128e3..a92d18fdda 100644
--- a/ios/MullvadVPN/ConnectMainContentView.swift
+++ b/ios/MullvadVPN/ConnectMainContentView.swift
@@ -61,11 +61,13 @@ class ConnectMainContentView: UIView {
         return view
     }()
 
+    private var traitConstraints = [NSLayoutConstraint]()
+
     override init(frame: CGRect) {
         super.init(frame: frame)
 
         backgroundColor = .primaryColor
-        layoutMargins = UIEdgeInsets(top: 24, left: 24, bottom: 24, right: 24)
+        layoutMargins = UIMetrics.contentLayoutMargins
 
         addSubviews()
     }
@@ -95,7 +97,6 @@ class ConnectMainContentView: UIView {
         NSLayoutConstraint.activate([
             containerView.topAnchor.constraint(equalTo: layoutMarginsGuide.topAnchor),
             containerView.leadingAnchor.constraint(equalTo: layoutMarginsGuide.leadingAnchor),
-            containerView.trailingAnchor.constraint(equalTo: layoutMarginsGuide.trailingAnchor),
             containerView.bottomAnchor.constraint(equalTo: layoutMarginsGuide.bottomAnchor),
 
             secureLabel.topAnchor.constraint(greaterThanOrEqualTo: containerView.topAnchor),
@@ -119,6 +120,43 @@ class ConnectMainContentView: UIView {
             buttonsStackView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
             buttonsStackView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor)
         ])
+
+        updateTraitConstraints()
+    }
+
+    private func updateTraitConstraints() {
+        var layoutConstraints = [NSLayoutConstraint]()
+
+        switch traitCollection.userInterfaceIdiom {
+        case .pad:
+            // Max container width is 70% width of iPad in portrait mode
+            let maxWidth = min(UIScreen.main.nativeBounds.width * 0.7, UIMetrics.maximumSplitViewContentContainerWidth)
+            let containerWidthConstraint = containerView.widthAnchor.constraint(equalToConstant: maxWidth)
+            containerWidthConstraint.priority = .defaultHigh
+
+            layoutConstraints.append(contentsOf:[
+                containerView.trailingAnchor.constraint(lessThanOrEqualTo: layoutMarginsGuide.trailingAnchor),
+                containerWidthConstraint
+            ])
+
+        case .phone:
+            layoutConstraints.append(containerView.trailingAnchor.constraint(equalTo: layoutMarginsGuide.trailingAnchor))
+
+        default:
+            break
+        }
+
+        traitConstraints = layoutConstraints
+        removeConstraints(traitConstraints)
+        NSLayoutConstraint.activate(layoutConstraints)
+    }
+
+    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
+        super.traitCollectionDidChange(previousTraitCollection)
+
+        if traitCollection.userInterfaceIdiom != previousTraitCollection?.userInterfaceIdiom {
+            updateTraitConstraints()
+        }
     }
 
     private func setArrangedButtons(_ newButtons: [UIView]) {
diff --git a/ios/MullvadVPN/ConnectViewController.swift b/ios/MullvadVPN/ConnectViewController.swift
index f8968b1ad3..90c6c5f205 100644
--- a/ios/MullvadVPN/ConnectViewController.swift
+++ b/ios/MullvadVPN/ConnectViewController.swift
@@ -347,12 +347,27 @@ private extension TunnelState {
     }
 
     var actionButtons: [ConnectMainContentView.ActionButton] {
-        switch self {
-        case .disconnected, .disconnecting:
-            return [.selectLocation, .connect]
+        switch UIDevice.current.userInterfaceIdiom {
+        case .phone:
+            switch self {
+            case .disconnected, .disconnecting:
+                return [.selectLocation, .connect]
 
-        case .connecting, .connected, .reconnecting:
-            return [.selectLocation, .disconnect]
+            case .connecting, .connected, .reconnecting:
+                return [.selectLocation, .disconnect]
+            }
+
+        case .pad:
+            switch self {
+            case .disconnected, .disconnecting:
+                return [.connect]
+
+            case .connecting, .connected, .reconnecting:
+                return [.disconnect]
+            }
+
+        default:
+            fatalError("Not supported")
         }
     }
 
diff --git a/ios/MullvadVPN/UIMetrics.swift b/ios/MullvadVPN/UIMetrics.swift
index 5d766d749c..12520b0982 100644
--- a/ios/MullvadVPN/UIMetrics.swift
+++ b/ios/MullvadVPN/UIMetrics.swift
@@ -12,8 +12,10 @@ enum UIMetrics {}
 
 extension UIMetrics {
 
-    // Common layout margins for content presentation
+    /// Common layout margins for content presentation
     static var contentLayoutMargins = UIEdgeInsets(top: 24, left: 24, bottom: 24, right: 24)
 
+    /// Maximum width of the split view content container on iPad
+    static var maximumSplitViewContentContainerWidth: CGFloat = 810 * 0.7
 
 }