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>
This commit is contained in:
Owen Leonard 2019-02-13 20:00:17 +00:00 committed by Nick Clemens
parent dae703cb79
commit 660d7bbd5e
3 changed files with 78 additions and 32 deletions

View File

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

View File

@ -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>

View File

@ -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();
} );