Skip to content

Conversation

@staskus
Copy link
Contributor

@staskus staskus commented Dec 19, 2022

Fixes #19728

Issues

The “ACTIVE CARDS” and “INACTIVE CARDS” section headers on the Manage Stats Cards screen overlapping

Fixed by making section height automatic so increasing text sizes would increase section height as well

The chart legends on the segment (circle) chart on detail screens of the Views & Visitors card clipping

To fix legend titles clipping multiple steps were required to take:

  • Rebuild legend UI so the indicator inside a UIStackView wouldn't restrict the title label to grow in size
  • Allow legend to be shown vertically and not horizontally when the text grows too large by using traitCollectionDidChange
  • Use .fillEqually instead of equalCentering for legend to long labels wouldn't go out of bounds
  • Allow DonutChatView to grow in height

The date pickers used on detail screens to go back and forth between different weeks clipping

Set the maximum size for labels so the date picker header would behave in a similar way as Navigation Bar

The buttons “Try it now” and “Remind me later” on the “upgraded stats” welcome screen don’t respond to text size changes

Enable adjustsFontForContentSizeCategory flag

Testing instructions

Enable "New Appearance for Stats" and "New Cards for Stats Insights" feature flags

Case 1: "Active Cards" and "Inactive Cards" headers not overlapping:

  1. Open Stats
  2. Click "Settings" on top right
  3. Increase font size
  4. Confirm "Active Cards" and "Inactive Cards" are not clipping or overlapping

Case 2: The chart legends on the segment (circle) chart on detail screens of the Views & Visitors card clipping:

  1. Open Stats
  2. Add "Views & Visitors" or "Total Followers" cards
  3. Open details for one of those cards
  4. Observe the chart, a legend with labels should be visible
  5. Increase font size
  6. Confirm the labels not clipping horizontally and eventually be disabled vertically

Case 3: The date pickers used on detail screens to go back and forth between different weeks.

  1. Open Stats
  2. Add "Views & Visitors" card
  3. Open details
  4. Observe the date picker element at the top
  5. Increase font size
  6. Confirm font increases up to an extent and is not clipped

Case 4: The buttons “Try it now” and “Remind me later” on the “upgraded stats” welcome screen don’t respond to text size changes

  1. Fresh install the app
  2. Enable feature flags and kill the app
  3. Reopen the app
  4. Insights promotion should open
  5. Increase font size
  6. Confirm button titles change in size

Regression Notes

  1. Potential unintended areas of impact

Already existing functionality of changed views breaking

  1. What I did to test those areas of impact (or what existing automated tests I relied on)

Manual testing

  1. What automated tests I added (or what prevented me from doing so)

None

PR submission checklist:

  • I have completed the Regression Notes.
  • I have considered adding unit tests for my changes.
  • I have considered adding accessibility improvements for my changes.
  • I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

- Switch to vertical stack view when appropriate
- Increase text size
There's a limited space in a header that displays date in a date switcher. Set the maximum font sizes to support limited amount of text increase for a dynamic type.
Using equalSpacing makes long titles go out of bounds.
- Use fillEqually for each legend title to take same amount of space
- Rebuild legend layout to support fillEqually distribution
@wpmobilebot
Copy link
Contributor

You can test the changes in Jetpack from this Pull Request by:
  • Clicking here or scanning the QR code below to access App Center
  • Then installing the build number pr19790-ab3c108 on your iPhone

If you need access to App Center, please ask a maintainer to add you.

@wpmobilebot
Copy link
Contributor

You can test the changes in WordPress from this Pull Request by:
  • Clicking here or scanning the QR code below to access App Center
  • Then installing the build number pr19790-ab3c108 on your iPhone

If you need access to App Center, please ask a maintainer to add you.

Comment on lines +324 to +344
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)
}
}
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@staskus nice + I like this encapsulated 👍

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks 👍

@staskus staskus merged commit c236391 into trunk Dec 22, 2022
@staskus staskus deleted the fix/19728-stats-revamp-dynamic-type-issues branch December 22, 2022 07:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[iOS] Stats: Dynamic Type issues

5 participants