Order screen + preview refinements

[mikejolley]

Adds several refinements to the order and preview screen:

• Adds order status change buttons in the preview window
• Moves items below addresses in case of many items
• Adds new filters to control columns in the preview and the line items being output
• Removes the CSS which cut off columns on narrow screens
• Adds payment/shipping method back to old columns
• Makes the order actions column optional, not hidden
• Fixes control clicking orders for new tabs

Status control buttons are shown like this.

[claudiosanches]

When turn on "actions" there is too much space by the right side. Need to improve it.

[codecov]

Codecov Report

Merging #17814 into master will decrease coverage by 0.07%.
The diff coverage is 8.69%.

@@             Coverage Diff              @@
##             master   #17814      +/-   ##
============================================
- Coverage     36.71%   36.63%   -0.08%     
- Complexity    12388    12405      +17     
============================================
  Files           342      342              
  Lines         46424    46533     +109     
============================================
+ Hits          17043    17046       +3     
- Misses        29381    29487     +106

Impacted Files	Coverage Δ	Complexity Δ
includes/class-wc-deprecated-filter-hooks.php	77.77% <ø> (ø)	4 <0> (ø)	⬇️
...list-tables/class-wc-admin-list-table-products.php	0% <ø> (ø)	75 <0> (ø)	⬇️
.../list-tables/class-wc-admin-list-table-coupons.php	0% <ø> (ø)	26 <0> (ø)	⬇️
...es/admin/reports/class-wc-report-customer-list.php	0% <0%> (ø)	30 <0> (ø)	⬇️
includes/class-wc-ajax.php	0% <0%> (ø)	417 <0> (-12)	⬇️
includes/admin/reports/class-wc-admin-report.php	0% <0%> (ø)	101 <0> (ø)	⬇️
...n/list-tables/class-wc-admin-list-table-orders.php	0% <0%> (ø)	101 <30> (+25)	⬆️
includes/admin/wc-admin-functions.php	18.24% <0%> (-0.99%)	0 <0> (ø)
includes/class-wc-post-types.php	3.46% <0%> (-0.07%)	30 <2> (+2)
includes/admin/class-wc-admin-post-types.php	0% <0%> (ø)	154 <0> (ø)	⬇️
... and 6 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 39e2719...a0215d8. Read the comment docs.

[willgorham]

Looks like it could use some mobile styling adjustments.

Status actions in preview (320px):

List table overflows the screen at 320px (unsure if that's a WP core issue):

[shivapoudel]

Payment gateway transactional URL is not clickable in preview modal.

[mikejolley]

The mobile list table is fine for me; WP handles it.

[kloon]

Would it make sense to colour code the change status buttons on the modal to that of the actual status?

[kloon]

For processing orders it only give you the option set to completed, what about on-hold here? http://cld.wthms.co/3dYakJ If you look at an order in needs-payment status it has 3 options available.

Also would be nice to have an indication of the current order status? Maybe up top here http://cld.wthms.co/PJiV0A

[claudiulodro]

LGTM, just needs feedback or implementation for @kloon's suggestions

[mikejolley]

+1 to indicating current status.

But I don't feel colour coding is needed on the buttons and no other ui does that. Also r/e on-hold, generally it's on-hold > processing > completed. This matches the old buttons also.