Page MenuHomePhabricator

Multiline TextInputWidget with indicator/icon/label looks terrible
Closed, ResolvedPublic

Assigned To
Authored By
matmarex
Sep 28 2015, 10:24 PM
Referenced Files
F2912442: pasted_file
Nov 3 2015, 10:48 PM
F2912447: pasted_file
Nov 3 2015, 10:48 PM
F2912444: pasted_file
Nov 3 2015, 10:48 PM
F2883220: pasted_file
Oct 27 2015, 10:10 PM
F2724361: pasted_file
Oct 15 2015, 6:35 PM
F2643848: pasted_file
Sep 28 2015, 10:24 PM
F2643851: pasted_file
Sep 28 2015, 10:24 PM
F2643854: pasted_file
Sep 28 2015, 10:24 PM

Description

Multiline TextInputWidget with indicator looks terrible.

pasted_file (60×456 px, 1 KB)

Okay…

pasted_file (88×455 px, 2 KB)

Hmm, this is getting kinda meh…

pasted_file (183×455 px, 6 KB)

OH GOD WHAT IS THIS MY EYES

Event Timeline

matmarex raised the priority of this task from to Needs Triage.
matmarex updated the task description. (Show Details)
matmarex added a project: OOUI.
matmarex subscribed.
Jdforrester-WMF set Security to None.

@matmarex Wow, that's not an easy one. As long as we don't have an ability to know, when a scrollbar is visible and add for example another CSS class to change the oo-ui-indicatorElement-indicator correspondingly, this will always be sore on the eyes.

Where is this actually used?

In the second step of the new file upload dialog in VisualEditor (Insert → Media → Upload).

pasted_file (571×521 px, 25 KB)

Since we control the height manually, it should be possible to add some CSS class in OO.ui.TextInputWidget.prototype.adjustSize if the scrollbar is being displayed.

Probably not as common, but icons are also vertically centred.

@Esanders and do you agree on that current layout having it vertically centered? I think in order to make it clear that it's an obligatory field it should be vertically-aligned on top, aligning with first line.

Esanders renamed this task from Multiline TextInputWidget with indicator looks terrible to Multiline TextInputWidget with indicator/icon/label looks terrible.Oct 27 2015, 10:09 PM

Yeah - align top sounds good. There is also an scroll overlap issue with labels:

pasted_file (208×658 px, 9 KB)

Change 249381 had a related patch set uploaded (by Esanders):
TextInputWidget: Ensure icon indicator label are top aligned in multiline mode

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

Change 249395 had a related patch set uploaded (by Esanders):
TextInputWidget: Account for scroll bar width when positioning indicators/labels

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

Change 249381 merged by jenkins-bot:
TextInputWidget: Ensure icon indicator label are top aligned in multiline mode

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

Change 249395 merged by jenkins-bot:
TextInputWidget: Account for scroll bar width when positioning indicators/labels

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