WordPress.org

Make WordPress Core

Changeset 26137


Ignore:
Timestamp:
11/13/2013 07:37:10 PM (5 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.