jenkins-bot has submitted this change and it was merged.
Change subject: Correct the position the arrow of selector and add shadow
......................................................................
Correct the position the arrow of selector and add shadow
The pointer arrow of the ULS was not aligned with the 'x more' trigger
and it missed shadow. This commit fixes it.
Notably, we replace the old arrow with a box rotated 45 degree so that
we can apply the shadow very easily.
Bug: T130633
Change-Id: I4d36f3ee9fcfea932e10208518a03e7b246a7abe
---
M resources/css/ext.uls.compactlinks.css
M resources/js/ext.uls.compactlinks.js
2 files changed, 52 insertions(+), 31 deletions(-)
Approvals:
Santhosh: Looks good to me, but someone else must approve
Nikerabbit: Looks good to me, approved
jenkins-bot: Verified
diff --git a/resources/css/ext.uls.compactlinks.css
b/resources/css/ext.uls.compactlinks.css
index 6d2e5f1..b940a44 100644
--- a/resources/css/ext.uls.compactlinks.css
+++ b/resources/css/ext.uls.compactlinks.css
@@ -13,28 +13,39 @@
background-image: url( ../images/compact-links-trigger.svg );
background-size: 17px;
background-repeat: no-repeat;
- background-position: 9% 8%;
+ background-position: left 4px center;
margin: 4px 0;
+ text-align: left;
}
-.interlanguage-uls-menu:after,
.interlanguage-uls-menu:before {
- right: 100%;
- content: " ";
+ background: none repeat scroll 0 0 #FCFCFC;
+ border-left: 1px solid rgba( 0, 0, 0, 0.2 );
+ border-top: 1px solid rgba( 0, 0, 0, 0.2 );
+ box-shadow: -2px -2px 2px rgba( 0, 0, 0, 0.1 );
+ content: "";
+ height: 24px;
+ width: 24px;
+ left: -13px;
position: absolute;
- border: 1px solid black;
+ /* The dialog middle is positioned 250px away from the center of the
trigger. Substract 12 for
+ * half of the box height to center middle of the box rather than the
top. The remaining 2 are
+ * either for top-margin of the menu and border of this box, or because
we use do not account
+ * for the margin of the trigger when we use $.fn.outerWidth without
true as a parameter.
+ */
+ top: 236px;
+ transform: rotate( -45deg );
+ -webkit-transform: rotate( -45deg );
+ -moz-transform: rotate( -45deg );
+ -o-transform: rotate( -45deg );
+ -ms-transform: rotate( -45deg );
+ background-clip: padding-box;
}
-.interlanguage-uls-menu:after {
- border-color: transparent;
- border-right-color: #FCFCFC;
- border-width: 20px;
- top: 250px;
-}
-
-.interlanguage-uls-menu:before {
- border-color: transparent;
- border-right-color: #555555;
- border-width: 20px;
- top: 250px;
+body.rtl .interlanguage-uls-menu:before {
+ transform: rotate( 45deg );
+ -webkit-transform: rotate( 45deg );
+ -moz-transform: rotate( 45deg );
+ -o-transform: rotate( 45deg );
+ -ms-transform: rotate( 45deg );
}
diff --git a/resources/js/ext.uls.compactlinks.js
b/resources/js/ext.uls.compactlinks.js
index 27c4491..e51d088 100644
--- a/resources/js/ext.uls.compactlinks.js
+++ b/resources/js/ext.uls.compactlinks.js
@@ -95,8 +95,6 @@
var languages,
compactLinks = this,
dir = $( 'html' ).prop( 'dir' ),
- interlanguageListLeft,
- interlanguageListWidth,
ulsLanguageList = {};
languages = $.map( compactLinks.interlanguageList,
function ( language, languageCode ) {
@@ -105,9 +103,6 @@
return languageCode;
} );
- // Calculate the left and width values
- interlanguageListLeft =
compactLinks.$interlanguageList.offset().left;
- interlanguageListWidth =
compactLinks.$interlanguageList.width();
// Attach ULS to the trigger
compactLinks.$trigger.uls( {
onReady: function () {
@@ -127,14 +122,33 @@
location.href =
compactLinks.interlanguageList[ language ].href;
},
onVisible: function () {
- // Calculate the positioning of the
panel
- // according to the position of the
trigger icon
+ var offset, height, width,
triangleWidth;
+ // The panel is positioned carefully so
that our pointy triangle,
+ // which is implemented as a square box
rotated 45 degrees with
+ // rotation origin in the middle. See
the corresponding style file.
+
+ // These are for the trigger
+ offset = compactLinks.$trigger.offset();
+ width =
compactLinks.$trigger.outerWidth();
+ height =
compactLinks.$trigger.outerHeight();
+
+ // Triangle width is: Math.sqrt( 2 *
Math.pow( 25, 2 ) ) / 2 =~ 17.7;
+ // Box width = 24 + 1 for border.
+ // The resulting value is rounded up 20
to have a small space between.
+ triangleWidth = 20;
+
if ( dir === 'rtl' ) {
- this.left =
interlanguageListLeft - this.$menu.width();
+ this.left = offset.left -
this.$menu.outerWidth() - triangleWidth;
} else {
- this.left =
interlanguageListLeft + interlanguageListWidth;
+ this.left = offset.left + width
+ triangleWidth;
}
- this.$menu.css( 'left', this.left );
+ // Offset -250px from the middle of the
trigger
+ this.top = offset.top + ( height / 2 )
- 250;
+
+ this.$menu.css( {
+ left: this.left,
+ top: this.top
+ } );
},
languageDecorator: function ( $languageLink,
language ) {
// set href according to language
@@ -142,10 +156,6 @@
},
// Use compact version of ULS
compact: true,
- // Top position of the language selector. Top
it 250px above to take care of
- // caret pointing the trigger. See
.interlanguage-uls-menu:after style definition
- top: compactLinks.$trigger.offset().top -
compactLinks.$trigger.height() / 2 - 250,
- // List of languages to be shown
languages: ulsLanguageList,
// Show common languages
quickList:
compactLinks.filterByCommonLanguages( languages )
--
To view, visit https://gerrit.wikimedia.org/r/281595
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I4d36f3ee9fcfea932e10208518a03e7b246a7abe
Gerrit-PatchSet: 11
Gerrit-Project: mediawiki/extensions/UniversalLanguageSelector
Gerrit-Branch: master
Gerrit-Owner: Santhosh <[email protected]>
Gerrit-Reviewer: Fomafix
Gerrit-Reviewer: Nikerabbit <[email protected]>
Gerrit-Reviewer: Santhosh <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
