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.

Built from https://develop.svn.wordpress.org/trunk@26137


git-svn-id: http://core.svn.wordpress.org/trunk@26048 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Helen Hou-Sandí 2013-11-13 19:38:38 +00:00
parent 5d32b45b79
commit 603c1aff6d
10 changed files with 395 additions and 68 deletions

View File

@ -58,6 +58,7 @@ $core_actions_post = array(
'wp-remove-post-lock', 'dismiss-wp-pointer', 'upload-attachment', 'get-attachment',
'query-attachments', 'save-attachment', 'save-attachment-compat', 'send-link-to-editor',
'send-attachment-to-editor', 'save-attachment-order', 'heartbeat', 'get-revision-diffs',
'save-user-color-scheme',
);
// Register core Ajax calls.

View File

@ -5636,12 +5636,6 @@ span.imgedit-scale-warn {
width: auto;
}
.form-table div.color-option {
display: block;
clear: both;
margin-top: 12px;
}
.form-table input.tog {
margin-top: 2px;
margin-left: 2px;
@ -5653,21 +5647,6 @@ span.imgedit-scale-warn {
margin-bottom: 0;
}
.form-table table.color-palette {
vertical-align: bottom;
float: right;
margin: -12px 3px 11px;
}
.form-table .color-palette td {
border-width: 1px 1px 0;
border-style: solid solid none;
height: 10px;
line-height: 20px;
width: 10px;
}
.form-table td fieldset label {
margin: 0.25em 0 0.5em !important;
display: inline-block;
@ -6330,6 +6309,120 @@ h2 .nav-tab {
width: 25em;
}
.picker-dropdown {
background: #fcfcfc;
border: 1px solid #dedede;
margin-left: 12%;
max-width: 270px;
position: relative;
width: auto;
}
.picker-dropdown.dropdown-current {
padding: 20px;
margin-bottom: 15px;
cursor: pointer;
}
.picker-dropdown.dropdown-container {
display: none;
position: absolute;
width: 340px;
border-top: none;
-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.picker-expanded .picker-dropdown.dropdown-container {
display: block;
}
.picker-dropdown.dropdown-container:before,
.picker-dropdown.dropdown-container:after {
content: "\0020";
display: block;
position: absolute;
top: -10px;
right: 150px;
z-index: 2;
width: 0;
height: 0;
overflow: hidden;
border: solid 11px transparent;
border-top: 0;
border-bottom-color: #fefefe;
}
.picker-dropdown.dropdown-container:before {
top: -11px;
z-index: 1;
border-bottom-color: #dedede;
}
.picker-dropdown-arrow {
position: absolute;
top: -1px;
left: -42px;
display: block;
width: 40px;
height: 100%;
background: white;
text-align: center;
border: 1px solid #dedede;
border-right-width: 0;
cursor: pointer;
}
.picker-dropdown-arrow:before {
font: 20px/91px dashicons;
content: '\f140';
}
.picker-expanded .picker-dropdown-arrow:before {
content: '\f142';
}
.color-option {
display: block;
padding: 20px;
border-top: 1px solid #dedede;
}
.color-option:hover,
.color-option.selected {
background: #f2f8fa;
}
.color-palette {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
.color-palette td {
height: 20px;
padding: 0;
border: none;
}
.color-option {
cursor: pointer;
}
.no-js .dropdown-current {
display: none;
}
.no-js .dropdown-container {
display: block;
position: static;
}
.no-js .dropdown-container:before,
.no-js .dropdown-container:after {
display: none;
}
/*------------------------------------------------------------------------------
19.0 - Tools
------------------------------------------------------------------------------*/

File diff suppressed because one or more lines are too long

View File

@ -5636,12 +5636,6 @@ span.imgedit-scale-warn {
width: auto;
}
.form-table div.color-option {
display: block;
clear: both;
margin-top: 12px;
}
.form-table input.tog {
margin-top: 2px;
margin-right: 2px;
@ -5653,21 +5647,6 @@ span.imgedit-scale-warn {
margin-bottom: 0;
}
.form-table table.color-palette {
vertical-align: bottom;
float: left;
margin: -12px 3px 11px;
}
.form-table .color-palette td {
border-width: 1px 1px 0;
border-style: solid solid none;
height: 10px;
line-height: 20px;
width: 10px;
}
.form-table td fieldset label {
margin: 0.25em 0 0.5em !important;
display: inline-block;
@ -6330,6 +6309,120 @@ h2 .nav-tab {
width: 25em;
}
.picker-dropdown {
background: #fcfcfc;
border: 1px solid #dedede;
margin-right: 12%;
max-width: 270px;
position: relative;
width: auto;
}
.picker-dropdown.dropdown-current {
padding: 20px;
margin-bottom: 15px;
cursor: pointer;
}
.picker-dropdown.dropdown-container {
display: none;
position: absolute;
width: 340px;
border-top: none;
-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.picker-expanded .picker-dropdown.dropdown-container {
display: block;
}
.picker-dropdown.dropdown-container:before,
.picker-dropdown.dropdown-container:after {
content: "\0020";
display: block;
position: absolute;
top: -10px;
left: 150px;
z-index: 2;
width: 0;
height: 0;
overflow: hidden;
border: solid 11px transparent;
border-top: 0;
border-bottom-color: #fefefe;
}
.picker-dropdown.dropdown-container:before {
top: -11px;
z-index: 1;
border-bottom-color: #dedede;
}
.picker-dropdown-arrow {
position: absolute;
top: -1px;
right: -42px;
display: block;
width: 40px;
height: 100%;
background: white;
text-align: center;
border: 1px solid #dedede;
border-left-width: 0;
cursor: pointer;
}
.picker-dropdown-arrow:before {
font: 20px/91px dashicons;
content: '\f140';
}
.picker-expanded .picker-dropdown-arrow:before {
content: '\f142';
}
.color-option {
display: block;
padding: 20px;
border-top: 1px solid #dedede;
}
.color-option:hover,
.color-option.selected {
background: #f2f8fa;
}
.color-palette {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
.color-palette td {
height: 20px;
padding: 0;
border: none;
}
.color-option {
cursor: pointer;
}
.no-js .dropdown-current {
display: none;
}
.no-js .dropdown-container {
display: block;
position: static;
}
.no-js .dropdown-container:before,
.no-js .dropdown-container:after {
display: none;
}
/*------------------------------------------------------------------------------
19.0 - Tools
------------------------------------------------------------------------------*/

File diff suppressed because one or more lines are too long

View File

@ -2244,3 +2244,27 @@ function wp_ajax_get_revision_diffs() {
}
wp_send_json_success( $return );
}
/**
* Auto-save the selected color scheme for a user's own profile.
*
* @since 3.8.0
*/
function wp_ajax_save_user_color_scheme() {
global $_wp_admin_css_colors;
$user_id = intval( $_POST['user_id'] );
$color_scheme = sanitize_key( $_POST['color_scheme'] );
if ( get_current_user_id() !== $user_id )
wp_send_json_error();
if ( ! get_user_by( 'id', $user_id ) )
wp_send_json_error();
if ( ! isset( $_wp_admin_css_colors[ $color_scheme ] ) )
wp_send_json_error();
update_user_option( $user_id, 'admin_color', $color_scheme, true );
wp_send_json_success();
}

View File

@ -562,14 +562,41 @@ 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
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) )
if ( empty( $current_color ) || ! isset( $_wp_admin_css_colors[ $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); ?> />
$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 ): ?>
@ -577,14 +604,28 @@ foreach ( $_wp_admin_css_colors as $color => $color_info ): ?>
<?php endforeach; ?>
</tr>
</table>
<label for="admin_color_<?php echo esc_attr( $color ); ?>"><?php echo esc_html( $color_info->name ); ?></label>
</div>
<?php endforeach; ?>
</div>
</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() ) {
?>

View File

@ -73,6 +73,50 @@
});
});
}
var $colorpicker = $( '#color-picker' ),
$stylesheet = $( '#colors-css' ),
user_id = $( 'input#user_id' ).val(),
current_user_id = $( 'input[name="checkuser_id"]' ).val();
// dropdown toggle
$colorpicker.on( 'click', '.dropdown-current', function() {
$colorpicker.toggleClass( 'picker-expanded' );
});
$colorpicker.on( 'click', '.color-option', function() {
var color_scheme = $( this ).children( 'input[name="admin_color"]' ).val();
// update selected
$( this ).siblings( '.selected' ).removeClass( 'selected' )
$( this ).addClass( 'selected' );
$( this ).find( 'input' ).prop( 'checked', true );
// update current
$colorpicker.find( '.dropdown-current label' ).html( $( this ).children( 'label' ).html() );
$colorpicker.find( '.dropdown-current table' ).html( $( this ).children( 'table' ).html() );
$colorpicker.toggleClass( 'picker-expanded' );
// preview/save color scheme
if ( user_id == current_user_id ) {
// repaint icons
$stylesheet.attr( 'href', $( this ).children( '.css_url' ).val() );
svgPainter.setColors( $.parseJSON( $( this ).children( '.icon_colors' ).val() ) );
svgPainter.paint();
// update user option
$.post( ajaxurl, {
action: 'save-user-color-scheme',
color_scheme: color_scheme,
user_id: user_id
});
}
});
});
})(jQuery);

