Mooeypoo has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/337210 )
Change subject: RCFilters UI: Fix popup position for RTL
......................................................................
RCFilters UI: Fix popup position for RTL
This is harder than it should be, and exposes a serious bug in
the way OOUI calculates the popup positioning now.
PopupWidget is now FloatableElement, and now the calculation of
the positioning is done twice - once in FloatableElement, deciding
on a 'left' value that takes into account the element the
FloatableElement is floating "under", and then again, this time
setting 'margin-left' "correction" to the positioning under the
indicator.
Neither one of those take into account RTL corrections - but trying
to fix one gets overridden by the other.
As a result, this fix is a temporary measure until we correct and
figure out how to properly combine and calculate the alignment
upstream.
The commit does three things:
1. It removes the value of 'margin-left' completely. This value is
unnecessary and creates a small bug, where the filter popup is slightly
misaligned if the scrollbars are on the left.
2. It adds a test when the popup is toggled visible, to adjust its
positioning in case the directionality is RTL.
3. It adds 'direction: ltr' to the entire interface, rather than just
the input, since the entire FilterWrapperWidget is interface-direction
and not content direction.
Bug: T157189
Change-Id: I94ccfea878d83a24e071696b9c4e58115c9295c9
---
M
resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less
M
resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
2 files changed, 26 insertions(+), 1 deletion(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core
refs/changes/10/337210/1
diff --git
a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less
index 2928102..bdc94b3 100644
---
a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less
+++
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less
@@ -1,5 +1,7 @@
.mw-rcfilters-ui-filterWrapperWidget {
width: 100%;
+ // Make sure this uses the interface direction, not the content
direction
+ direction: ltr;
&-popup {
// We have to override OOUI's definition, which is set
@@ -13,7 +15,9 @@
margin-top: -0.5em;
input {
- // Make sure this uses the interface direction, not the
content direction
+ // We need to reiterate the directionality
+ // for the input as well to literally override
+ // a MediaWiki CSS rule that turns it 'ltr'
direction: ltr;
}
}
diff --git
a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
index 56303d5..b89375d 100644
---
a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
+++
b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
@@ -192,10 +192,31 @@
* @inheritdoc
*/
mw.rcfilters.ui.FilterCapsuleMultiselectWidget.prototype.focus =
function () {
+ var pos;
+
// Override this method; we don't want to focus on the popup,
and we
// don't want to bind the size to the handle.
if ( !this.isDisabled() ) {
this.popup.toggle( true );
+
+ // Fix for RTL
+ // TODO: This should be fixed upstream; now that
PopupWidget is also
+ // a FloatableElement, the positioning of both elements
are interfering
+ // with one another, and neither one of them corrects
itself for RTL
+ if ( OO.ui.Element.static.getDir( this.$element ) ===
'rtl' ) {
+ pos = this.popup.$element.offset();
+ this.popup.$element.css(
+ 'left',
+ pos.left +
this.filterInput.$element.width() - this.popup.$element.width()
+ );
+ }
+
+ // The 'margin-left' correct that arrives from
PopupWidget
+ // is wrong here. It makes the popup shift to the left,
aligning
+ // the scrollbar outside the bounds of the input.
+ // TODO: This should be fixed upstream in OOUI
+ this.popup.$element.css( 'margin-left', 'auto' );
+
this.filterInput.$input.get( 0 ).focus();
}
return this;
--
To view, visit https://gerrit.wikimedia.org/r/337210
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I94ccfea878d83a24e071696b9c4e58115c9295c9
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <mor...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
