Make WordPress Core

Opened 11 years ago

Closed 11 years ago

#24276 closed enhancement (fixed)

Revisions: Redesign the slider handlers

Reported by: ocean90's profile ocean90 Owned by: ocean90's profile 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 11 years ago.
post-revisions-option2.png (49.0 KB) - added by ocean90 11 years ago.
post-revisions-option3.png (48.3 KB) - added by melchoyce 11 years ago.
post-revisions-option3.2.png (48.4 KB) - added by melchoyce 11 years ago.
arrows-pr.png (1.2 KB) - added by melchoyce 11 years ago.
arrows-pr-2x.png (1.5 KB) - added by melchoyce 11 years ago.
24276.diff (12.2 KB) - added by melchoyce 11 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 11 years ago.
new handles corrected for retina display
arrows-pr-rtl.png (359 bytes) - added by adamsilverstein 11 years ago.
arrows reversed for RTL
24276.3.diff (14.2 KB) - added by adamsilverstein 11 years ago.
reverses arrows for RTL
arrows-pr-rtl-2x.png (427 bytes) - added by adamsilverstein 11 years ago.
retina version arrows reversed for RTL
24276.4.diff (15.6 KB) - added by DrewAPicture 11 years ago.
'slider arrow' becomes 'slider handle' (help tab)
arrows-pr.2.png (1.3 KB) - added by melchoyce 11 years ago.
arrows-pr-2x.2.png (1.7 KB) - added by melchoyce 11 years ago.
arrows-pr.3.png (1.3 KB) - added by adamsilverstein 11 years ago.
updated file, same name as before
arrows-pr-2x.3.png (1.7 KB) - added by adamsilverstein 11 years ago.
updated file, same name as before
24276.5.diff (13.2 KB) - added by adamsilverstein 11 years ago.
uses single sprite
24276.6.diff (14.6 KB) - added by adamsilverstein 11 years ago.
Includes help language correction
24276.7.diff (15.7 KB) - added by ocean90 11 years ago.

Download all attachments as: .zip

Change History (42)

#1 @adamsilverstein
11 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.

#2 follow-up: @melchoyce
11 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 11 years ago by melchoyce (previous) (diff)

#3 in reply to: ↑ 2 @adamsilverstein
11 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?

#4 follow-ups: @melchoyce
11 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.

#5 in reply to: ↑ 4 @adamsilverstein
11 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.

#6 in reply to: ↑ 4 @ocean90
11 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?

#7 @melchoyce
11 years ago

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

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

#8 follow-up: @ocean90
11 years ago

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

#9 in reply to: ↑ 8 @adamsilverstein
11 years ago

Replying to ocean90:

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

looks good to me!

#10 follow-up: @melchoyce
11 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.

#11 in reply to: ↑ 10 ; follow-up: @adamsilverstein
11 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.

#12 in reply to: ↑ 11 ; follow-up: @melchoyce
11 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.

#13 in reply to: ↑ 12 @adamsilverstein
11 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!

@melchoyce
11 years ago

@melchoyce
11 years ago

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

#14 follow-ups: @melchoyce
11 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.

#15 in reply to: ↑ 14 ; follow-up: @adamsilverstein
11 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

#16 in reply to: ↑ 15 @adamsilverstein
11 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

@adamsilverstein
11 years ago

new handles corrected for retina display

#17 in reply to: ↑ 14 @adamsilverstein
11 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.

#18 @adamsilverstein
11 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 11 years ago by adamsilverstein (previous) (diff)

@adamsilverstein
11 years ago

arrows reversed for RTL

@adamsilverstein
11 years ago

reverses arrows for RTL

#19 @adamsilverstein
11 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

@adamsilverstein
11 years ago

retina version arrows reversed for RTL

@DrewAPicture
11 years ago

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

#20 @melchoyce
11 years ago

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

@adamsilverstein
11 years ago

updated file, same name as before

@adamsilverstein
11 years ago

updated file, same name as before

@adamsilverstein
11 years ago

uses single sprite

#21 @adamsilverstein
11 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

@adamsilverstein
11 years ago

Includes help language correction

#22 @adamsilverstein
11 years ago

24276.6.diff​ adds back help update from DrewAPicture

@ocean90
11 years ago

#23 @ocean90
11 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.