From a19e8c0dba9c69f942cbd92738fa908a967df2b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niklas=20Laxstr=C3=B6m?= Date: Wed, 27 Apr 2016 08:45:42 +0200 Subject: [PATCH] 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 --- extension.json | 1 - lib/jquery.uls/css/jquery.uls.css | 49 +++--------- lib/jquery.uls/css/jquery.uls.lcd.css | 3 +- lib/jquery.uls/i18n/en.json | 1 - lib/jquery.uls/i18n/qqq.json | 1 - lib/jquery.uls/src/jquery.uls.core.js | 13 ---- resources/css/ext.uls.css | 86 ++++++++++++++++++--- resources/css/ext.uls.languagesettings.css | 16 ++-- resources/images/back-grey-ltr.png | Bin 0 -> 629 bytes resources/images/back-grey-ltr.svg | 4 + resources/images/back-grey-rtl.png | Bin 0 -> 405 bytes resources/images/back-grey-rtl.svg | 4 + resources/images/close.png | Bin 0 -> 180 bytes resources/images/close.svg | 1 + resources/js/ext.uls.compactlinks.js | 2 - resources/js/ext.uls.displaysettings.js | 23 +++--- resources/js/ext.uls.inputsettings.js | 22 ++++-- resources/js/ext.uls.interface.js | 22 ++++-- 18 files changed, 148 insertions(+), 100 deletions(-) create mode 100644 resources/images/back-grey-ltr.png create mode 100644 resources/images/back-grey-ltr.svg create mode 100644 resources/images/back-grey-rtl.png create mode 100644 resources/images/back-grey-rtl.svg create mode 100644 resources/images/close.png create mode 100644 resources/images/close.svg diff --git a/extension.json b/extension.json index 101d1f4f..204604c7 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 c1d64507..3f78ddf0 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 @@ 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 { diff --git a/lib/jquery.uls/css/jquery.uls.lcd.css b/lib/jquery.uls/css/jquery.uls.lcd.css index becfb6d6..2a465269 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 53a50ad6..936a0cb2 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 c108c1c6..a9efc00c 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 f1d7354d..c24464fc 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 = '
\ -
\ - \ -
\ -

Select Language

\ -
\ -
\