Activity Log: filter bar design by leandroalonso · Pull Request #15468 · wordpress-mobile/WordPress-iOS

leandroalonso · 2020-12-10T21:28:36Z

Part of #15192

Adds filter bar design + few enhancements on the calendar.

To test

Open Activity Log
Play with date range and activity type filters :)

Please, test by:

Running it on iPad and iPhone
Light and dark mode

PR submission checklist:

I have considered adding unit tests where possible.
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.

peril-wordpress-mobile · 2020-12-10T21:28:43Z

You can test the changes on this Pull Request by downloading it from AppCenter here with build number: 39527. IPA is available here. If you need access to this, you can ask a maintainer to add you.

peril-wordpress-mobile · 2020-12-10T21:42:42Z

You can trigger optional UI/connected tests for these changes by visiting CircleCI here.

emilylaguna

Heya, looking good. I love the speed of the calendar now 👍

Do we need to show the scrollbars here?

RTL: I think the filter icon should be fully aligned to the right of the view

RTL: There are some overlapping issues

emilylaguna · 2020-12-11T17:32:41Z

WordPress/Classes/ViewRelated/Activity/ActivityListViewController.swift

+        let filterIcon = UIImageView(image: UIImage.gridicon(.filter))
+        filterIcon.tintColor = .listIcon
+        filterIcon.heightAnchor.constraint(equalToConstant: Constants.filterHeightAnchor).isActive = true
+        filterStackView.alignment = .center
+        filterStackView.spacing = Constants.filterStackViewSpacing
+        filterStackView.addArrangedSubview(filterIcon)
        let scrollView = UIScrollView()
+        scrollView.canCancelContentTouches = true
        filterStackView.addArrangedSubview(dateFilterChip)
        filterStackView.addArrangedSubview(activityTypeFilterChip)
        scrollView.addSubview(filterStackView)
        containerStackView.addArrangedSubview(scrollView)
        filterStackView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
-            filterStackView.leftAnchor.constraint(equalTo: scrollView.leftAnchor),
-            filterStackView.topAnchor.constraint(equalTo: scrollView.topAnchor),
-            filterStackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
-            scrollView.heightAnchor.constraint(equalTo: filterStackView.heightAnchor)
+            filterStackView.leftAnchor.constraint(equalTo: scrollView.leftAnchor, constant: Constants.filterBarHorizontalPadding),
+            filterStackView.rightAnchor.constraint(equalTo: scrollView.rightAnchor, constant: Constants.filterBarHorizontalPadding),
+            filterStackView.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: Constants.filterBarVerticalPadding),
+            filterStackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: Constants.filterBarVerticalPadding),
+            scrollView.heightAnchor.constraint(equalTo: filterStackView.heightAnchor, constant: 2 * Constants.filterBarVerticalPadding)
        ])

        setupDateFilter()

        setupActivityTypeFilter()
+
+        let separator = UIView()
+        separator.translatesAutoresizingMaskIntoConstraints = false
+        scrollView.addSubview(separator)
+        NSLayoutConstraint.activate([
+            separator.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: 16),
+            separator.leftAnchor.constraint(equalTo: scrollView.leftAnchor),
+            separator.widthAnchor.constraint(equalTo: scrollView.widthAnchor),
+            separator.heightAnchor.constraint(equalToConstant: 1)
+        ])
+        WPStyleGuide.applyBorderStyle(separator)


This method is pretty messy. What do you think about doing something like:

