WordPress.org
Get WordPress

Make WordPress Core

Changeset 26137


Ignore:
Timestamp:
11/13/2013 07:37:10 PM (13 years ago)
Author:
helen
Message:

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.

Location:
trunk
Files:
8 edited

Legend:

Unmodified
Added
Removed

  • trunk/Gruntfile.js

    r26110 r26137  
    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: {
    … …  
    98114                                        'wp-admin/css/*-rtl.css',
    99115                                        'wp-includes/css/*-rtl.css'
     116                                ]
     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'
    100125                                ]
    101126                        }
    … …  
    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                }
    … …  
    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

  • trunk/package.json

    r26107 r26137  
    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",

  • trunk/src/wp-admin/admin-ajax.php

    r25868 r26137  
    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

  • trunk/src/wp-admin/css/wp-admin.css

    r26134 r26137  
    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;
    … …  
    56535647        margin-bottom: 0;
    56545648}
    5655 
    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 
    56705649
    56715650.form-table td fieldset label {
    … …  
    63296308#createuser .form-field input {
    63306309        width: 25em;
     6310}
     6311
     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;
    63316424}
    63326425

  • trunk/src/wp-admin/includes/ajax-actions.php

    r25868 r26137  
    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 */
     2253function 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}

  • trunk/src/wp-admin/includes/misc.php

    r25991 r26137  
    563563 */
    564564function 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>
     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
    567615<?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>
    585 <?php
    586 }
     616}
     617
     618function 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}
     627add_action( 'admin_head', 'set_color_scheme_json' );
    587628
    588629function _ipad_meta() {

  • trunk/src/wp-admin/js/user-profile.js

    r25637 r26137  
    7474                        });
    7575                }
     76
     77                var $colorpicker = $( '#color-picker' ),
     78                        $stylesheet = $( '#colors-css' ),
     79                        user_id = $( 'input#user_id' ).val(),
     80                        current_user_id = $( 'input[name="checkuser_id"]' ).val();
     81
     82                // dropdown toggle
     83                $colorpicker.on( 'click', '.dropdown-current', function() {
     84                        $colorpicker.toggleClass( 'picker-expanded' );
     85                });
     86
     87                $colorpicker.on( 'click', '.color-option', function() {
     88
     89                        var color_scheme = $( this ).children( 'input[name="admin_color"]' ).val();
     90
     91                        // update selected
     92                        $( this ).siblings( '.selected' ).removeClass( 'selected' )
     93                        $( this ).addClass( 'selected' );
     94                        $( this ).find( 'input' ).prop( 'checked', true );
     95
     96                        // update current
     97                        $colorpicker.find( '.dropdown-current label' ).html( $( this ).children( 'label' ).html() );
     98                        $colorpicker.find( '.dropdown-current table' ).html( $( this ).children( 'table' ).html() );
     99                        $colorpicker.toggleClass( 'picker-expanded' );
     100
     101                        // preview/save color scheme
     102                        if ( user_id == current_user_id ) {
     103
     104                                // repaint icons
     105                                $stylesheet.attr( 'href', $( this ).children( '.css_url' ).val() );
     106                                svgPainter.setColors( $.parseJSON( $( this ).children( '.icon_colors' ).val() ) );
     107                                svgPainter.paint();
     108
     109                                // update user option
     110                                $.post( ajaxurl, {
     111                                        action: 'save-user-color-scheme',
     112                                        color_scheme: color_scheme,
     113                                        user_id: user_id
     114                                });
     115
     116                        }
     117
     118                });
     119
    76120        });
    77121

  • trunk/src/wp-includes/general-template.php

    r26096 r26137  
    20862086 * @param string $url The url of the css file containing the colour scheme.
    20872087 * @param array $colors Optional An array of CSS color definitions which are used to give the user a feel for the theme.
    2088  */
    2089 function wp_admin_css_color($key, $name, $url, $colors = array()) {
     2088 * @param array $icons Optional An array of CSS color definitions used to color any SVG icons
     2089 */
     2090function wp_admin_css_color( $key, $name, $url, $colors = array(), $icons = array() ) {
    20902091        global $_wp_admin_css_colors;
    20912092
    … …  
    20932094                $_wp_admin_css_colors = array();
    20942095
    2095         $_wp_admin_css_colors[$key] = (object) array('name' => $name, 'url' => $url, 'colors' => $colors);
     2096        $_wp_admin_css_colors[$key] = (object) array(
     2097                'name' => $name,
     2098                'url' => $url,
     2099                'colors' => $colors,
     2100                'icon_colors' => $icons,
     2101        );
    20962102}
    20972103
    … …  
    21022108 */
    21032109function register_admin_color_schemes() {
    2104         wp_admin_css_color( 'fresh', _x( 'Default', 'admin color scheme' ), admin_url( 'css/colors-fresh.min.css' ),
    2105                 array( '#222', '#333', '#0074a2', '#2ea2cc' ) );
     2110        $suffix = SCRIPT_DEBUG ? '' : '.min';
     2111
     2112        wp_admin_css_color( 'fresh', _x( 'Default', 'admin color scheme' ),
     2113                admin_url( "css/colors-fresh$suffix.css" ),
     2114                array( '#222', '#333', '#0074a2', '#2ea2cc' )
     2115        );
     2116
     2117        // Other color schemes are not available when running out of src
     2118        if ( ! strpos( $GLOBALS['wp_version'], '-src' ) ) {
     2119                wp_admin_css_color( 'light', _x( 'Light', 'admin color scheme' ),
     2120                        admin_url( "css/color-schemes/light/colors$suffix.css" ),
     2121                        array( '#e5e5e5', '#999', '#d64e07', '#04a4cc' ),
     2122                        array( 'base' => '#999', 'focus' => '#ccc', 'current' => '#ccc' )
     2123                );
     2124
     2125                wp_admin_css_color( 'blue', _x( 'Blue', 'admin color scheme' ),
     2126                        admin_url( "css/color-schemes/blue/colors$suffix.css" ),
     2127                        array( '#096484', '#4796b3', '#52accc', '#74B6CE' ),
     2128                        array( 'base' => '#e5f8ff', 'focus' => '#fff', 'current' => '#fff' )
     2129                );
     2130
     2131                wp_admin_css_color( 'midnight', _x( 'Midnight', 'admin color scheme' ),
     2132                        admin_url( "css/color-schemes/midnight/colors$suffix.css" ),
     2133                        array( '#25282b', '#363b3f', '#69a8bb', '#e14d43' ),
     2134                        array( 'base' => '#f1f2f3', 'focus' => '#fff', 'current' => '#fff' )
     2135                );
     2136        }
    21062137}
    21072138
Note: See TracChangeset for help on using the changeset viewer.