Bug 22337: Make it clearer that language preferences can be re-ordered

This patch makes markup and CSS changes to the system preference
interface so that it is visually clearer that language preferences
(language and opaclanguages) can be re-ordered by the user to control
the sequence of their appearance in language-selection menus.

This patch makes some minor markup changes (including some whitespace
fixes -- diff accordingly) in order to make it easier to apply these CSS
changes.

To test you should have more than one translation installed. Apply the
patch and clear your browser cache if necessary.

 - Go to Administration -> System preferences -> I18N/L10N
 - The 'language' and 'opaclanguages' system preferences should show the
   new style.
   - Each language should show a "move" cursor when the mouse hovers
     over the "box."
   - Dragging and dropping the languages should work correctly, and
     changes should be reflected in language menus.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

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

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

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>

diff --git a/koha-tmpl/intranet-tmpl/prog/css/preferences.css b/koha-tmpl/intranet-tmpl/prog/css/preferences.css
index b004267..a1efc7c 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/css/preferences.css
+++ b/koha-tmpl/intranet-tmpl/prog/css/preferences.css
@@ -89,3 +89,43 @@ span.overridden {
     font-weight: bold;
     color: red;
 }
+
+.sortable {
+    margin-left: 0;
+    max-width: 20em;
+    padding: .5em 0;
+}
+
+.sortable label {
+    font-weight: bold;
+}
+
+.sortable li {
+    background: #FCFCFC url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMAQMAAABoTh6ZAAAABlBMVEVMaXHExMQ/ZYtiAAAAAXRSTlMAQObYZgAAABNJREFUeNpjYGBgMDYAIQjAxgYAKfECU0ml038AAAAASUVORK5CYII=") repeat-y;
+    border:  1px solid #EEE;
+    cursor: move;
+    font-weight: bold;
+    list-style-type: none;
+    margin: .5em 0;
+    padding: .1em .5em;
+    padding-left:  20px;
+}
+
+.sortable li:hover {
+    background-color: #FFC;
+}
+
+.sortable li li {
+    background: transparent none;
+    border: 0;
+    font-weight: normal;
+    padding-left: 0;
+}
+
+.sortable li li label {
+    font-weight: normal;
+}
+
+.sortable li.ui-sortable-helper {
+    background-color: #FFC;
+}
\ No newline at end of file

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/preferences.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/preferences.tt
index c6ea46b..43e892f 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/preferences.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/preferences.tt
@@ -104,36 +104,42 @@
                         <a class="collapse-textarea" style="display:none" href="#">Click to collapse</br></a>
                         [% END %]
                     [% ELSIF ( CHUNK.type_languages ) %]
