[Tablet Orders] Order list UI updates #12214

iamgabrielma · 2024-03-05T08:25:52Z

Partially closes #12149

Description

This PR addresses most of the UI issues from the design review regarding the Order list. We have left outside of this PR those changes related to semantic colours, since all might need to be reviewed as per p1709628907203209/1708465836.162389-slack-C0354HSNUJH . This will be prioritized and tackled separately.

Changes

Adds a divider line to the top of the OrderListTableViewController

Adds divider lines to the selected cell in the order list, it would seem these were overwritten by the background colour

Updates the Empty Orders screen with a new image (we do not tackle the background colour update, nor removing the navigation bar)

Testing instructions

With sideBySideViewForOrderForm enabled, on a tablet or large iPhone.
Go to Orders. Observe that the dividers appear in the Order list to the left, both at the top, as well as between all Order cells.
On the same device, on a freshly created store (or a store with no orders), go to Orders. Observe the new "shopping bags" image and the "No Order Selected" text below it. (PD: This is something we could improve in the future, the "Waiting for your first Order" text should be more prominent in this case)

wpmobilebot · 2024-03-05T08:33:56Z

📲 You can test the changes from this Pull Request in WooCommerce iOS by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce iOS
	Build Number	pr12214-ffed3e9
	Version	18.4
	Bundle ID	com.automattic.alpha.woocommerce
	Commit	`ffed3e9`
	App Center Build	WooCommerce - Prototype Builds #8913

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

The current Woo colors might be out of date across the board, so we’re reverting the specific change on this commit. More details in the PR description.

iamgabrielma · 2024-03-06T05:10:52Z

...ce/Classes/ViewRelated/ReusableViews/EmptyStateViewController/EmptyStateViewController.swift

