Easy-digital-downloads: Further UX improvements to the Licenses tab

[cklosowski]

In #3889 we've improved the the License list, and some discussion was made about further improvements to make it less cluttered. Logging this one so @SDavisMedia can work his magic on it.

[SDavisMedia]

Not thrilled about the styling just yet but I like the grid display. Jacked some styles from @cklosowski's Extensions page. I'll tweak the styles more soon.

[pippinsplugins]

@SDavisMedia I'm really liking where this is going.

I've fixed the missing parameter bug.

[SDavisMedia]

@pippinsplugins Thanks! I'll get back to it soon then. Need to see what I can do to consolidate some CSS between this tab and the Extensions page CSS.

Note: I've added a class to all the settings tabs .wrap elements. Wanted/needed it for this and it can be useful for other tabs to help prevent other admin CSS conflicts. https://github.com/easydigitaldownloads/Easy-Digital-Downloads/commit/5f5fb59c10a8c648af966ce7de602f5946dc9c60

Let me know if you or @cklosowski have any issues with that.

[SDavisMedia]

@pippinsplugins Still having issues with the license data. Stripe you see in my screenshot is the only one behaving correctly. Can you create all of the license scenarios properly in your system?

[pippinsplugins]

@SDavisMedia I was seeing a bit of weirdness. Do you get the same behavior with release/2.5?

[SDavisMedia]

@pippinsplugins yea same exact thing (even with your latest tweak implemented)

[pippinsplugins]

Reopening original issue for further investigation.

[SDavisMedia]

Sweet deal.

[cklosowski]

really liking this @SDavisMedia

[SDavisMedia]

@cklosowski @mindctrl @pippinsplugins Thoughts? Keep in mind the majority of licenses will show either nothing or the light gray box. The colored boxes would be rare but easily stand out.

[pippinsplugins]

Love it.

[michaelbeil]

Looking solid @SDavisMedia.

[chriscct7]

With license keys we could perhaps offer a renew link in the license key thing.

[amdrew]

Beautiful

[SDavisMedia]

@chriscct7 we'll be doing that when 2.5 rolls out https://github.com/easydigitaldownloads/Easy-Digital-Downloads/issues/3889#issuecomment-146296417

[pippinsplugins]

@SDavisMedia Could you go ahead and submit the PR for this so we can start testing it?

[SDavisMedia]

@pippinsplugins updated with release/2.6 and done.

[cklosowski]

Looking good to me @SDavisMedia

[pippinsplugins]

Thanks @SDavisMedia !

[pippinsplugins]

Thoughts on what we can do when no license keys are entered?

[SDavisMedia]

eh... probably just add one more note in the same place as the others asking the user to input the license key for updates

[SDavisMedia]

How's this (updated with release/2.6):

[cklosowski]

I <3 that.

[chriscct7]

2 things which might be already agreed upon but just not in the picture
because its trivial, but can the licenses be in alphabetical order, and is
it possible to do a "view" so to speak for "licenses that need attention"
which would have expired or non-entered license keys

On Thu, May 5, 2016 at 11:44 PM, Chris Klosowski [email protected]
wrote:

I <3 that.

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
https://github.com/easydigitaldownloads/easy-digital-downloads/issues/4050#issuecomment-217341405

[pippinsplugins]

I'm not a fan of the giant white space around the input field when no key has been entered. I'm having a hard time coming up with ways to get rid of it but I'd like to experiment and see what options are.

@chriscct7 That would be really nice but let's not worry about that. One piece at a time.

[spencerfinnell]

What about a button to their licenses page on the EDD site?

[pippinsplugins]

There's a link at the top of the page.

[SDavisMedia]

This is an option if we drop "License" off of the secondary button. If not, there's no room to play unless I switch to only two columns. The form text can't afford to be any smaller than this here.

[pippinsplugins]

I like that version much better!

[spencerfinnell]

I'd be careful about relying on character length. It should be treated as dynamic due to translations.

What about making the section with the text always up against the button or input and the darker gray expanding down to fill the rest?

[pippinsplugins]

Good point.

[SDavisMedia]

There was room to play here as the bottom text section is design to extend upward based on text length, but you don't like the white space. It's there because once a license is entered, not only will a button appear there, but the text message could become longer and push the bottom section up.

For uniform grids elements, we're either gonna have the white space below the form or gray space below the text (with Spencer's suggestion). Either way, there's no guarantee any of the elements will be the same height at all times because they might not have the same content. This is no different from the type of scenario you see on product displays with different length descriptions but uniform grid elements. http://glui.me/?i=j6oepsu0towx9s5/2016-05-06_at_7.16_PM.png/

[pippinsplugins]

@SDavisMedia that screenshot seems to have died. Could you post it again?

[SDavisMedia]

@pippinsplugins oops http://glui.me/?i=eu5gq3vtsub2t5r/2016-05-09_at_2.57_PM.png/

[pippinsplugins]

Ok let's just go with this version: https://github.com/easydigitaldownloads/easy-digital-downloads/issues/4050#issuecomment-217341089

[pippinsplugins]

Just did some more testing of this and it's a really, really significant improvement. Once unit tests, I'm going to merge it.

[pippinsplugins]

Merged into release/2.6