VolkerE has uploaded a new change for review. (
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/mediawiki/common.less
M src/themes/mediawiki/layouts.less
4 files changed, 62 insertions(+), 21 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/07/350307/1
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 d3afde0..bca523f 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 line (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/mediawiki/common.less b/src/themes/mediawiki/common.less
index 83d4e58..ac3b05a 100644
--- a/src/themes/mediawiki/common.less
+++ b/src/themes/mediawiki/common.less
@@ -80,12 +80,13 @@
@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-indicator-only: 13 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `1.09375em`≈`14px`; `@size-indicator + 2 *
@border-width-default`
@start-framed-square-indicator-only: 9 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.703125em`≈`9px`
@start-frameless: -@start-frameless-icon;
-@start-frameless-icon: 3 / @oo-ui-font-size-browser / @oo-ui-font-size-default;
+@start-frameless-icon: 3 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.234375em`≈`3px`
@width-button-combo-widget: @min-width-button-combo-widget;
@@ -95,6 +96,8 @@
@margin-dialog-bar-button-framed: 6 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.46875em`≈`6px`
@margin-search: 12 / @oo-ui-font-size-browser / @oo-ui-font-size-default;
@margin-taboption: @margin-dialog-bar-button-framed;
+@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;
@border-default: @border-width-default solid @border-color-default;
@border-disabled: @border-width-default solid @border-color-disabled;
diff --git a/src/themes/mediawiki/layouts.less
b/src/themes/mediawiki/layouts.less
index 9f5ca11..ee23aa3 100644
--- a/src/themes/mediawiki/layouts.less
+++ b/src/themes/mediawiki/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;
}
}
@@ -168,8 +189,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 line (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: newchange
Gerrit-Change-Id: I9da8b446d7d5dcaa3bd849b58e03247fe77ee889
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: VolkerE <volke...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
