Page MenuHomePhabricator

Unify padding/position of labels/icons/indicators across widgets
Closed, ResolvedPublic

Description

As of v0.20.0 we have a plethora of approaches to position labels/icons/indicators across widgets.
That's bad from a design, code size, code modularity and extensibility perspective.
Let's unify those.

BeforeAfter
Different values horizontal176
Button
T161177-icon&indicator-positioning-Button-_before---OOjs-UI-Demos-2017-04-05.png (164×1 px, 15 KB)
T161177-icon&indicator-positioning-Button-_after---OOjs-UI-Demos-2017-04-05.png (164×1 px, 17 KB)
ButtonGroup/-Select
T161177-icon&indicator-positioning-ButtonSelect-_before---OOjs-UI-Demos-2017-04-05.png (289×469 px, 24 KB)
T161177-icon&indicator-positioning-ButtonSelect-_after---OOjs-UI-Demos-2017-04-05.png (289×469 px, 23 KB)
TextInput
T161177-icon&indicator-positioning-TextInput-_before---OOjs-UI-Demos-2017-04-05.png (430×1 px, 50 KB)
T161177-icon&indicator-positioning-TextInput-_after---OOjs-UI-Demos-2017-04-05.png (430×1 px, 50 KB)
T161177 icon&indicator positioning TextInput label _before - OOjs UI Demos 2017-03-31.png (502×1 px, 76 KB)
Dropdown
T161177 icon&indicator positioning Dropdown _before - OOjs UI Demos 2017-04-05.png (502×1 px, 60 KB)
T161177 icon&indicator positioning Dropdown _after - OOjs UI Demos 2017-04-05.png (486×1 px, 56 KB)
OutlineBookletDialog
T161177 icon&indicator positioning BookletDialog _before - OOjs UI Demos 2017-03-31.png (696×1 px, 85 KB)
T161177 icon&indicator positioning BookletDialog _after - OOjs UI Demos 2017-04-05.png (662×1 px, 45 KB)
Fullscreen
T161177-screencapture-doc-wikimedia-org-oojs-ui-master-demos.png (27×1 px, 2 MB)
T161177-screencapture-ooui-loc_after-oojs-ui-master-demos.png (27×1 px, 2 MB)

Orange (coral) signifies the icon/indicator canvas, lightskyblue the label box and aquamarine the padding

Before:

margin-right: 0.25em;
padding-left: 2.4em;
padding/margin-left/right: 1em
left: 1.5em - @size-icon / 2;
margin-left: 0.3em;
margin-left: @size-indicator / 2;
margin-right: -0.275em;
left: 0.2em;
padding-left: @size-icon + 2 * 0.3em;
padding-right: @size-indicator + 2 * 0.775em;
margin: 0 0.775em;
margin-left: 3em;
margin-right: 2em;
margin-left: 0.5em;
left: @size-icon + 1em;
right: @size-indicator + 1.55em - 0.4em + @size-icon + 0.5em;
padding-right: @size-indicator + 1.55em;

After:

@padding-horizontal-default
@padding-start-input-text-icon
@padding-start-input-text-icon-label
left: 0.275em (will be removed in follow-up)
margin-right: @size-indicator + 2 * @padding-horizontal-default;
right: @size-icon + @size-indicator + @padding-horizontal-default;

As a follow-up win, we have position of indicators/icons decoupled from labels and can generalize them across widgets in .oo-ui-widget.
Only point to take care of are widgets higher than one-line then.

Event Timeline

Change 344305 had a related patch set uploaded (by VolkerE):
[oojs/ui@master] MediaWiki theme: Unify padding across widgets and variablize

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

Change 344888 had a related patch set uploaded (by VolkerE):
[oojs/ui@master] MediaWiki theme: Unify padding on DecoratedOptionWidget and derivates

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

Change 346216 had a related patch set uploaded (by VolkerE):
[oojs/ui@master] MediaWiki theme: Unifying padding on ButtonElement

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

Volker_E triaged this task as Medium priority.Apr 4 2017, 3:38 AM

The following custom stylesheet on top as fundament for the screenshots:

.oo-ui-buttonElement-framed {
  background-color: #f8f9fa;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.oo-ui-dropdownWidget .oo-ui-dropdownWidget-handle {
  background-color: aquamarine;
  background-clip: content-box;
}

.oo-ui-iconElement-icon,
.oo-ui-indicatorElement-indicator {
    background-color: coral;
}
.oo-ui-buttonElement .oo-ui-labelElement-label {
    background-color: lightskyblue;
}
.oo-ui-textInputWidget.oo-ui-widget-enabled input, 
.oo-ui-textInputWidget.oo-ui-widget-enabled textarea,
.oo-ui-textInputWidget-labelPosition-after.oo-ui-indicatorElement > .oo-ui-labelElement-label,
.oo-ui-dropdownWidget .oo-ui-dropdownWidget-handle .oo-ui-labelElement-label {
    background-color: lightskyblue;
  	background-clip: content-box;
}

Change 344305 merged by jenkins-bot:
[oojs/ui@master] MediaWiki theme: Unify padding across widgets and variablize

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

Change 344888 merged by jenkins-bot:
[oojs/ui@master] MediaWiki theme: Unify padding on DecoratedOptionWidget and descendants

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

Change 346216 merged by jenkins-bot:
[oojs/ui@master] MediaWiki theme: Unify padding on ButtonElement

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

Volker_E edited projects, added OOUI (OOjs-UI-0.21.0); removed OOUI.
Volker_E edited projects, added OOUI; removed OOUI (OOjs-UI-0.21.0).

Tools/Toolbars are still in the works.

Follow-up of T111550 will happen here:

The chevron still looks a bit separate from the element to which it is meant to relate, perhaps also due to the fact that the element is a darker color now. Suggest we can move the chevron closer to the element, and/or make it ~2px smaller (see screenshots below).

Chevron shifted left 2px:

chevron shifted.png (1×1 px, 54 KB)

Chevron smaller and shifted left 2px:

chevron shifted smaller.png (1×1 px, 54 KB)

Thanks @RHo. I agree basically with both, the position unification that also helps with specific position of indicators is currently tackled in T161177. The indicator size we need to see in context of all widgets, where I'd want to understand if you see the size just an issue in toolbars or for the other widgets as well as proposed in the screens above/the patch?

hey @Volker_E – think size would be an issue for other widgets as well as toolbars. Higher up in this ticket's thread there is the example of chevrons to toggle accordions, where I would expect them to be larger since they are the key action element rather than a signal that something is a dropdown.

Note to myself: After turning to padding we have now mostly only one property to control width/height and distances, but variables number might get a bit overwhelming on first sight:

  • We could mix line-height with padding to address/decrease the top/bottom variety, on single-line widgets
  • There's also one occurrence where missing box-sizing results in one pixel difference and to extra vars.

Issue unsolved by current solution, but also by line-height approach above is different vertical position of label in widgets across browsers.

Change 380546 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] [WIP] WikimediaUI theme: Unify padding and distances on tools and menus

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

Change 382353 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] Generalize icon and indicator positioning & visibility

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

Change 382353 merged by jenkins-bot:
[oojs/ui@master] Generalize icon and indicator positioning & visibility

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

Volker_E moved this task from Reviewing to OOjs-UI-0.23.4 on the OOUI board.
Volker_E edited projects, added OOUI (OOjs-UI-0.23.4); removed OOUI.
Volker_E removed a project: Patch-For-Review.