Page MenuHomePhabricator

Keep close action at reach while translating long templates
Open, MediumPublic

Description

As part of the template translation process (T139332), an isolation mode for templates is provided.
Currently the options to close the mode are provided at the top, which makes it inconvenient to reach when editing long templates since users need to scroll back.

Making the template translation area o have a sticky header would help to keep a clearer reference on where the user is and would keep controls easy to reach.

Before scrollingAfter scrolling
template-editing.png (768×1 px, 142 KB)
template-editing-scroll.png (768×1 px, 159 KB)

The proposed header should only be visible when the template translation area moves out of the viewport on top enough for the template names no longer to be visible (the header will be removed if the user scrolls back crossing that same point). The sticky header shown will include the template names and the action to close:

template-editing-scroll-detail.png (264×885 px, 56 KB)

Event Timeline

It's definitely better than having the X scrolled out of view, but for an eventual solution I'm still inclined to putting it at the bottom of the editor, and changing the X to a label such as "Done" or "Apply".