From f1d8bb181affe72a082ee53102d96aabd28c40e3 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Fri, 21 Aug 2020 13:19:26 +0000 Subject: [PATCH] Bug 25727: (follow-up) Some style updates, JS i18n This patch makes to general changes. First, it makes some minor style changes to the appearance of the dropdowns. Second, it moves the JS content in select2.inc into a separate JS file. This is made possible by Bug 21156. To test, apply the patch and view a page which uses the Select2 library, e.g. the add item screen. Confirm that the Select2-styled dropdowns look good and work correctly. TESTING TRANSLATABILITY - Update a translation, e.g. fr-FR: > cd misc/translator > perl translate update fr-FR - Open the corresponding .po file for JavaScript strings, e.g. misc/translator/po/fr-FR-messages-js.po - Locate strings pulled from koha-tmpl/intranet-tmpl/prog/js/select2.js for translation, e.g.: msgid "No results found" msgstr "" - Edit the "msgstr" string however you want (it's just for testing). - Install the updated translation: > perl translate install fr-FR - Switch to your newly translated language in the staff client and test a Select2-styled dropdown. Test that translated strings appear. For example: - Use the filter form to search for a string which isn't found. You should see a translated version. - Make a selection in one of the dropdowns. Hover your mouse over the "X" icon which now appears. The tooltip should be a translated version. Signed-off-by: Jonathan Druart Signed-off-by: Katrin Fischer Signed-off-by: Jonathan Druart --- koha-tmpl/intranet-tmpl/prog/css/select2.css | 21 +++++++++ .../prog/en/includes/select2.inc | 44 +------------------ koha-tmpl/intranet-tmpl/prog/js/select2.js | 39 ++++++++++++++++ 3 files changed, 61 insertions(+), 43 deletions(-) create mode 100644 koha-tmpl/intranet-tmpl/prog/js/select2.js diff --git a/koha-tmpl/intranet-tmpl/prog/css/select2.css b/koha-tmpl/intranet-tmpl/prog/css/select2.css index a6d22c2913..13d578e07e 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/select2.css +++ b/koha-tmpl/intranet-tmpl/prog/css/select2.css @@ -7,3 +7,24 @@ .select2-container .select2-selection--single.important_subfield_not_filled { background-color: #FFFF99; } + +.select2-container--default .select2-selection--single .select2-selection__clear { + color: #888; + font-size: 125%; + padding: 0 5px; +} + +.select2-container--default .select2-selection--single .select2-selection__arrow { + border-left: 1px solid #EEE; + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + color: #666; +} + +.select2-container--default .select2-selection--single .select2-selection__arrow:hover { + background-color: #EEE; +} + +.select2-container--default .select2-selection--single .select2-selection__arrow b { + border-color: #565656 transparent transparent transparent; +} diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/select2.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/select2.inc index d89b21f127..b6536c812b 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/select2.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/select2.inc @@ -3,46 +3,4 @@ [% Asset.js("lib/select2/js/select2.min.js") | $raw %] [% Asset.css("lib/select2/css/select2.min.css") | $raw %] [% Asset.css("css/select2.css") | $raw %] - - - +[% Asset.js("js/select2.js") | $raw %] diff --git a/koha-tmpl/intranet-tmpl/prog/js/select2.js b/koha-tmpl/intranet-tmpl/prog/js/select2.js new file mode 100644 index 0000000000..5ae8085c03 --- /dev/null +++ b/koha-tmpl/intranet-tmpl/prog/js/select2.js @@ -0,0 +1,39 @@ +/* global __ */ +$.fn.select2.defaults.set("allowClear", true); +$.fn.select2.defaults.set("placeholder", ""); +$.fn.select2.defaults.set("width", "element"); + +// Internationalization +$.fn.select2.defaults.set("language", { + errorLoading:function(){ return __("The results could not be loaded"); }, + inputTooLong:function(e){ + var n = e.input.length - e.max; + return __("Please delete %d character(s)").format(n); + }, + inputTooShort:function(e){ + var n = e.min - e.input.length; + return __("Please enter %n or more characters").format(n); + }, + formatResult: function(item) { + return $('
', {title: item.element[0].title}).text(item.text); + }, + loadingMore:function(){ return __("Loading more results…"); }, + maximumSelected:function(e){ + return __("You can only select %s item(s)").format(e.max); + }, + noResults:function(){return __("No results found"); }, + searching:function(){return __("Searching…"); }, + removeAllItems:function(){return __("Remove all items"); }, + removeItem:function(){return __("Remove item"); } +}); + +$(document).ready(function(){ + $(".select2").select2(); + $(".select2").on("select2:clear", function () { + $(this).on("select2:opening.cancelOpen", function (evt) { + evt.preventDefault(); + + $(this).off("select2:opening.cancelOpen"); + }); + }); +}); -- 2.39.5