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