WordPress.org
Get WordPress

Make WordPress Core

Ticket #25858: 25858.colors.4.diff

File 25858.colors.4.diff, 14.1 KB (added by helen, 11 years ago)

  • Gruntfile.js

     
    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,
    … …  
    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: {
    … …  
    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        });
    … …  
    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

     
    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

     
    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

     
    56405640        width: auto;
    56415641}
    56425642
    5643 .form-table div.color-option {
    5644         display: block;
    5645         clear: both;
    5646         margin-top: 12px;
    5647 }
    5648 
    56495643.form-table input.tog {
    56505644        margin-top: 2px;
    56515645        margin-right: 2px;
    … …  
    56575651        margin-bottom: 0;
    56585652}
    56595653
    5660 .form-table table.color-palette {
    5661         vertical-align: bottom;
    5662         float: left;
    5663         margin: -12px 3px 11px;
    5664 }
    5665 
    5666 .form-table .color-palette td {
    5667         border-width: 1px 1px 0;
    5668         border-style: solid solid none;
    5669         height: 10px;
    5670         line-height: 20px;
    5671         width: 10px;
    5672 }
    5673 
    5674 
    56755654.form-table td fieldset label {
    56765655        margin: 0.25em 0 0.5em !important;
    56775656        display: inline-block;
    … …  
    63346313        width: 25em;
    63356314}
    63366315
     6316.picker-dropdown {
     6317        background: #fcfcfc;
     6318        border: 1px solid #dedede;
     6319        margin-right: 12%;
     6320        max-width: 270px;
     6321        position: relative;
     6322        width: auto;
     6323}
     6324
     6325.picker-dropdown.dropdown-current {
     6326        padding: 20px;
     6327        margin-bottom: 15px;
     6328        cursor: pointer;
     6329}
     6330
     6331.picker-dropdown.dropdown-container {
     6332        display: none;
     6333        position: absolute;
     6334        width: 340px;
     6335        border-top: none;
     6336        -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
     6337        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
     6338        z-index: 1;
     6339}
     6340
     6341.picker-expanded .picker-dropdown.dropdown-container {
     6342        display: block;
     6343}
     6344
     6345.picker-dropdown.dropdown-container:before,
     6346.picker-dropdown.dropdown-container:after {
     6347        content: "\0020";
     6348        display: block;
     6349        position: absolute;
     6350        top: -10px;
     6351        left: 150px;
     6352        z-index: 2;
     6353        width: 0;
     6354        height: 0;
     6355        overflow: hidden;
     6356        border: solid 11px transparent;
     6357        border-top: 0;
     6358        border-bottom-color: #fefefe;
     6359}
     6360
     6361.picker-dropdown.dropdown-container:before {
     6362        top: -11px;
     6363        z-index: 1;
     6364        border-bottom-color: #dedede;
     6365}
     6366
     6367.picker-dropdown-arrow {
     6368        position: absolute;
     6369        top: -1px;
     6370        right: -42px;
     6371        display: block;
     6372        width: 40px;
     6373        height: 100%;
     6374        background: white;
     6375        text-align: center;
     6376        border: 1px solid #dedede;
     6377        border-left-width: 0;
     6378        cursor: pointer;
     6379}
     6380
     6381.picker-dropdown-arrow:before {
     6382        font: 20px/91px dashicons;
     6383        content: '\f140';
     6384}
     6385
     6386.picker-expanded .picker-dropdown-arrow:before {
     6387        content: '\f142';
     6388}
     6389
     6390.color-option {
     6391        display: block;
     6392        padding: 20px;
     6393        border-top: 1px solid #dedede;
     6394}
     6395
     6396.color-option:hover,
     6397.color-option.selected {
     6398        background: #f2f8fa;
     6399}
     6400
     6401.color-palette {
     6402        width: 100%;
     6403        border-spacing: 0;
     6404        border-collapse: collapse;
     6405}
     6406.color-palette td {
     6407        height: 20px;
     6408        padding: 0;
     6409        border: none;
     6410}
     6411
     6412.color-option {
     6413        cursor: pointer;
     6414}
     6415
     6416.no-js .dropdown-current {
     6417        display: none;
     6418}
     6419
     6420.no-js .dropdown-container {
     6421        display: block;
     6422        position: static;
     6423}
     6424
     6425.no-js .dropdown-container:before,
     6426.no-js .dropdown-container:after {
     6427        display: none;
     6428}
     6429
    63376430/*------------------------------------------------------------------------------
    63386431  19.0 - Tools
    63396432------------------------------------------------------------------------------*/

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

     
    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 */
     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}

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

     
    562562 * @since 3.0.0
    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>
    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>
     565        global $_wp_admin_css_colors, $user_id;
     566        ksort($_wp_admin_css_colors);
    580567
    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>
     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
     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' );
     628
    588629function _ipad_meta() {
    589630        if ( wp_is_mobile() ) {
    590631                ?>

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

     
    7373                                });
    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
    78122})(jQuery);

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

     
    20852085 * @param string $name The name of the theme.
    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 * @param array $icons Optional An array of CSS color definitions used to color any SVG icons
    20882089 */
    2089 function wp_admin_css_color($key, $name, $url, $colors = array()) {
     2090function wp_admin_css_color( $key, $name, $url, $colors = array(), $icons = array() ) {
    20902091        global $_wp_admin_css_colors;
    20912092
    20922093        if ( !isset($_wp_admin_css_colors) )
    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
    20982104/**
    … …  
    21012107 * @since 3.0.0
    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
    21082139/**