PDP UI Fixes

[rymorgan]

1. Move public/private buttons for variants to sidebar
2. Move Toggle up/down indicator in panels to the middle.
3. Notification for edited fields -- either a stroke/dot or some other indicator
4. Look at cleaning up images - should the thumbnails be forced into squares. Do we need show images for variants.
5. Move settings "cog" to the publish bar

[aaronjudd]

[rymorgan]

Here's some design work that I reviewed with @aaronjudd yesterday. There are a few elements I'm still working on but some of it can be implemented now as an iteration.

1. Publish bar can go to top and buttons can change formats.
2. Clean up of sidebar
3. Moving visible toggle to the sidebar variant
4. Making all sidebar section collapsible panels with arrow toggle switch
5. Drag/drop style change
6. Panel headers great for panel/white for nested panels.

Still refining:

1. Over/down states for editable fields if we move away from the circle buttons always being visible
2. Clean up of detail panel
3. State for what has been edited
4. Color of store buttons vs admin buttons

[mikemurray]

Moving of the toolbar and some design iteration:
https://github.com/reactioncommerce/reaction/tree/1624-move-pdp-toolbar

[rymorgan]

Updated mock with cleaned up variant details panel. Let's discuss - There's some that we should start on now and some that needs a little more tweaking.

Moving this to the top of the waffleboard. I think we should get these into a branch as soon as possible to facilitate the UI cleanup.

[rymorgan]

Attached are some new revisions of the PDP. First one has notes. Whoever takes this, let's discuss.

[lcampanis]

@aaronjudd is there an ETA on these new visuals? Will it be longer than 3 weeks? Thanks!

[aaronjudd]

@lcampanis we've been working on and releasing portions, but now that the UIX @rymorgan design is ready we need to break these out into smaller components so that we can track...

[lcampanis]

Thanks @aaronjudd. If I may comment on one thing, is the experience around the Publish flow, which is still a bit confusing.
Here are a few questions which might help with that:

• Which one comes first, Publish or Visible?
• Is my product visible while I edit?
• Do I always have to make public after I publish?
• Why clicking Publish doesn't make my product visible for me?
• Hovering the visibility "eye" and getting the "Public/Private" tooltip also raises the question, if I click the eye button now, will it make it public, or is it already public and it will be made private?
  This could be solved by simply adding the verb in the tooltip ie. Make Public or Make Private.

That's all food for thought, hope you find it useful.

[aaronjudd]

We've had this same discussion a dozen times, and you've nailed some of the issues we're thinking about.

I'm imaging the eventual flow, is that a product is published by you to your shop (the current paradigm), and the publish UX will include additional options (probably as a publish button dropdown option) for other publishing workflows, such as publish to marketplace (which would be a step to will add/remove from a catalog collection). This does raise the question, why couldn't the same button state just have a "Hide/Unpublish" as well..

We could probably just merge that functionality, but I like the idea of keeping a visibility property, as this can then be relied upon for merchandising (ie, it could be the publication changing transforming the visibility). The revisions structure was also meant to track visibility of individual values, and @mikemurray started on that before the UX got even more difficult.

[rymorgan]

Tickets to complete epic.

• Move/add variant icon buttons. #2031
• PDP Cleanup- Basic Details Card, Tax Card & Inventory Card Updates #2032

[rymorgan]

Closing as we look at the PDP again and rethink some of these flows.

[aaronjudd]

Re-opening as there are uncompleted tasks in this issue (or a lot more direction on how the follow up is going to take place..)

[kieckhafer]

I know these are older designs so not sure exactly what we're still looking for. A lot of this is fixed by #2893 , I'll leave it to @rymorgan to decide whether there is more that is missing.

[spencern]

@rymorgan might be worth creating a new issue with the remaining tasks. I'll let you close this one if you decide to do that.

[rymorgan]

• Move public/private buttons for variants to sidebar
• Move Toggle up/down indicator in panels to the middle.
• Notification for edited fields -- either a stroke/dot or some other indicator
• Look at cleaning up images - should the thumbnails be forced into squares. Do we need show images for variants.
• Move settings "cog" to the publish bar

[rymorgan]

Closing because all fo the core tasks mentioned in my comment above have been addressed with this PR: #2893

I preserved comments and feedback around the publishing flow in a placeholder issue here: #2990