jenkins-bot has submitted this change and it was merged.
Change subject: Correct the left positioning of a popup wrapper
......................................................................
Correct the left positioning of a popup wrapper
Popup wrappers should be left-aligned to the target, and the inner
anchor and popup should be positioned relative to that. This way the
anchor can be set up to point to the correct position in a
theme-independent way.
Change-Id: I5cb2bb8f2191994d33fce3e20b26774ef6d606f3
---
M src/themes/apex/widgets.less
M src/themes/mediawiki/widgets.less
2 files changed, 30 insertions(+), 22 deletions(-)
Approvals:
Catrope: Looks good to me, approved
jenkins-bot: Verified
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index 6a7ebed..32ea8eb 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -59,19 +59,23 @@
.theme-oo-ui-actionWidget () {}
.theme-oo-ui-popupButtonWidget () {
- > .oo-ui-popupWidget {
- margin-left: -1em;
- }
+ &.oo-ui-buttonElement-frameless > .oo-ui-popupWidget {
+ // Compensate for icon being inset
+ left: 1em;
- &.oo-ui-buttonElement-frameless {
- .oo-ui-popupWidget {
- left: 0.5em;
+ > .oo-ui-popupWidget-popup {
+ // Provide space between left edge and anchor
+ left: -1em;
}
}
- &.oo-ui-buttonElement-framed {
- .oo-ui-popupWidget {
- left: 1em;
+ &.oo-ui-buttonElement-framed > .oo-ui-popupWidget {
+ // Compensate for icon being inset
+ left: 1.25em;
+
+ > .oo-ui-popupWidget-popup {
+ // Provide space between left edge and anchor
+ left: -1.25em;
}
}
}
@@ -446,14 +450,14 @@
.oo-ui-popupWidget-anchor:before {
bottom: -8px;
- left: 11px;
+ left: -7px;
border-bottom-color: #aaa;
border-width: 7px;
}
.oo-ui-popupWidget-anchor:after {
bottom: -8px;
- left: 12px;
+ left: -6px;
border-bottom-color: #fff;
border-width: 6px;
}
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index c3ecac9..611f1f0 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -38,19 +38,23 @@
.theme-oo-ui-actionWidget () {}
.theme-oo-ui-popupButtonWidget () {
- > .oo-ui-popupWidget {
- margin-left: -1em;
- }
+ &.oo-ui-buttonElement-frameless > .oo-ui-popupWidget {
+ // Compensate for icon being inset
+ left: 1em;
- &.oo-ui-buttonElement-frameless {
- .oo-ui-popupWidget {
- left: 0.125em;
+ > .oo-ui-popupWidget-popup {
+ // Provide space between left edge and anchor
+ left: -1em;
}
}
- &.oo-ui-buttonElement-framed {
- .oo-ui-popupWidget {
- left: 1em;
+ &.oo-ui-buttonElement-framed > .oo-ui-popupWidget {
+ // Compensate for icon being inset
+ left: 1.75em;
+
+ > .oo-ui-popupWidget-popup {
+ // Provide space between left edge and anchor
+ left: -1.75em;
}
}
}
@@ -362,14 +366,14 @@
.oo-ui-popupWidget-anchor:before {
bottom: -8px;
- left: 11px;
+ left: -13px;
border-bottom-color: #888;
border-width: 13px;
}
.oo-ui-popupWidget-anchor:after {
bottom: -8px;
- left: 12px;
+ left: -12px;
border-bottom-color: #fff;
border-width: 12px;
}
--
To view, visit https://gerrit.wikimedia.org/r/163893
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I5cb2bb8f2191994d33fce3e20b26774ef6d606f3
Gerrit-PatchSet: 2
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Trevor Parscal <[email protected]>
Gerrit-Reviewer: Catrope <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
