This is a sibling of #1701652: Rebuild and retheme the product listing view for argumentation on the design decisions seen, check out that issue. Any additions are noted below.

Table
I have made a number of changes to the table layout, I am not 100% sure about this yet - but I feel we the table is very intense horizontally - where name is the only visual landmark that stands out. I have turned this around a bit, and put all of the meta information around the name.

  • All information centralized around the name.
  • Most prominence on name and e-mail, and less prominence on amount and creation date

Filters
There is now only one filter, I incorporated the other filters into the search box. I would love some feedback on additional filters, I imagined date of purchase?

orderlisting.jpg

CommentFileSizeAuthor
#14 Screen Shot 2012-08-10 at 1.39.51 PM.png90.45 KBdudenhofer
#13 order_listing.png72.56 KBGuGuss
#6 ck-product-help-expanded.png105.84 KBjoshmiller
#6 ck-product-help-expanded.psd1.74 MBjoshmiller
orderlisting.jpg311.18 KBBojhan
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

GuGuss’s picture

GuGuss CreditAttribution: GuGuss commented
Assigned: Unassigned » vasike

This looks cool !

Bojhan’s picture

Bojhan CreditAttribution: Bojhan commented
Assigned: vasike » Bojhan

Add date selection.

GuGuss’s picture

GuGuss CreditAttribution: GuGuss commented
Issue tags: +beta blocker

tagging

GuGuss’s picture

GuGuss CreditAttribution: GuGuss commented
Assigned: Bojhan » vasike
Status: Active » Needs work

I don't think we need a design here.

@vasike : Can you add the date filters with date picker which look the same as in the discounts page !

vasike’s picture

vasike
Location Ramnicu Valcea
CreditAttribution: vasike commented
Assigned: vasike » dudenhofer
Status: Needs work » Needs review

Rebuilt the Orders page for the new visual style:
(the same approach as for #1701652: Rebuild and retheme the product listing view)
- Search box, Filter by multiple fields: new filter in Views module (use the dev version of views)
- use the Chosen library (http://harvesthq.github.com/chosen/)
- Added the label : "Filter by", i used the Product Displays Content type filter label from views settings.
Requires a CSS for inline display.

commit : https://code.drupalcommerce.org/#/c/266/

needs theming. Aaron's theming, ;).

joshmiller’s picture

joshmiller
he/him
Primary language English
Location Indianapolis, Indiana, USA
CreditAttribution: joshmiller commented
FileSize
ck-product-help-expanded.psd1.74 MB
ck-product-help-expanded.png105.84 KB

Dudenhofer --

This is image that we were posting and discussing in IRC... (psd is attached as well)

CK Product Listing Help

vasike’s picture

vasike
Location Ramnicu Valcea
CreditAttribution: vasike commented

Date popup issue: date filters don't trigger the ajax search.
there could be some related issues:
#1512928: When using an exposed date view filter with popup and autosubmit, form is not submitted on date selection
&
#1694988: Fix auto-submit for enhanced text text fields

GuGuss’s picture

GuGuss CreditAttribution: GuGuss commented
Status: Needs review » Fixed

Let's close that one and open a new one for the date popup issue : #1717596: Date popup view filter does not work with autosubmit !

Bojhan’s picture

Bojhan CreditAttribution: Bojhan commented
Assigned: dudenhofer » GuGuss
Status: Fixed » Active

There is a bunch of stuff that is not implemented as designed, I imagine that's because it needs more discussion or simply the implementation had some difficulties

  • Filters and product add should be organised as desgined, with add product being close to the table and a <hr> used to divide them. I designed it like this to create more balance and to pull the add task close to the table, this has always been the pattern in core.
  • Order ID, should be just ID. The long title, makes for a weird looking table header
  • There is no real need for "E.g., 2012-08-10" - people most likely use the calendar anyway.
  • The arrow for bulk operations should horizontally line up with the middle of checkboxes. Apply button is now aligned with too much spacing to the select list.

We should probably seek to discuss other changes to the table with GuSuss.

dudenhofer’s picture

dudenhofer CreditAttribution: dudenhofer commented

Just an FYI, I have recommitted some styling fixes mentioned here. That was wrapped with this fix http://drupal.org/node/1722096#comment-6334406

The style fixes included aligning the bulk operations arrow, re-adding the horizontal line below the filters, and putting the search back below the horizontal line. I don't want to position the +Order with CSS because any help toggles would mess that up. Not sure if those should be pulled into the vbo view headers or something?

Damien Tournoud’s picture

Damien Tournoud CreditAttribution: Damien Tournoud commented

Let's make sure to implement this in a reasonably generic fashion. If possible all the admin views should have the same styling.

bojanz’s picture

bojanz CreditAttribution: bojanz commented

Agreed. We should test by creating a new VBO view at admin/whatever, and checking if the styling is correct.

GuGuss’s picture

GuGuss CreditAttribution: GuGuss commented
Assigned: GuGuss » bojanz
FileSize
order_listing.png72.56 KB

This is the current look.
Order listing

I agree with Bojhan on the remaining stuff :

  • Move the "add an order" button under the filters
  • Rename the "Order ID" label by "ID"
  • Hide the help text under the date filters

I'll assign that to bojanz since he'll work on changing those admin views (Products, Content, Orders) to use Search API.

dudenhofer’s picture

dudenhofer CreditAttribution: dudenhofer commented
FileSize
Screen Shot 2012-08-10 at 1.39.51 PM.png90.45 KB

Also attached is a custom VBO admin view to show the styles apply. They should be globally targeting elements within the .views-exposed-form -- except the search fields which have been targeted to be positioned below the other filter options only on the order and product management pages.

bojanz’s picture

bojanz CreditAttribution: bojanz commented
Status: Active » Fixed

We can't remove "E.g., 2012-08-10" without patching Date (it's a #description added in a #process callback), so I've left it alone for now. It can be a followup (#1732902: Remove the help text below date filters on the Order backoffice view)

The "add order" button has been added and is now waiting on dudenhofer to style it a bit (as noted in the "product listing" issue).
Renamed "Order ID" to "ID" and "Actions" to "Operations".

Automatically closed -- issue fixed for 2 weeks with no activity.