Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Notifications P1] Add missing notification selection color for a split screen #22686

Conversation

justtwago
Copy link
Contributor

@justtwago justtwago commented Feb 22, 2024

Fixes #22672

This PR fixes the lack of the notification rows' selection style on iPad (during split notifications mode). I also modified the rows' paddings to make the selection look natural. iPad multitasking mode is also handled to switch the selection style accordingly to the screen's width.

Before After
Simulator Screenshot - iPad Pro (12 9-inch) (6th generation) - 2024-02-22 at 16 08 40 Simulator Screenshot - iPad Pro (12 9-inch) (6th generation) - 2024-02-22 at 16 12 09
Selection with no padding changes

Simulator Screenshot - iPad Pro (12 9-inch) (6th generation) - 2024-02-22 at 16 18 38

To test:

  • Run the app on an iPad
  • Go to Notifications and ensure that a selected notification row has a grey-ish background
  • Run the app on an iPhone
  • Go to Notifications and make sure that by tapping on a notification, you can't see any row's background changes

Regression Notes

  1. Potential unintended areas of impact
    Notifications screen

  2. What I did to test those areas of impact (or what existing automated tests I relied on)
    Manual tests, UI tests

  3. What automated tests I added (or what prevented me from doing so)
    UI tests already exist

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.

Testing checklist:

  • WordPress.com sites and self-hosted Jetpack sites.
  • Portrait and landscape orientations.
  • Light and dark modes.
  • Fonts: Larger, smaller and bold text.
  • High contrast.
  • VoiceOver.
  • Languages with large words or with letters/accents not frequently used in English.
  • Right-to-left languages. (Even if translation isn’t complete, formatting should still respect the right-to-left layout)
  • iPhone and iPad.
  • Multi-tasking: Split view and Slide over. (iPad)

@wpmobilebot
Copy link
Contributor

wpmobilebot commented Feb 22, 2024

WordPress Alpha📲 You can test the changes from this Pull Request in WordPress Alpha by scanning the QR code below to install the corresponding build.
App NameWordPress Alpha WordPress Alpha
ConfigurationRelease-Alpha
Build Numberpr22686-f0163e3
Version24.3
Bundle IDorg.wordpress.alpha
Commitf0163e3
App Center BuildWPiOS - One-Offs #8972
Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

@wpmobilebot
Copy link
Contributor

wpmobilebot commented Feb 22, 2024

Jetpack Alpha📲 You can test the changes from this Pull Request in Jetpack Alpha by scanning the QR code below to install the corresponding build.
App NameJetpack Alpha Jetpack Alpha
ConfigurationRelease-Alpha
Build Numberpr22686-f0163e3
Version24.3
Bundle IDcom.jetpack.alpha
Commitf0163e3
App Center Buildjetpack-installable-builds #8002
Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

@justtwago justtwago force-pushed the fix/22672-add-missing-notification-selection-color branch from fe31a6c to aab45b1 Compare February 22, 2024 23:07
Comment on lines 97 to 101
enum Style {
case leading
case subsequent
}

Copy link
Contributor

Choose a reason for hiding this comment

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

Is it possible to name this to something more elaborate? I couldn't understand what it is without reading its usage. Also could you move this enum to the top of the class right below the class signature (unless you're against it)? For public nested types, it is common to list them on the top so when a person views the file, all relevant types are at the top rather than being scattered through the file.

    enum ... {
        ...
    }

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Totally makes sense! Will try to find more accurate naming.

if splitViewControllerIsHorizontallyCompact {
cell.selectionStyle = .none
} else {
cell.selectionStyle = .default
Copy link
Contributor

Choose a reason for hiding this comment

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

We are enabling it for all cases except for compact split view, correct?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yep. It's also disabled for the split mode on iPad:

Simulator.Screen.Recording.-.iPad.Pro.12.9-inch.6th.generation.-.2024-02-22.at.15.26.30.mp4

@alpavanoglu
Copy link
Contributor

Thanks for the nice fix! I've also noticed that the content's position in the cell wasn't centered. Even if selectionStyle would be none, this is a nice improvement.

@alpavanoglu alpavanoglu self-requested a review February 23, 2024 21:17
Copy link
Contributor

@alpavanoglu alpavanoglu left a comment

Choose a reason for hiding this comment

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

LG2M

@justtwago justtwago merged commit 159b6f1 into feature/notifications_refresh_p1 Feb 23, 2024
21 checks passed
@justtwago justtwago deleted the fix/22672-add-missing-notification-selection-color branch February 23, 2024 21:22
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.

3 participants