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
This commit is contained in:
Niklas Laxström
@@ -330,7 +330,6 @@
|
||||
"remoteExtPath": "UniversalLanguageSelector/lib"
|
||||
},
|
||||
"jquery.uls.compact": {
|
||||
"styles": "jquery.uls/css/jquery.uls.compact.css",
|
||||
"dependencies": "jquery.uls",
|
||||
"localBasePath": "lib",
|
||||
"remoteExtPath": "UniversalLanguageSelector/lib"
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
|
||||
.uls-trigger {
|
||||
/* @embed */
|
||||
background: transparent url('../images/icon-language.png') no-repeat scroll left center;
|
||||
@@ -7,6 +8,7 @@
|
||||
background-image: linear-gradient(transparent, transparent), url('../images/icon-language.svg');
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.uls-menu {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
@@ -16,7 +18,6 @@
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-radius: 5px;
|
||||
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
@@ -24,6 +25,7 @@
|
||||
-moz-background-clip: padding;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.uls-wide {
|
||||
min-width: 715px;
|
||||
width: 45%;
|
||||
@@ -104,30 +106,9 @@ div.uls-region {
|
||||
width: 99%;
|
||||
}
|
||||
|
||||
.uls-icon-close {
|
||||
/* @embed */
|
||||
background: transparent url('../images/close.png') no-repeat scroll center center;
|
||||
/* @embed */
|
||||
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;
|
||||
}
|
||||
|
||||
.uls-search {
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F0F0F0', endColorstr='#FBFBFB');
|
||||
background: #f8f8f8;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#F0F0F0), to(#FBFBFB));
|
||||
background: -webkit-linear-gradient(top, #F0F0F0, #FBFBFB);
|
||||
background: -moz-linear-gradient(top, #F0F0F0, #FBFBFB);
|
||||
background: -o-linear-gradient(top, #F0F0F0, #FBFBFB);
|
||||
background: linear-gradient(#F0F0F0, #FBFBFB);
|
||||
border-top-color: #AAA;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
padding: 0.8em 0;
|
||||
background-color: white;
|
||||
padding: 5px;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: #DDD;
|
||||
@@ -161,12 +142,14 @@ div.uls-region {
|
||||
|
||||
/* There are two input boxes. This class applies to both of them */
|
||||
.uls-filterinput {
|
||||
font-size: 14px;
|
||||
font-size: 18px;
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
/* For the custom clear (X) icon */
|
||||
padding: 6px 25px 6px 6px;
|
||||
border-width: 1px;
|
||||
|
||||
outline: none;
|
||||
border: none;
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
@@ -177,26 +160,14 @@ div.uls-region {
|
||||
/* This is the actual input */
|
||||
.uls-languagefilter {
|
||||
background-color: transparent;
|
||||
border: 1px solid #c9c9c9;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
|
||||
border: none;
|
||||
color: #333;
|
||||
-moz-transition: border 0.15s linear 0s;
|
||||
-o-transition: border 0.15s linear 0s;
|
||||
-webkit-transition: border 0.15s linear 0s;
|
||||
transition: border 0.15s linear 0s;
|
||||
}
|
||||
|
||||
.uls-languagefilter:focus {
|
||||
border: 1px solid #3366bb;
|
||||
}
|
||||
|
||||
/* This is the shadow input box showing completion suggestions */
|
||||
.uls-filtersuggestion {
|
||||
background-color: white;
|
||||
color: #888;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
box-shadow: 0 1px 2px transparent inset;
|
||||
}
|
||||
|
||||
.uls-languagefilter-clear {
|
||||
|
||||
@@ -8,9 +8,10 @@
|
||||
|
||||
/* Language list */
|
||||
.uls-language-list {
|
||||
height: 17em;
|
||||
height: 20em;
|
||||
overflow: auto;
|
||||
width: auto;
|
||||
background: #FCFCFC;
|
||||
}
|
||||
|
||||
.uls-language-block ul {
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
"locale": "en",
|
||||
"message-documentation": "qqq"
|
||||
},
|
||||
"uls-select-language": "Select language",
|
||||
"uls-region-WW": "Worldwide",
|
||||
"uls-region-SP": "Special",
|
||||
"uls-region-AM": "America",
|
||||
|
||||
@@ -6,7 +6,6 @@
|
||||
"Shirayuki"
|
||||
]
|
||||
},
|
||||
"uls-select-language": "Language Selector Title.\n{{Identical|Select language}}",
|
||||
"uls-region-WW": "Label for worldwide languages. They are languages spoken in multiple countries. Eg: English, French, Spanish etc. This label is used in the map region of ULS and as the title of section showing worldwide languages. Translation should not be descriptive.",
|
||||
"uls-region-SP": "Label for the special languages section. This section may include special custom languages that can be added in run time. It's shown after the Worldwide section.\n\nThe special language is everything that isn't a real language. Like code qqq or qqx.\n{{Identical|Special}}",
|
||||
"uls-region-AM": "Label for America",
|
||||
|
||||
@@ -26,12 +26,6 @@
|
||||
// Region numbers in id attributes also appear in the langdb.
|
||||
/*jshint multistr:true */
|
||||
template = '<div class="grid uls-menu"> \
|
||||
<div class="row"> \
|
||||
<span id="uls-close" class="uls-icon-close"></span> \
|
||||
<div class="uls-title-region seven columns">\
|
||||
<h1 data-i18n="uls-select-language" class="uls-title">Select Language</h1>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div id="search" class="row uls-search"> \
|
||||
<div class="uls-search-wrapper"> \
|
||||
<label class="uls-search-label" for="uls-languagefilter"></label>\
|
||||
@@ -165,10 +159,6 @@
|
||||
this.$menu.addClass( widthClasses[this.getMenuWidth()] );
|
||||
this.$menu.css( this.position() );
|
||||
|
||||
if ( this.options.compact ) {
|
||||
this.$menu.addClass( 'uls-compact' );
|
||||
}
|
||||
|
||||
if ( !this.initialized ) {
|
||||
$( 'body' ).prepend( this.$menu );
|
||||
this.i18n();
|
||||
@@ -239,8 +229,6 @@
|
||||
// Register all event listeners to the ULS here.
|
||||
this.$element.on( 'click', $.proxy( this.click, this ) );
|
||||
|
||||
// Close when clicking on the close button
|
||||
this.$menu.find( '#uls-close' ).on( 'click', $.proxy( this.cancel, this ) );
|
||||
// Don't do anything if pressing on empty space in the ULS
|
||||
this.$menu.on( 'click', function ( e ) {
|
||||
e.stopPropagation();
|
||||
@@ -424,7 +412,6 @@
|
||||
searchAPI: null, // Language search API
|
||||
languages: $.uls.data.getAutonyms(), // Languages to be used for ULS, default is all languages
|
||||
quickList: null, // Array of language codes or function that returns such
|
||||
compact: false, // Show ULS in compact mode
|
||||
// The options are wide (4 columns), medium (2 columns), and narrow (1 column).
|
||||
// If not specified, it will be set automatically.
|
||||
menuWidth: null,
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
BIN
resources/images/back-grey-ltr.png
Normal file
BIN
resources/images/back-grey-ltr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 629 B |
4
resources/images/back-grey-ltr.svg
Normal file
4
resources/images/back-grey-ltr.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 246 B |
BIN
resources/images/back-grey-rtl.png
Normal file
BIN
resources/images/back-grey-rtl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 405 B |
4
resources/images/back-grey-rtl.svg
Normal file
4
resources/images/back-grey-rtl.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 231 B |
BIN
resources/images/close.png
Normal file
BIN
resources/images/close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 180 B |
1
resources/images/close.svg
Normal file
1
resources/images/close.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 369 B |
@@ -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 )
|
||||
|
||||
@@ -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' );
|
||||
}
|
||||
|
||||
@@ -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' );
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user