Merge "Correct the position the arrow of selector and add shadow"

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%;
+	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 );
 }

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 and text exactly same as what was in
@@ -147,10 +161,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 )