Revisions: Redesign the slider handlers

[ocean90]

I have asked Mel Choyce to design us some nice slider handlers. The first results are attached.

Some ​feedback on IRC chat this morning.

zabatonni mentioned, that it could be better to use just one color in two revisions mode. Otherwise one handler looks active and the other inactive. Not sure about this, since we are using two colors to indicate the "From" - "To" state.

[adamsilverstein]

i like option 2 - nice! i agree with the color discussion, keeping the colors associated with From/To seems useful. Its also true that once you start dragging, only one handle is active, so maybe an additional color change or highlighting could indicate this, then go off when you let go.

[melchoyce]

We could try switching over to single arrows during revision mode. Only concern there might be people thinking you're comparing everything between the arrows, not just the selected states. Attachment above. Has there been any user testing for post formats yet?

[adamsilverstein]

Replying to melchoyce:

We could try switching over to single arrows during revision mode. Only concern there might be people thinking you're comparing everything between the arrows, not just the selected states. Attachment above. Has there been any user testing for post formats yet?

the single arrows look good - maybe the triangle or circle part can color co-ordinate with From/To?

[melchoyce]

Updated with color coded arrows. Also made the bar longer so it's easier to get a feel for context.

The revisions as a whole are looking a little under-designed — any opportunity for some more design iterations, or is too late in the cycle? I'd at least encourage user testing any new arrows before launch.

[adamsilverstein]

Replying to melchoyce:

Updated with color coded arrows. Also made the bar longer so it's easier to get a feel for context.

The revisions as a whole are looking a little under-designed — any opportunity for some more design iterations, or is too late in the cycle? I'd at least encourage user testing any new arrows before launch.

these look great, already much nicer than what we have - thanks! any other design input appreciated, if it gets too late for 3.6 we can always include in 3.6.1.

user testing sounds great! new revisions interface is already live on wp.com so maybe we could get some feedback/testing there.

[ocean90]

Replying to melchoyce:

The revisions as a whole are looking a little under-designed — any opportunity for some more design iterations, or is too late in the cycle? I'd at least encourage user testing any new arrows before launch.

Depends on the severity, if it's just some minor CSS I'm fine with it. But in a new ticket please.

Otherwise I like the colored arrows. Just undecided about the orientation of the arrows. Could be misleading. > means I can only drag it right, < only left. How should it look in single mode then?

[melchoyce]

I figured we'd keep the double arrows in single mode:

[ocean90]

Okay, I'm fine with it. You want to patch it?

[adamsilverstein]

Replying to ocean90:

Okay, I'm fine with it. You want to patch it?

looks good to me!

[melchoyce]

I could probably handle replacing the comparison handles, but I'm not sure I'd know how to change the active handle based on whether it's in single or comparison mode. There doesn't seem to be a class I can target when it's just in single mode, and I have no idea how I'd go about adding a class.

[adamsilverstein]

Replying to melchoyce:

I could probably handle replacing the comparison handles, but I'm not sure I'd know how to change the active handle based on whether it's in single or comparison mode. There doesn't seem to be a class I can target when it's just in single mode, and I have no idea how I'd go about adding a class.

there is a class added to a parent div #revision-diff-container gets comparing-two-revisions class added to it in compare two mode; the active handle gets a ui-state-active when interacting; hope thats helpful or post the source files and i can work on it.

[melchoyce]

Replying to adamsilverstein:

there is a class added to a parent div #revision-diff-container gets comparing-two-revisions class added to it in compare two mode; the active handle gets a ui-state-active when interacting; hope thats helpful or post the source files and i can work on it.

Cool, that should work for me. I need to finish up some work, but I can get to it later tonight if that's okay.

[adamsilverstein]

Replying to melchoyce:

Replying to adamsilverstein:

there is a class added to a parent div #revision-diff-container gets comparing-two-revisions class added to it in compare two mode; the active handle gets a ui-state-active when interacting; hope thats helpful or post the source files and i can work on it.

Cool, that should work for me. I need to finish up some work, but I can get to it later tonight if that's okay.

perfect - thanks!

[melchoyce]

Updating slider handle styles, slightly tweaking diff deletedline and addedline styling to include borders and some extra padding.

[melchoyce]

Okay, that should be good to go. Let me know if everything looks okay. Only thing I couldn't test was retina, so that will need to be checked out.

[adamsilverstein]

Replying to melchoyce:

Okay, that should be good to go. Let me know if everything looks okay. Only thing I couldn't test was retina, so that will need to be checked out.

testing on retina the images are messed up, i will try to address and repost here.

[adamsilverstein]

Replying to adamsilverstein:

Replying to melchoyce:

Okay, that should be good to go. Let me know if everything looks okay. Only thing I couldn't test was retina, so that will need to be checked out.

testing on retina the images are messed up, i will try to address and repost here.

ps. looks perfect on my regular non-retina monitor

[adamsilverstein]

new handles corrected for retina display

[adamsilverstein]

Replying to melchoyce:

Okay, that should be good to go. Let me know if everything looks okay. Only thing I couldn't test was retina, so that will need to be checked out.

24276.2.diff​ corrects css for retina displays, turns out all we had to do was set the background size for the x2 image, everything else stays as is.

[adamsilverstein]

just realized we need to reverse the images for RTL on the two handled mode or it looks backwards:

i will work on this

[adamsilverstein]

arrows reversed for RTL

[adamsilverstein]

reverses arrows for RTL

[adamsilverstein]

24276.3.diff​ reverses arrows for RTL mode

[adamsilverstein]

retina version arrows reversed for RTL

[DrewAPicture]

'slider arrow' becomes 'slider handle' (help tab)

[melchoyce]

Condensed RTL and LTR arrows into one sprite for 1x and x2.

[adamsilverstein]

updated file, same name as before

[adamsilverstein]

updated file, same name as before

[adamsilverstein]

uses single sprite

[adamsilverstein]

in 24276.5.diff​​:

• css uses new arrows-pr.png and arrows-pr-2x.png files from melchoyce (name them as such and put them in wp-admin/images)
• tested in RTL and on retina display

[adamsilverstein]

Includes help language correction

[adamsilverstein]

24276.6.diff​​ adds back help update from DrewAPicture

[ocean90]

In 24219:

Revisions UI: Redesigned slider handlers.

Also:

• Fix diff header styling in grey admin theme
• Prevent an overlap of the compare two checkbox on smaller screens

props melchoyce, DrewAPicture, adamsilverstein. fixes #24276.