Adjust icons with dynamic font size

mozilla-mobile · Sep 6, 2024 · 93bcef4 · 93bcef4
1 parent cb437a4
commit 93bcef4
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 44 deletions.
diff --git a/BrowserKit/Sources/ComponentLibrary/Buttons/CloseButton.swift b/BrowserKit/Sources/ComponentLibrary/Buttons/CloseButton.swift
@@ -7,6 +7,8 @@ import UIKit
 
 public class CloseButton: UIButton {
     private var viewModel: CloseButtonViewModel?
+    private var heightConstraint: NSLayoutConstraint?
+    private var widthConstraint: NSLayoutConstraint?
 
     private struct UX {
         static let closeButtonSize = CGSize(width: 30, height: 30)
@@ -17,6 +19,7 @@ public class CloseButton: UIButton {
         super.init(frame: frame)
 
         setImage(UIImage(named: UX.crossCircleImage), for: .normal)
+        adjustsImageSizeForAccessibilityContentSizeCategory = true
         setupConstraints()
     }
 
@@ -26,10 +29,15 @@ public class CloseButton: UIButton {
 
     private func setupConstraints() {
         translatesAutoresizingMaskIntoConstraints = false
-        NSLayoutConstraint.activate([
-            heightAnchor.constraint(equalToConstant: UX.closeButtonSize.height),
-            widthAnchor.constraint(equalToConstant: UX.closeButtonSize.width)
-        ])
+        heightConstraint = heightAnchor.constraint(equalToConstant: UX.closeButtonSize.height)
+        heightConstraint?.isActive = true
+        widthConstraint = widthAnchor.constraint(equalToConstant: UX.closeButtonSize.width)
+        widthConstraint?.isActive = true
+    }
+
+    public func updateLayoutForDynamicFont(newSize: CGFloat) {
+        heightConstraint?.constant = newSize
+        widthConstraint?.constant = newSize
     }
 
     public func configure(viewModel: CloseButtonViewModel) {

diff --git a/BrowserKit/Sources/ComponentLibrary/Buttons/PrimaryRoundedButton.swift b/BrowserKit/Sources/ComponentLibrary/Buttons/PrimaryRoundedButton.swift
@@ -62,7 +62,6 @@ public class PrimaryRoundedButton: ResizableButton, ThemeApplicable {
             container.font = FXFontStyles.Bold.callout.scaledFont()
             return container
         }
-
         updatedConfiguration.imageColorTransformer = UIConfigurationColorTransformer { [weak self] color in
             if self?.state == .disabled {
                 return self?.foregroundColorDisabled ?? .white

diff --git a/firefox-ios/Client/Frontend/Library/ReaderPanel.swift b/firefox-ios/Client/Frontend/Library/ReaderPanel.swift
@@ -343,7 +343,7 @@ class ReadingListPanel: UITableViewController,
             label.text = .ReaderPanelWelcome
             label.textAlignment = .center
             label.font = FXFontStyles.Bold.body.scaledFont()
-            label.adjustsFontSizeToFitWidth = true
+            label.numberOfLines = 0
             label.textColor = self.currentTheme().colors.textSecondary
         }
         let readerModeLabel: UILabel = .build { label in
@@ -353,7 +353,7 @@ class ReadingListPanel: UITableViewController,
             label.textColor = self.currentTheme().colors.textSecondary
         }
         let readerModeImageView: UIImageView = .build { imageView in
-            imageView.contentMode = .scaleAspectFit
+            imageView.contentMode = .scaleAspectFill
             imageView.image = UIImage(named: StandardImageIdentifiers.Large.readerView)?
                 .withRenderingMode(.alwaysTemplate)
             imageView.tintColor = self.currentTheme().colors.textSecondary
@@ -365,7 +365,7 @@ class ReadingListPanel: UITableViewController,
             label.textColor = self.currentTheme().colors.textSecondary
         }
         let readingListImageView: UIImageView = .build { imageView in
-            imageView.contentMode = .scaleAspectFit
+            imageView.contentMode = .scaleAspectFill
             imageView.image = UIImage(named: StandardImageIdentifiers.Large.readingListAdd)?
                 .withRenderingMode(.alwaysTemplate)
             imageView.tintColor = self.currentTheme().colors.textSecondary
@@ -376,6 +376,7 @@ class ReadingListPanel: UITableViewController,
 
         view.addSubview(emptyStateViewWrapper)
 
+        let imageScaledWidth = UIFontMetrics.default.scaledValue(for: ReadingListPanelUX.WelcomeScreenItemImageWidth)
         NSLayoutConstraint.activate(
             [
                 // title
@@ -397,7 +398,7 @@ class ReadingListPanel: UITableViewController,
                 readerModeImageView.centerYAnchor.constraint(equalTo: readerModeLabel.centerYAnchor),
                 readerModeImageView.trailingAnchor.constraint(equalTo: welcomeLabel.trailingAnchor),
                 readerModeImageView.widthAnchor.constraint(
-                    equalToConstant: ReadingListPanelUX.WelcomeScreenItemImageWidth
+                    equalToConstant: imageScaledWidth
                 ),
 
                 // second row
@@ -414,7 +415,7 @@ class ReadingListPanel: UITableViewController,
                 readingListImageView.centerYAnchor.constraint(equalTo: readingListLabel.centerYAnchor),
                 readingListImageView.trailingAnchor.constraint(equalTo: welcomeLabel.trailingAnchor),
                 readingListImageView.widthAnchor.constraint(
-                    equalToConstant: ReadingListPanelUX.WelcomeScreenItemImageWidth
+                    equalToConstant: imageScaledWidth
                 ),
 
                 readingListLabel.bottomAnchor.constraint(

diff --git a/firefox-ios/Client/Frontend/Settings/ContentBlockerSettingViewController.swift b/firefox-ios/Client/Frontend/Settings/ContentBlockerSettingViewController.swift
@@ -13,6 +13,7 @@ class ContentBlockerSettingViewController: SettingsTableViewController {
     }
 
     private lazy var linkButton: LinkButton = .build()
+    private var contentSizeCategoryNotificationTicket: NSObjectProtocol?
     let prefs: Prefs
     var currentBlockingStrength: BlockingStrength
 
@@ -45,6 +46,11 @@ class ContentBlockerSettingViewController: SettingsTableViewController {
     override func viewDidLoad() {
         super.viewDidLoad()
         applyTheme()
+        let contentSizeChangeNotification = UIContentSizeCategory.didChangeNotification
+        contentSizeCategoryNotificationTicket = notificationCenter.addObserver(name: contentSizeChangeNotification,
+                                                                               queue: .main) { _ in
+            self.tableView.reloadData()
+        }
     }
 
     override func didRotate(from fromInterfaceOrientation: UIInterfaceOrientation) {
@@ -200,4 +206,9 @@ class ContentBlockerSettingViewController: SettingsTableViewController {
         let currentTheme = currentTheme()
         linkButton.applyTheme(theme: currentTheme)
     }
+
+    deinit {
+        guard let contentSizeCategoryNotificationTicket else { return }
+        notificationCenter.removeObserver(contentSizeCategoryNotificationTicket)
+    }
 }
diff --git a/firefox-ios/Client/Frontend/Settings/SettingsTableViewController.swift b/firefox-ios/Client/Frontend/Settings/SettingsTableViewController.swift
@@ -657,12 +657,10 @@ class CheckmarkSetting: Setting {
         static let defaultInset: CGFloat = 0
         static let cellIndentationWidth: CGFloat = 42
         static let cellIndentationLevel = 1
-        static let checkmarkHeight: CGFloat = 20
-        static let checkmarkWidth: CGFloat = 24
         static let checkmarkTopHeight: CGFloat = 10
+        static let checkmarkHeight: CGFloat = 24.0
         static let checkmarkLeading: CGFloat = 20
         static let checkmarkSymbol = "\u{2713}"
-        static let checkmarkFontSize: CGFloat = 20
         static let cellAlpha: CGFloat = 0.5
     }
 
@@ -673,7 +671,6 @@ class CheckmarkSetting: Setting {
 
     private lazy var check: UILabel = .build { label in
         label.text = UX.checkmarkSymbol
-        label.font = UIFont.systemFont(ofSize: UX.checkmarkFontSize)
     }
 
     override var status: NSAttributedString? {
@@ -709,25 +706,7 @@ class CheckmarkSetting: Setting {
 
             cell.accessoryType = .detailButton
 
-            let checkColor = isChecked() ? theme.colors.actionPrimary : UIColor.clear
-
-            cell.contentView.addSubview(check)
-            NSLayoutConstraint.activate(
-                [
-                    check.heightAnchor.constraint(equalToConstant: UX.checkmarkHeight),
-                    check.widthAnchor.constraint(equalToConstant: UX.checkmarkWidth),
-                    check.topAnchor.constraint(
-                        equalTo: cell.contentView.topAnchor,
-                        constant: UX.checkmarkTopHeight
-                    ),
-                    check.leadingAnchor.constraint(
-                        equalTo: cell.contentView.leadingAnchor,
-                        constant: UX.checkmarkLeading
-                    )
-                ]
-            )
-
-            check.textColor = checkColor
+            setupLeftCheckLabel(cell, theme: theme)
 
             let result = NSMutableAttributedString()
             if let str = title?.string {
@@ -746,6 +725,32 @@ class CheckmarkSetting: Setting {
         }
     }
 
+    private func setupLeftCheckLabel(_ cell: UITableViewCell, theme: Theme) {
+        check.font = FXFontStyles.Regular.body.scaledFont()
+        let checkMarkWidth = check.font.pointSize + UX.checkmarkLeading
+        cell.contentView.directionalLayoutMargins = NSDirectionalEdgeInsets(top: 0.0,
+                                                                            leading: checkMarkWidth,
+                                                                            bottom: 0.0,
+                                                                            trailing: 0.0)
+        let checkColor = isChecked() ? theme.colors.actionPrimary : UIColor.clear
+        let checkmarkSize = UIFontMetrics.default.scaledValue(for: UX.checkmarkHeight)
+        cell.contentView.addSubview(check)
+        NSLayoutConstraint.activate([
+            check.topAnchor.constraint(
+                equalTo: cell.contentView.topAnchor,
+                constant: UX.checkmarkTopHeight
+            ),
+            check.leadingAnchor.constraint(
+                equalTo: cell.contentView.leadingAnchor,
+                constant: UX.checkmarkLeading
+            ),
+            check.heightAnchor.constraint(equalToConstant: checkmarkSize),
+            check.widthAnchor.constraint(equalToConstant: checkmarkSize)
+        ])
+
+        check.textColor = checkColor
+    }
+
     override func onClick(_ navigationController: UINavigationController?) {
         // Force editing to end for any focused text fields so they can finish up validation first.
         navigationController?.view.endEditing(true)

diff --git a/firefox-ios/Client/Frontend/Theme/ThemedTableViewCells/ThemedTableViewCell.swift b/firefox-ios/Client/Frontend/Theme/ThemedTableViewCells/ThemedTableViewCell.swift
@@ -60,6 +60,7 @@ class ThemedTableViewCell: UITableViewCell, ReusableCell, ThemeApplicable {
         editingAccessoryView = nil
         editingAccessoryType = .none
         imageView?.image = nil
+        contentView.directionalLayoutMargins = .zero
         contentView.subviews.forEach {
             $0.removeFromSuperview()
         }

diff --git a/firefox-ios/Client/Frontend/Theme/ThemedTableViewController.swift b/firefox-ios/Client/Frontend/Theme/ThemedTableViewController.swift
@@ -31,7 +31,7 @@ class ThemedTableViewController: UITableViewController, Themeable, InjectedTheme
         _ tableView: UITableView,
         cellForRowAt indexPath: IndexPath
     ) -> UITableViewCell {
-        dequeueCellFor(indexPath: indexPath)
+        return dequeueCellFor(indexPath: indexPath)
     }
 
     /// Dequeues a ThemedTableViewCell for the provided IndexPath.

diff --git a/firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionHeaderView.swift b/firefox-ios/Client/Frontend/TrackingProtection/TrackingProtectionHeaderView.swift
@@ -20,6 +20,8 @@ final class TrackingProtectionHeaderView: UIView, ThemeApplicable {
 
     private var faviconHeightConstraint: NSLayoutConstraint?
     private var faviconWidthConstraint: NSLayoutConstraint?
+    private var closeButtonHeightConstraint: NSLayoutConstraint?
+    private var closeButtonWidthConstraint: NSLayoutConstraint?
 
     private lazy var headerLabelsContainer: UIStackView = .build { stack in
         stack.backgroundColor = .clear
@@ -61,7 +63,7 @@ final class TrackingProtectionHeaderView: UIView, ThemeApplicable {
     private func setupLayout() {
         headerLabelsContainer.addArrangedSubview(siteDisplayTitleLabel)
         headerLabelsContainer.addArrangedSubview(siteDomainLabel)
-        self.addSubviews(favicon, headerLabelsContainer, closeButton)
+        addSubviews(favicon, headerLabelsContainer, closeButton)
         faviconHeightConstraint = favicon.heightAnchor.constraint(equalToConstant: UX.faviconImageSize)
         faviconWidthConstraint = favicon.widthAnchor.constraint(equalToConstant: UX.faviconImageSize)
         NSLayoutConstraint.activate([
@@ -97,9 +99,7 @@ final class TrackingProtectionHeaderView: UIView, ThemeApplicable {
             closeButton.topAnchor.constraint(
                 equalTo: self.topAnchor,
                 constant: UX.horizontalMargin
-            ),
-            closeButton.heightAnchor.constraint(greaterThanOrEqualToConstant: UX.closeButtonSize),
-            closeButton.widthAnchor.constraint(greaterThanOrEqualToConstant: UX.closeButtonSize)
+            )
         ])
     }
 
@@ -114,9 +114,15 @@ final class TrackingProtectionHeaderView: UIView, ThemeApplicable {
     }
 
     func adjustLayout() {
-        let faviconSize = UX.faviconImageSize
-        faviconHeightConstraint?.constant = min(UIFontMetrics.default.scaledValue(for: faviconSize), 2 * faviconSize)
-        faviconWidthConstraint?.constant = min(UIFontMetrics.default.scaledValue(for: faviconSize), 2 * faviconSize)
+        let faviconDynamicSize = min(UIFontMetrics.default.scaledValue(for: UX.faviconImageSize),
+                                     2 * UX.faviconImageSize)
+        faviconHeightConstraint?.constant = faviconDynamicSize
+        faviconWidthConstraint?.constant = faviconDynamicSize
+
+        let closeButtonDynamicSize = min(UIFontMetrics.default.scaledValue(for: UX.closeButtonSize),
+                                         2 * UX.closeButtonSize)
+        closeButton.updateLayoutForDynamicFont(newSize: closeButtonDynamicSize)
+        closeButton.layer.cornerRadius = closeButtonDynamicSize * 0.5
     }
 
     func setupActions() {

diff --git a/firefox-ios/Client/Frontend/Widgets/SiteTableViewHeader.swift b/firefox-ios/Client/Frontend/Widgets/SiteTableViewHeader.swift
@@ -77,7 +77,8 @@ class SiteTableViewHeader: UITableViewHeaderFooterView, ThemeApplicable, Reusabl
         titleTrailingConstraint = titleLabel.trailingAnchor.constraint(
             equalTo: contentView.trailingAnchor,
             constant: -UX.titleTrailingLeadingMargin)
-
+
+        let scaledImageViewSize = UIFontMetrics.default.scaledValue(for: UX.imageWidthHeight)
         NSLayoutConstraint.activate([
             titleLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor,
                                                 constant: UX.titleTrailingLeadingMargin),
@@ -90,8 +91,8 @@ class SiteTableViewHeader: UITableViewHeaderFooterView, ThemeApplicable, Reusabl
             collapsibleImageView.centerYAnchor.constraint(equalTo: contentView.centerYAnchor),
             collapsibleImageView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor,
                                                            constant: -UX.imageTrailingSpace),
-            collapsibleImageView.widthAnchor.constraint(equalToConstant: UX.imageWidthHeight),
-            collapsibleImageView.heightAnchor.constraint(equalToConstant: UX.imageWidthHeight)
+            collapsibleImageView.widthAnchor.constraint(equalToConstant: scaledImageViewSize),
+            collapsibleImageView.heightAnchor.constraint(equalToConstant: scaledImageViewSize)
         ])
 
         showImage(false)