Merge "Update jquery.uls and adapt styling"

resources/css/ext.uls.css

@@ -1,25 +1,43 @@
+/* Overrides to follow MediaWiki style */
+.uls-menu {
+	border-radius: 4px;
+}
+
+.uls-search,
+.uls-language-settings-close-block {
+	border-top-right-radius: 4px;
+	border-top-left-radius: 4px;
+}
+
+.uls-language-list {
+	border-bottom-right-radius: 4px;
+	border-bottom-left-radius: 4px;
+}
+
 .uls-menu a {
 	cursor: pointer;
 }
 
-.uls-menu.callout .caret-before {
-	border-top: 20px solid transparent;
-	border-right: 20px solid #C9C9C9;
-	border-bottom: 20px solid transparent;
+.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: -21px;
-	top: 30px;
+	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-top: 20px solid transparent;
-	border-right: 20px solid #FCFCFC;
-	border-bottom: 20px solid transparent;
+	border-right: 10px solid #FCFCFC;
 	display: inline-block;
-	left: -20px;
-	top: 30px;
-	position: absolute;
+	left: -10px;
+}
+
+.uls-menu.callout--languageselection .caret-after {
+	border-right: 10px solid #FFF;
 }
 
 .uls-ui-languages button {
@@ -47,3 +65,47 @@ button.uls-more-languages {
 div.display-settings-block:hover .settings-text {
 	color: #252525;
 }
+
+.uls-search-wrapper-wrapper {
+	position: relative;
+	padding-left: 40px;
+	margin-top: 5px;
+	margin-bottom: 5px;
+
+}
+
+.uls-icon-back {
+	background: transparent url('../images/back-grey-ltr.png') no-repeat scroll center center;
+	background-image: -webkit-linear-gradient(transparent, transparent), url('../images/back-grey-ltr.svg');
+	/* @embed */
+	background-image: linear-gradient(transparent, transparent), url('../images/back-grey-ltr.svg');
+	background-size: 28px;
+	background-position: center center;
+	height: 32px;
+	width: 40px;
+	display: block;
+	position: absolute;
+	left: 0;
+	border-right: 1px solid #C9C9C9;
+	opacity: 0.8;
+}
+
+.uls-icon-back:hover {
+	opacity: 1;
+	cursor: pointer;
+}
+
+
+/* TODO: move to jquery.uls */
+.grid .uls-search {
+	padding-left: 0px;
+}
+
+.uls-search-label {
+	background-size: 28px;
+	opacity: 0.8;
+}
+
+.uls-filterinput {
+	padding-left: 0px;
+}

resources/css/ext.uls.languagesettings.css

@@ -63,11 +63,6 @@
 	font-size: 12pt;
 }
 
-#languagesettings-settings-panel h5 {
-	color: #252525;
-	font-size: 10pt;
-}
-
 /* Buttons in the selector panel */
 .menu-section {
 	color: #777;
@@ -83,7 +78,6 @@
 
 .uls-language-settings-close-block {
 	background: #FFFFFF;
-	border-top-right-radius: 5px;
 }
 
 #languagesettings-panels .menu-section.active,
@@ -140,3 +134,13 @@ label.checkbox input[type="checkbox"] {
 .waiting {
 	cursor: progress;
 }
+
+.uls-icon-close {
+	background: transparent url('../images/close.png') no-repeat scroll center center;
+	background-image: -webkit-linear-gradient(transparent, transparent), url('../images/close.svg');
+	/* @embed */
+	background-image: linear-gradient(transparent, transparent), url('../images/close.svg');
+	float: right;
+	padding: 15px;
+	cursor: pointer;
+}

resources/images/back-grey-ltr.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="Layer_1">
+    <path d="M7 13.1l8.9 8.9c.8-.8.8-2 0-2.8l-6.1-6.1 6-6.1c.8-.8.8-2 0-2.8L7 13.1z" id="path3" fill="#555"/>
+</svg>

resources/images/back-grey-rtl.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="Layer_1">
+    <path d="M7 4c-.8.8-.8 2.2 0 3l6 6-6 6c-.8.8-.8 2.2 0 3l9-9-9-9z" id="path3" fill="#555"/>
+</svg>

resources/images/close.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="13.592" height="13.592"><g transform="translate(-578.659 -309.301)" fill="#555"><rect width="3.204" height="16.018" x="188.862" y="629.484" transform="rotate(-45)"/><rect width="3.204" height="16.018" x="-639.095" y="182.455" transform="matrix(-.707 -.707 .707 -.707 0 0)"/></g></svg>

resources/js/ext.uls.compactlinks.js

@@ -172,8 +172,6 @@
 				onCancel: function () {
 					$trigger.removeClass( 'selector-open' );
 				},
-				// Use compact version of ULS
-				compact: true,
 				languages: ulsLanguageList,
 				// Show common languages
 				quickList: self.getCommonLanguages( languages )

resources/js/ext.uls.displaysettings.js

@@ -300,20 +300,22 @@
 				left: displaySettings.$parent.left,
 				top: displaySettings.$parent.top,
 				onReady: function () {
-					var uls = this,
-						$back = $( '<a>' )
-							.data( 'i18n', 'ext-uls-back-to-display-settings' )
-							.i18n();
+					var  $wrap,
+						uls = this,
+						$back = $( '<div>' )
+							.addClass( 'uls-icon-back' );
 
 					$back.click( function () {
 						uls.hide();
 						displaySettings.$parent.show();
 					} );
 
-					uls.$menu.find( 'div.uls-title-region' ).append( $back );
-					uls.$menu.find( 'h1.uls-title' )
-						.data( 'i18n', 'ext-uls-display-settings-ui-language' )
-						.i18n();
+					$wrap = $( '<div>' )
+						.addClass( 'uls-search-wrapper-wrapper' );
+
+					uls.$menu.find( '.uls-search-wrapper' ).wrap( $wrap );
+					uls.$menu.find( '.uls-search-wrapper-wrapper' ).prepend( $back );
+
 					uls.$menu.prepend(
 						$( '<span>' ).addClass( 'caret-before' ),
 						$( '<span>' ).addClass( 'caret-after' )
@@ -322,6 +324,9 @@
 				onVisible: function () {
 					var $parent;
 
+					this.$menu.find( '.uls-languagefilter' )
+						.prop( 'placeholder', $.i18n( 'ext-uls-display-settings-ui-language' ) );
+
 					if ( !displaySettings.$parent.$window.hasClass( 'callout' ) ) {
 						// Callout menus will have position rules.
 						// Others use the default position.
@@ -340,7 +345,7 @@
 					// If the ULS is shown in the the sidebar,
 					// add a caret pointing to the icon
 					if ( displaySettings.$parent.$window.hasClass( 'callout' ) ) {
-						this.$menu.addClass( 'callout' );
+						this.$menu.addClass( 'callout callout--languageselection' );
 					} else {
 						this.$menu.removeClass( 'callout' );
 					}

resources/js/ext.uls.inputsettings.js

@@ -326,19 +326,24 @@
 				top: inputSettings.$parent.top,
 				onReady: function () {
 					var uls = this,
-						$back = $( '<a>' )
+						$wrap,
+						$back = $( '<div>' )
+							.addClass( 'uls-icon-back' )
 							.data( 'i18n', 'ext-uls-back-to-input-settings' )
-							.i18n();
+							.i18n()
+							.text( ' ' );
 
 					$back.click( function () {
 						uls.hide();
 						inputSettings.$parent.show();
 					} );
 
-					uls.$menu.find( 'div.uls-title-region' ).append( $back );
-					uls.$menu.find( 'h1.uls-title' )
-						.data( 'i18n', 'ext-uls-input-settings-ui-language' )
-						.i18n();
+					$wrap = $( '<div>' )
+						.addClass( 'uls-search-wrapper-wrapper' );
+
+					uls.$menu.find( '.uls-search-wrapper' ).wrap( $wrap );
+					uls.$menu.find( '.uls-search-wrapper-wrapper' ).prepend( $back );
+
 					uls.$menu.prepend(
 						$( '<span>' ).addClass( 'caret-before' ),
 						$( '<span>' ).addClass( 'caret-after' )
@@ -347,6 +352,9 @@
 				onVisible: function () {
 					var $parent;
 
+					this.$menu.find( '.uls-languagefilter' )
+						.prop( 'placeholder', $.i18n( 'ext-uls-input-settings-ui-language' ) );
+
 					if ( !inputSettings.$parent.$window.hasClass( 'callout' ) ) {
 						// callout menus will have position rules. others use
 						// default position
@@ -364,7 +372,7 @@
 					}
 
 					if ( inputSettings.$parent.$window.hasClass( 'callout' ) ) {
-						this.$menu.addClass( 'callout' );
+						this.$menu.addClass( 'callout callout--languageselection' );
 					} else {
 						this.$menu.removeClass( 'callout' );
 					}

resources/js/ext.uls.interface.js

@@ -383,9 +383,10 @@
 					languageSettingsOptions = {
 						defaultModule: 'display',
 						onVisible: function () {
-							var topRowHeight, caretHeight, caretWidth,
+							var caretRadius, caretPosition,
 								$caretBefore = $( '<span>' ).addClass( 'caret-before' ),
 								$caretAfter = $( '<span>' ).addClass( 'caret-after' ),
+								ulsTriggerHeight = this.$element.height(),
 								ulsTriggerWidth = this.$element.width(),
 								ulsTriggerOffset = this.$element.offset();
 
@@ -396,17 +397,22 @@
 
 							// Calculate the positioning of the panel
 							// according to the position of the trigger icon
+
+							caretRadius = parseInt( $caretBefore.css( 'border-top-width' ), 10 );
 							if ( rtlPage ) {
-								caretWidth = parseInt( $caretBefore.css( 'border-left-width' ), 10 );
-								this.left = ulsTriggerOffset.left - this.$window.width() - caretWidth;
+								this.left = ulsTriggerOffset.left - this.$window.width() - caretRadius;
 							} else {
-								caretWidth = parseInt( $caretBefore.css( 'border-right-width' ), 10 );
-								this.left = ulsTriggerOffset.left + ulsTriggerWidth + caretWidth;
+								this.left = ulsTriggerOffset.left + ulsTriggerWidth + caretRadius;
 							}
 
-							topRowHeight = this.$window.find( '.row' ).height();
-							caretHeight = parseInt( $caretBefore.css( 'top' ), 10 );
-							this.top = ulsTriggerOffset.top - topRowHeight - caretHeight / 2;
+							caretPosition = $caretBefore.position();
+
+							// The top of the dialog is aligned in relation to
+							// the middle of the trigger, so that middle of the
+							// caret aligns with it. 2 is for border and margin.
+							this.top = ulsTriggerOffset.top +
+								( ulsTriggerHeight / 2 ) -
+								( caretRadius + caretPosition.top + 2 );
 
 							this.position();
 						}