Changeset 29372

Timestamp:

08/04/2014 08:46:42 PM (12 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:

• css/install.css (modified) (3 diffs)
• includes/upgrade.php (modified) (2 diffs)
• js/language-chooser.js (modified) (1 diff)

trunk/src/wp-admin/css/install.css

@@ -99 +99 @@
     padding: 0;
 }
-.step .button-large {
-    font-size: 14px;
+.language-chooser.wp-core-ui .step .button.button-large {
+    height: 36px;
 }
 textarea {
@@ -326 +326 @@
 }
 
-.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;
 }
 
@@ -405 +368 @@
 .step .spinner {
     display: inline-block;
+    margin-top: 8px;
     margin-right: 15px;
+    vertical-align: top;
 }
 

trunk/src/wp-admin/includes/upgrade.php

@@ -2194 +2194 @@
 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";
 
@@ -2204 +2214 @@
         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";
-    }
-    echo "</fieldset>\n";
-    echo '<p class="step"><span class="spinner"></span><input type="submit" class="button button-primary button-hero" value="&raquo;" /></p>';
+        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 "</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>';
 }
 

trunk/src/wp-admin/js/language-chooser.js

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