WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 2 years ago

#23899 closed defect (bug) (fixed)

Assorted UI tweaks to revisions screen

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

Description (last modified by ocean90)

I've noticed a couple of small things we can do to improve the UI/UX of the new revisions screen:

A couple things to consider:

  • Add a short description (intro sentence) explaining what to do once you land on the page.[24173]
  • Disable previous and next buttons when you're on the first, and last node. [24020]
  • Fix some padding/margin inconsistencies (i.e. unnecessarily large padding on right side of screen)
  • Slider handle (blue down arrow) icon looks a tad rasterized (especially on retina device)
  • Seems like the "Restore this revision" button should be in the proximity of the right side instead of in the middle (as the right side is the visual representation of what will actually be restored).
  • When in "Compare two revisions" mode, the blue highlighted section within the slider, covers all of the revision nodes. We might look at decreasing the height of that blue highlighted area. [24020]

Attachments (6)

23899.diff (2.5 KB) - added by lessbloat 2 years ago.
23899.2.patch (2.3 KB) - added by ocean90 2 years ago.
23899-show-combined-not-split-view.diff (1.9 KB) - added by adamsilverstein 2 years ago.
23899.3.patch (2.3 KB) - added by ocean90 2 years ago.
Refreshed .2
23899.2.diff (1.9 KB) - added by DrewAPicture 2 years ago.
Help tab
23899.3.diff (1.9 KB) - added by siobhan 2 years ago.
amended help text

Download all attachments as: .zip

Change History (26)

comment:1 @lessbloat2 years ago

  • Component changed from General to Revisions
  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 3.6

@lessbloat2 years ago

comment:2 @lessbloat2 years ago

23899.diff tries to be smart about disabling the next and previous buttons based on where you're at on the slider.

comment:3 @bpetty2 years ago

Related: #23935

@ocean902 years ago

comment:4 @ocean902 years ago

  • Description modified (diff)

23899.2.patch refreshes lessbloat's patch and changes the z-index of the slider range to let the revision nodes visible.

comment:5 @adamsilverstein2 years ago

  • Cc adamsilverstein@… added

i wanted to point out that i believe you are making a common mistake here:

the right hand column represents what was added in the revision, the left hand column represents what was removed. the restore revision button is near the To: revision because thats whats always restored when you click the button.

its an easy confusion to make and i had proposed a single column mode that was long ago disabled, maybe we can reconsider?

here is an old screenshot:
http://f.cl.ly/items/0b240F0K1a1J3l000o1R/revisions2.png

comment:6 @adamsilverstein2 years ago

23899-show-combined-not-split-view.diff: set combined view as default; consider as a screen option - posted for testing

comment:7 @adamsilverstein2 years ago

looks like this:

http://f.cl.ly/items/0Q2y3Z153t0z400S2511/Screen%20Shot%202013-04-17%20at%201.36.32%20PM.jpg

@ocean902 years ago

Refreshed .2

comment:8 @ocean902 years ago

In 24020:

Revisions UI: Disable previous and next buttons when you're on the first, and last node. Put revision ticks above the slider range. props lessbloat for initial patch. see #23899.

comment:9 @ethitter2 years ago

  • Cc erick@… added

comment:10 @ocean902 years ago

  • Description modified (diff)

Add a short description (intro sentence) explaining what to do once you land on the page.

Should we add a help tab?

@DrewAPicture2 years ago

Help tab

comment:11 @DrewAPicture2 years ago

  • Cc xoodrew@… added
  • Keywords has-patch added; needs-patch removed

23899.2.diff adds a help tab, per IRC.

comment:12 follow-up: @DrewAPicture2 years ago

I linked the Revision Management codex article in the help tab sidebar, which is on the docs team's priority list for the 3.6 Codex Sprint.

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

Replying to DrewAPicture:

I linked the Revision Management codex article in the help tab sidebar, which is on the docs team's priority list for the 3.6 Codex Sprint.

very nice, thanks!

@siobhan2 years ago

amended help text

comment:14 @siobhan2 years ago

  • Cc siobhan added

comment:15 @DrewAPicture2 years ago

Help tab following changes in 23899.3.diff:

Tab: Overview:

This screen is used for managing your content revisions.

Revisions are saved copies of your post or page, which are periodically created as you update your content. The red text on the left shows the content that was removed. The green text on the right shows the content that was added.

From this screen you can review, compare, and restore revisions:

  • To navigate between revisions, drag the slider arrow left or right or use the Previous or Next buttons.
  • To compare two revisions select the Compare two revisions box.
  • To restore a revision, click Restore This Revision.

Tab Sidebar:

For more information:

Revisions Management
Support Forums

Version 0, edited 2 years ago by DrewAPicture (next)

comment:16 @ocean902 years ago

In 24173:

Revisions UI: Add a help tab. props siobhan, DrewAPicture. see #23899.

comment:17 @ocean902 years ago

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

comment:18 @JerrySarcastic2 years ago

  • Cc fittingsites@… added

comment:19 @ocean902 years ago

Starting new tickets.

comment:20 @ocean902 years ago

  • Keywords needs-patch removed
  • Resolution set to fixed
  • Status changed from new to closed
  • Version set to trunk
Note: See TracTickets for help on using tickets.