@@ -439,20 +449,23 @@ extension EmptyStateViewController {

        fileprivate var message: NSAttributedString {
            switch self {
+            case .simpleTextWithDescription:
+                return NSAttributedString(string: "")


We cannot break here without retuning something, and making the message an optional NSAttributedString involves a bunch of changes everywhere we use the message. Returning an empty attributed string that is not being used seemed to fit our case without complicating it too much.

Consider mentioning this in a comment to save someone else refactoring unneccesarily

👍 Added: abf24bd

joshheald · 2024-03-06T16:42:32Z

* Updates the Empty Orders screen with a new image (we do not tackle the background colour update, nor removing the navigation bar)

The two types of empty state for the list/details panes look a bit rubbish next to each other. Let's try to update both, at least as a follow up issue...
@joe-keenan if you happen to have images for the ones on the left, that'd be appreciated, but it's super low priority and we can muddle through if not.

joshheald

Not sure this one's ready, we can keep working on it after release...

joshheald · 2024-03-06T16:34:18Z

WooCommerce/Classes/ViewRelated/Orders/Cells/OrderTableViewCell.swift

+    func configureBordersWhenHighlighted() {
+        let topBorder = CALayer()
+        let bottomBorder = CALayer()
+        let borderWidth = 0.5
+
+        topBorder.frame = CGRect(x: 0, y: 0, width: frame.width, height: borderWidth)
+        bottomBorder.frame = CGRect(x: 0, y: 0, width: frame.width, height: borderWidth)
+        topBorder.backgroundColor = UIColor.divider.cgColor
+        layer.addSublayer(topBorder)
+        layer.addSublayer(bottomBorder)
+    }


These dividers don't quite look right, e.g. they're full width, and in this screenshot, one is placed over the default divider:

Given that only the selected cell dividers are missing, I think it's better to leave the existing behaviour than apply this change. There's probably a better way to do it...

The fix should probably be in UITableViewCell.updateDefaultBackgroundConfiguration(using:style:) so we get it everywhere...

The fix should probably be in UITableViewCell.updateDefaultBackgroundConfiguration(using:style:) so we get it everywhere...

Yeah. I experimented with different approaches and the simplest one seems to be using the .stroke... properties inside the cell configuration. Here's the change: ffed3e9

I wasn't able to find a good way to apply this change only to top and bottom:

If we use CALayer we have to also play with removing them after a cell stops being selected/highlighted, which I wasn't able to do without crashing when populating the cells. This also adds additional unexpected lines around the first order and we'll have to add additional handling most likely by overriding layoutSubviews

Using the customView property feels a bit overkill to add these borders, at least for the moment. If we happen to redo the cells across the app this could make more sense.

The downside of the approach is that we can see the lateral border a bit wider when a cell is selected, but I think it makes sense and overall is an improvement:

joshheald · 2024-03-06T16:35:55Z

WooCommerce/Classes/ViewRelated/Orders/OrderListViewController.swift

+        // Adds a border to the top of tableview
+        let topBorder = CALayer()
+        let borderWidth = 0.5
+        topBorder.frame = CGRect(x: 0, y: 0, width: tableView.frame.size.width, height: borderWidth)
+        topBorder.backgroundColor = UIColor.divider.cgColor
+        tableView.layer.addSublayer(topBorder)


This one's in the wrong place – when you pull to refresh, the divider comes with it. It should be at the bottom of the header, I think...

Updated! 03f5cb6

joshheald · 2024-03-06T16:37:23Z

...ce/Classes/ViewRelated/ReusableViews/EmptyStateViewController/EmptyStateViewController.swift

@@ -439,20 +449,23 @@ extension EmptyStateViewController {

        fileprivate var message: NSAttributedString {
            switch self {
+            case .simpleTextWithDescription:
+                return NSAttributedString(string: "")


Consider mentioning this in a comment to save someone else refactoring unneccesarily

joe-keenan · 2024-03-14T05:19:16Z

Hey @joshheald, just acknowledging that I’ve seen this and will get back to you with something for the empty state next week. Let me know if you need it sooner.

iamgabrielma · 2024-04-29T04:09:15Z

something for the empty state

👋 @joe-keenan did you had the chance to look into this? Don't worry if not, as Josh mentioned is very low priority, I'm just catching up with this issue so I wanted to be sure before I update the existing ones.

iamgabrielma · 2024-05-02T03:05:55Z

@joshheald this is ready for review when you have the time:

Adressed:

Moved the border/separator line from the top or the orders to the bottom of the search component, so it looks fine when we pull to refresh
Moved the border/separator lines for highlighted cells to the UITableViewCell.updateDefaultBackgroundConfiguration(using:style:) method
Added internal comments

Not addressed:

Cohesive images when there are two types of empty state for the list/details. Created a follow-up here: [Tablet Orders] Cohesive empty state on split views when Order list/details are empty #12625

joe-keenan · 2024-05-02T04:57:37Z

something for the empty state

👋 @joe-keenan did you had the chance to look into this? Don't worry if not, as Josh mentioned is very low priority, I'm just catching up with this issue so I wanted to be sure before I update the existing ones.

Hey @iamgabrielma, sorry about the delay. I was about to say I hadn’t done anything for this, but then I realised I had made a similar empty state for Analytics a while back.

I reused the format and illustration to fit the orders list. I also feel like the Clear Filters CTA overwhelms the error message, so I changed it to a secondary button style.

Let me know if you have any issues with it!

6kkCwI9VOEYcidp6UT5bln-fi-1725_29745

iamgabrielma · 2024-05-09T07:58:36Z

I reused the format and illustration to fit the orders list. I also feel like the Clear Filters CTA overwhelms the error message, so I changed it to a secondary button style.

Thanks! Looks good! I tried to update this today but requires a bit more work than I expected. Eg:

We reuse this view's configuration in different places, eg: changing the colour of the button forces us to change it in other "empty" views that are be unrelated to orders, or contain just a link rather than a button.
Moving order of the image and the text forces us to create an entire new view, since what we have cannot be reused.
It also has to be updated when the modal-on-modal returns an empty search.

With the current focus I'll move this latest update to the issue that is already open on #12625 for empty states, so we can merge the order improvements for the time being. I haven't made any further changes since the latest update, so the addressed vs not addressed items remains the same 👍

joe-keenan · 2024-05-14T03:16:43Z

With the current focus I'll move this latest update to the issue that is already open on #12625 for empty states, so we can merge the order improvements for the time being.

That’s fine. I also would like a more cohesive approach to error states. Thanks for creating a separate issue for it.

joshheald

Thanks for the changes, they look good to me 👍

iamgabrielma added 3 commits March 5, 2024 15:01

Add divider to tableview’s top

197a594

Update selected cell color

d1d359a

Assure top and bottom borders to order tableview cells

2821cfd

iamgabrielma added type: task An internally driven task. feature: order list Related to the order list. category: tablet Specific to tablet devices such as a Galaxy Tab or an iPad. labels Mar 5, 2024

iamgabrielma added this to the 17.7 milestone Mar 5, 2024

iamgabrielma added the status: draft This is a draft, still need more work but can be reviewed and commented if asked. label Mar 5, 2024

iamgabrielma added 6 commits March 5, 2024 16:06

Move highlighted cell config to own method

1f4a7fb

Add internal note

990ac8f

Lint fix

f35ea41

Revert selected cell color update

431cc0d

The current Woo colors might be out of date across the board, so we’re reverting the specific change on this commit. More details in the PR description.

Update EmptyStateViewController with new image

b97ae75

Lint fix: empty enum arguments violation

05887ea

iamgabrielma removed the status: draft This is a draft, still need more work but can be reviewed and commented if asked. label Mar 6, 2024

iamgabrielma commented Mar 6, 2024

View reviewed changes

Rename case for clarity

64c8275

iamgabrielma requested a review from joshheald March 6, 2024 06:13

joshheald reviewed Mar 6, 2024

View reviewed changes

joshheald modified the milestones: 17.7, 17.8 Mar 8, 2024

iamgabrielma modified the milestones: 17.8, 17.9 Mar 15, 2024

bozidarsevo modified the milestones: 17.9, 18.0 Mar 21, 2024

jaclync modified the milestones: 18.0, 18.1 Mar 29, 2024

iamgabrielma removed this from the 18.1 milestone Apr 5, 2024

iamgabrielma added 6 commits May 2, 2024 08:01

Merge branch 'trunk' into issue/12149-order-list-ui-updates

ca2f26c

Add comment

abf24bd

Move border to bottom of filtered orders header

03f5cb6

Remove duplication for backgroundColor set

65ff430

remove unnecessary self

49bd320

Apply border to cell default configuration

ffed3e9

iamgabrielma mentioned this pull request May 2, 2024

[Tablet Orders] Cohesive empty state on split views when Order list/details are empty #12625

Open

iamgabrielma requested a review from joshheald May 2, 2024 03:10

iamgabrielma added this to the 18.6 milestone May 2, 2024

iamgabrielma enabled auto-merge May 9, 2024 10:21

iamgabrielma disabled auto-merge May 9, 2024 10:22

iamgabrielma modified the milestones: 18.6, 18.7 May 10, 2024

joshheald approved these changes May 16, 2024

View reviewed changes

iamgabrielma merged commit 237740f into trunk May 17, 2024
24 of 25 checks passed

iamgabrielma deleted the issue/12149-order-list-ui-updates branch May 17, 2024 00:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Tablet Orders] Order list UI updates #12214

[Tablet Orders] Order list UI updates #12214

iamgabrielma commented Mar 5, 2024 •

edited

wpmobilebot commented Mar 5, 2024 •

edited

iamgabrielma Mar 6, 2024 •

edited

joshheald Mar 6, 2024

iamgabrielma May 2, 2024

joshheald commented Mar 6, 2024

joshheald left a comment

joshheald Mar 6, 2024

joshheald Mar 6, 2024

iamgabrielma May 2, 2024

joshheald Mar 6, 2024

iamgabrielma May 2, 2024

joshheald Mar 6, 2024

joe-keenan commented Mar 14, 2024

iamgabrielma commented Apr 29, 2024

iamgabrielma commented May 2, 2024 •

edited

joe-keenan commented May 2, 2024

iamgabrielma commented May 9, 2024 •

edited

joe-keenan commented May 14, 2024

joshheald left a comment

[Tablet Orders] Order list UI updates #12214

[Tablet Orders] Order list UI updates #12214

Conversation

iamgabrielma commented Mar 5, 2024 • edited

Description

Changes

Testing instructions

wpmobilebot commented Mar 5, 2024 • edited

iamgabrielma Mar 6, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joshheald commented Mar 6, 2024

joshheald left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joe-keenan commented Mar 14, 2024

iamgabrielma commented Apr 29, 2024

iamgabrielma commented May 2, 2024 • edited

joe-keenan commented May 2, 2024

iamgabrielma commented May 9, 2024 • edited

joe-keenan commented May 14, 2024

joshheald left a comment

Choose a reason for hiding this comment

iamgabrielma commented Mar 5, 2024 •

edited

wpmobilebot commented Mar 5, 2024 •

edited

iamgabrielma Mar 6, 2024 •

edited

iamgabrielma commented May 2, 2024 •

edited

iamgabrielma commented May 9, 2024 •

edited