790794 - Polish toggle L10n

Status: RESOLVED FIXED

(support.mozilla.org :: Knowledge Base Software, task, P2)

Description

[Kadir Topal [:atopal]]

As a localizer using the toogle function I would like to have a better  user experience, when using toggle l10n (not hide other UI elements,  better positioning).

    https://sumo.etherpad.mozilla.org/113

Comment 1

[Bram Pitoyo [:bram]]

Attachment: nothing selected

This is the state where no option in the interface is selected.

Comment 2

[Bram Pitoyo [:bram]]

Attachment: toggle diff selected

When localizer clicks on “Toggle diff”, the table is expanded to 100% of the page width.

Firefox’s maximize behavior on every platform is to expand to fill the absolute maximum space on the screen, so localizer can simply click on maximize to widen the entire table.

Even hitting “Toggle Diff” when using a smaller screen will still create more space, because the table will expand beyond the surrounding white box.

Comment 3

[Bram Pitoyo [:bram]]

Attachment: toggle l10n selected

This interface would display whenever user does either of these things:
* Click on “toggle l10n”
* Click on “toggle diff”, followed by “toggle l10n”

The idea is to divide the 100% width into three areas. Each area is 33% of the page wide.

Note how the text box does not have a scrollbar. Rather, it displays the full height of the text. This is done so that there is nothing but one scrolling behavior. When user scroll anywhere in this area, every part of the interface scrolls down: not just the table, or just the text box.

Comment 4

[Kadir Topal [:atopal]]

I love those. Thanks, Bram! We might have to look at this again once it's implemented though. When the article is much larger than the diff it might not be possible to see diff and article right next to each other. In that case the scrolling box might be the lesser evil.

Comment 5

[Ricky Rosario [:rrosario, :r1cky]]

I am hoping we end up with a better diff UI, so I will hold off on this bug until then.

Comment 6

[Ricky Rosario [:rrosario, :r1cky]]

With the new diff, we should rethink this. The new diff is one column so there are more possibilities.

Comment 7

[Ricky Rosario [:rrosario, :r1cky]]

I ended up accidentally doing this with bug 790789. The 2pts were enough for both so leaving this one as a 0pt bug.

Comment 8

[Ricky Rosario [:rrosario, :r1cky]]

Landed and deployed:

https://github.com/mozilla/kitsune/commit/d0d6c7dd8446c0142ba3484592bef086ac6202ee

Instead of moving the editor up next to the diff, we add a toggle to the left of the editor to switch between content and a diff.

Comment 9

[Kadir Topal [:atopal]]

I just updated an article using this and it's awesome. Thanks for spending some time thinking about a better UX, it really payed off!