VolkerE has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/344888 )
Change subject: MediaWiki theme: Unify `padding` on DecoratedOptionWidget and
derivates
......................................................................
MediaWiki theme: Unify `padding` on DecoratedOptionWidget and derivates
Unifying `padding` & positioning of labels/icons/indicators across
DecoratedOptionWidget and derived DraggableElement, MenuOption-,
MenuSectionOption & OutlineOptionWidget.
Also
- fixing styling of MenuSectionOptionWidget by showing correct cursor
(selector specificity issue) and harmonizing with MenuOptionWidget
styles
- removing OutlineOptionWidget's `font-size` hack by better, more
specific solution
- removing unnecessary specific selector, as DraggableElement carries
either `.oo-ui-draggableElement` or `.oo-ui-draggableElement-handle`
on every occurrence.
Bug: T92452
Bug: T161177
Change-Id: I2223c6dc3423c13219e3cf6c8ea712c48d82e117
---
M src/styles/elements/DraggableElement.less
M src/styles/widgets/MenuSectionOptionWidget.less
M src/themes/mediawiki/common.less
M src/themes/mediawiki/widgets.less
4 files changed, 35 insertions(+), 20 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/88/344888/1
diff --git a/src/styles/elements/DraggableElement.less
b/src/styles/elements/DraggableElement.less
index f363f56..9fda2a4 100644
--- a/src/styles/elements/DraggableElement.less
+++ b/src/styles/elements/DraggableElement.less
@@ -1,7 +1,6 @@
@import '../common';
.oo-ui-draggableElement {
- &-handle,
// HACK: Widgets will often specify a cursor with higher specificity,
so override those here as
// they are a common use case of this mixin.
&-handle.oo-ui-widget {
diff --git a/src/styles/widgets/MenuSectionOptionWidget.less
b/src/styles/widgets/MenuSectionOptionWidget.less
index f670f7f..f9c89b2 100644
--- a/src/styles/widgets/MenuSectionOptionWidget.less
+++ b/src/styles/widgets/MenuSectionOptionWidget.less
@@ -1,8 +1,9 @@
@import '../common';
.oo-ui-menuSectionOptionWidget {
- cursor: default;
+ &.oo-ui-widget-enabled {
+ cursor: default;
+ }
.theme-oo-ui-menuSectionOptionWidget();
}
-
diff --git a/src/themes/mediawiki/common.less b/src/themes/mediawiki/common.less
index 97c05d7..d3ba9b5 100644
--- a/src/themes/mediawiki/common.less
+++ b/src/themes/mediawiki/common.less
@@ -112,11 +112,15 @@
@padding-default: @padding-top-default @padding-horizontal-default
@padding-bottom-default;
@padding-input-text: @padding-top-default @padding-horizontal-input-text
@padding-bottom-default;
+@padding-menu: @padding-top-menu @padding-horizontal-default
@padding-bottom-menu;
+@padding-menu-large: ( @padding-top-menu * 1.5 ) @padding-horizontal-default (
@padding-bottom-menu * 1.5 );
@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-vertical-label: 4 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.3125em`≈`4px`
@padding-top-default: 8 / @oo-ui-font-size-browser / @oo-ui-font-size-default;
// equals `0.625em`≈`8px`
+@padding-top-menu: 9 / @oo-ui-font-size-browser / @oo-ui-font-size-default;
@padding-bottom-default: 7 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.547em`≈`7px`
+@padding-bottom-menu: 8 / @oo-ui-font-size-browser / @oo-ui-font-size-default;
@padding-start-input-text-icon: 6 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // As long as we have whitespace in icon canvas, we
need reduced `padding-left`.
@padding-start-input-text-icon-label: 32 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index dbf4845..e5ecfff 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -488,7 +488,8 @@
}
.theme-oo-ui-decoratedOptionWidget () {
- padding: 0.5em 2em 0.5em 3em;
+ padding: @padding-menu;
+ line-height: @line-height-reset;
&.oo-ui-iconElement .oo-ui-iconElement-icon,
&.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
@@ -496,12 +497,20 @@
height: 100%;
}
- &.oo-ui-iconElement .oo-ui-iconElement-icon {
- left: 0.5em;
+ &.oo-ui-iconElement {
+ padding-left: @padding-start-input-text-icon-label;
+
+ .oo-ui-iconElement-icon {
+ left: @padding-start-input-text-icon;
+ }
+ }
+
+ .oo-ui-labelElement-label {
+ line-height: @line-height-widget-singleline;
}
&.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
- right: 0.5em;
+ right: @padding-start-input-text-icon;
}
&.oo-ui-widget-disabled {
@@ -510,6 +519,10 @@
opacity: @opacity-disabled;
}
}
+}
+
+.theme-oo-ui-draggableElement{
+ padding: @padding-menu-large;
}
.theme-oo-ui-dropdownWidget () {
@@ -723,7 +736,6 @@
.theme-oo-ui-labelWidget () {}
.theme-oo-ui-menuOptionWidget () {
- padding: 0.5em 1em;
.oo-ui-transition(
background-color @transition-ease-quick,
color @transition-ease-quick
@@ -748,11 +760,17 @@
color: @color-progressive;
}
}
+
+ // Reset from DecoratedOptionWidget. FIXME: Remove after T87835 is fixed
+ &.oo-ui-iconElement {
+ padding-left: @padding-horizontal-default;
+ }
}
.theme-oo-ui-menuSectionOptionWidget () {
- color: @color-subtle;
- padding: 0.33em 0.75em;
+ color: @color-default;
+ padding: @padding-top-menu @padding-horizontal-default
@padding-vertical-label;
+ font-weight: bold;
}
.theme-oo-ui-menuSelectWidget () {
@@ -842,8 +860,7 @@
}
.theme-oo-ui-outlineOptionWidget () {
- font-size: 1.1em;
- padding: 0.75em;
+ padding: @padding-menu-large;
.oo-ui-transition(
background-color @transition-ease-quick,
color @transition-ease-quick
@@ -864,12 +881,6 @@
color: @color-progressive;
}
- .oo-ui-iconElement-icon {
- // Undoes the parent change, because the theme's icons expect
to be
- // 24px, and don't scale incredibly well.
- font-size: 90.90909%;
- }
-
&.oo-ui-indicatorElement {
.oo-ui-labelElement-label {
padding-right: 1.5em;
@@ -880,8 +891,8 @@
}
}
- &-level-0.oo-ui-iconElement {
- padding-left: 2.571em; // equals ≈`36px` at base `font-size:
14px`, see `outlineOptionWidget` rule above
+ .oo-ui-labelElement-label {
+ font-size: 1.1em;
}
&-level-1 {
--
To view, visit https://gerrit.wikimedia.org/r/344888
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I2223c6dc3423c13219e3cf6c8ea712c48d82e117
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: VolkerE <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