-                    <dl class="sortable">
-                    [% FOREACH language IN CHUNK.languages %]
-                    <div>
-                        [% IF ( language.plural ) %]
-                        <dt>
-                            [% IF ( language.native_description ) %][% language.native_description | html %][% ELSE %][% language.rfc4646_subtag | html %][% END %]
-                        </dt>
-                        [% FOREACH sublanguages_loo IN language.sublanguages_loop %]
-                        <dd>
-                            <label for="pref_[% CHUNK.name | html %]_[% sublanguages_loo.rfc4646_subtag | html %]">[% sublanguages_loo.native_description | html %] [% sublanguages_loo.script_description | html %] [% sublanguages_loo.region_description | html %] [% sublanguages_loo.variant_description | html %]([% sublanguages_loo.rfc4646_subtag | html %])</label>
-                            [% IF ( sublanguages_loo.enabled ) %]
-                            <input value="[% sublanguages_loo.rfc4646_subtag | html %]" name="pref_[% CHUNK.name | html %]" id="pref_[% CHUNK.name | html %]_[% sublanguages_loo.rfc4646_subtag | html %]" type="checkbox" checked="checked" class="preference preference-checkbox"/>
-                            [% ELSE %]
-                            <input value="[% sublanguages_loo.rfc4646_subtag | html %]" name="pref_[% CHUNK.name | html %]" id="pref_[% CHUNK.name | html %]_[% sublanguages_loo.rfc4646_subtag | html %]" type="checkbox" class="preference preference-checkbox"/>
-                            [% END %]
-                        </dd>
-                        [% END %]
-                        [% ELSE %]
-                        <dt>
-                            <label for="pref_[% CHUNK.name | html %]_[% language.rfc4646_subtag | html %]">[% language.native_description | html %]([% language.rfc4646_subtag | html %])</label>
-                            [% IF ( language.group_enabled ) %]
-                            <input value="[% language.rfc4646_subtag | html %]" name="pref_[% CHUNK.name | html %]" id="pref_[% CHUNK.name | html %]_[% language.rfc4646_subtag | html %]" type="checkbox" checked="checked" class="preference preference-checkbox"/>
-                            [% ELSE %]
-                            <input value="[% language.rfc4646_subtag | html %]" name="pref_[% CHUNK.name | html %]" id="pref_[% CHUNK.name | html %]_[% language.rfc4646_subtag | html %]" type="checkbox" class="preference preference-checkbox"/>
-                            [% END %]
-                        </dt>
-                        [% END %]
-                    </div>
-                    [% END %]
-                    </dl>
+                        <ul class="sortable">
+                            [% FOREACH language IN CHUNK.languages %]
+                                [% IF ( language.plural ) %]
+                                    <li>
+                                        [% IF ( language.native_description ) %]
+                                            [% language.native_description | html %]
+                                        [% ELSE %]
+                                            [% language.rfc4646_subtag | html %]
+                                        [% END %]
+                                        [% IF language.sublanguages_loop.size > 0 %]
+                                            <ul>
+                                                [% FOREACH sublanguages_loo IN language.sublanguages_loop %]
+                                                    <li>
+                                                        <label for="pref_[% CHUNK.name | html %]_[% sublanguages_loo.rfc4646_subtag | html %]">[% sublanguages_loo.native_description | html %] [% sublanguages_loo.script_description | html %] [% sublanguages_loo.region_description | html %] [% sublanguages_loo.variant_description | html %]([% sublanguages_loo.rfc4646_subtag | html %])</label>
+                                                        [% IF ( sublanguages_loo.enabled ) %]
+                                                            <input value="[% sublanguages_loo.rfc4646_subtag | html %]" name="pref_[% CHUNK.name | html %]" id="pref_[% CHUNK.name | html %]_[% sublanguages_loo.rfc4646_subtag | html %]" type="checkbox" checked="checked" class="preference preference-checkbox"/>
+                                                        [% ELSE %]
+                                                            <input value="[% sublanguages_loo.rfc4646_subtag | html %]" name="pref_[% CHUNK.name | html %]" id="pref_[% CHUNK.name | html %]_[% sublanguages_loo.rfc4646_subtag | html %]" type="checkbox" class="preference preference-checkbox"/>
+                                                        [% END %]
+                                                    </li>
+                                                [% END # FOREACH sublanguages %]
+                                            </ul>
+                                        [% END %]
+                                    </li>
+                                [% ELSE %]
+                                    <li>
+                                        <label for="pref_[% CHUNK.name | html %]_[% language.rfc4646_subtag | html %]">[% language.native_description | html %] ([% language.rfc4646_subtag | html %])</label>
+                                        [% IF ( language.group_enabled ) %]
+                                            <input value="[% language.rfc4646_subtag | html %]" name="pref_[% CHUNK.name | html %]" id="pref_[% CHUNK.name | html %]_[% language.rfc4646_subtag | html %]" type="checkbox" checked="checked" class="preference preference-checkbox"/>
+                                        [% ELSE %]
+                                            <input value="[% language.rfc4646_subtag | html %]" name="pref_[% CHUNK.name | html %]" id="pref_[% CHUNK.name | html %]_[% language.rfc4646_subtag | html %]" type="checkbox" class="preference preference-checkbox"/>
+                                        [% END %]
+                                    </li>
+                                [% END # IF language.plural %]
+                            [% END # FOREACH language %]
+                        </ul> <!-- / ul.sortable -->
                     [% END %]
                     [% END %]
                 </div></td>

diff --git a/koha-tmpl/intranet-tmpl/prog/js/pages/preferences.js b/koha-tmpl/intranet-tmpl/prog/js/pages/preferences.js
index f7ed5e1..97b564c 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/js/pages/preferences.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/pages/preferences.js
@@ -82,8 +82,8 @@ $( document ).ready( function () {
         return false;
     });
 
-    $("dl.sortable").sortable();
-    $("dl.sortable").on( "sortchange", function( event, ui ) {
+    $(".sortable").sortable();
+    $(".sortable").on( "sortchange", function( event, ui ) {
         // This is not exact but we just need to trigger a change
         $(ui.item.find('input:first')).change();
     } );