WordPress.org

Make WordPress Core

Opened 10 months ago

Closed 9 months ago

Last modified 9 months 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 10 months ago.
hide the "currently editing" line until user hovers over that row
24553.patch (2.7 KB) - added by johnbillion 10 months ago.
24553.2.patch (2.8 KB) - added by kadamwhite 10 months 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 9 months ago.
24553.3.patch (305 bytes) - added by azaozz 9 months ago.

Download all attachments as: .zip

Change History (18)

comment:1 jcexygy10 months ago

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

comment:2 helen10 months ago

  • Milestone changed from Awaiting Review to 3.6

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

jcexygy10 months ago

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

comment:3 markjaquith10 months ago

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

johnbillion10 months ago

comment:4 johnbillion10 months 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.

comment:5 kadamwhite10 months ago

  • Cc kadamwhite added

kadamwhite10 months ago

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

comment:6 kadamwhite10 months 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.

comment:7 markjaquith10 months 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.

azaozz9 months ago

comment:8 azaozz9 months ago

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

azaozz9 months ago

comment:9 azaozz9 months 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.

comment:10 nacin9 months ago

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

comment:11 DH-Shredder9 months ago

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

comment:12 markjaquith9 months 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.

comment:13 markjaquith9 months ago

In 24907:

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

Fixes #24553 for 3.6. Props azaozz.

Note: See TracTickets for help on using tickets.