WordPress.org
Get WordPress

Make WordPress Core

Changeset 26506


Ignore:
Timestamp:
12/01/2013 07:49:55 PM (10 years ago)
Author:
azaozz
Message:

Improve the admin color scheme picker:

  • Easier to extend.
  • Remove the "drop-down" look, show all choices inline.
  • Some PHP and JS cleanup.

Props ryelle, fixes #26336.

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

Unmodified
Added
Removed

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

    r26498 r26506  
    75207520}
    75217521
    7522 .picker-dropdown {
    7523     background: #fcfcfc;
    7524     border: 1px solid #ddd;
    7525     margin-right: 12%;
    7526     max-width: 270px;
    7527     position: relative;
    7528     width: auto;
    7529 }
    7530 
    7531 .picker-dropdown.dropdown-current {
    7532     padding: 20px;
    7533     margin-bottom: 15px;
    7534     cursor: pointer;
    7535 }
    7536 
    7537 .picker-dropdown.dropdown-container {
    7538     display: none;
    7539     position: absolute;
    7540     width: 340px;
    7541     border-top: none;
    7542     -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
    7543     box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
    7544     z-index: 1;
    7545 }
    7546 
    7547 .picker-expanded .picker-dropdown.dropdown-container {
    7548     display: block;
    7549 }
    7550 
    7551 .picker-dropdown.dropdown-container:before,
    7552 .picker-dropdown.dropdown-container:after {
    7553     content: "\0020";
    7554     display: block;
    7555     position: absolute;
    7556     top: -10px;
    7557     left: 150px;
    7558     z-index: 2;
    7559     width: 0;
    7560     height: 0;
    7561     overflow: hidden;
    7562     border: solid 11px transparent;
    7563     border-top: 0;
    7564     border-bottom-color: #fefefe;
    7565 }
    7566 
    7567 .picker-dropdown.dropdown-container:before {
    7568     top: -11px;
    7569     z-index: 1;
    7570     border-bottom-color: #ddd;
    7571 }
    7572 
    7573 .picker-dropdown-arrow {
    7574     position: absolute;
    7575     top: -1px;
    7576     right: -42px;
    7577     display: block;
    7578     width: 40px;
    7579     height: 100%;
    7580     background: white;
    7581     text-align: center;
    7582     border: 1px solid #ddd;
    7583     border-left-width: 0;
    7584     cursor: pointer;
    7585 }
    7586 
    7587 .picker-dropdown-arrow:before {
    7588     font: 20px/91px dashicons;
    7589     content: '\f140';
    7590 }
    7591 
    7592 .picker-expanded .picker-dropdown-arrow:before {
    7593     content: '\f142';
     7522.scheme-list {
     7523   
    75947524}
    75957525
    75967526.color-option {
    7597     display: block;
    7598     padding: 20px;
    7599     border-top: 1px solid #ddd;
     7527    display: inline-block;
     7528    width: 32%;
     7529    padding: 5px 15px 15px;
     7530    -moz-box-sizing: border-box;
     7531    box-sizing: border-box;
    76007532}
    76017533
    76027534.color-option:hover,
    76037535.color-option.selected {
    7604     background: #f2f8fa;
     7536    background: #ddd;
    76057537}
    76067538
    … …  
    76187550.color-option {
    76197551    cursor: pointer;
    7620 }
    7621 
    7622 .no-js .dropdown-current {
    7623     display: none;
    7624 }
    7625 
    7626 .no-js .dropdown-container {
    7627     display: block;
    7628     position: static;
    7629 }
    7630 
    7631 .no-js .dropdown-container:before,
    7632 .no-js .dropdown-container:after {
    7633     display: none;
    76347552}
    76357553
    … …  
    1313013048        overflow-x: hidden;
    1313113049    }
    13132 }
     13050
     13051    /* Color Picker Options */
     13052    .color-option {
     13053        width: 49%;
     13054    }
     13055}

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

    r26428 r26506  
    564564function admin_color_scheme_picker() {
    565565    global $_wp_admin_css_colors, $user_id;
    566     ksort($_wp_admin_css_colors);
     566
     567    ksort( $_wp_admin_css_colors );
     568
     569    if ( isset( $_wp_admin_css_colors['fresh'] ) ) {
     570        // Set 'fresh' (the default option) to be the first array element
     571        $_wp_admin_css_colors = array_merge( array( 'fresh' => '' ), $_wp_admin_css_colors );
     572    }
    567573
    568574    $current_color = get_user_option( 'admin_color', $user_id );
    569575
    570     if ( empty( $current_color ) || ! isset( $_wp_admin_css_colors[ $current_color ] ) )
     576    if ( empty( $current_color ) || ! isset( $_wp_admin_css_colors[ $current_color ] ) ) {
    571577        $current_color = 'fresh';
    572 
    573     $color_info = $_wp_admin_css_colors[ $current_color ];
    574 ?>
    575 
    576     <fieldset id="color-picker">
     578    }
     579
     580    ?>
     581    <fieldset id="color-picker" class="scheme-list">
    577582        <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 
     583        <?php
     584
     585        foreach ( $_wp_admin_css_colors as $color => $color_info ) :
     586
     587            ?>
    595588            <div class="color-option <?php echo ( $color == $current_color ) ? 'selected' : ''; ?>">
    596589                <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 ); ?> />
    … …  
    600593                <table class="color-palette">
    601594                    <tr>
    602                     <?php foreach ( $color_info->colors as $html_color ): ?>
     595                    <?php
     596
     597                    foreach ( $color_info->colors as $html_color ) {
     598                        ?>
    603599                        <td style="background-color: <?php echo esc_attr( $html_color ); ?>" title="<?php echo esc_attr( $color ); ?>">&nbsp;</td>
    604                     <?php endforeach; ?>
     600                        <?php
     601                    }
     602
     603                    ?>
    605604                    </tr>
    606605                </table>
    607606            </div>
    608 
    609         <?php endforeach; ?>
    610 
    611         </div>
    612 
     607            <?php
     608
     609        endforeach;
     610
     611    ?>
    613612    </fieldset>
    614 
    615 <?php
     613    <?php
    616614}
    617615

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

    r26266 r26506  
    8383        current_user_id = $( 'input[name="checkuser_id"]' ).val();
    8484
    85         // dropdown toggle
    86         $colorpicker.on( 'click', '.dropdown-current', function() {
    87             $colorpicker.toggleClass( 'picker-expanded' );
    88         });
     85        $colorpicker.on( 'click.colorpicker', '.color-option', function() {
     86            var $this = $(this),
     87                color_scheme = $this.children( 'input[name="admin_color"]' ).val();
    8988
    90         $colorpicker.on( 'click', '.color-option', function() {
     89            if ( $this.hasClass( 'selected' ) ) {
     90                return;
     91            }
    9192
    92             var color_scheme = $( this ).children( 'input[name="admin_color"]' ).val();
     93            $this.siblings( '.selected' ).removeClass( 'selected' );
     94            $this.addClass( 'selected' ).find( 'input[type="radio"]' ).prop( 'checked', true );
    9395
    94             // update selected
    95             $( this ).siblings( '.selected' ).removeClass( 'selected' );
    96             $( this ).addClass( 'selected' );
    97             $( this ).find( 'input' ).prop( 'checked', true );
    98 
    99             // update current
    100             $colorpicker.find( '.dropdown-current label' ).html( $( this ).children( 'label' ).html() );
    101             $colorpicker.find( '.dropdown-current table' ).html( $( this ).children( 'table' ).html() );
    102             $colorpicker.toggleClass( 'picker-expanded' );
    103 
    104             // preview/save color scheme
     96            // Set color scheme
    10597            if ( user_id === current_user_id ) {
     98                // Load the colors stylesheet
     99                $stylesheet.attr( 'href', $this.children( '.css_url' ).val() );
    106100
    107101                // repaint icons
    108                 $stylesheet.attr( 'href', $( this ).children( '.css_url' ).val() );
    109                 svgPainter.setColors( $.parseJSON( $( this ).children( '.icon_colors' ).val() ) );
    110                 svgPainter.paint();
     102                if ( typeof window.svgPainter !== 'undefined' ) {
     103                    svgPainter.setColors( $.parseJSON( $this.children( '.icon_colors' ).val() ) );
     104                    svgPainter.paint();
     105                }
    111106
    112107                // update user option
    … …  
    116111                    user_id: user_id
    117112                });
    118 
    119113            }
    120 
    121114        });
    122 
    123115    });
    124116
Note: See TracChangeset for help on using the changeset viewer.