filterStackView.alignment = .center filterStackView.spacing = Constants.filterStackViewSpacing filterStackView.translatesAutoresizingMaskIntoConstraints = false let filterIcon = UIImageView(image: UIImage.gridicon(.filter)) filterIcon.tintColor = .listIcon filterIcon.heightAnchor.constraint(equalToConstant: Constants.filterHeightAnchor).isActive = true filterStackView.addArrangedSubview(filterIcon) filterStackView.addArrangedSubview(dateFilterChip) filterStackView.addArrangedSubview(activityTypeFilterChip) let scrollView = UIScrollView() scrollView.canCancelContentTouches = true scrollView.addSubview(filterStackView) containerStackView.addArrangedSubview(scrollView) NSLayoutConstraint.activate([ filterStackView.leftAnchor.constraint(equalTo: scrollView.leftAnchor, constant: Constants.filterBarHorizontalPadding), filterStackView.rightAnchor.constraint(equalTo: scrollView.rightAnchor, constant: Constants.filterBarHorizontalPadding), filterStackView.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: Constants.filterBarVerticalPadding), filterStackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: Constants.filterBarVerticalPadding), scrollView.heightAnchor.constraint(equalTo: filterStackView.heightAnchor, constant: 2 * Constants.filterBarVerticalPadding) ]) setupDateFilter() setupActivityTypeFilter() let separator = UIView() separator.translatesAutoresizingMaskIntoConstraints = false scrollView.addSubview(separator) NSLayoutConstraint.activate([ separator.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: 16), separator.leftAnchor.constraint(equalTo: scrollView.leftAnchor), separator.widthAnchor.constraint(equalTo: scrollView.widthAnchor), separator.heightAnchor.constraint(equalToConstant: 1) ])

Done in f94c667

I also extracted the filter to its own file.

osullivanchris · 2020-12-11T20:54:28Z

