Page MenuHomePhabricator

Adjust dialog shown when leaving an unsaved translation to avoid action buttons to break the layout
Closed, ResolvedPublic

Description

After the adjustments to add clarity to the dialog that is shown when trying to leave an unsaved translation (T336849), the actions are more explicit but also result in buttons with longer labels. Depending on the device and language these may fit well or overlap as shown in examples below where the UI is in English and Greek using a 375px wide screen:

English: action labels fit in a single rowGreek: action labels overlap
bn.m.wikipedia.org_w_index.php_title=Special_ContentTranslation&from=en&to=bn&page=Luxor&sx=true(iPhone SE) (1).png (667×375 px, 108 KB)
el.m.wikipedia.org_w_index.php_title=Special_ContentTranslation&from=en&to=el&page=Kiel%20Canal&sx=true(iPhone SE).png (667×375 px, 111 KB)

This ticket proposes to make the row of buttons to wrap when it i needed. As a result the example in english above will remain as it is, and the Greek example will have the second action moved to a new line, being placed below the first action (with an 8px vertical separation).

This is aligned with the Design System guidelines for dialogs:

Screenshot 2023-07-06 at 12.29.12 2.png (439×847 px, 40 KB)

Event Timeline

Pginer-WMF triaged this task as Medium priority.Jul 6 2023, 10:30 AM
Pginer-WMF created this task.
Pginer-WMF moved this task from Backlog to Mobile editor on the SectionTranslation board.
Wangombe changed the task status from Open to In Progress.Jul 10 2023, 7:16 AM
Wangombe claimed this task.

Change 946520 had a related patch set uploaded (by Wangombe; author: Wangombe):

[mediawiki/extensions/ContentTranslation@master] SX: Wrap buttons on SXConfirmBackNavigationDialog

https://gerrit.wikimedia.org/r/946520

Change 946520 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] SX: Wrap buttons on SXConfirmBackNavigationDialog

https://gerrit.wikimedia.org/r/946520

Change 946931 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] CX3 Build 0.2.0+20230808

https://gerrit.wikimedia.org/r/946931

Results when the view is in adjusted responsively:

image.png (895×382 px, 194 KB)
image.png (973×541 px, 235 KB)

Change 946931 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] CX3 Build 0.2.0+20230808

https://gerrit.wikimedia.org/r/946931

The issue has been fixed in production.

Screencast from greek (el) production wiki, where the fix is deployed:

image.png (1×796 px, 217 KB)

ngkountas changed the task status from In Progress to Open.Aug 28 2023, 2:52 PM