Page MenuHomePhabricator
Create Task
Maniphest T188823

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

Assigned To
takidelfin
Authored By
Srdjan
Mar 3 2018, 1:38 PM
Tags
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
View All 20 Files
Subscribers
Aklapper
Deskana
Esanders
gerritbot
Kizule
matmarex
• Petar.petkovic
View All 9 Subscribers

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.

Details

ProjectBranchLines +/-Subject
mediawiki/extensions/VisualEditormaster+1 -1Update VE core submodule to master (f391832c5)
VisualEditor/VisualEditormaster+15 -0LinearContextItem: Added text wrapping when it is too long
VisualEditor/VisualEditormaster+4 -0LinearContextItem: Add word wrappinng in Context menu
VisualEditor/VisualEditormaster+2 -2LinearContextItem: Removed absolute positioning and added display: flex
Customize query in gerrit

Related Objects

Event Timeline

Srdjan created this task.Mar 3 2018, 1:38 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 3 2018, 1:38 PM
Liuxinyu970226 edited projects, added VisualEditor; removed MediaWiki-General.Mar 3 2018, 1:46 PM
Liuxinyu970226 added a subscriber: Liuxinyu970226.Mar 3 2018, 1:48 PM
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
Kizule added a subscriber: Kizule.Mar 3 2018, 8:10 PM
Kizule added a comment.Mar 3 2018, 8:15 PM

T184379?

Srdjan updated the task description. (Show Details)Mar 3 2018, 8:57 PM
Deskana added a subscriber: Deskana.Mar 6 2018, 7:57 PM
In T188823#4021155, @Zoranzoki21 wrote:

T184379?

No, that's something completely different.

Deskana triaged this task as Low priority.Mar 6 2018, 7:58 PM
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. :-(

Deskana moved this task from To Triage to Freezer on the VisualEditor board.Mar 6 2018, 7:59 PM
Amire80 moved this task from Untriaged to Wrongly sized visual elements on the I18n board.Mar 18 2018, 1:33 PM
matmarex mentioned this in T205830: Buttons don't fit in math formula editing popup.Oct 23 2018, 3:29 AM
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 merged a task: T205830: Buttons don't fit in math formula editing popup.
matmarex updated the task description. (Show Details)
matmarex added subscribers: • Petar.petkovic, matmarex, Esanders.
matmarex added a project: Google-Code-in-2018.Oct 23 2018, 3:41 AM

I would like to mentor this task in Google-Code-in-2018.

matmarex updated the task description. (Show Details)Oct 23 2018, 3:43 AM
Aklapper moved this task from Proposed tasks to Imported in GCI Site on the Google-Code-in-2018 board.Oct 23 2018, 1:34 PM

https://codein.withgoogle.com/tasks/4959060886552576/

gerritbot added a subscriber: gerritbot.Nov 7 2018, 3:37 PM

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

gerritbot added a project: Patch-For-Review.Nov 7 2018, 3:37 PM
gerritbot added a comment.Nov 7 2018, 6:17 PM

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

gerritbot added a comment.Nov 7 2018, 6:49 PM

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

gerritbot added a comment.Nov 7 2018, 6:50 PM

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

Reason:
Commit should be merged

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

gerritbot added a comment.Nov 7 2018, 6:50 PM

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

matmarex added a comment.Nov 8 2018, 12:17 PM

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).
takidelfin added a subscriber: takidelfin.Nov 8 2018, 4:05 PM
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)

matmarex added a comment.Nov 8 2018, 4:13 PM

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)

matmarex added a comment.Nov 8 2018, 7:06 PM

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)
gerritbot added a comment.Nov 8 2018, 8:45 PM

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 closed this task as Resolved.Nov 8 2018, 9:06 PM
matmarex assigned this task to takidelfin.
Restricted Application added a project: User-Ryasmeen. · View Herald TranscriptNov 8 2018, 9:06 PM
• Petar.petkovic removed a project: Patch-For-Review.Nov 8 2018, 11:58 PM
Liuxinyu970226 removed a subscriber: Liuxinyu970226.Nov 11 2018, 6:46 AM
gerritbot added a comment.Nov 13 2018, 7:13 PM

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

gerritbot added a project: Patch-For-Review.Nov 13 2018, 7:13 PM
gerritbot added a comment.Nov 13 2018, 11:08 PM

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

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

• Petar.petkovic removed a project: Patch-For-Review.Nov 13 2018, 11:12 PM
matmarex mentioned this in T192049: Tools column responsiveness with VE Context tools minimum width .Apr 9 2019, 7:10 PM
Content licensed under Creative Commons Attribution-ShareAlike 3.0 (CC-BY-SA) unless otherwise noted; code licensed under GNU General Public License (GPL) or other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL