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:
parent
dae703cb79
commit
660d7bbd5e
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
} );
|
||||
|
|
|
|||
Loading…
Reference in New Issue