Merge branch 'fix-selected-relay-label-being-too-long-when-multihoping-ios-810'

2 files changed, 69 insertions, 82 deletions

diff --git a/ios/MullvadVPN/View controllers/Tunnel/ConnectionPanelView.swift b/ios/MullvadVPN/View controllers/Tunnel/ConnectionPanelView.swift
index 5389d5dee4..a9e8f785be 100644
--- a/ios/MullvadVPN/View controllers/Tunnel/ConnectionPanelView.swift
+++ b/ios/MullvadVPN/View controllers/Tunnel/ConnectionPanelView.swift
@@ -29,15 +29,15 @@ class ConnectionPanelView: UIView {
 
     var connectedRelayName = "" {
         didSet {
-            collapseButton.accessibilityIdentifier = .relayStatusCollapseButton
-            collapseButton.setTitle(connectedRelayName, for: .normal)
-            collapseButton.accessibilityLabel = NSLocalizedString(
+            collapseView.accessibilityIdentifier = .relayStatusCollapseButton
+            collapseView.title.text = connectedRelayName
+            collapseView.accessibilityLabel = NSLocalizedString(
                 "RELAY_ACCESSIBILITY_LABEL",
                 tableName: "ConnectionPanel",
                 value: "Connected relay",
                 comment: ""
             )
-            collapseButton.accessibilityAttributedValue = NSAttributedString(
+            collapseView.accessibilityAttributedValue = NSAttributedString(
                 string: connectedRelayName.replacingOccurrences(
                     of: "-wireguard",
                     with: " WireGuard"
@@ -47,8 +47,8 @@ class ConnectionPanelView: UIView {
         }
     }
 
-    private let collapseButton: ConnectionPanelCollapseButton = {
-        let button = ConnectionPanelCollapseButton(type: .custom)
+    private let collapseView: ConnectionPanelCollapseView = {
+        let button = ConnectionPanelCollapseView()
         button.translatesAutoresizingMaskIntoConstraints = false
         button.tintColor = .white
         return button
@@ -92,16 +92,16 @@ class ConnectionPanelView: UIView {
             comment: ""
         )
 
-        addSubview(collapseButton)
+        addSubview(collapseView)
         addSubview(stackView)
         addLayoutGuide(textLabelLayoutGuide)
 
         NSLayoutConstraint.activate([
-            collapseButton.topAnchor.constraint(equalTo: topAnchor),
-            collapseButton.leadingAnchor.constraint(equalTo: leadingAnchor),
-            collapseButton.trailingAnchor.constraint(equalTo: trailingAnchor),
+            collapseView.topAnchor.constraint(equalTo: topAnchor),
+            collapseView.leadingAnchor.constraint(equalTo: leadingAnchor),
+            collapseView.trailingAnchor.constraint(equalTo: trailingAnchor),
 
-            stackView.topAnchor.constraint(equalTo: collapseButton.bottomAnchor, constant: 4),
+            stackView.topAnchor.constraint(equalTo: collapseView.bottomAnchor, constant: 4),
             stackView.leadingAnchor.constraint(equalTo: leadingAnchor),
             stackView.trailingAnchor.constraint(equalTo: trailingAnchor),
             stackView.bottomAnchor.constraint(equalTo: bottomAnchor),
@@ -119,7 +119,12 @@ class ConnectionPanelView: UIView {
         updateConnectionInfoVisibility()
         updateCollapseButtonAccessibilityHint()
 
-        collapseButton.addTarget(self, action: #selector(toggleCollapse(_:)), for: .touchUpInside)
+        let longPressGestureRecognizer = UILongPressGestureRecognizer(
+            target: self,
+            action: #selector(toggleCollapse(_:))
+        )
+        longPressGestureRecognizer.minimumPressDuration = 0
+        collapseView.addGestureRecognizer(longPressGestureRecognizer)
     }
 
     required init?(coder: NSCoder) {
@@ -138,15 +143,25 @@ class ConnectionPanelView: UIView {
         showsConnectionInfo = !showsConnectionInfo
     }
 
-    @objc private func toggleCollapse(_ sender: Any) {
-        toggleConnectionInfoVisibility()
+    @objc private func toggleCollapse(_ sender: UILongPressGestureRecognizer) {
+        switch sender.state {
+        case .began:
+            collapseView.title.textColor = .lightGray
+            collapseView.imageView.tintColor = .lightGray
+        case .ended:
+            collapseView.title.textColor = .white
+            collapseView.imageView.tintColor = .white
+            toggleConnectionInfoVisibility()
+        default:
+            break
+        }
     }
 
     private func updateConnectionInfoVisibility() {
         stackView.isHidden = !showsConnectionInfo
-        collapseButton.style = showsConnectionInfo ? .up : .down
+        collapseView.style = showsConnectionInfo ? .up : .down
 
-        if collapseButton.accessibilityElementIsFocused(), showsConnectionInfo {
+        if collapseView.accessibilityElementIsFocused(), showsConnectionInfo {
             UIAccessibility.post(
                 notification: .layoutChanged,
                 argument: stackView.arrangedSubviews.first
@@ -157,14 +172,14 @@ class ConnectionPanelView: UIView {
 
     private func updateCollapseButtonAccessibilityHint() {
         if showsConnectionInfo {
-            collapseButton.accessibilityHint = NSLocalizedString(
+            collapseView.accessibilityHint = NSLocalizedString(
                 "COLLAPSE_BUTTON_ACCESSIBILITY_HINT",
                 tableName: "ConnectionPanel",
                 value: "Double tap to collapse the connection info panel.",
                 comment: ""
             )
         } else {
-            collapseButton.accessibilityHint = NSLocalizedString(
+            collapseView.accessibilityHint = NSLocalizedString(
                 "EXPAND_BUTTON_ACCESSIBILITY_HINT",
                 tableName: "ConnectionPanel",
                 value: "Double tap to expand the connection info panel.",
@@ -251,7 +266,7 @@ class ConnectionPanelAddressRow: UIView {
     }
 }
 
-class ConnectionPanelCollapseButton: CustomButton {
+class ConnectionPanelCollapseView: UIStackView {
     enum Style {
         case up, down
 
@@ -267,35 +282,43 @@ class ConnectionPanelCollapseButton: CustomButton {
 
     var style = Style.up {
         didSet {
-            updateButtonImage()
+            updateImage()
         }
     }
 
+    private(set) var title: UILabel = {
+        let button = UILabel()
+        button.textColor = .white
+        button.numberOfLines = 0
+        return button
+    }()
+
+    private(set) var imageView: UIImageView = {
+        return UIImageView()
+    }()
+
     override init(frame: CGRect) {
         super.init(frame: frame)
-        commonInit()
-    }
 
-    required init?(coder: NSCoder) {
-        super.init(coder: coder)
-        commonInit()
-    }
+        let imageContainer = UIStackView()
+        imageContainer.axis = .vertical
+        imageContainer.addArrangedSubview(imageView)
+        imageContainer.addArrangedSubview(UIView()) // Pushes content up.
 
-    private func commonInit() {
-        setTitleColor(UIColor.white, for: .normal)
-        setTitleColor(UIColor.lightGray, for: .highlighted)
-        setTitleColor(UIColor.lightGray, for: .disabled)
+        addArrangedSubview(title)
+        addArrangedSubview(imageContainer)
+        addArrangedSubview(UIView()) // Pushes content left.
 
-        contentHorizontalAlignment = .leading
-        imageAlignment = .trailing
-        inlineImageSpacing = 0
+        updateImage()
 
         accessibilityIdentifier = .connectionPanelButton
+    }
 
-        updateButtonImage()
+    required init(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
     }
 
-    private func updateButtonImage() {
-        setImage(style.image, for: .normal)
+    private func updateImage() {
+        imageView.image = style.image
     }
 }
diff --git a/ios/MullvadVPN/View controllers/Tunnel/TunnelControlView.swift b/ios/MullvadVPN/View controllers/Tunnel/TunnelControlView.swift
index 38c02748a4..c59679e0ba 100644
--- a/ios/MullvadVPN/View controllers/Tunnel/TunnelControlView.swift
+++ b/ios/MullvadVPN/View controllers/Tunnel/TunnelControlView.swift
@@ -41,11 +41,13 @@ final class TunnelControlView: UIView {
         return activityIndicator
     }()
 
-    private let locationContainerView: UIView = {
-        let view = UIView()
+    private let locationContainerView: UIStackView = {
+        let view = UIStackView()
         view.translatesAutoresizingMaskIntoConstraints = false
         view.isAccessibilityElement = true
         view.accessibilityTraits = .summaryElement
+        view.axis = .vertical
+        view.spacing = 8
         return view
     }()
 
@@ -249,16 +251,11 @@ final class TunnelControlView: UIView {
     // MARK: - Private
 
     private func addSubviews() {
-        for subview in [secureLabel, countryLabel, cityLabel] {
-            locationContainerView.addSubview(subview)
+        for subview in [secureLabel, countryLabel, cityLabel, connectionPanel] {
+            locationContainerView.addArrangedSubview(subview)
         }
 
-        for subview in [
-            activityIndicator,
-            locationContainerView,
-            connectionPanel,
-            buttonsStackView,
-        ] {
+        for subview in [activityIndicator, buttonsStackView, locationContainerView] {
             containerView.addSubview(subview)
         }
 
@@ -268,6 +265,7 @@ final class TunnelControlView: UIView {
             containerView.topAnchor.constraint(equalTo: layoutMarginsGuide.topAnchor),
             containerView.leadingAnchor.constraint(equalTo: layoutMarginsGuide.leadingAnchor),
             containerView.bottomAnchor.constraint(equalTo: layoutMarginsGuide.bottomAnchor),
+            containerView.trailingAnchor.constraint(equalTo: layoutMarginsGuide.trailingAnchor),
 
             locationContainerView.topAnchor.constraint(greaterThanOrEqualTo: containerView.topAnchor),
             locationContainerView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
@@ -279,36 +277,14 @@ final class TunnelControlView: UIView {
                 constant: 22
             ),
 
-            secureLabel.topAnchor.constraint(equalTo: locationContainerView.topAnchor),
-            secureLabel.leadingAnchor.constraint(equalTo: locationContainerView.leadingAnchor),
-            secureLabel.trailingAnchor.constraint(equalTo: locationContainerView.trailingAnchor),
-
-            countryLabel.topAnchor.constraint(equalTo: secureLabel.bottomAnchor, constant: 8),
-            countryLabel.leadingAnchor.constraint(equalTo: locationContainerView.leadingAnchor),
-            countryLabel.trailingAnchor.constraint(equalTo: locationContainerView.trailingAnchor),
-
-            cityLabel.topAnchor.constraint(equalTo: countryLabel.bottomAnchor, constant: 8),
-            cityLabel.leadingAnchor.constraint(equalTo: locationContainerView.leadingAnchor),
-            cityLabel.trailingAnchor.constraint(equalTo: locationContainerView.trailingAnchor),
-            cityLabel.bottomAnchor.constraint(equalTo: locationContainerView.bottomAnchor),
-
-            connectionPanel.topAnchor.constraint(
-                equalTo: locationContainerView.bottomAnchor,
-                constant: 8
-            ),
-            connectionPanel.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
-            connectionPanel.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
-
             buttonsStackView.topAnchor.constraint(
-                equalTo: connectionPanel.bottomAnchor,
+                equalTo: locationContainerView.bottomAnchor,
                 constant: 24
             ),
             buttonsStackView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
             buttonsStackView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
             buttonsStackView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor),
         ])
-
-        updateTraitConstraints()
     }
 
     private func addButtonHandlers() {
@@ -339,18 +315,6 @@ final class TunnelControlView: UIView {
         )
     }
 
-    private func updateTraitConstraints() {
-        var layoutConstraints = [NSLayoutConstraint]()
-
-        layoutConstraints.append(
-            containerView.trailingAnchor.constraint(equalTo: layoutMarginsGuide.trailingAnchor)
-        )
-
-        removeConstraints(traitConstraints)
-        traitConstraints = layoutConstraints
-        NSLayoutConstraint.activate(layoutConstraints)
-    }
-
     private func setArrangedButtons(_ newButtons: [UIView]) {
         buttonsStackView.arrangedSubviews.forEach { button in
             if !newButtons.contains(button) {
@@ -380,7 +344,7 @@ final class TunnelControlView: UIView {
     private func attributedStringForLocation(string: String) -> NSAttributedString {
         let paragraphStyle = NSMutableParagraphStyle()
         paragraphStyle.lineSpacing = 0
-        paragraphStyle.lineHeightMultiple = 0.80
+        paragraphStyle.lineHeightMultiple = 0.8
 
         return NSAttributedString(
             string: string,