View File

@ -1 +1 @@
!function(a){function b(){var b,c=a("#pass1").val(),d=(a("#user_login").val(),a("#pass2").val());if(a("#pass-strength-result").removeClass("short bad good strong"),!c)return a("#pass-strength-result").html(pwsL10n.empty),void 0;switch(b=wp.passwordStrength.meter(c,wp.passwordStrength.userInputBlacklist(),d)){case 2:a("#pass-strength-result").addClass("bad").html(pwsL10n.bad);break;case 3:a("#pass-strength-result").addClass("good").html(pwsL10n.good);break;case 4:a("#pass-strength-result").addClass("strong").html(pwsL10n.strong);break;case 5:a("#pass-strength-result").addClass("short").html(pwsL10n.mismatch);break;default:a("#pass-strength-result").addClass("short").html(pwsL10n["short"])}}a(document).ready(function(){var c=a("#display_name");a("#pass1").val("").keyup(b),a("#pass2").val("").keyup(b),a("#pass-strength-result").show(),a(".color-palette").click(function(){a(this).siblings('input[name="admin_color"]').prop("checked",!0)}),c.length&&a("#first_name, #last_name, #nickname").bind("blur.user_profile",function(){var b=[],d={display_nickname:a("#nickname").val()||"",display_username:a("#user_login").val()||"",display_firstname:a("#first_name").val()||"",display_lastname:a("#last_name").val()||""};d.display_firstname&&d.display_lastname&&(d.display_firstlast=d.display_firstname+" "+d.display_lastname,d.display_lastfirst=d.display_lastname+" "+d.display_firstname),a.each(a("option",c),function(a,c){b.push(c.value)}),a.each(d,function(e,f){if(f){var g=f.replace(/<\/?[a-z][^>]*>/gi,"");d[e].length&&-1==a.inArray(g,b)&&(b.push(g),a("<option />",{text:g}).appendTo(c))}})})})}(jQuery);
!function(a){function b(){var b,c=a("#pass1").val(),d=(a("#user_login").val(),a("#pass2").val());if(a("#pass-strength-result").removeClass("short bad good strong"),!c)return a("#pass-strength-result").html(pwsL10n.empty),void 0;switch(b=wp.passwordStrength.meter(c,wp.passwordStrength.userInputBlacklist(),d)){case 2:a("#pass-strength-result").addClass("bad").html(pwsL10n.bad);break;case 3:a("#pass-strength-result").addClass("good").html(pwsL10n.good);break;case 4:a("#pass-strength-result").addClass("strong").html(pwsL10n.strong);break;case 5:a("#pass-strength-result").addClass("short").html(pwsL10n.mismatch);break;default:a("#pass-strength-result").addClass("short").html(pwsL10n["short"])}}a(document).ready(function(){var c=a("#display_name");a("#pass1").val("").keyup(b),a("#pass2").val("").keyup(b),a("#pass-strength-result").show(),a(".color-palette").click(function(){a(this).siblings('input[name="admin_color"]').prop("checked",!0)}),c.length&&a("#first_name, #last_name, #nickname").bind("blur.user_profile",function(){var b=[],d={display_nickname:a("#nickname").val()||"",display_username:a("#user_login").val()||"",display_firstname:a("#first_name").val()||"",display_lastname:a("#last_name").val()||""};d.display_firstname&&d.display_lastname&&(d.display_firstlast=d.display_firstname+" "+d.display_lastname,d.display_lastfirst=d.display_lastname+" "+d.display_firstname),a.each(a("option",c),function(a,c){b.push(c.value)}),a.each(d,function(e,f){if(f){var g=f.replace(/<\/?[a-z][^>]*>/gi,"");d[e].length&&-1==a.inArray(g,b)&&(b.push(g),a("<option />",{text:g}).appendTo(c))}})});var d=a("#color-picker"),e=a("#colors-css"),f=a("input#user_id").val(),g=a('input[name="checkuser_id"]').val();d.on("click",".dropdown-current",function(){d.toggleClass("picker-expanded")}),d.on("click",".color-option",function(){var b=a(this).children('input[name="admin_color"]').val();a(this).siblings(".selected").removeClass("selected"),a(this).addClass("selected"),a(this).find("input").prop("checked",!0),d.find(".dropdown-current label").html(a(this).children("label").html()),d.find(".dropdown-current table").html(a(this).children("table").html()),d.toggleClass("picker-expanded"),f==g&&(e.attr("href",a(this).children(".css_url").val()),svgPainter.setColors(a.parseJSON(a(this).children(".icon_colors").val())),svgPainter.paint(),a.post(ajaxurl,{action:"save-user-color-scheme",color_scheme:b,user_id:f}))})})}(jQuery);

