Improve visibility of inactive customer profile tabs

mindctrl commented 9 years ago

The inactive tabs are too light and don't have enough contrast.

Using a color contrast checker that checks for accessibility issues (link), the colors fail for not having enough contrast. I think we just need to darken the icon color.

chriscct7 commented 9 years ago

Cross ref with FES when this goes in please, so we can make sure to keep the CSS consistent :)

zackkatz commented 9 years ago

Not to derail this issue, but I'd also suggest adding labels with the logos for easier identification of what they do. I never know exactly what the tabs mean at a glance, even though hovering shows it.

It looks way worse, but I'd argue it's easier to use.

…

chriscct7 commented 9 years ago

I completely agree. Particularly as extensions start to register custom settings.

chriscct7 commented 9 years ago

This should probably be a seperate issue but there's alot of effort involved in re-using these profiles across extensions.

pippinsplugins commented 9 years ago

We had extensive conversations on this when first introducing custom details page. See #2548

chriscct7 commented 9 years ago

That discussion starts here: https://github.com/easydigitaldownloads/Easy-Digital-Downloads/issues/2548#issuecomment-77177679 (so you don't have to wade through that ticket).

I think we should really reconsider this decision. I really like the proposal above or the one John did on the other ticket

pippinsplugins commented 9 years ago

If we decide to go with horizontal tabs, I think we should go for something closer to the WooCommerce product configuration tabs UI.

spencerfinnell commented 9 years ago

I definitely prefer the WooCommerce style. For having it contained in a meta box, and the tabs are a lot clearer (and easier to handle on small devices).

pippinsplugins commented 8 years ago

Note, color of inactive tabs has been fixed in #4443

cklosowski commented 8 years ago

I vote that we move the Contains Metabox with vertical tabs containing text. I think this is a route that people are comfortable with

cklosowski commented 7 years ago

Moving to 2.9. While it would be nice to have this done, we have some more pressing enhancements right now. If someone jumps on this before I get to it, I think we should look at the WooCommerce tabbed box model as a guide, I think that would suit here well.

SeanTOSCD commented 7 years ago

I took a stab at this. Few things to note:

It's backwards compatible, so it won't disrupt anything already in the wild. Likewise, it does not affect card views that do not use tabs. That means Recurring Payments card view is still good and FES rebuilt the entire vendor view on its own, so it's unaffected.
Software Licensing will need very minor changes before SL 3.5 goes out. I'll take care of that. (Cc: @ghost1227)
Though it now displays text on the tab, it only shows the text that people need to see. The word Customer is prepended to all tab titles but wrapped in the screen reader class... that way everything is optimized for all users. Please review the code and let me know if you have beef with how it's done... particularly the part where I make sure no extension tries to add a tab title with "Customer" already at the beginning of the string, like EDD Wallet.
It's fully responsive.
Das it mane.

pippinsplugins commented 7 years ago

I love this.

Do these changes carry over properly to Recurring Payments and FES or will those need updates too?

evertiro commented 7 years ago

@SDavisMedia Gorgeous! I'll make sure to update Wallet whenever this nightmare of an update is ready.

pippinsplugins commented 7 years ago

Missed comments about RP and FES above. Good stuff :+1:

pippinsplugins commented 7 years ago

Moved back to 2.7 since @SDavisMedia has done all the heavy lifting already.

chriscct7 commented 7 years ago

What happens when the text overflows, such as when an extension makes a tab called "my awesome but super long tab name"

mindctrl commented 7 years ago

@chriscct7 we exile said extension.

chriscct7 commented 7 years ago

I know you're joking but just wanted to point out another way text could get that long inadvertently is via translations where 1 word could become a 30 character word in another language

evertiro commented 7 years ago

Joking aside, it's a valid question.

mindctrl commented 7 years ago

Here's what Woo does on their product edit page:

I think that looks fine, and it looks like what @ghost1227's screenshot looks like.

spencerfinnell commented 7 years ago

Agreed. Only thing that could be done is keeping the next line left-aligned with the first, but I don't think that is necessary either.

SeanTOSCD commented 7 years ago

I'll pretty up the text wrap but yes, it just needs to wrap. We won't stop that from happening. I'll figure something out for a really long single word, @chriscct7, because that's a totally valid concern. I'll weigh some pros and cons for the tab width.

@spencerfinnell Thanks for the code comment. I'll address that.

chriscct7 commented 7 years ago

@SDavisMedia the simple solution might just be to break-word it.

SeanTOSCD commented 7 years ago

@chriscct7 Yup. My contribution to Twenty Sixteen was for the same exact use case. :+1:

SeanTOSCD commented 7 years ago

Check this out, @spencerfinnell: https://github.com/easydigitaldownloads/easy-digital-downloads/commit/6848de09dfb55e1e658e5e6abc7b3eefd6bea084

pippinsplugins commented 7 years ago

This looks wonderful. Noticed one small issue with the Software Licensing update, but I logged that https://github.com/easydigitaldownloads/EDD-Software-Licensing/issues/667

cklosowski commented 7 years ago

This looks good, althoguh we have a few updates to make to Software Licensing after https://github.com/easydigitaldownloads/EDD-Software-Licensing/issues/667. The names of the tabs aren't showing, so we'll have to get an update out after 2.7 that adds those in there.

SeanTOSCD commented 7 years ago

@cklosowski nope everything is actually ready to go. Pippin just missed my note about the SL adjustment depending on an EDD version check. The names don't show because EDD issue/3791 does not have version 2.7 set. No matter which one is released first, EDD or SL, this will work as expected in both EDD and SL.

See: https://github.com/easydigitaldownloads/EDD-Software-Licensing/issues/667#issuecomment-265633721

cklosowski commented 7 years ago

:+1: awesome thanks for the details.

On Jan 6, 2017 5:09 PM, "Sean Davis" notifications@github.com wrote:

@cklosowski https://github.com/cklosowski nope everything is actually ready to go. Pippin just missed my note about the SL adjustment depending on an EDD version check. The names don't show because EDD issue/3791 does not have version 2.7 set. No matter which one is released first, EDD or SL, this will work as expected in both EDD and SL.

See: easydigitaldownloads/EDD-Software-Licensing#667 (comment) https://github.com/easydigitaldownloads/EDD-Software-Licensing/issues/667#issuecomment-265633721

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/easydigitaldownloads/easy-digital-downloads/issues/3791#issuecomment-271043816, or mute the thread https://github.com/notifications/unsubscribe-auth/ABU2LIGtX4pvSq-_5BbmZW43Sq3S42flks5rPtfTgaJpZM4F6ipW .

pippinsplugins commented 7 years ago

Merged!

awesomemotive / easy-digital-downloads

Improve visibility of inactive customer profile tabs #3791