Merge the color schemes component from MP6. Introduces Light, Blue, and Midnight.

Color scheme selection on your own profile page gives you a preview and autosaves the selection.

Also introduces the usage of a preprocessor for core files, namely Sass. For 3.8, we will not expand its implementation past the color schemes. This does require Ruby as well as Sass 3.3.0+ due to the usage of the sourcemap option.

Note that only the default color scheme is available when running out of src. Use build to test the rest as well as the color picker.

props ryelle, melchoyce, tillkruess, drw158, littlethingsstudio, helen. see #25858, #22862.


git-svn-id: https://develop.svn.wordpress.org/trunk@26137 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Helen Hou-Sandi
2013-11-13 19:37:10 +00:00
parent d4802f6c82
commit e84e1e8791
8 changed files with 311 additions and 45 deletions

View File

@@ -562,29 +562,70 @@ function saveDomDocument($doc, $filename) {
* @since 3.0.0
*/
function admin_color_scheme_picker() {
global $_wp_admin_css_colors, $user_id; ?>
<fieldset><legend class="screen-reader-text"><span><?php _e('Admin Color Scheme')?></span></legend>
<?php
$current_color = get_user_option('admin_color', $user_id);
if ( empty($current_color) )
$current_color = 'fresh';
foreach ( $_wp_admin_css_colors as $color => $color_info ): ?>
<div class="color-option"><input name="admin_color" id="admin_color_<?php echo esc_attr( $color ); ?>" type="radio" value="<?php echo esc_attr( $color ); ?>" class="tog" <?php checked($color, $current_color); ?> />
<table class="color-palette">
<tr>
<?php foreach ( $color_info->colors as $html_color ): ?>
<td style="background-color: <?php echo esc_attr( $html_color ); ?>" title="<?php echo esc_attr( $color ); ?>">&nbsp;</td>
<?php endforeach; ?>
</tr>
</table>
global $_wp_admin_css_colors, $user_id;
ksort($_wp_admin_css_colors);
$current_color = get_user_option( 'admin_color', $user_id );
if ( empty( $current_color ) || ! isset( $_wp_admin_css_colors[ $current_color ] ) )
$current_color = 'fresh';
$color_info = $_wp_admin_css_colors[ $current_color ];
?>
<fieldset id="color-picker">
<legend class="screen-reader-text"><span><?php _e( 'Admin Color Scheme' ); ?></span></legend>
<div class="picker-dropdown dropdown-current">
<div class="picker-dropdown-arrow"></div>
<label for="admin_color_<?php echo esc_attr( $current_color ); ?>"><?php echo esc_html( $color_info->name ); ?></label>
<table class="color-palette">
<tr>
<?php foreach ( $color_info->colors as $html_color ): ?>
<td style="background-color: <?php echo esc_attr( $html_color ); ?>" title="<?php echo esc_attr( $current_color ); ?>">&nbsp;</td>
<?php endforeach; ?>
</tr>
</table>
</div>
<div class="picker-dropdown dropdown-container">
<?php foreach ( $_wp_admin_css_colors as $color => $color_info ) : ?>
<div class="color-option <?php echo ( $color == $current_color ) ? 'selected' : ''; ?>">
<input name="admin_color" id="admin_color_<?php echo esc_attr( $color ); ?>" type="radio" value="<?php echo esc_attr( $color ); ?>" class="tog" <?php checked( $color, $current_color ); ?> />
<input type="hidden" class="css_url" value="<?php echo esc_url( $color_info->url ); ?>" />
<input type="hidden" class="icon_colors" value="<?php echo esc_attr( json_encode( array( 'icons' => $color_info->icon_colors ) ) ); ?>" />
<label for="admin_color_<?php echo esc_attr( $color ); ?>"><?php echo esc_html( $color_info->name ); ?></label>
<table class="color-palette">
<tr>
<?php foreach ( $color_info->colors as $html_color ): ?>
<td style="background-color: <?php echo esc_attr( $html_color ); ?>" title="<?php echo esc_attr( $color ); ?>">&nbsp;</td>
<?php endforeach; ?>
</tr>
</table>
</div>
<?php endforeach; ?>
</div>
</fieldset>
<label for="admin_color_<?php echo esc_attr( $color ); ?>"><?php echo esc_html( $color_info->name ); ?></label>
</div>
<?php endforeach; ?>
</fieldset>
<?php
}
function set_color_scheme_json() {
global $_wp_admin_css_colors;
$color_scheme = get_user_option( 'admin_color' );
if ( isset( $_wp_admin_css_colors[ $color_scheme ]->icon_colors ) ) {
echo '<script type="text/javascript">var mp6_color_scheme = ' . json_encode( array( 'icons' => $_wp_admin_css_colors[ $color_scheme ]->icon_colors ) ) . ";</script>\n";
}
}
add_action( 'admin_head', 'set_color_scheme_json' );
function _ipad_meta() {
if ( wp_is_mobile() ) {
?>