Trevor Parscal has uploaded a new change for review.
https://gerrit.wikimedia.org/r/163893
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 setup
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(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/93/163893/1
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: newchange
Gerrit-Change-Id: I5cb2bb8f2191994d33fce3e20b26774ef6d606f3
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Trevor Parscal <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
