Update jquery.uls and adapt styling

jquery.uls.compact module is kept for now as some other
extensions depend on it. But it does not do anything
anymore.

There are some styles which should be in jquery.uls
upstream, but given the current state that is easiest
done in a follow-up later.

The main change is that language selection is now
compact by default: no heading etc.

Includes style changes for the dialogs, and especially
for the new position of the callout caret.

Bug: T85519
Change-Id: Iade8005439b4f58ab241752f69a5365d8bb88d2c

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();
 						}