From 42f2f272671093d5751a002b787e8303c6be468a Mon Sep 17 00:00:00 2001 From: Andrew Nacin Date: Mon, 4 Aug 2014 20:46:42 +0000 Subject: [PATCH] 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 --- src/wp-admin/css/install.css | 51 ++++------------------ src/wp-admin/includes/upgrade.php | 33 ++++++++++----- src/wp-admin/js/language-chooser.js | 65 +++++++++++------------------ 3 files changed, 55 insertions(+), 94 deletions(-) diff --git a/src/wp-admin/css/install.css b/src/wp-admin/css/install.css index a15260a7bb..660a4c935e 100644 --- a/src/wp-admin/css/install.css +++ b/src/wp-admin/css/install.css @@ -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; } /** diff --git a/src/wp-admin/includes/upgrade.php b/src/wp-admin/includes/upgrade.php index f5a9d7bf19..a455841106 100644 --- a/src/wp-admin/includes/upgrade.php +++ b/src/wp-admin/includes/upgrade.php @@ -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 "
\n"; - echo "Select a default language\n"; - echo ''; - echo ''; + $installed_languages = get_available_languages(); + + echo "\n"; + echo "'; - echo '\n"; + echo '\n"; } } foreach ( $languages as $language ) { - echo ''; - echo '\n"; + printf( '' . "\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 "
\n"; - echo '

'; + echo "\n"; + echo '

'; } /** diff --git a/src/wp-admin/js/language-chooser.js b/src/wp-admin/js/language-chooser.js index ab1c20394a..628b8a81fb 100644 --- a/src/wp-admin/js/language-chooser.js +++ b/src/wp-admin/js/language-chooser.js @@ -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); +});