Very slick, great job. A couple of really nice touches. The smart reselection of dates is great (adapting the start/end date whichever I'm closer to). Loading state works well. Generally feels very polished.

Minor details to consider:

its per design, but does the 'x' in the chip feel too heavy? Should we go with the grey we're using in icons?
Should we have a shadow beneath the selected dates on scroll? I never love when things just disappear behind nothing in the ui 😛
I noticed on landscape that when I selected one date, the layout for the date selection heading was off-center
Also noticed scrollbar as @emilylaguna mentioned

I haven't gotten the build working on my iPad yet but thought I'd share these. If I notice anything on iPad I'll add it later.

jkmassel · 2020-12-14T21:29:18Z

👋 Howdy! Today's the day we're cutting the 16.4 release.

Because of that, this PR will be bumped to 16.5. If you need it to be part of 16.4, please merge it into the release/16.4 branch and DM me – I'll be happy to cut a new beta release!

WordPress/Classes/ViewRelated/Activity/Filter/FilterBarView.swift

leandroalonso · 2020-12-15T19:28:18Z

@emilylaguna @osullivanchris ready for another review!

emilylaguna

Hey RTL is looking much better! I noticed a couple more things:

In LTR the bottom separator doesn't go all to the way to the end when scrolling:

In RTL there is no separator at all 🤔

leandroalonso · 2020-12-16T17:37:45Z

@emilylaguna fixed in cedc3b1

emilylaguna

👏 Nice, working very well now.

osullivanchris · 2020-12-17T16:31:17Z

@emilylaguna @osullivanchris ready for another review!

All looks great now

'x' on the chip works better slightly lighter
really nice job on the fade-out behind the calendar. Looks slick
landscape centring issue fixed
scrollbar hidden, looks much better

Noting you have a kinda animation going I think when the chip changes. I wasn't expecting it, but I think I like it.

Have not been able to view directly on iPad, but looks good based on screenshots.

Big 👍 from me.

leandroalonso added 5 commits December 10, 2020 13:14

Style the filter buttons

7c5d842

Handle light dark mode transition

001505e

Adds layout to the filter bar

7b0b6f1

Fix a bug and apply title3 in calendar

1718044

Only display until the current month and future days can't be selected

7ab8d48

leandroalonso added the Activity Log label Dec 10, 2020

leandroalonso added this to the 16.4 milestone Dec 10, 2020

leandroalonso requested a review from osullivanchris December 10, 2020 21:28

leandroalonso self-assigned this Dec 10, 2020

leandroalonso requested a review from emilylaguna December 11, 2020 12:40

Change the buttons to system

ab30532

emilylaguna suggested changes Dec 11, 2020

View reviewed changes

leandroalonso added 3 commits December 14, 2020 11:28

Do not show horizontal scroll

26b93b8

Fix insets for right to left languages

b86635a

Fix calendar selection for RTL languages

1884d8b

jkmassel modified the milestones: 16.4, 16.5 Dec 14, 2020

leandroalonso added 5 commits December 15, 2020 10:30

Add shadow in the top of the calendar

76395b1

Fix date selection heading off-center in landscape

cfd4ccb

Change chip reset button color

80bd92d

Fix filter bar position in RTL layout

8b6d3fa

Extract the filter to it's own view

f94c667

houndci-bot reviewed Dec 15, 2020

View reviewed changes

WordPress/Classes/ViewRelated/Activity/Filter/FilterBarView.swift Outdated Show resolved Hide resolved

Fix trailing_whitespace

2aa4ecb

leandroalonso requested a review from emilylaguna December 15, 2020 19:28

leandroalonso mentioned this pull request Dec 15, 2020

Jetpack Section: Activity Log #15192

Closed

13 tasks

emilylaguna suggested changes Dec 16, 2020

View reviewed changes

Fix filter border

cedc3b1

leandroalonso requested a review from emilylaguna December 16, 2020 17:37

emilylaguna approved these changes Dec 16, 2020

View reviewed changes

leandroalonso merged commit e8db6b1 into develop Dec 17, 2020

leandroalonso deleted the task/design_filter_bar branch December 17, 2020 12:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Activity Log: filter bar design#15468

Activity Log: filter bar design#15468
leandroalonso merged 16 commits intodevelopfrom
task/design_filter_bar

leandroalonso commented Dec 10, 2020 •

edited

Loading

Uh oh!

peril-wordpress-mobile bot commented Dec 10, 2020 •

edited

Loading

Uh oh!

peril-wordpress-mobile bot commented Dec 10, 2020 •

edited

Loading

Uh oh!

emilylaguna left a comment

Uh oh!

emilylaguna Dec 11, 2020

Uh oh!

leandroalonso Dec 15, 2020

Uh oh!

osullivanchris commented Dec 11, 2020 •

edited

Loading

Uh oh!

jkmassel commented Dec 14, 2020

Uh oh!

Uh oh!

leandroalonso commented Dec 15, 2020

Uh oh!

emilylaguna left a comment

Uh oh!

leandroalonso commented Dec 16, 2020

Uh oh!

emilylaguna left a comment

Uh oh!

osullivanchris commented Dec 17, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

leandroalonso commented Dec 10, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

To test

Uh oh!

peril-wordpress-mobile bot commented Dec 10, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

peril-wordpress-mobile bot commented Dec 10, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

emilylaguna left a comment

Choose a reason for hiding this comment

Uh oh!

emilylaguna Dec 11, 2020

Choose a reason for hiding this comment

Uh oh!

leandroalonso Dec 15, 2020

Choose a reason for hiding this comment

Uh oh!

osullivanchris commented Dec 11, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jkmassel commented Dec 14, 2020

Uh oh!

Uh oh!

leandroalonso commented Dec 15, 2020

Uh oh!

emilylaguna left a comment

Choose a reason for hiding this comment

Uh oh!

leandroalonso commented Dec 16, 2020

Uh oh!

emilylaguna left a comment

Choose a reason for hiding this comment

Uh oh!

osullivanchris commented Dec 17, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

leandroalonso commented Dec 10, 2020 •

edited

Loading

peril-wordpress-mobile bot commented Dec 10, 2020 •

edited

Loading

peril-wordpress-mobile bot commented Dec 10, 2020 •

edited

Loading

osullivanchris commented Dec 11, 2020 •

edited

Loading