Isarra has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/354378 )
Change subject: Determine callout directionality based on position as opposed
to language
......................................................................
Determine callout directionality based on position as opposed to language
For interlanguage toggle, interlanguage position is no longer assumed to be a
left sidebar, and is determined on the fly in order to appear correctly
regardless of where it is, and not go off the side of the page. This works
across most skins, and regardless of language directionality.
Does not necessarily resolve issues with interlanguage links appearing in the
middle of the page (header/footer), or the callout just plain not fitting for
other reasons (mobile devices).
bug: T161586
Change-Id: Icd55498a945e12c0ff79ba891c094d60ce791115
---
M extension.json
R resources/css/ext.uls.less
M resources/js/ext.uls.interface.js
3 files changed, 53 insertions(+), 12 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/UniversalLanguageSelector
refs/changes/78/354378/1
diff --git a/extension.json b/extension.json
index aa4cb66..273c92b 100644
--- a/extension.json
+++ b/extension.json
@@ -157,7 +157,7 @@
"ext.uls.common": {
"targets": [ "desktop", "mobile" ],
"scripts": "js/ext.uls.common.js",
- "styles": "css/ext.uls.css",
+ "styles": "css/ext.uls.less",
"skinStyles": {
"monobook": "css/ext.uls-monobook.css"
},
diff --git a/resources/css/ext.uls.css b/resources/css/ext.uls.less
similarity index 65%
rename from resources/css/ext.uls.css
rename to resources/css/ext.uls.less
index 7e3c988..d09263a 100644
--- a/resources/css/ext.uls.css
+++ b/resources/css/ext.uls.less
@@ -16,25 +16,62 @@
border-bottom-left-radius: 4px;
}
+/* Caret */
.uls-menu.callout .caret-before,
.uls-menu.callout .caret-after {
border-top: 10px solid transparent;
- border-right: 10px solid #c9c9c9;
border-bottom: 10px solid transparent;
display: inline-block;
- left: -11px;
/* 17px aligns nicely with the size of the search row in language
selection */
top: 17px;
position: absolute;
}
-
.uls-menu.callout .caret-after {
- border-right: 10px solid #fcfcfc;
display: inline-block;
- left: -10px;
}
-.uls-menu.callout--languageselection .caret-after {
+// How do you do switch for flipping in less? These are very redundant.
+.uls-menu.callout .caret-right {
+ .caret-before,
+ .caret-after {
+ /* @noflip */
+ border-left: 10px solid #c9c9c9;
+ /* @noflip */
+ right: -11px;
+ }
+
+ .caret-after {
+ /* @noflip */
+ border-left: 10px solid #fcfcfc;
+ /* @noflip */
+ right: -10px;
+ }
+
+}
+.uls-menu.callout--languageselection .caret-right .caret-after {
+ /* @noflip */
+ border-left: 10px solid #fff;
+}
+
+.uls-menu.callout .caret-left {
+ .caret-before,
+ .caret-after {
+ /* @noflip */
+ border-right: 10px solid #c9c9c9;
+ /* @noflip */
+ left: -11px;
+ }
+
+ .caret-after {
+ /* @noflip */
+ border-right: 10px solid #fcfcfc;
+ /* @noflip */
+ left: -10px;
+ }
+
+}
+.uls-menu.callout--languageselection .caret-left .caret-after {
+ /* @noflip */
border-right: 10px solid #fff;
}
diff --git a/resources/js/ext.uls.interface.js
b/resources/js/ext.uls.interface.js
index 2284dfd..0dfe1ec 100644
--- a/resources/js/ext.uls.interface.js
+++ b/resources/js/ext.uls.interface.js
@@ -294,7 +294,6 @@
var $triggers,
$pLang,
$ulsTrigger = $( '.uls-trigger' ),
- rtlPage = $( 'body' ).hasClass( 'rtl' ),
anonMode = ( mw.user.isAnon() &&
!mw.config.get( 'wgULSAnonCanChangeLanguage' )
),
ulsPosition = mw.config.get( 'wgULSPosition' );
@@ -337,6 +336,7 @@
var caretRadius,
caretPosition,
$caretBefore =
$( '<span>' ).addClass( 'caret-before' ),
$caretAfter =
$( '<span>' ).addClass( 'caret-after' ),
+ $caretWrapper =
$( '<span>' ),
ulsTriggerHeight = this.$element.height(),
ulsTriggerWidth
= this.$element.width(),
ulsTriggerOffset = this.$element.offset();
@@ -344,19 +344,23 @@
// Add the callout
caret triangle
// pointing to the
trigger icon
this.$window.addClass(
'callout' );
- this.$window.prepend(
$caretBefore, $caretAfter );
+ this.$window.prepend(
$caretWrapper.prepend( $caretBefore, $caretAfter ) );
// Calculate the
positioning of the panel
// according to the
position of the trigger icon
caretRadius = parseInt(
$caretBefore.css( 'border-top-width' ), 10 );
- if ( rtlPage ) {
+
+ if (
ulsTriggerOffset.left > ( this.$window.width() - caretRadius ) / 2 ) {
this.left =
ulsTriggerOffset.left - this.$window.width() - caretRadius;
+
$caretWrapper.addClass( 'caret-right' );
+ caretPosition =
$caretBefore.position();
+
} else {
this.left =
ulsTriggerOffset.left + ulsTriggerWidth + caretRadius;
+
$caretWrapper.addClass( 'caret-left' );
+ caretPosition =
$caretAfter.position();
}
-
- caretPosition =
$caretBefore.position();
// The top of the
dialog is aligned in relation to
// the middle of the
trigger, so that middle of the
--
To view, visit https://gerrit.wikimedia.org/r/354378
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Icd55498a945e12c0ff79ba891c094d60ce791115
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/UniversalLanguageSelector
Gerrit-Branch: master
Gerrit-Owner: Isarra <zhoris...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
