Make WordPress Core

Changeset 29372


Ignore:
Timestamp:
08/04/2014 08:46:42 PM (10 years ago)
Author:
nacin
Message:

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.

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/install.css

    r29325 r29372  
    9999    padding: 0;
    100100}
    101 .step .button-large {
    102     font-size: 14px;
     101.language-chooser.wp-core-ui .step .button.button-large {
     102    height: 36px;
    103103}
    104104textarea {
     
    326326}
    327327
    328 .language-chooser fieldset {
    329     margin: 1px;
     328.language-chooser select {
    330329    padding: 8px;
     330    width: 100%;
    331331    display: block;
    332332    border: 1px solid #ddd;
    333     -webkit-border-radius: 0;
    334     border-radius: 0; /* Reset mobile webkit's default element styling */
    335     -webkit-transition: .05s border-color ease-in-out;
    336     transition: .05s border-color ease-in-out;
    337     outline: 0;
    338     -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.07);
    339     box-shadow: inset 0 1px 2px rgba(0,0,0,0.07);
    340333    background-color: #fff;
    341334    color: #333;
    342335    font-size: 16px;
    343     font-family: inherit;
    344     font-weight: inherit;
    345     overflow-y: scroll;
    346     height: 250px;
    347 }
    348 
    349 .language-chooser fieldset.focus {
    350     border-color: #5b9dd9;
    351     -webkit-box-shadow: 0 0 2px rgba(30,140,190,0.8);
    352     box-shadow: 0 0 2px rgba(30,140,190,0.8);
    353 }
    354 
    355 .wp-core-ui.language-chooser .button.button-hero {
    356     font-size: 30px;
    357     line-height: 30px;
     336    font-family: Arial, sans-serif;
     337    font-weight: normal;
    358338}
    359339
    360340.language-chooser p {
    361341    text-align: right;
    362 }
    363 
    364 .language-chooser input:checked + label{
    365       color:white;
    366       background: #777;
    367 }
    368 
    369 .language-chooser .focus input:checked + label{
    370       background: #0074A2;
    371 }
    372 
    373 .language-chooser label:hover {
    374       background: #eee;
    375 }
    376 
    377 .language-chooser label{
    378     display:block;
    379342}
    380343
     
    405368.step .spinner {
    406369    display: inline-block;
     370    margin-top: 8px;
    407371    margin-right: 15px;
     372    vertical-align: top;
    408373}
    409374
  • trunk/src/wp-admin/includes/upgrade.php

    r29260 r29372  
    21942194endif;
    21952195
     2196/**
     2197 * Output the input fields for the language selection form on the installation screen.
     2198 *
     2199 * @since 4.0.0
     2200 *
     2201 * @see wp_get_available_translations_from_api()
     2202 *
     2203 * @param array $languages Array of available languages (populated via the Translations API).
     2204 */
    21962205function wp_install_language_form( $languages ) {
    2197     echo "<fieldset>\n";
    2198     echo "<legend class='screen-reader-text'>Select a default language</legend>\n";
    2199     echo '<input type="radio" checked="checked" class="screen-reader-input language-chooser-input" name="language" id="language_default" value="">';
    2200     echo '<label for="language_default" lang="en">English (United States)</label>';
     2206    $installed_languages = get_available_languages();
     2207
     2208    echo "<label class='screen-reader-text' for='language'>Select a default language</label>\n";
     2209    echo "<select size='14' name='language' id='language'>\n";
     2210    echo '<option value="" lang="en" selected="selected" data-continue="Continue" data-installed="1">English (United States)</option>';
    22012211    echo "\n";
    22022212
     
    22042214        if ( isset( $languages[ WPLANG ] ) ) {
    22052215            $language = $languages[ WPLANG ];
    2206             echo '<input type="radio" name="language" checked="checked" class="' . esc_attr( $language['language'] ) . ' screen-reader-input" id="language_wplang" value="' . esc_attr( $language['language'] ) . '">';
    2207             echo '<label for="language_wplang" lang="' . esc_attr( $language['iso'][1] ) . '">' . esc_html( $language['native_name'] ) . "</label>\n";
     2216            echo '<option value="' . esc_attr( $language['language'] ) . '" lang="' . esc_attr( $language['iso'][1] ) . '">' . esc_html( $language['native_name'] ) . "</option>\n";
    22082217        }
    22092218    }
    22102219
    22112220    foreach ( $languages as $language ) {
    2212         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'] ) . '">';
    2213         echo '<label for="language_' . esc_attr( $language['language'] ) . '" lang="' . esc_attr( $language['iso'][1] ) . '">' . esc_html( $language['native_name'] ) . "</label>\n";
    2214     }
    2215     echo "</fieldset>\n";
    2216     echo '<p class="step"><span class="spinner"></span><input type="submit" class="button button-primary button-hero" value="&raquo;" /></p>';
     2221        printf( '<option value="%s" lang="%s" data-continue="%s"%s>%s</option>' . "\n",
     2222            esc_attr( $language['language'] ),
     2223            esc_attr( $language['iso'][1] ),
     2224            esc_attr( $language['strings']['continue'] ),
     2225            in_array( $language['language'], $installed_languages ) ? ' data-installed="1"' : '',
     2226            esc_html( $language['native_name'] ) );
     2227    }
     2228    echo "</select>\n";
     2229    echo '<p class="step"><span class="spinner"></span><input id="language-continue" type="submit" class="button button-primary button-large" value="Continue" /></p>';
    22172230}
    22182231
  • trunk/src/wp-admin/js/language-chooser.js

    r29021 r29372  
    1 (function($){
    2     if ( $('body').hasClass('language-chooser') === false ) {
    3         return;
     1jQuery( function($) {
     2
     3var select = $( '#language' ),
     4    submit = $( '#language-continue' );
     5
     6if ( ! $( 'body' ).hasClass( 'language-chooser' ) ) {
     7    return;
     8}
     9
     10select.focus().on( 'change', function() {
     11    var option = select.children( 'option:selected' );
     12    submit.attr({
     13        value: option.data( 'continue' ),
     14        lang: option.attr( 'lang' )
     15    });
     16});
     17
     18$( 'form' ).submit( function() {
     19    // Don't show a spinner for English and installed languages,
     20    // as there is nothing to download.
     21    if ( ! select.children( 'option:selected' ).data( 'installed' ) ) {
     22        $( this ).find( '.step .spinner' ).css( 'visibility', 'visible' );
    423    }
     24});
    525
    6     var mouseDown = 0,
    7         $fieldset = $('fieldset');
    8 
    9     // simple way to check if mousebutton is depressed while accounting for multiple mouse buttons being used independently
    10     document.body.onmousedown = function() {
    11         ++mouseDown;
    12     };
    13     document.body.onmouseup = function() {
    14         --mouseDown;
    15     };
    16 
    17     /*
    18         we can't rely upon the focusout event
    19         since clicking on a label triggers it
    20     */
    21     function maybeRemoveFieldsetFocus(){
    22         if (mouseDown) {
    23             setTimeout( maybeRemoveFieldsetFocus, 50);
    24             return;
    25         }
    26         if ( $(':focus').hasClass('language-chooser-input') !== true ) {
    27             $fieldset.removeClass('focus');
    28         }
    29     }
    30 
    31     $fieldset.focusin( function() {
    32         $(this).addClass('focus');
    33     });
    34 
    35     $fieldset.focusout( function() {
    36         setTimeout( maybeRemoveFieldsetFocus, 50);
    37     });
    38 
    39     $('form').submit(function(){
    40         $(this).find('.step .spinner').css('visibility','visible');
    41     });
    42 
    43 })(jQuery);
     26});
Note: See TracChangeset for help on using the changeset viewer.