sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

First pass at switching to radio inputs for the install screen language selector. Needs some more work. See #28577. Props jorbin 

git-svn-id: https://develop.svn.wordpress.org/trunk@28983 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
John Blackbourn 2014-07-03 22:53:01 +00:00
parent 35578f8f9a
commit db8b7380b2
2 changed files with 38 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/wp-admin/css/install.css
View File

@ -316,10 +316,9 @@ body.language-chooser {
max-width: 450px; max-width: 450px;
} }
.language-chooser select { .language-chooser fieldset {
margin: 1px; margin: 1px;
padding: 8px; padding: 8px;
width: 100%;
display: block; display: block;
border: 1px solid #ddd; border: 1px solid #ddd;
-webkit-border-radius: 0; -webkit-border-radius: 0;
@ -334,9 +333,12 @@ body.language-chooser {
font-size: 16px; font-size: 16px;
font-family: inherit; font-family: inherit;
font-weight: inherit; font-weight: inherit;
overflow-y: scroll;
height: 250px;
} }
.language-chooser select:focus { /* TODO:add focus style via JS */
.language-chooser fieldset.focus {
border-color: #5b9dd9; border-color: #5b9dd9;
-webkit-box-shadow: 0 0 2px rgba(30,140,190,0.8); -webkit-box-shadow: 0 0 2px rgba(30,140,190,0.8);
box-shadow: 0 0 2px rgba(30,140,190,0.8); box-shadow: 0 0 2px rgba(30,140,190,0.8);
@ -350,3 +352,24 @@ body.language-chooser {
.language-chooser p { .language-chooser p {
text-align: right; text-align: right;
} }
.language-chooser input:checked + label{
color:white;
background: #0074A2;
}
.language-chooser label{
display:block;
}
.screen-reader-input,
.screen-reader-text {
position: absolute;
margin: -1px;
padding: 0;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}

17
src/wp-admin/install.php
View File

@ -203,14 +203,19 @@ switch($step) {
$body = wp_get_available_translations(); $body = wp_get_available_translations();
if ( $body ) { if ( $body ) {
display_header( 'language-chooser' ); display_header( 'language-chooser' );
echo '<form id="setup" method="post" action="install.php?step=1">'; echo '<form id="setup" method="post" action="install.php?step=1">';
echo '<select name="language" id="language-chooser" size="15">'; echo "<fieldset>\n";
echo '<option selected="selected" value="">English (United States)</option>'; echo "<legend class='screen-reader-text'>Select a default language</legend>\n";
echo '<input type="radio" checked="checked" class="screen-reader-input" name="language" id="language_default" value="">';
echo '<label for="language_default">English (United States)</label>';
echo "\n";
foreach ( $body['languages'] as $language ) { foreach ( $body['languages'] as $language ) {
echo '<option value="' . esc_attr( $language['language'] ) . '">' . esc_html( $language['native_name'] ) . "</option>\n"; echo '<input type="radio" name="language" class="' . esc_attr( $language['language'] ) . ' screen-reader-input" id="language_'. esc_attr( $language['language'] ) .'" value="' . esc_attr( $language['language'] ) . '">';
echo '<label for="language_' . esc_attr( $language['language'] ) . '">' . esc_html( $language['native_name'] ) . "</label>\n";
} }
echo "</select>\n";
echo "</fieldset>\n";
echo '<p class="step"><input type="submit" class="button button-primary button-hero" value="&raquo;" /></p>'; echo '<p class="step"><input type="submit" class="button button-primary button-hero" value="&raquo;" /></p>';
echo '</form>'; echo '</form>';
break; break;
@ -334,7 +339,7 @@ switch($step) {
} }
if ( !wp_is_mobile() ) { if ( !wp_is_mobile() ) {
?> ?>
<script type="text/javascript">var t = document.getElementById('weblog_title') || document.getElementById('language-chooser'); if (t){ t.focus(); }</script> <script type="text/javascript">var t = document.getElementById('weblog_title'); if (t){ t.focus(); }</script>
<?php } ?> <?php } ?>
<?php wp_print_scripts( 'user-profile' ); ?> <?php wp_print_scripts( 'user-profile' ); ?>
</body> </body>