View File

@ -2085,14 +2085,20 @@ function paginate_links( $args = '' ) {
* @param string $name The name of the theme.
* @param string $url The url of the css file containing the colour scheme.
* @param array $colors Optional An array of CSS color definitions which are used to give the user a feel for the theme.
* @param array $icons Optional An array of CSS color definitions used to color any SVG icons
*/
function wp_admin_css_color($key, $name, $url, $colors = array()) {
function wp_admin_css_color( $key, $name, $url, $colors = array(), $icons = array() ) {
global $_wp_admin_css_colors;
if ( !isset($_wp_admin_css_colors) )
$_wp_admin_css_colors = array();
$_wp_admin_css_colors[$key] = (object) array('name' => $name, 'url' => $url, 'colors' => $colors);
$_wp_admin_css_colors[$key] = (object) array(
'name' => $name,
'url' => $url,
'colors' => $colors,
'icon_colors' => $icons,
);
}
/**
@ -2101,8 +2107,33 @@ function wp_admin_css_color($key, $name, $url, $colors = array()) {
* @since 3.0.0
*/
function register_admin_color_schemes() {
wp_admin_css_color( 'fresh', _x( 'Default', 'admin color scheme' ), admin_url( 'css/colors-fresh.min.css' ),
array( '#222', '#333', '#0074a2', '#2ea2cc' ) );
$suffix = SCRIPT_DEBUG ? '' : '.min';
wp_admin_css_color( 'fresh', _x( 'Default', 'admin color scheme' ),
admin_url( "css/colors-fresh$suffix.css" ),
array( '#222', '#333', '#0074a2', '#2ea2cc' )
);
// Other color schemes are not available when running out of src
if ( ! strpos( $GLOBALS['wp_version'], '-src' ) ) {
wp_admin_css_color( 'light', _x( 'Light', 'admin color scheme' ),
admin_url( "css/color-schemes/light/colors$suffix.css" ),
array( '#e5e5e5', '#999', '#d64e07', '#04a4cc' ),
array( 'base' => '#999', 'focus' => '#ccc', 'current' => '#ccc' )
);
wp_admin_css_color( 'blue', _x( 'Blue', 'admin color scheme' ),
admin_url( "css/color-schemes/blue/colors$suffix.css" ),
array( '#096484', '#4796b3', '#52accc', '#74B6CE' ),
array( 'base' => '#e5f8ff', 'focus' => '#fff', 'current' => '#fff' )
);
wp_admin_css_color( 'midnight', _x( 'Midnight', 'admin color scheme' ),
admin_url( "css/color-schemes/midnight/colors$suffix.css" ),
array( '#25282b', '#363b3f', '#69a8bb', '#e14d43' ),
array( 'base' => '#f1f2f3', 'focus' => '#fff', 'current' => '#fff' )
);
}
}
/**