Language chooser imporvements.
* Use a translated 'Continue' string. * Go back to using a select element. * Only show a spinner when we're installing a language. see #28577. git-svn-id: https://develop.svn.wordpress.org/trunk@29372 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrew Nacin
parent
be026764a3
commit
42f2f27267
@ -98,8 +98,8 @@ label {
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
}
|
||||
.step .button-large {
|
||||
font-size: 14px;
|
||||
.language-chooser.wp-core-ui .step .button.button-large {
|
||||
height: 36px;
|
||||
}
|
||||
textarea {
|
||||
border: 1px solid #dfdfdf;
|
||||
@ -325,59 +325,22 @@ body.language-chooser {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.language-chooser fieldset {
|
||||
margin: 1px;
|
||||
.language-chooser select {
|
||||
padding: 8px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
border: 1px solid #ddd;
|
||||
-webkit-border-radius: 0;
|
||||
border-radius: 0; /* Reset mobile webkit's default element styling */
|
||||
-webkit-transition: .05s border-color ease-in-out;
|
||||
transition: .05s border-color ease-in-out;
|
||||
outline: 0;
|
||||
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.07);
|
||||
box-shadow: inset 0 1px 2px rgba(0,0,0,0.07);
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
overflow-y: scroll;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.language-chooser fieldset.focus {
|
||||
border-color: #5b9dd9;
|
||||
-webkit-box-shadow: 0 0 2px rgba(30,140,190,0.8);
|
||||
box-shadow: 0 0 2px rgba(30,140,190,0.8);
|
||||
}
|
||||
|
||||
.wp-core-ui.language-chooser .button.button-hero {
|
||||
font-size: 30px;
|
||||
line-height: 30px;
|
||||
font-family: Arial, sans-serif;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.language-chooser p {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.language-chooser input:checked + label{
|
||||
color:white;
|
||||
background: #777;
|
||||
}
|
||||
|
||||
.language-chooser .focus input:checked + label{
|
||||
background: #0074A2;
|
||||
}
|
||||
|
||||
.language-chooser label:hover {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.language-chooser label{
|
||||
display:block;
|
||||
}
|
||||
|
||||
.screen-reader-input,
|
||||
.screen-reader-text {
|
||||
position: absolute;
|
||||
@ -404,7 +367,9 @@ body.language-chooser {
|
||||
|
||||
.step .spinner {
|
||||
display: inline-block;
|
||||
margin-top: 8px;
|
||||
margin-right: 15px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -2193,27 +2193,40 @@ CREATE TABLE $wpdb->sitecategories (
|
||||
}
|
||||
endif;
|
||||
|
||||
/**
|
||||
* Output the input fields for the language selection form on the installation screen.
|
||||
*
|
||||
* @since 4.0.0
|
||||
*
|
||||
* @see wp_get_available_translations_from_api()
|
||||
*
|
||||
* @param array $languages Array of available languages (populated via the Translations API).
|
||||
*/
|
||||
function wp_install_language_form( $languages ) {
|
||||
echo "<fieldset>\n";
|
||||
echo "<legend class='screen-reader-text'>Select a default language</legend>\n";
|
||||
echo '<input type="radio" checked="checked" class="screen-reader-input language-chooser-input" name="language" id="language_default" value="">';
|
||||
echo '<label for="language_default" lang="en">English (United States)</label>';
|
||||
$installed_languages = get_available_languages();
|
||||
|
||||
echo "<label class='screen-reader-text' for='language'>Select a default language</label>\n";
|
||||
echo "<select size='14' name='language' id='language'>\n";
|
||||
echo '<option value="" lang="en" selected="selected" data-continue="Continue" data-installed="1">English (United States)</option>';
|
||||
echo "\n";
|
||||
|
||||
if ( defined( 'WPLANG' ) && ( '' !== WPLANG ) && ( 'en_US' !== WPLANG ) ) {
|
||||
if ( isset( $languages[ WPLANG ] ) ) {
|
||||
$language = $languages[ WPLANG ];
|
||||
echo '<input type="radio" name="language" checked="checked" class="' . esc_attr( $language['language'] ) . ' screen-reader-input" id="language_wplang" value="' . esc_attr( $language['language'] ) . '">';
|
||||
echo '<label for="language_wplang" lang="' . esc_attr( $language['iso'][1] ) . '">' . esc_html( $language['native_name'] ) . "</label>\n";
|
||||
echo '<option value="' . esc_attr( $language['language'] ) . '" lang="' . esc_attr( $language['iso'][1] ) . '">' . esc_html( $language['native_name'] ) . "</option>\n";
|
||||
}
|
||||
}
|
||||
|
||||
foreach ( $languages as $language ) {
|
||||
echo '<input type="radio" name="language" class="' . esc_attr( $language['language'] ) . ' screen-reader-input language-chooser-input" id="language_'. esc_attr( $language['language'] ) .'" value="' . esc_attr( $language['language'] ) . '">';
|
||||
echo '<label for="language_' . esc_attr( $language['language'] ) . '" lang="' . esc_attr( $language['iso'][1] ) . '">' . esc_html( $language['native_name'] ) . "</label>\n";
|
||||
printf( '<option value="%s" lang="%s" data-continue="%s"%s>%s</option>' . "\n",
|
||||
esc_attr( $language['language'] ),
|
||||
esc_attr( $language['iso'][1] ),
|
||||
esc_attr( $language['strings']['continue'] ),
|
||||
in_array( $language['language'], $installed_languages ) ? ' data-installed="1"' : '',
|
||||
esc_html( $language['native_name'] ) );
|
||||
}
|
||||
echo "</fieldset>\n";
|
||||
echo '<p class="step"><span class="spinner"></span><input type="submit" class="button button-primary button-hero" value="»" /></p>';
|
||||
echo "</select>\n";
|
||||
echo '<p class="step"><span class="spinner"></span><input id="language-continue" type="submit" class="button button-primary button-large" value="Continue" /></p>';
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -1,43 +1,26 @@
|
||||
(function($){
|
||||
if ( $('body').hasClass('language-chooser') === false ) {
|
||||
return;
|
||||
jQuery( function($) {
|
||||
|
||||
var select = $( '#language' ),
|
||||
submit = $( '#language-continue' );
|
||||
|
||||
if ( ! $( 'body' ).hasClass( 'language-chooser' ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
select.focus().on( 'change', function() {
|
||||
var option = select.children( 'option:selected' );
|
||||
submit.attr({
|
||||
value: option.data( 'continue' ),
|
||||
lang: option.attr( 'lang' )
|
||||
});
|
||||
});
|
||||
|
||||
$( 'form' ).submit( function() {
|
||||
// Don't show a spinner for English and installed languages,
|
||||
// as there is nothing to download.
|
||||
if ( ! select.children( 'option:selected' ).data( 'installed' ) ) {
|
||||
$( this ).find( '.step .spinner' ).css( 'visibility', 'visible' );
|
||||
}
|
||||
});
|
||||
|
||||
var mouseDown = 0,
|
||||
$fieldset = $('fieldset');
|
||||
|
||||
// simple way to check if mousebutton is depressed while accounting for multiple mouse buttons being used independently
|
||||
document.body.onmousedown = function() {
|
||||
++mouseDown;
|
||||
};
|
||||
document.body.onmouseup = function() {
|
||||
--mouseDown;
|
||||
};
|
||||
|
||||
/*
|
||||
we can't rely upon the focusout event
|
||||
since clicking on a label triggers it
|
||||
*/
|
||||
function maybeRemoveFieldsetFocus(){
|
||||
if (mouseDown) {
|
||||
setTimeout( maybeRemoveFieldsetFocus, 50);
|
||||
return;
|
||||
}
|
||||
if ( $(':focus').hasClass('language-chooser-input') !== true ) {
|
||||
$fieldset.removeClass('focus');
|
||||
}
|
||||
}
|
||||
|
||||
$fieldset.focusin( function() {
|
||||
$(this).addClass('focus');
|
||||
});
|
||||
|
||||
$fieldset.focusout( function() {
|
||||
setTimeout( maybeRemoveFieldsetFocus, 50);
|
||||
});
|
||||
|
||||
$('form').submit(function(){
|
||||
$(this).find('.step .spinner').css('visibility','visible');
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user