WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 2 years ago

#24276 closed enhancement (fixed)

Revisions: Redesign the slider handlers

Reported by: ocean90 Owned by: ocean90
Milestone: 3.6 Priority: normal
Severity: normal Version: 3.6
Component: Revisions Keywords: needs-patch
Focuses: Cc:

Description

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.

Attachments (19)

post-revisions-option1.png (48.9 KB) - added by ocean90 2 years ago.
post-revisions-option2.png (49.0 KB) - added by ocean90 2 years ago.
post-revisions-option3.png (48.3 KB) - added by melchoyce 2 years ago.
post-revisions-option3.2.png (48.4 KB) - added by melchoyce 2 years ago.
arrows-pr.png (1.2 KB) - added by melchoyce 2 years ago.
arrows-pr-2x.png (1.5 KB) - added by melchoyce 2 years ago.
24276.diff (12.2 KB) - added by melchoyce 2 years ago.
Updating slider handle styles, slightly tweaking diff deletedline and addedline styling to include borders and some extra padding.
24276.2.diff (12.0 KB) - added by adamsilverstein 2 years ago.
new handles corrected for retina display
arrows-pr-rtl.png (359 bytes) - added by adamsilverstein 2 years ago.
arrows reversed for RTL
24276.3.diff (14.2 KB) - added by adamsilverstein 2 years ago.
reverses arrows for RTL
arrows-pr-rtl-2x.png (427 bytes) - added by adamsilverstein 2 years ago.
retina version arrows reversed for RTL
24276.4.diff (15.6 KB) - added by DrewAPicture 2 years ago.
'slider arrow' becomes 'slider handle' (help tab)
arrows-pr.2.png (1.3 KB) - added by melchoyce 2 years ago.
arrows-pr-2x.2.png (1.7 KB) - added by melchoyce 2 years ago.
arrows-pr.3.png (1.3 KB) - added by adamsilverstein 2 years ago.
updated file, same name as before
arrows-pr-2x.3.png (1.7 KB) - added by adamsilverstein 2 years ago.
updated file, same name as before
24276.5.diff (13.2 KB) - added by adamsilverstein 2 years ago.
uses single sprite
24276.6.diff (14.6 KB) - added by adamsilverstein 2 years ago.
Includes help language correction
24276.7.diff (15.7 KB) - added by ocean90 2 years ago.

Download all attachments as: .zip

Change History (42)

comment:1 @adamsilverstein2 years ago

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.

comment:2 follow-up: @melchoyce2 years ago

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?

Last edited 2 years ago by melchoyce (previous) (diff)

comment:3 in reply to: ↑ 2 @adamsilverstein2 years ago

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?

comment:4 follow-ups: @melchoyce2 years ago

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.

comment:5 in reply to: ↑ 4 @adamsilverstein2 years ago

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.

comment:6 in reply to: ↑ 4 @ocean902 years ago

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?

comment:7 @melchoyce2 years ago

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

http://f.cl.ly/items/3w2m2e1i0K213J2x0o1k/post-revisions-option3-single.png

comment:8 follow-up: @ocean902 years ago

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

comment:9 in reply to: ↑ 8 @adamsilverstein2 years ago

Replying to ocean90:

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

looks good to me!

comment:10 follow-up: @melchoyce2 years ago

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.

comment:11 in reply to: ↑ 10 ; follow-up: @adamsilverstein2 years ago

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.

comment:12 in reply to: ↑ 11 ; follow-up: @melchoyce2 years ago

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.

comment:13 in reply to: ↑ 12 @adamsilverstein2 years ago

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!

@melchoyce2 years ago

@melchoyce2 years ago

@melchoyce2 years ago

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

comment:14 follow-ups: @melchoyce2 years ago

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.

comment:15 in reply to: ↑ 14 ; follow-up: @adamsilverstein2 years ago

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.

http://f.cl.ly/items/133q0t1U2M2u2B3z0G1H/Screen%20Shot%202013-05-08%20at%207.07.38%20AM.png

http://f.cl.ly/items/0u3J1U2A0m2L3X3t3v3t/Screen%20Shot%202013-05-08%20at%207.07.32%20AM.png

comment:16 in reply to: ↑ 15 @adamsilverstein2 years ago

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.

http://f.cl.ly/items/133q0t1U2M2u2B3z0G1H/Screen%20Shot%202013-05-08%20at%207.07.38%20AM.png

http://f.cl.ly/items/0u3J1U2A0m2L3X3t3v3t/Screen%20Shot%202013-05-08%20at%207.07.32%20AM.png

ps. looks perfect on my regular non-retina monitor

@adamsilverstein2 years ago

new handles corrected for retina display

comment:17 in reply to: ↑ 14 @adamsilverstein2 years ago

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.

comment:18 @adamsilverstein2 years ago

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

http://f.cl.ly/items/43093t3f2C052I0d3018/Screen%20Shot%202013-05-08%20at%208.25.21%20AM.jpg

i will work on this

Last edited 2 years ago by adamsilverstein (previous) (diff)

@adamsilverstein2 years ago

arrows reversed for RTL

@adamsilverstein2 years ago

reverses arrows for RTL

comment:19 @adamsilverstein2 years ago

24276.3.diff reverses arrows for RTL mode

http://f.cl.ly/items/1n03122r1l0I1H1B2S1X/Screen%20Shot%202013-05-08%20at%208.47.56%20AM.jpg

@adamsilverstein2 years ago

retina version arrows reversed for RTL

@DrewAPicture2 years ago

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

@melchoyce2 years ago

@melchoyce2 years ago

comment:20 @melchoyce2 years ago

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

@adamsilverstein2 years ago

updated file, same name as before

@adamsilverstein2 years ago

updated file, same name as before

@adamsilverstein2 years ago

uses single sprite

comment:21 @adamsilverstein2 years ago

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

@adamsilverstein2 years ago

Includes help language correction

comment:22 @adamsilverstein2 years ago

24276.6.diff​ adds back help update from DrewAPicture

@ocean902 years ago

comment:23 @ocean902 years ago

  • Owner set to ocean90
  • Resolution set to fixed
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.