WordPress.org

Make WordPress Core

Opened 8 years ago

Closed 8 years ago

Last modified 2 years ago

#24553 closed defect (bug) (fixed)

"{user} is currently editing" messages on post listing screen causes items on screen to move around

Reported by: johnbillion Owned by: markjaquith
Milestone: 3.6 Priority: high
Severity: normal Version: 3.6
Component: Administration Keywords:
Focuses: Cc:

Description

A seemingly innocuous feature that could get very annoying for users.

When a user is editing a post, the post listing screen displays a "{user} is currently editing" message below the post to other users.

http://i.imgur.com/trLry65.png

The appearance and disappearance of this message on each post (which happens periodically via Heartbeat) causes the table row height to change significantly.

Imagine a site with several editors working simultaneously. The post listing screen can jump around enough that it can cause people to mis-click a link if one of the messages appears or disappears just as you go to click a link.

I've already mis-clicked once and I'm only working on a test site with two dummy users. UI elements that cause other elements to move around when their state changes is bad.

Not sure how we can address this. The message is a sizable UI element that we can't really reserve space for. Suggestions?

Attachments (5)

wp-admin.css.diff (586 bytes) - added by jcexygy 8 years ago.
hide the "currently editing" line until user hovers over that row
24553.patch (2.7 KB) - added by johnbillion 8 years ago.
24553.2.patch (2.8 KB) - added by kadamwhite 8 years ago.
Trying a CSS3-based approach, which will work in everything but IE<10 and requires less JS.
currently-editing.png (5.7 KB) - added by azaozz 8 years ago.
24553.3.patch (305 bytes) - added by azaozz 8 years ago.

Download all attachments as: .zip

Change History (20)

#1 @jcexygy
8 years ago

Perhaps the {username is currently editing} message could instead be displayed when the user hovers over the Lock icon.

#2 @helen
8 years ago

  • Milestone changed from Awaiting Review to 3.6

No current idea that is accessible+touch friendly, but I agree that this is bad.

@jcexygy
8 years ago

hide the "currently editing" line until user hovers over that row

#3 @markjaquith
8 years ago

Let's slide it in, slowly, instead of just popping it in and making everything suddenly shift.

@johnbillion
8 years ago

#4 @johnbillion
8 years ago

24553.patch introduces a slide up/down effect when the message is added/removed, but the effect is not smooth because of a slight jump due to padding/margin being applied/removed. Improvements welcome.

#5 @kadamwhite
8 years ago

  • Cc kadamwhite added

@kadamwhite
8 years ago

Trying a CSS3-based approach, which will work in everything but IE<10 and requires less JS.

#6 @kadamwhite
8 years ago

A video roughly showing what I did with CSS3: https://dl.dropboxusercontent.com/u/7464197/LockSlideInOut.mov (one or two minor tweaks out-of-date, but representative of the overall effect).

I haven't fully tested this cross-browser, and the actual styles used for the transition are up for debate, but it's my understanding that the jQuery team is recommending the use of CSS3 for minor animations such as this.

Height on the lock icon was adjusted to make the box model height of its container match between the locked and unlocked states.

#7 @markjaquith
8 years ago

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

In 24576:

Gracefully slide down the "{Name} is editing" notice portion of the post row, so everything isn't shifting down in an instant and throwing off people's clicks.

fixes #24553. props kadamwhite, johnbillion.

#8 @azaozz
8 years ago

Can't limit the height on .locked-info, the action links overlap on narrow screens:

@azaozz
8 years ago

#9 @azaozz
8 years ago

  • Priority changed from normal to high
  • Resolution fixed deleted
  • Status changed from closed to reopened

height: auto; (24553.3.patch) seems to fix the overlap, needs some more testing to confirm it doesn't interfere with the transition.

#10 @nacin
8 years ago

I was debugging this at WCSF and then forgot about it. Yeah, let's test this and get it in.

#11 @mikeschroder
8 years ago

This fixes the issue for me on Chrome and Firefox (OSX).

#12 @markjaquith
8 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 24906:

Set post locked info height to auto so it doesn't overlap action links.

Fixes #24553 for trunk. Props azaozz.

#13 @markjaquith
8 years ago

In 24907:

Set post locked info height to auto so it doesn't overlap action links.

Fixes #24553 for 3.6. Props azaozz.

#14 @afercia
3 years ago

Related: #44946

#15 @afercia
2 years ago

In 45417:

Accessibility: Improve toggling the "Post locked" information visibility.

  • effectively hides the "Post locked" information from assistive technologies
  • when a post is locked, reveals the "Post locked" information without CSS animation
  • the height CSS animation didn't work anyways after [24906]

See #24553.
Fixes #44946.

Note: See TracTickets for help on using tickets.