Page MenuHomePhabricator

Button in language variant node's context menu disappears when translated text is long
Closed, ResolvedPublic1 Estimated Story Points

Assigned To
Authored By
Srdjan
Mar 3 2018, 1:38 PM
Referenced Files
F27122127: image.png
Nov 8 2018, 7:06 PM
F27122186: image.png
Nov 8 2018, 7:06 PM
F27122175: image.png
Nov 8 2018, 7:06 PM
F27122149: image.png
Nov 8 2018, 7:06 PM
F27117763: image.png
Nov 8 2018, 4:13 PM
F27117699: screenshot_20181108_165620.png
Nov 8 2018, 4:05 PM
F27117698: screenshot_20181108_165631.png
Nov 8 2018, 4:05 PM
F27115808: image.png
Nov 8 2018, 12:17 PM

Description

Since the text of visualeditor-mwlanguagevariantcontextitem-title-disabled is too long, the Edit button virtually disappears. I've tried shortening the text so that it's still understandable, but the button still gets cut off. This also appears to be an issue with visualeditor-mwlanguagevariantinspector-title-disabled.

Screenshots from https://sr.wikipedia.org/wiki/HomoloGene?veaction=edit:

Screen Shot 2018-03-03 at 08.14.17.png (906×2 px, 141 KB)
Screen Shot 2018-03-03 at 08.16.49.png (906×2 px, 142 KB)
Screen Shot 2018-03-03 at 08.16.43.png (935×1 px, 147 KB)
Current text; Edit button completely cut offShortened text; button partially cut offTitle of the window when you click on Edit

Similar issue affects the math node's context menu. Screenshot from https://sr.wikipedia.org/wiki/Papirus_1?veaction=edit:

ve-math-does-not-fit.png (103×819 px, 12 KB)


The label should be able to wrap over multiple lines if needed. One solution should work for both of these menus.

Event Timeline

Aklapper renamed this task from [[MediaWiki:Visualeditor-mwlanguagevariantcontextitem-title-disabled/sr-ec]] i18n issue to [[Visualeditor-mwlanguagevariantcontextitem-title-disabled]] "Edit" button disappears when translated text is long.Mar 3 2018, 3:33 PM
In T188823#4021155, @Zoranzoki21 wrote:

No, that's something completely different.

Deskana set the point value for this task to 1.

The problem is, what do we do here? Let the dialogue expand to be wide enough for the text? This could cause the dialogue to be significantly too big in some cases. If we cut the text off using ellipses, then the message might not be understandable. Internationalisation is hard. :-(

matmarex renamed this task from [[Visualeditor-mwlanguagevariantcontextitem-title-disabled]] "Edit" button disappears when translated text is long to Button in language variant node's context menu disappears when translated text is long.Oct 23 2018, 3:33 AM
matmarex updated the task description. (Show Details)
matmarex updated the task description. (Show Details)

Change 472171 had a related patch set uploaded (by Takidelfin; owner: Takidelfin):
[VisualEditor/VisualEditor@master] LinearContextItem: Add word wrappinng in Context menu

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

Change 472224 had a related patch set uploaded (by Takidelfin; owner: Takidelfin):
[VisualEditor/VisualEditor@master] LinearContextItem: Removed absolute positioning and added display: flex

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

Change 472224 abandoned by Takidelfin:
LinearContextItem: Removed absolute positioning and added display: flex

Reason:
commit should be merged with previous

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

Change 472171 abandoned by Takidelfin:
LinearContextItem: Add word wrappinng in Context menu

Reason:
Commit should be merged

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

Change 472229 had a related patch set uploaded (by Takidelfin; owner: Takidelfin):
[VisualEditor/VisualEditor@master] LinearContextItem: Added text wrapping when it is too long

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

Since both Math and language variants are kind of a pain to set up, and the issue only occurs in specific languages, I was instead testing this by changing the label of the link inspector to something longer (I edited http://localhost/wiki/MediaWiki:Visualeditor-linkinspector-title on my wiki to "Link (and this is a silly long label that probably requires wrapping)"). The issue occurs in all context menus if the label is long enough.

As it turns out, a similar problem affects the mobile VisualEditor (available when you install the MobileFrontend extension, then click "Mobile view" in the page footer). Ideally we would fix those styles too. You can simulate different screen sizes in the Chrome debugger using the "device toolbar" like this (Firefox has a similar feature called "Responsive Design Mode"):

image.png (980×1 px, 183 KB)

Screenshots:

Before the patch:

Long labelShort label(notes)
Desktop
image.png (240×422 px, 18 KB)
image.png (196×431 px, 22 KB)
For context menus with long labels, remove/edit buttons are not accessible.
Mobile
image.png (640×360 px, 132 KB)
image.png (640×360 px, 120 KB)
For context menus with long labels, remove/edit buttons are not accessible. Also, the toolbar gets all messed up for some reason…

After:

Long labelShort label(notes)
Desktop
image.png (240×422 px, 18 KB)
image.png (196×431 px, 22 KB)
The issue is fixed! But, the icon and label is now closer to the top edge of the context menu. This is especially noticeable for normal short labels. I think it looks worse than before, we should try to make it look the same. (It seems to be caused by the display: flex?)
Mobile
image.png (640×360 px, 96 KB)
image.png (640×360 px, 120 KB)
Well uhh, this is bad :D , but I guess you can tap the buttons at least… Because the space on mobile is limited, I think in this case we should cut off the text with text-overflow: ellipsis rather than wrap it. Also, for normal short labels, the icon is now in the wrong place (not aligned with the label).
vertical-align:top;vertical-align: middle
screenshot_20181108_165620.png (155×450 px, 14 KB)
screenshot_20181108_165631.png (158×429 px, 14 KB)

Which version looks better? @matmarex
(yes, I know it should be internationalization)

I think both look okay, but apparently we usually align long labels to the top, see e.g. checkboxes with long labels on Special:Preferences, so we should probably go with option 1.

image.png (237×747 px, 16 KB)

Final version of the patch:

Long labelShort label
Desktop
image.png (224×428 px, 18 KB)
image.png (211×422 px, 25 KB)
Mobile
image.png (640×360 px, 132 KB)
image.png (640×360 px, 120 KB)

Change 472229 merged by jenkins-bot:
[VisualEditor/VisualEditor@master] LinearContextItem: Added text wrapping when it is too long

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

matmarex assigned this task to takidelfin.

Change 473267 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (f391832c5)

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

Change 473267 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (f391832c5)

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