jenkins-bot has submitted this change and it was merged.
Change subject: Update jquery.uls and adapt styling
......................................................................
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
---
M extension.json
M lib/jquery.uls/css/jquery.uls.css
M lib/jquery.uls/css/jquery.uls.lcd.css
M lib/jquery.uls/i18n/en.json
M lib/jquery.uls/i18n/qqq.json
M lib/jquery.uls/src/jquery.uls.core.js
M resources/css/ext.uls.css
M resources/css/ext.uls.languagesettings.css
A resources/images/back-grey-ltr.png
A resources/images/back-grey-ltr.svg
A resources/images/back-grey-rtl.png
A resources/images/back-grey-rtl.svg
A resources/images/close.png
A resources/images/close.svg
M resources/js/ext.uls.compactlinks.js
M resources/js/ext.uls.displaysettings.js
M resources/js/ext.uls.inputsettings.js
M resources/js/ext.uls.interface.js
18 files changed, 148 insertions(+), 100 deletions(-)
Approvals:
Santhosh: Looks good to me, approved
jenkins-bot: Verified
diff --git a/extension.json b/extension.json
index 101d1f4..204604c 100644
--- a/extension.json
+++ b/extension.json
@@ -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"
diff --git a/lib/jquery.uls/css/jquery.uls.css
b/lib/jquery.uls/css/jquery.uls.css
index c1d6450..3f78ddf 100644
--- a/lib/jquery.uls/css/jquery.uls.css
+++ b/lib/jquery.uls/css/jquery.uls.css
@@ -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 @@
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 @@
/* 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 @@
/* 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 {
diff --git a/lib/jquery.uls/css/jquery.uls.lcd.css
b/lib/jquery.uls/css/jquery.uls.lcd.css
index becfb6d..2a46526 100644
--- a/lib/jquery.uls/css/jquery.uls.lcd.css
+++ b/lib/jquery.uls/css/jquery.uls.lcd.css
@@ -8,9 +8,10 @@
/* Language list */
.uls-language-list {
- height: 17em;
+ height: 20em;
overflow: auto;
width: auto;
+ background: #FCFCFC;
}
.uls-language-block ul {
diff --git a/lib/jquery.uls/i18n/en.json b/lib/jquery.uls/i18n/en.json
index 53a50ad..936a0cb 100644
--- a/lib/jquery.uls/i18n/en.json
+++ b/lib/jquery.uls/i18n/en.json
@@ -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",
diff --git a/lib/jquery.uls/i18n/qqq.json b/lib/jquery.uls/i18n/qqq.json
index c108c1c..a9efc00 100644
--- a/lib/jquery.uls/i18n/qqq.json
+++ b/lib/jquery.uls/i18n/qqq.json
@@ -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",
diff --git a/lib/jquery.uls/src/jquery.uls.core.js
b/lib/jquery.uls/src/jquery.uls.core.js
index f1d7354..c24464f 100644
--- a/lib/jquery.uls/src/jquery.uls.core.js
+++ b/lib/jquery.uls/src/jquery.uls.core.js
@@ -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,
diff --git a/resources/css/ext.uls.css b/resources/css/ext.uls.css
index a0fa04d..1fbeced 100644
--- a/resources/css/ext.uls.css
+++ b/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 @@
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;
+}
diff --git a/resources/css/ext.uls.languagesettings.css
b/resources/css/ext.uls.languagesettings.css
index 4711c5c..08ad3d3 100644
--- a/resources/css/ext.uls.languagesettings.css
+++ b/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 @@
.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;
+}
diff --git a/resources/images/back-grey-ltr.png
b/resources/images/back-grey-ltr.png
new file mode 100644
index 0000000..32edbda
--- /dev/null
+++ b/resources/images/back-grey-ltr.png
Binary files differ
diff --git a/resources/images/back-grey-ltr.svg
b/resources/images/back-grey-ltr.svg
new file mode 100644
index 0000000..6a77b03
--- /dev/null
+++ b/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>
diff --git a/resources/images/back-grey-rtl.png
b/resources/images/back-grey-rtl.png
new file mode 100644
index 0000000..b711ee2
--- /dev/null
+++ b/resources/images/back-grey-rtl.png
Binary files differ
diff --git a/resources/images/back-grey-rtl.svg
b/resources/images/back-grey-rtl.svg
new file mode 100644
index 0000000..4df14f0
--- /dev/null
+++ b/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>
diff --git a/resources/images/close.png b/resources/images/close.png
new file mode 100644
index 0000000..84631c3
--- /dev/null
+++ b/resources/images/close.png
Binary files differ
diff --git a/resources/images/close.svg b/resources/images/close.svg
new file mode 100644
index 0000000..b39a0ff
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/resources/js/ext.uls.compactlinks.js
b/resources/js/ext.uls.compactlinks.js
index 5fddbbb..5d27e3e 100644
--- a/resources/js/ext.uls.compactlinks.js
+++ b/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 )
diff --git a/resources/js/ext.uls.displaysettings.js
b/resources/js/ext.uls.displaysettings.js
index 880050b..494f854 100644
--- a/resources/js/ext.uls.displaysettings.js
+++ b/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' )
@@ -321,6 +323,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.
@@ -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' );
}
diff --git a/resources/js/ext.uls.inputsettings.js
b/resources/js/ext.uls.inputsettings.js
index dd2a298..d303a6b 100644
--- a/resources/js/ext.uls.inputsettings.js
+++ b/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' )
@@ -346,6 +351,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
@@ -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' );
}
diff --git a/resources/js/ext.uls.interface.js
b/resources/js/ext.uls.interface.js
index db6e662..d90209d 100644
--- a/resources/js/ext.uls.interface.js
+++ b/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();
}
--
To view, visit https://gerrit.wikimedia.org/r/285593
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Iade8005439b4f58ab241752f69a5365d8bb88d2c
Gerrit-PatchSet: 6
Gerrit-Project: mediawiki/extensions/UniversalLanguageSelector
Gerrit-Branch: master
Gerrit-Owner: Nikerabbit <[email protected]>
Gerrit-Reviewer: Santhosh <[email protected]>
Gerrit-Reviewer: Siebrand <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
