jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/350307 )
Change subject: themes: Field*Layout help position perfectly aligned
......................................................................
themes: Field*Layout help position perfectly aligned
Foremost MediaWiki theme, making FieldLayout's and FieldSetLayout's
help PopupButtonWidget position perfectly aligned with label baseline
and vertically with widgets.
Also resetting Frameless ButtonWidget's sizes specifically for help
PopupButtonWidget.
Bug: T163094
Change-Id: I9da8b446d7d5dcaa3bd849b58e03247fe77ee889
---
M src/styles/layouts/FieldLayout.less
M src/themes/apex/layouts.less
M src/themes/wikimediaui/common.less
M src/themes/wikimediaui/layouts.less
4 files changed, 62 insertions(+), 20 deletions(-)
Approvals:
Bartosz Dziewoński: Looks good to me, approved
jenkins-bot: Verified
diff --git a/src/styles/layouts/FieldLayout.less
b/src/styles/layouts/FieldLayout.less
index 5498835..0c30e5b 100644
--- a/src/styles/layouts/FieldLayout.less
+++ b/src/styles/layouts/FieldLayout.less
@@ -60,14 +60,5 @@
}
}
- &.oo-ui-fieldLayout-align-top,
- &.oo-ui-fieldLayout-align-inline {
- .oo-ui-fieldLayout-help {
- // HACK: The height of this ButtonWidget extends below
the header line (with align: top),
- // causing the field widget to be narrower than it
should be. 0.3em chosen experimentally.
- margin-top: -0.3em;
- }
- }
-
.theme-oo-ui-fieldLayout();
}
diff --git a/src/themes/apex/layouts.less b/src/themes/apex/layouts.less
index 80d6963..d8033de 100644
--- a/src/themes/apex/layouts.less
+++ b/src/themes/apex/layouts.less
@@ -78,6 +78,15 @@
}
}
+ &.oo-ui-fieldLayout-align-top,
+ &.oo-ui-fieldLayout-align-inline {
+ .oo-ui-fieldLayout-help {
+ // HACK: This PopupButtonWidget's `height` extends
below the header's baseline (with align: top),
+ // causing the field widget to be narrower than it
should be. 0.3em chosen experimentally.
+ margin-top: -0.3em;
+ }
+ }
+
> .oo-ui-popupButtonWidget {
.oo-ui-inline-spacing( 0 );
margin-top: 0.25em;
diff --git a/src/themes/wikimediaui/common.less
b/src/themes/wikimediaui/common.less
index fd01d55..6e700e7 100644
--- a/src/themes/wikimediaui/common.less
+++ b/src/themes/wikimediaui/common.less
@@ -82,6 +82,7 @@
@size-indicator: 12 / @oo-ui-font-size-browser / @oo-ui-font-size-default; //
equals `0.9375em`≈`12px`
@size-toggleswitch-grip-min: 16px;
@size-dialog-bar-top: 44 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `3.4375em`≈`44px`
+@size-fieldlayout-help-icon: 22 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
@start-framed-icon-only: 7 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.547em`≈`7px`; HACK: We have to break
with `@padding-start-input-text-icon` to perfectly center in
`@min-width-button-default`
@start-framed-icon-only-numberinput: 6 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.46875em`≈`6px`
@@ -102,6 +103,8 @@
@margin-button-close: 4 / @oo-ui-font-size-browser / @oo-ui-font-size-default;
@margin-top-tagitem: 4 / @oo-ui-font-size-browser / @oo-ui-font-size-default;
@margin-top-tagmultiselect-input: 6 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
+@margin-top-fieldlayout-help: -( 6 / @oo-ui-font-size-browser /
@oo-ui-font-size-default );
+@margin-top-fieldsetlayout-help: -( 6 / @oo-ui-font-size-browser /
@oo-ui-font-size-default ) / 2;
@margin-bottom-fieldset-header: 8 / @oo-ui-font-size-browser / (
@oo-ui-font-size-default * @font-size-fieldset-header );
@border-default: @border-width-default solid @border-color-default;
@@ -145,6 +148,7 @@
@padding-taboption: @padding-top-default @padding-horizontal-taboption
@padding-bottom-default;
@padding-horizontal-default: 12 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.9375em`≈`12px`
@padding-horizontal-input-text: 8 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
+@padding-horizontal-frameless: 4 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
@padding-horizontal-taboption: 13 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.9375em`≈`13px`;
@padding-horizontal-default = @border-width-default
@padding-horizontal-tagitem: 4 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
@padding-vertical-label: 4 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
diff --git a/src/themes/wikimediaui/layouts.less
b/src/themes/wikimediaui/layouts.less
index 86eb027..83b4f2f 100644
--- a/src/themes/wikimediaui/layouts.less
+++ b/src/themes/wikimediaui/layouts.less
@@ -53,7 +53,7 @@
&.oo-ui-labelElement {
> .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
- padding-bottom: 0.3125em; // equals `4px` at base
`font-size: 12.8px`
+ padding-bottom: @padding-vertical-label;
> .oo-ui-labelElement-label {
line-height: @line-height-form-element;
@@ -74,14 +74,14 @@
> .oo-ui-labelElement-label {
display: block;
- padding-top: 0.3125em;
+ padding-top:
@padding-vertical-label;
}
}
> .oo-ui-fieldLayout-help {
// Override the default
margin-right: 0;
- // Move into the space of
'margin-right' of header
+ // Move into the space of
`margin-right` of header
margin-left: -@size-icon;
}
@@ -92,18 +92,35 @@
}
&.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body >
.oo-ui-fieldLayout-header {
- padding: 0.3125em 0.46875em; // equals `4px 6px` at
base `font-size: 12.8px`
- // `6px` is not aligned to M101 design guideline, as
checkbox and radios sizes aren't either
- padding-right: 0;
+ padding: 0.3125em 0 0.3125em 0.46875em; // equals `4px
6px` at base `font-size: 12.8px`
+ // `6px` is not aligned to M101 design guideline, as
checkbox and radio sizes aren't either
}
}
- &-disabled > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header >
.oo-ui-labelElement-label {
- color: @color-disabled;
+ .oo-ui-fieldLayout-help { // Assuming that this is a PopupButtonWidget
+ .oo-ui-inline-spacing( 0 );
+
+ .oo-ui-buttonElement-button {
+ padding-top: @size-fieldlayout-help-icon;
+ padding-left: @size-fieldlayout-help-icon;
+
+ .oo-ui-iconElement-icon {
+ left: 0; // Reset Frameless ButtonWidget
+ }
+ }
}
- > .oo-ui-popupButtonWidget {
- .oo-ui-inline-spacing( 0 );
+ &.oo-ui-fieldLayout-align-top,
+ &.oo-ui-fieldLayout-align-inline {
+ .oo-ui-fieldLayout-help {
+ // HACK: This PopupButtonWidget's height extends below
the header line (with align: top),
+ // causing the field widget to be narrower than it
should be.
+ margin-top: @margin-top-fieldlayout-help;
+
+ &:last-child {
+ margin-right: -@padding-horizontal-frameless;
+ }
+ }
}
&-messages {
@@ -127,6 +144,10 @@
line-height: @line-height-message;
vertical-align: middle;
}
+ }
+
+ &-disabled > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header >
.oo-ui-labelElement-label {
+ color: @color-disabled;
}
}
@@ -164,8 +185,25 @@
left: 0;
}
- > .oo-ui-fieldsetLayout-header > .oo-ui-popupButtonWidget {
+ .oo-ui-fieldsetLayout-help { // Assuming that this is a
PopupButtonWidget
.oo-ui-inline-spacing( 0 );
+ // HACK: This PopupButtonWidget's `height` extends below the
header's baseline (with align: top),
+ // causing the field widget to be narrower than it should be.
+ margin-top: @margin-top-fieldsetlayout-help;
+ margin-right: -@padding-horizontal-frameless;
+
+ &:last-child {
+ margin-right: -@padding-horizontal-frameless;
+ }
+
+ .oo-ui-buttonElement-button {
+ padding-top: @size-fieldlayout-help-icon;
+ padding-left: @size-fieldlayout-help-icon;
+
+ .oo-ui-iconElement-icon {
+ left: 0; // reset Frameless ButtonWidget
+ }
+ }
}
}
--
To view, visit https://gerrit.wikimedia.org/r/350307
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I9da8b446d7d5dcaa3bd849b58e03247fe77ee889
Gerrit-PatchSet: 4
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: VolkerE <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Esanders <[email protected]>
Gerrit-Reviewer: Jforrester <[email protected]>
Gerrit-Reviewer: VolkerE <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
