diff --git a/WordPress/Classes/ViewRelated/Gutenberg/Collapsable Header/CollapsableHeaderViewController.swift b/WordPress/Classes/ViewRelated/Gutenberg/Collapsable Header/CollapsableHeaderViewController.swift index acdd91331363..6665dac9fee2 100644 --- a/WordPress/Classes/ViewRelated/Gutenberg/Collapsable Header/CollapsableHeaderViewController.swift +++ b/WordPress/Classes/ViewRelated/Gutenberg/Collapsable Header/CollapsableHeaderViewController.swift @@ -410,6 +410,7 @@ class CollapsableHeaderViewController: UIViewController, NoResultsViewHost { [defaultActionButton, secondaryActionButton].forEach { (button) in button?.titleLabel?.font = WPStyleGuide.fontForTextStyle(.body, fontWeight: .medium) button?.titleLabel?.adjustsFontSizeToFitWidth = true + button?.titleLabel?.adjustsFontForContentSizeCategory = true button?.layer.borderColor = seperator.cgColor button?.layer.borderWidth = 1 button?.layer.cornerRadius = 8 @@ -417,6 +418,7 @@ class CollapsableHeaderViewController: UIViewController, NoResultsViewHost { primaryActionButton.titleLabel?.font = WPStyleGuide.fontForTextStyle(.body, fontWeight: .medium) primaryActionButton.titleLabel?.adjustsFontSizeToFitWidth = true + primaryActionButton.titleLabel?.adjustsFontForContentSizeCategory = true primaryActionButton.backgroundColor = accentColor primaryActionButton.layer.cornerRadius = 8 } diff --git a/WordPress/Classes/ViewRelated/Stats/Charts/DonutChartView.swift b/WordPress/Classes/ViewRelated/Stats/Charts/DonutChartView.swift index 599a18995d5d..645540569865 100644 --- a/WordPress/Classes/ViewRelated/Stats/Charts/DonutChartView.swift +++ b/WordPress/Classes/ViewRelated/Stats/Charts/DonutChartView.swift @@ -79,10 +79,12 @@ class DonutChartView: UIView { titleLabel = UILabel() titleLabel.textAlignment = .center titleLabel.font = .preferredFont(forTextStyle: .subheadline) + titleLabel.adjustsFontForContentSizeCategory = true totalCountLabel = UILabel() totalCountLabel.textAlignment = .center totalCountLabel.font = .preferredFont(forTextStyle: .title1).bold() + totalCountLabel.adjustsFontForContentSizeCategory = true titleStackView = UIStackView(arrangedSubviews: [titleLabel, totalCountLabel]) @@ -97,7 +99,8 @@ class DonutChartView: UIView { legendStackView = UIStackView() legendStackView.translatesAutoresizingMaskIntoConstraints = false legendStackView.spacing = Constants.legendStackViewSpacing - legendStackView.distribution = .equalSpacing + legendStackView.distribution = .fillEqually + legendStackView.alignment = .center addSubview(legendStackView) } @@ -107,6 +110,7 @@ class DonutChartView: UIView { chartContainer.leadingAnchor.constraint(equalTo: leadingAnchor), chartContainer.trailingAnchor.constraint(equalTo: trailingAnchor), chartContainer.topAnchor.constraint(equalTo: topAnchor), + chartContainer.heightAnchor.constraint(equalToConstant: Constants.chartHeight), legendStackView.leadingAnchor.constraint(equalTo: layoutMarginsGuide.leadingAnchor), legendStackView.trailingAnchor.constraint(equalTo: layoutMarginsGuide.trailingAnchor), @@ -252,6 +256,22 @@ class DonutChartView: UIView { } } + // MARK: - Dynamic Type + + override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) { + super.traitCollectionDidChange(previousTraitCollection) + + if traitCollection.preferredContentSizeCategory.isAccessibilityCategory { + legendStackView.axis = .vertical + legendStackView.alignment = .leading + legendStackView.subviews.forEach { ($0 as? LegendView)?.isCentered = false } + } else { + legendStackView.axis = .horizontal + legendStackView.alignment = .center + legendStackView.subviews.forEach { ($0 as? LegendView)?.isCentered = true } + } + } + // MARK: Helpers private func makeSegmentLayer(_ segment: Segment) -> CAShapeLayer { @@ -293,6 +313,7 @@ class DonutChartView: UIView { static let titleStackViewSpacing: CGFloat = 8.0 static let legendStackViewSpacing: CGFloat = 8.0 static let chartToLegendSpacing: CGFloat = 32.0 + static let chartHeight: CGFloat = 180.0 // We'll rotate the chart back by 90 degrees so it starts at the top rather than the right static let chartRotationDegrees: CGFloat = -90.0 @@ -307,6 +328,17 @@ class DonutChartView: UIView { private class LegendView: UIView { let segment: DonutChartView.Segment + var isCentered: Bool { + get { + return leadingConstraint?.isActive ?? false + } + + set { + leadingConstraint?.isActive = !newValue + } + } + private var leadingConstraint: NSLayoutConstraint? + init(segment: DonutChartView.Segment) { self.segment = segment @@ -320,27 +352,44 @@ private class LegendView: UIView { } private func configureSubviews() { + let containerView = UIView() + containerView.translatesAutoresizingMaskIntoConstraints = false + let indicator = UIView() indicator.backgroundColor = segment.color indicator.layer.cornerRadius = 6.0 + indicator.translatesAutoresizingMaskIntoConstraints = false let titleLabel = UILabel() - titleLabel.font = .preferredFont(forTextStyle: .subheadline) + titleLabel.font = .preferredFont(forTextStyle: .footnote) + titleLabel.adjustsFontForContentSizeCategory = true titleLabel.text = segment.title + titleLabel.translatesAutoresizingMaskIntoConstraints = false + titleLabel.setContentCompressionResistancePriority(.defaultHigh, for: .horizontal) + + containerView.addSubviews([titleLabel, indicator]) + addSubview(containerView) - let stackView = UIStackView(arrangedSubviews: [indicator, titleLabel]) - stackView.translatesAutoresizingMaskIntoConstraints = false - stackView.spacing = 8.0 - addSubview(stackView) + leadingConstraint = containerView.leadingAnchor.constraint(equalTo: leadingAnchor) + leadingConstraint?.priority = .required NSLayoutConstraint.activate([ indicator.widthAnchor.constraint(equalToConstant: 12.0), indicator.heightAnchor.constraint(equalToConstant: 12.0), - - stackView.leadingAnchor.constraint(equalTo: leadingAnchor), - stackView.trailingAnchor.constraint(equalTo: trailingAnchor), - stackView.topAnchor.constraint(equalTo: topAnchor), - stackView.bottomAnchor.constraint(equalTo: bottomAnchor) + indicator.leadingAnchor.constraint(equalTo: containerView.leadingAnchor), + indicator.centerYAnchor.constraint(equalTo: containerView.centerYAnchor), + + titleLabel.leadingAnchor.constraint(equalTo: indicator.trailingAnchor, constant: 8), + titleLabel.centerYAnchor.constraint(equalTo: containerView.centerYAnchor), + titleLabel.trailingAnchor.constraint(equalTo: containerView.trailingAnchor), + titleLabel.topAnchor.constraint(greaterThanOrEqualTo: containerView.topAnchor), + titleLabel.bottomAnchor.constraint(lessThanOrEqualTo: containerView.bottomAnchor), + + containerView.topAnchor.constraint(equalTo: topAnchor), + containerView.bottomAnchor.constraint(equalTo: bottomAnchor), + containerView.leadingAnchor.constraint(greaterThanOrEqualTo: leadingAnchor), + containerView.trailingAnchor.constraint(lessThanOrEqualTo: trailingAnchor), + containerView.centerXAnchor.constraint(equalTo: centerXAnchor) ]) } } diff --git a/WordPress/Classes/ViewRelated/Stats/Extensions/WPStyleGuide+Stats.swift b/WordPress/Classes/ViewRelated/Stats/Extensions/WPStyleGuide+Stats.swift index 654daf5ea19e..86da013b7b45 100644 --- a/WordPress/Classes/ViewRelated/Stats/Extensions/WPStyleGuide+Stats.swift +++ b/WordPress/Classes/ViewRelated/Stats/Extensions/WPStyleGuide+Stats.swift @@ -206,7 +206,7 @@ extension WPStyleGuide { // MARK: - Font Size - static let maximumChartAxisFontPointSize: CGFloat = 22 + static let maximumChartAxisFontPointSize: CGFloat = 18 // MARK: - Style Values diff --git a/WordPress/Classes/ViewRelated/Stats/Insights/Insights Management/InsightsManagementViewController.swift b/WordPress/Classes/ViewRelated/Stats/Insights/Insights Management/InsightsManagementViewController.swift index 1a3929480ac6..bbf2e53aba6e 100644 --- a/WordPress/Classes/ViewRelated/Stats/Insights/Insights Management/InsightsManagementViewController.swift +++ b/WordPress/Classes/ViewRelated/Stats/Insights/Insights Management/InsightsManagementViewController.swift @@ -62,6 +62,7 @@ class InsightsManagementViewController: UITableViewController { reloadViewModel() WPStyleGuide.configureColors(view: view, tableView: tableView) WPStyleGuide.configureAutomaticHeightRows(for: tableView) + tableView.estimatedSectionHeaderHeight = 38 tableView.accessibilityIdentifier = TextContent.title if FeatureFlag.statsNewAppearance.enabled { @@ -83,7 +84,7 @@ class InsightsManagementViewController: UITableViewController { // MARK: TableView Data Source / Delegate Overrides override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat { - return 38 + return UITableView.automaticDimension } override func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat { diff --git a/WordPress/Classes/ViewRelated/Stats/Shared Views/Date Chooser/SiteStatsTableHeaderView.swift b/WordPress/Classes/ViewRelated/Stats/Shared Views/Date Chooser/SiteStatsTableHeaderView.swift index 0b9571b2a792..23e22b01272d 100644 --- a/WordPress/Classes/ViewRelated/Stats/Shared Views/Date Chooser/SiteStatsTableHeaderView.swift +++ b/WordPress/Classes/ViewRelated/Stats/Shared Views/Date Chooser/SiteStatsTableHeaderView.swift @@ -144,8 +144,17 @@ private extension SiteStatsTableHeaderView { func applyStyles() { backgroundColor = .listForeground + Style.configureLabelAsCellRowTitle(dateLabel) + dateLabel.font = Metrics.dateLabelFont + dateLabel.adjustsFontForContentSizeCategory = true + dateLabel.minimumScaleFactor = Metrics.minimumScaleFactor + Style.configureLabelAsChildRowTitle(timezoneLabel) + timezoneLabel.font = Metrics.timezoneFont + timezoneLabel.adjustsFontForContentSizeCategory = true + timezoneLabel.minimumScaleFactor = Metrics.minimumScaleFactor + Style.configureViewAsSeparator(bottomSeparatorLine) // Required as the Style separator configure method clears all @@ -311,3 +320,25 @@ extension SiteStatsTableHeaderView: StatsBarChartViewDelegate { reloadView() } } + +private extension SiteStatsTableHeaderView { + enum Metrics { + static let dateLabelFontSize: CGFloat = 20 + static let maximumDateLabelFontSize: CGFloat = 32 + static let timezoneFontSize: CGFloat = 16 + static let maximumTimezoneFontSize: CGFloat = 20 + static let minimumScaleFactor: CGFloat = 0.8 + + static var dateLabelFont: UIFont { + let fontDescriptor = UIFontDescriptor.preferredFontDescriptor(withTextStyle: .headline) + let font = UIFont(descriptor: fontDescriptor, size: dateLabelFontSize) + return UIFontMetrics.default.scaledFont(for: font, maximumPointSize: maximumDateLabelFontSize) + } + + static var timezoneFont: UIFont { + let fontDescriptor = UIFontDescriptor.preferredFontDescriptor(withTextStyle: .callout) + let font = UIFont(descriptor: fontDescriptor, size: timezoneFontSize) + return UIFontMetrics.default.scaledFont(for: font, maximumPointSize: maximumTimezoneFontSize) + } + } +} diff --git a/WordPress/Classes/ViewRelated/Stats/Shared Views/Stats Detail/StatsFollowersChartViewModel.swift b/WordPress/Classes/ViewRelated/Stats/Shared Views/Stats Detail/StatsFollowersChartViewModel.swift index 064fd1cf3c86..eb7d42acf9c8 100644 --- a/WordPress/Classes/ViewRelated/Stats/Shared Views/Stats Detail/StatsFollowersChartViewModel.swift +++ b/WordPress/Classes/ViewRelated/Stats/Shared Views/Stats Detail/StatsFollowersChartViewModel.swift @@ -15,7 +15,7 @@ struct StatsFollowersChartViewModel { let chartView = DonutChartView() chartView.configure(title: "", totalCount: CGFloat(totalCount()), segments: segments()) chartView.translatesAutoresizingMaskIntoConstraints = false - chartView.heightAnchor.constraint(equalToConstant: Constants.chartHeight).isActive = true + chartView.heightAnchor.constraint(greaterThanOrEqualToConstant: Constants.chartHeight).isActive = true return chartView } diff --git a/WordPress/Classes/ViewRelated/Stats/Shared Views/Stats Detail/StatsReferrersChartViewModel.swift b/WordPress/Classes/ViewRelated/Stats/Shared Views/Stats Detail/StatsReferrersChartViewModel.swift index d17e798bfe40..2242c1d36641 100644 --- a/WordPress/Classes/ViewRelated/Stats/Shared Views/Stats Detail/StatsReferrersChartViewModel.swift +++ b/WordPress/Classes/ViewRelated/Stats/Shared Views/Stats Detail/StatsReferrersChartViewModel.swift @@ -53,7 +53,7 @@ struct StatsReferrersChartViewModel { let chartView = DonutChartView() chartView.configure(title: Constants.chartTitle, totalCount: CGFloat(referrers.totalReferrerViewsCount), segments: segments) chartView.translatesAutoresizingMaskIntoConstraints = false - chartView.heightAnchor.constraint(equalToConstant: Constants.chartHeight).isActive = true + chartView.heightAnchor.constraint(greaterThanOrEqualToConstant: Constants.chartHeight).isActive = true return chartView }