WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 2 years ago

#23935 closed enhancement

Revision UI cleanup / improvements / corrections — at Version 18

Reported by: adamsilverstein Owned by:
Milestone: 3.6 Priority: normal
Severity: normal Version: 3.6
Component: Revisions Keywords:
Focuses: Cc:

Description (last modified by ocean90)

The new revisions UI still needs some UI polish. Now that we have addressed code/functionality issues i thought i would open a ticket to note the outstanding visual issues not addressed elsewhere:

  • the tooltips need work: their placement varies by browser, also it would be ideal if the tooltip stayed open while a user dragged the handle - currently the tooltip only stays open and updates if you keep your mouse confined to the slider handle; the slider on the other hand works fine if you drag and keep dragging but don't stay in the handle with your mouse; the result is that if you move off the handle while dragging, the slider moves, but the tooltip disappears.
  • the weighted tick marks get off to the left of center when they get thicker because of the way they are implemented; should fix so they are more accurately centered under the slider handle; last tick mark missing in compare two mode? #24056
  • the slider handle graphics are currently encoded as base 64 in the css, not certain thats the best way to implement them #23899
  • the 'compare two mode' option placement in the upper right seems haphazard, its just floating out there [24119]
  • Also we lost the 'single column' option for the diff view - not sure if we still want it, but i liked it.
  • with just a few revisions the slider/next/previous seem disconnected; with over a certain number of revisions the slider will grow wider than the screen; #24056

Change History (28)

comment:1 @ocean902 years ago

  • Keywords needs-ui added
  • Milestone changed from Awaiting Review to 3.6
  • Version changed from 3.5.1 to trunk

@bpetty2 years ago

comment:2 @bpetty2 years ago

Maybe I'm the only one that thinks this, but it just seems like a terrible idea for the title and excerpt content to be prepended and appended (respectively) right inline with the actual post content in the diff. The diff currently makes you think the new title and excerpt was accidentally included right in the post content.

I understand that it's nice to be able to see those changes along with the post content, but I really think those need to be in their own sections if they are going to be included.

So currently it looks like this:


But it should probably look more like this:

Title:

old title => new title

Content:

first post => second post

Excerpt:

old excerpt => new excerpt

comment:3 @bpetty2 years ago

  • Cc bpetty added

I should note that it's actually even worse when you go from no title/excerpt to a new one since there isn't even a "removed" line for it, so it definitely looks like it was just added to the main post content.

comment:4 @bpetty2 years ago

Related: #23899

comment:5 @ocean902 years ago

Related: #24056

comment:6 @ocean902 years ago

bpetty's point is handled in #23903.

comment:7 @ocean902 years ago

  • Description modified (diff)

comment:8 @jrbeilke2 years ago

  • Cc jrbeilke@… added

Ran into an issue with the new Revisions UI where the post title is overlapping the compare two revisions checkbox:
http://i.imgur.com/nwCONxF.jpg

comment:9 @ocean902 years ago

The patch from jrbeilke moves the compare 2 checkbox to the diff header: http://cl.ly/ON9R

Still need a better place for the loading status. Any suggestions?

comment:10 @jrbeilke2 years ago

adamsilverstein suggested we could move the loading-status just below the slider, since the status and the slider are directly related: http://i.imgur.com/Tq0Lf3f.jpg

diff incoming

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

@jrbeilke2 years ago

combined patch for slider tooltips, compare checkbox, and loading status

comment:11 follow-up: @jrbeilke2 years ago

Ok, this new patch should take care of points 1 and 4.

I've modified the slider tooltips based on an upcoming jQuery UI 1.11 feature (3071) for slider labels. This allows the tooltip/label to follow the slider and should take care of the positioning issues.

That leaves point 2 for adamsilverstein to wrap up, and I've left out point 3 for now.

comment:12 @jrbeilke2 years ago

ahoereth on IRC reported an issue with the two revision columns being slightly different sizes and causing words to wrap differently (http://d.pr/i/1hdk).

This issue appears to be related to the percentage widths used for the revisions table, including the middle spacer column (48% / 4% / 48%), where the browser is rounding things differently. By setting the middle spacer column to width: auto we can maintain the width of the left and right column, and let the browser use the middle column to fill in the remaining space.

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

@jrbeilke2 years ago

updating my earlier patch to include a fix for the revision column widths bug

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

Replying to jrbeilke:

Ok, this new patch should take care of points 1 and 4.

I've modified the slider tooltips based on an upcoming jQuery UI 1.11 feature (3071) for slider labels. This allows the tooltip/label to follow the slider and should take care of the positioning issues.

That leaves point 2 for adamsilverstein to wrap up, and I've left out point 3 for now.

thanks for the patch... wanted to clarify the tooltip issue:

i think we want to attack the tooltips to the actual tickmarks, sorry if my original comment was confusing. i thought the tooltips went with the handle and thats how i originally coded it, but it makes more sense if they are over the ticks, then you can hover over the ticks to see which revision they represent even before moving the handle there. do you want to take a shot at that?

comment:14 @SergeyBiryukov2 years ago

A note on formatting: per our CSS Coding Standards, each selector should be on its own line.

@jrbeilke2 years ago

split css selectors to separate lines per the coding standards

@ocean902 years ago

comment:15 follow-up: @ocean902 years ago

  • Keywords has-patch added; needs-patch needs-ui removed

23935.patch:

  • Continues 23935.tooltips-checkbox-status.3.patch
  • Moves color declarations to classic/fresh styles
  • Syncs classic with fresh stylesheet
  • Fixes a bug in jrbeilke's patch on tooltip resetting
  • Aligns the status message to the left
  • Restores the color shades for scope of changes
  • Styles diff header

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

looks good :)

i am working on moving the tooltips to the ticks instead of the slider handles as suggested in several places; will post a patch back here.

Replying to ocean90:

23935.patch:

  • Continues 23935.tooltips-checkbox-status.3.patch
  • Moves color declarations to classic/fresh styles
  • Syncs classic with fresh stylesheet
  • Fixes a bug in jrbeilke's patch on tooltip resetting
  • Aligns the status message to the left
  • Restores the color shades for scope of changes
  • Styles diff header

comment:17 @ocean902 years ago

In 24119:

Revisions UI update:

  • Style status loading as a regular update message like on the other screens
  • Move compare two checkbox to diff header to avoid an overlap on long post titles
  • Restore color shades for the scope of changes visualisation
  • Show tooltips while moving the slider handle
  • Diff header styling
  • Move color declarations to classic/fresh stylesheets
  • Sync admin color stylesheets

props jrbeilke for initial patch. see #23935.

comment:18 @ocean902 years ago

  • Description modified (diff)
  • Keywords needs-patch added; has-patch removed

Okay, so let's use this ticket now for tooltip improvements.

Note: See TracTickets for help on using tickets.