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

[johnbillion]

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.

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?

[jcexygy]

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

[helen]

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

[jcexygy]

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

[markjaquith]

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

[johnbillion]

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.

[kadamwhite]

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

[kadamwhite]

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.

[markjaquith]

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.

[azaozz]

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

[azaozz]

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

[nacin]

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

[kirasong]

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

[markjaquith]

In 24906:

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

Fixes #24553 for trunk. Props azaozz.

[markjaquith]

In 24907:

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

Fixes #24553 for 3.6. Props azaozz.

[afercia]

Related: #44946

[afercia]

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.