jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/341329 )
Change subject: PopupWidget: Center the anchor for vertical (above/below)
popups too
......................................................................
PopupWidget: Center the anchor for vertical (above/below) popups too
I think the only reason these had the anchor placed at the start edge
(plus some margins for niceness) was because it was just a lot easier
to do in pure CSS, back when popups could only go downwards. But now
that we can put the popups anywhere and the anchors anywhere I see no
reason to keep this special case.
Horizontal popups are not affected. Vertical center-aligned popups now
look less lopsided. Vertical backwards-aligned popups go a bit less
backwards, while forwards-aligned go a bit further forwards.
Alternatively, we could make the anchor placement match popup alignment.
I'm not sure which would be better.
Change-Id: I375a76a49337d3bf4ec433f8922abaa6cc52a198
---
M src/themes/apex/tools.less
M src/themes/apex/widgets.less
M src/themes/mediawiki/tools.less
M src/themes/mediawiki/widgets.less
M src/widgets/PopupWidget.js
5 files changed, 5 insertions(+), 57 deletions(-)
Approvals:
jenkins-bot: Verified
Jforrester: Looks good to me, approved
diff --git a/src/themes/apex/tools.less b/src/themes/apex/tools.less
index 20cb3b1..60cb00c 100644
--- a/src/themes/apex/tools.less
+++ b/src/themes/apex/tools.less
@@ -49,12 +49,6 @@
.theme-oo-ui-tool () {}
.theme-oo-ui-popupTool () {
- .oo-ui-popupWidget-anchored-top,
- .oo-ui-popupWidget-anchored-bottom {
- .oo-ui-popupWidget-anchor {
- margin-left: 1.25em;
- }
- }
}
.theme-oo-ui-toolGroupTool () {
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index 7f39148..492b798 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -683,26 +683,6 @@
}
.theme-oo-ui-popupButtonWidget () {
- &-frameless-popup {
- &.oo-ui-popupWidget-anchored-top,
- &.oo-ui-popupWidget-anchored-bottom {
- .oo-ui-popupWidget-anchor {
- // Compensate for icon being inset
- margin-left: @size-icon / 2;
- }
- }
- }
-
- &-framed-popup {
- &.oo-ui-popupWidget-anchored-top,
- &.oo-ui-popupWidget-anchored-bottom {
- .oo-ui-popupWidget-anchor {
- // Compensate for icon being inset
- // Button has padding-left: 0.8em;, icon has
margin-left: -0.5em;
- margin-left: @size-icon / 2 + 0.8em - 0.5em;
- }
- }
- }
}
.theme-oo-ui-progressBarWidget () {
diff --git a/src/themes/mediawiki/tools.less b/src/themes/mediawiki/tools.less
index af73b66..aec9939 100644
--- a/src/themes/mediawiki/tools.less
+++ b/src/themes/mediawiki/tools.less
@@ -67,12 +67,6 @@
}
.theme-oo-ui-popupTool () {
- .oo-ui-popupWidget-anchored-top,
- .oo-ui-popupWidget-anchored-bottom {
- .oo-ui-popupWidget-anchor {
- margin-left: 1.25em;
- }
- }
}
.theme-oo-ui-toolGroupTool () {
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index 09f45ab..48cff05 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -1043,27 +1043,6 @@
}
.theme-oo-ui-popupButtonWidget () {
- &-frameless-popup {
- &.oo-ui-popupWidget-anchored-top,
- &.oo-ui-popupWidget-anchored-bottom {
- .oo-ui-popupWidget-anchor {
- // Compensate for icon being inset
- margin-left: @size-icon / 2;
- }
- }
- }
-
- &-framed-popup {
- &.oo-ui-popupWidget-anchored-top,
- &.oo-ui-popupWidget-anchored-bottom {
- .oo-ui-popupWidget-anchor {
- // Compensate for icon being inset
- // elements.less positions the icon with left:
1.5em - @size-icon / 2; , so we need:
- // @size-icon / 2 + ( 1.5em - @size-icon / 2 )
which is 1.5em.
- margin-left: 1.5em;
- }
- }
- }
}
.theme-oo-ui-progressBarWidget () {
diff --git a/src/widgets/PopupWidget.js b/src/widgets/PopupWidget.js
index 17d6391..885ec1e 100644
--- a/src/widgets/PopupWidget.js
+++ b/src/widgets/PopupWidget.js
@@ -31,8 +31,10 @@
* @cfg {number} [height] Height of popup in pixels. Omit to use the automatic
height.
* @cfg {boolean} [anchor=true] Show anchor pointing to origin of popup
* @cfg {string} [position='below'] Where to position the popup relative to
$floatableContainer
- * 'above': Put popup above $floatableContainer; anchor points down to the
start edge of $floatableContainer
- * 'below': Put popup below $floatableContainer; anchor points up to the
start edge of $floatableContainer
+ * 'above': Put popup above $floatableContainer; anchor points down to the
horizontal center
+ * of $floatableContainer
+ * 'below': Put popup below $floatableContainer; anchor points up to the
horizontal center
+ * of $floatableContainer
* 'before': Put popup to the left (LTR) / right (RTL) of
$floatableContainer; anchor points
* endwards (right/left) to the vertical center of
$floatableContainer
* 'after': Put popup to the right (LTR) / left (RTL) of $floatableContainer;
anchor points
@@ -469,8 +471,7 @@
}
// Position the anchor (which is positioned relative to the popup) to
point to $floatableContainer
- // For popups above/below, we point to the start edge; for popups
before/after, we point to the center
- anchorPos = vertical ? ( floatablePos[ start ] + floatablePos[ end ] )
/ 2 : floatablePos[ start ];
+ anchorPos = ( floatablePos[ start ] + floatablePos[ end ] ) / 2;
anchorOffset = ( start === far ? -1 : 1 ) * ( anchorPos - popupPos[
start ] );
// If the anchor is less than 2*anchorSize from either edge, move the
popup to make more space
--
To view, visit https://gerrit.wikimedia.org/r/341329
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I375a76a49337d3bf4ec433f8922abaa6cc52a198
Gerrit-PatchSet: 2
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Catrope <[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
