design / selected color isn't clear about pgelectron

[Daandelange]

Yes, this is not clear and was the first thing I saw after this update.
Dark grey with white text for selected seems better

On 22 August 2015 at 16:02, ofZach [email protected] wrote:

here, in one case grey = selected, while in another case, white =
selected. needs maybe some consistency?

[image: screen shot 2015-08-22 at 10 01 11 am]
https://cloud.githubusercontent.com/assets/142897/9424286/d5e8112e-48b4-11e5-957f-e5a1df6f14f5.png

—
Reply to this email directly or view it on GitHub
#14.

[Daandelange]

Btw I think I fixed this in 002c075 (makes it white on gray)
Approve ?

[ofZach]

I still think it's confusing, I'm working on styling the select2 it might help. The problem is that the select 2 grey is the same as the unselected platform, so for me the feels it's a bit off, like I can't tell what is active. I'll work on this a bit, thanks for the changes!

[kylemcdonald]

if it helps, it was also unclear to me which one was "selected". a color might not be enough, but adding a border to the selected ones would feel very clear to me.

[ofZach]

I also think an "x" image, like the PG roadmap mockup and the adddons multiselect would be useful, ie, signaling an unselect... I tried to do this via css but I think it has to be done with javascript.

[Daandelange]

I did a new try, might be better but I'm still not convinced.

[ofZach]

I think if the x was bigger (like the PG mockup) and it was visibility:none on unselected (so there wasn't a gap) it might help. Obviously things will reflow as you select them, but it feels like it would be more obvious.

[Daandelange]

I made the gap on purpose so the buttons don't move on enabling/disabling them. (because adding the "x" adds more width to the buttons)

[ofZach]

I think it's fine if they reflow as you select them...

[Daandelange]

Should be better now :)
Also removed the "x" and the pointer when it's the only selected platform.

[kylemcdonald]

this could be closed i think, as the design is much clearer now.