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 <jonathan.druart@bugs.koha-community.org>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

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;
+}

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 %]
-<!-- select2.inc -->
-<script>
-  $.fn.select2.defaults.set("allowClear", true);
-  $.fn.select2.defaults.set("placeholder", "");
-  $.fn.select2.defaults.set("dropdownAutoWidth", true);
-
-  // 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 $('<div>', {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 (evt) {
-            $(this).on("select2:opening.cancelOpen", function (evt) {
-                evt.preventDefault();
-
-                $(this).off("select2:opening.cancelOpen");
-            });
-        });
-    });
-
-</script>
-<!-- / select2.inc -->
+[% Asset.js("js/select2.js") | $raw %]

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 $('<div>', {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");
+        });
+    });
+});