Skip to content

Commit e84e1e8

Browse files
helenhelen
committed
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
1 parent d4802f6 commit e84e1e8

8 files changed

Lines changed: 312 additions & 46 deletions

File tree

‎Gruntfile.js‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,22 @@ module.exports = function(grunt) {
7676
}
7777
}
7878
},
79+
sass: {
80+
colors: {
81+
options: {
82+
style: 'expanded',
83+
sourcemap: true,
84+
noCache: true
85+
},
86+
files : [{
87+
expand: true,
88+
cwd: SOURCE_DIR,
89+
dest: BUILD_DIR,
90+
ext: '.css',
91+
src: ['wp-admin/css/color-schemes/*/colors.scss']
92+
}]
93+
}
94+
},
7995
cssmin: {
8096
core: {
8197
expand: true,
@@ -98,6 +114,15 @@ module.exports = function(grunt) {
98114
'wp-admin/css/*-rtl.css',
99115
'wp-includes/css/*-rtl.css'
100116
]
117+
},
118+
colors: {
119+
expand: true,
120+
cwd: BUILD_DIR,
121+
dest: BUILD_DIR,
122+
ext: '.min.css',
123+
src: [
124+
'wp-admin/css/color-schemes/**/*.css'
125+
]
101126
}
102127
},
103128
cssjanus: {
@@ -316,6 +341,10 @@ module.exports = function(grunt) {
316341
test: {
317342
files: ['tests/qunit/**'],
318343
tasks: ['qunit']
344+
},
345+
colors: {
346+
files: [SOURCE_DIR + 'wp-admin/css/color-schemes/**'],
347+
tasks: ['sass:colors']
319348
}
320349
}
321350
});
@@ -328,8 +357,10 @@ module.exports = function(grunt) {
328357
// RTL task.
329358
grunt.registerTask('rtl', ['cssjanus:core']);
330359

360+
grunt.registerTask('colors', ['sass:colors', 'cssmin:colors']);
361+
331362
// Build task.
332-
grunt.registerTask('build', ['clean:all', 'copy:all', 'rtl', 'cssmin:core', 'cssmin:rtl',
363+
grunt.registerTask('build', ['clean:all', 'copy:all', 'rtl', 'colors', 'cssmin:core', 'cssmin:rtl',
333364
'uglify:core', 'uglify:tinymce', 'concat:tinymce', 'compress:tinymce', 'clean:tinymce']);
334365

335366
// Testing tasks.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"grunt-contrib-clean": "~0.5.0",
1414
"grunt-contrib-copy": "~0.4.1",
1515
"grunt-contrib-cssmin": "~0.6.1",
16+
"grunt-contrib-sass": "~0.5.0",
1617
"grunt-contrib-qunit": "~0.2.2",
1718
"grunt-contrib-uglify": "~0.2.2",
1819
"grunt-contrib-watch": "~0.5.1",

‎src/wp-admin/admin-ajax.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
'wp-remove-post-lock', 'dismiss-wp-pointer', 'upload-attachment', 'get-attachment',
5959
'query-attachments', 'save-attachment', 'save-attachment-compat', 'send-link-to-editor',
6060
'send-attachment-to-editor', 'save-attachment-order', 'heartbeat', 'get-revision-diffs',
61+
'save-user-color-scheme',
6162
);
6263

6364
// Register core Ajax calls.

‎src/wp-admin/css/wp-admin.css‎

Lines changed: 114 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5636,12 +5636,6 @@ span.imgedit-scale-warn {
56365636
width: auto;
56375637
}
56385638

5639-
.form-table div.color-option {
5640-
display: block;
5641-
clear: both;
5642-
margin-top: 12px;
5643-
}
5644-
56455639
.form-table input.tog {
56465640
margin-top: 2px;
56475641
margin-right: 2px;
@@ -5653,21 +5647,6 @@ span.imgedit-scale-warn {
56535647
margin-bottom: 0;
56545648
}
56555649

5656-
.form-table table.color-palette {
5657-
vertical-align: bottom;
5658-
float: left;
5659-
margin: -12px 3px 11px;
5660-
}
5661-
5662-
.form-table .color-palette td {
5663-
border-width: 1px 1px 0;
5664-
border-style: solid solid none;
5665-
height: 10px;
5666-
line-height: 20px;
5667-
width: 10px;
5668-
}
5669-
5670-
56715650
.form-table td fieldset label {
56725651
margin: 0.25em 0 0.5em !important;
56735652
display: inline-block;
@@ -6330,6 +6309,120 @@ h2 .nav-tab {
63306309
width: 25em;
63316310
}
63326311

6312+
.picker-dropdown {
6313+
background: #fcfcfc;
6314+
border: 1px solid #dedede;
6315+
margin-right: 12%;
6316+
max-width: 270px;
6317+
position: relative;
6318+
width: auto;
6319+
}
6320+
6321+
.picker-dropdown.dropdown-current {
6322+
padding: 20px;
6323+
margin-bottom: 15px;
6324+
cursor: pointer;
6325+
}
6326+
6327+
.picker-dropdown.dropdown-container {
6328+
display: none;
6329+
position: absolute;
6330+
width: 340px;
6331+
border-top: none;
6332+
-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
6333+
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
6334+
z-index: 1;
6335+
}
6336+
6337+
.picker-expanded .picker-dropdown.dropdown-container {
6338+
display: block;
6339+
}
6340+
6341+
.picker-dropdown.dropdown-container:before,
6342+
.picker-dropdown.dropdown-container:after {
6343+
content: "\0020";
6344+
display: block;
6345+
position: absolute;
6346+
top: -10px;
6347+
left: 150px;
6348+
z-index: 2;
6349+
width: 0;
6350+
height: 0;
6351+
overflow: hidden;
6352+
border: solid 11px transparent;
6353+
border-top: 0;
6354+
border-bottom-color: #fefefe;
6355+
}
6356+
6357+
.picker-dropdown.dropdown-container:before {
6358+
top: -11px;
6359+
z-index: 1;
6360+
border-bottom-color: #dedede;
6361+
}
6362+
6363+
.picker-dropdown-arrow {
6364+
position: absolute;
6365+
top: -1px;
6366+
right: -42px;
6367+
display: block;
6368+
width: 40px;
6369+
height: 100%;
6370+
background: white;
6371+
text-align: center;
6372+
border: 1px solid #dedede;
6373+
border-left-width: 0;
6374+
cursor: pointer;
6375+
}
6376+
6377+
.picker-dropdown-arrow:before {
6378+
font: 20px/91px dashicons;
6379+
content: '\f140';
6380+
}
6381+
6382+
.picker-expanded .picker-dropdown-arrow:before {
6383+
content: '\f142';
6384+
}
6385+
6386+
.color-option {
6387+
display: block;
6388+
padding: 20px;
6389+
border-top: 1px solid #dedede;
6390+
}
6391+
6392+
.color-option:hover,
6393+
.color-option.selected {
6394+
background: #f2f8fa;
6395+
}
6396+
6397+
.color-palette {
6398+
width: 100%;
6399+
border-spacing: 0;
6400+
border-collapse: collapse;
6401+
}
6402+
.color-palette td {
6403+
height: 20px;
6404+
padding: 0;
6405+
border: none;
6406+
}
6407+
6408+
.color-option {
6409+
cursor: pointer;
6410+
}
6411+
6412+
.no-js .dropdown-current {
6413+
display: none;
6414+
}
6415+
6416+
.no-js .dropdown-container {
6417+
display: block;
6418+
position: static;
6419+
}
6420+
6421+
.no-js .dropdown-container:before,
6422+
.no-js .dropdown-container:after {
6423+
display: none;
6424+
}
6425+
63336426
/*------------------------------------------------------------------------------
63346427
19.0 - Tools
63356428
------------------------------------------------------------------------------*/

‎src/wp-admin/includes/ajax-actions.php‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2244,3 +2244,27 @@ function wp_ajax_get_revision_diffs() {
22442244
}
22452245
wp_send_json_success( $return );
22462246
}
2247+
2248+
/**
2249+
* Auto-save the selected color scheme for a user's own profile.
2250+
*
2251+
* @since 3.8.0
2252+
*/
2253+
function wp_ajax_save_user_color_scheme() {
2254+
global $_wp_admin_css_colors;
2255+
2256+
$user_id = intval( $_POST['user_id'] );
2257+
$color_scheme = sanitize_key( $_POST['color_scheme'] );
2258+
2259+
if ( get_current_user_id() !== $user_id )
2260+
wp_send_json_error();
2261+
2262+
if ( ! get_user_by( 'id', $user_id ) )
2263+
wp_send_json_error();
2264+
2265+
if ( ! isset( $_wp_admin_css_colors[ $color_scheme ] ) )
2266+
wp_send_json_error();
2267+
2268+
update_user_option( $user_id, 'admin_color', $color_scheme, true );
2269+
wp_send_json_success();
2270+
}

‎src/wp-admin/includes/misc.php‎

Lines changed: 61 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -562,29 +562,70 @@ function saveDomDocument($doc, $filename) {
562562
* @since 3.0.0
563563
*/
564564
function admin_color_scheme_picker() {
565-
global $_wp_admin_css_colors, $user_id; ?>
566-
<fieldset><legend class="screen-reader-text"><span><?php _e('Admin Color Scheme')?></span></legend>
567-
<?php
568-
$current_color = get_user_option('admin_color', $user_id);
569-
if ( empty($current_color) )
570-
$current_color = 'fresh';
571-
foreach ( $_wp_admin_css_colors as $color => $color_info ): ?>
572-
<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); ?> />
573-
<table class="color-palette">
574-
<tr>
575-
<?php foreach ( $color_info->colors as $html_color ): ?>
576-
<td style="background-color: <?php echo esc_attr( $html_color ); ?>" title="<?php echo esc_attr( $color ); ?>">&nbsp;</td>
577-
<?php endforeach; ?>
578-
</tr>
579-
</table>
580-
581-
<label for="admin_color_<?php echo esc_attr( $color ); ?>"><?php echo esc_html( $color_info->name ); ?></label>
582-
</div>
583-
<?php endforeach; ?>
584-
</fieldset>
565+
global $_wp_admin_css_colors, $user_id;
566+
ksort($_wp_admin_css_colors);
567+
568+
$current_color = get_user_option( 'admin_color', $user_id );
569+
570+
if ( empty( $current_color ) || ! isset( $_wp_admin_css_colors[ $current_color ] ) )
571+
$current_color = 'fresh';
572+
573+
$color_info = $_wp_admin_css_colors[ $current_color ];
574+
?>
575+
576+
<fieldset id="color-picker">
577+
<legend class="screen-reader-text"><span><?php _e( 'Admin Color Scheme' ); ?></span></legend>
578+
579+
<div class="picker-dropdown dropdown-current">
580+
<div class="picker-dropdown-arrow"></div>
581+
<label for="admin_color_<?php echo esc_attr( $current_color ); ?>"><?php echo esc_html( $color_info->name ); ?></label>
582+
<table class="color-palette">
583+
<tr>
584+
<?php foreach ( $color_info->colors as $html_color ): ?>
585+
<td style="background-color: <?php echo esc_attr( $html_color ); ?>" title="<?php echo esc_attr( $current_color ); ?>">&nbsp;</td>
586+
<?php endforeach; ?>
587+
</tr>
588+
</table>
589+
</div>
590+
591+
<div class="picker-dropdown dropdown-container">
592+
593+
<?php foreach ( $_wp_admin_css_colors as $color => $color_info ) : ?>
594+
595+
<div class="color-option <?php echo ( $color == $current_color ) ? 'selected' : ''; ?>">
596+
<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 ); ?> />
597+
<input type="hidden" class="css_url" value="<?php echo esc_url( $color_info->url ); ?>" />
598+
<input type="hidden" class="icon_colors" value="<?php echo esc_attr( json_encode( array( 'icons' => $color_info->icon_colors ) ) ); ?>" />
599+
<label for="admin_color_<?php echo esc_attr( $color ); ?>"><?php echo esc_html( $color_info->name ); ?></label>
600+
<table class="color-palette">
601+
<tr>
602+
<?php foreach ( $color_info->colors as $html_color ): ?>
603+
<td style="background-color: <?php echo esc_attr( $html_color ); ?>" title="<?php echo esc_attr( $color ); ?>">&nbsp;</td>
604+
<?php endforeach; ?>
605+
</tr>
606+
</table>
607+
</div>
608+
609+
<?php endforeach; ?>
610+
611+
</div>
612+
613+
</fieldset>
614+
585615
<?php
586616
}
587617

618+
function set_color_scheme_json() {
619+
global $_wp_admin_css_colors;
620+
621+
$color_scheme = get_user_option( 'admin_color' );
622+
623+
if ( isset( $_wp_admin_css_colors[ $color_scheme ]->icon_colors ) ) {
624+
echo '<script type="text/javascript">var mp6_color_scheme = ' . json_encode( array( 'icons' => $_wp_admin_css_colors[ $color_scheme ]->icon_colors ) ) . ";</script>\n";
625+
}
626+
}
627+
add_action( 'admin_head', 'set_color_scheme_json' );
628+
588629
function _ipad_meta() {
589630
if ( wp_is_mobile() ) {
590631
?>

0 commit comments

Comments
 (0)