WordPress.org

Make WordPress Core

Changeset 26137


Ignore:
Timestamp:
11/13/13 19:37:10 (4 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.