WordPress.org
Get WordPress

Make WordPress Core

Ticket #39662: 39662.diff

File 39662.diff, 9.2 KB (added by afercia, 9 years ago)

  • src/wp-admin/css/color-picker.css

     
    66        display: none;
    77}
    88
    9 .wp-color-result {
    10         background-color: #f7f7f7;
    11         border: 1px solid #ccc;
    12         -webkit-border-radius: 3px;
    13         border-radius: 3px;
    14         cursor: pointer;
    15         display: inline-block;
    16         height: 22px;
     9/* Needs higher specificiity. */
     10.wp-picker-container .wp-color-result {
     11        height: 24px;
    1712        margin: 0 6px 6px 0px;
    18         position: relative;
    19         top: 1px;
    20         -webkit-user-select: none;
    21         -moz-user-select: none;
    22         -ms-user-select: none;
    23         user-select: none;
    24         vertical-align: bottom;
    25         display: inline-block;
    26         padding-left: 30px;
    27         -webkit-box-shadow: 0 1px 0 #ccc;
    28         box-shadow: 0 1px 0 #ccc;
     13        padding: 0 0 0 30px;
    2914}
    3015
    31 .wp-color-result:after {
     16.wp-color-result-text {
    3217        background: #f7f7f7;
    3318        -webkit-border-radius: 0 2px 2px 0;
    3419        border-radius: 0 2px 2px 0;
    3520        border-left: 1px solid #ccc;
    3621        color: #555;
    37         content: attr( title );
    3822        display: block;
    3923        font-size: 11px;
    4024        line-height: 22px;
    4125        padding: 0 6px;
    42         position: relative;
    43         right: 0;
    4426        text-align: center;
    45         top: 0;
    4627}
    4728
    4829.wp-color-result:hover,
    … …  
    5940        border-left: 1px solid #999;
    6041}
    6142
    62 .wp-color-result {
    63         top: 0;
    64 }
    65 
    66 .wp-color-result.wp-picker-open:after {
    67         content: attr( data-current );
    68 }
    69 
    7043.wp-picker-container, .wp-picker-container:active {
    7144        display: inline-block;
    7245        outline: 0;
    … …  
    8356        vertical-align: top;
    8457}
    8558
    86 .wp-picker-container .button {
    87         margin-left: 6px;
     59.wp-picker-container .wp-picker-clear {
     60        margin-left: 2px;
    8861}
    8962
    9063.wp-picker-container .iris-square-slider .ui-slider-handle:focus {
    … …  
    133106        box-shadow:
    134107                0 0 0 1px #5b9dd9,
    135108                0 0 2px 1px rgba(30, 140, 190, .8);
    136 }
    137  No newline at end of file
     109}

  • src/wp-admin/css/customize-controls.css

     
    893893        max-width: 112px;
    894894}
    895895
    896 /* Color Picker */
    897 .customize-control-color .color-picker-hex {
    898         display: none;
    899 }
    900 
    901 .customize-control-color.open .color-picker-hex {
    902         display: block;
    903 }
    904 
    905896.customize-control-color .dropdown {
    906897        margin-right: 5px;
    907898        margin-bottom: 5px;

  • src/wp-admin/js/color-picker.js

     
    33
    44        var ColorPicker,
    55                // html stuff
    6                 _before = '<a tabindex="0" class="wp-color-result" />',
     6                _before = '<button type="button" class="button wp-color-result" aria-expanded="false"><span class="wp-color-result-text"></span></button>',
    77                _after = '<div class="wp-picker-holder" />',
    88                _wrap = '<div class="wp-picker-container" />',
    9                 _button = '<input type="button" class="button button-small hidden" />';
     9                _button = '<input type="button" class="button button-small" />';
    1010
    1111        // jQuery UI Widget constructor
    1212        ColorPicker = {
    … …  
    6666
    6767                        self.initialValue = el.val();
    6868
    69                         // Set up HTML structure, hide things
    70                         el.addClass( 'wp-color-picker' ).hide().wrap( _wrap );
    71                         self.wrap = el.parent();
    72                         self.toggler = $( _before ).insertBefore( el ).css( { backgroundColor: self.initialValue } ).attr( 'title', wpColorPickerL10n.pick ).attr( 'data-current', wpColorPickerL10n.current );
    73                         self.pickerContainer = $( _after ).insertAfter( el );
     69                        // Add CSS class to the input field.
     70                        el.addClass( 'wp-color-picker' );
     71                        // Find the input field wrapper element and store it.
     72                        self.inputWrapper = el.closest( '.wp-picker-input-wrap' );
     73                        // Wrap the input field wrapper in the container _wrap element.
     74                        self.inputWrapper.wrap( _wrap );
     75                        // Store the container _wrap element.
     76                        self.wrap = el.closest( '.wp-picker-container' );
     77                        // Set up the toggle button and insert it at the beginning of the container _wrap element.
     78                        self.toggler = $( _before ).prependTo( self.wrap ).css( { backgroundColor: self.initialValue } )
     79                        // Set up the toggle button text.
     80                        self.toggler.find( '.wp-color-result-text' ).text( wpColorPickerL10n.pick );
     81                        // Insert the color picker holder at the end of the container _wrap element.
     82                        self.pickerContainer = $( _after ).appendTo( self.wrap );
     83                        // Store the Default/Clear button.
    7484                        self.button = $( _button );
    7585
     86                        // Set up the Default/Clear button.
    7687                        if ( self.options.defaultColor ) {
    77                                 self.button.addClass( 'wp-picker-default' ).val( wpColorPickerL10n.defaultString );
     88                                self.button
     89                                        .addClass( 'wp-picker-default' )
     90                                        .val( wpColorPickerL10n.defaultString )
     91                                        .attr( 'aria-label', wpColorPickerL10n.defaultAriaLabel );
    7892                        } else {
    79                                 self.button.addClass( 'wp-picker-clear' ).val( wpColorPickerL10n.clear );
     93                                self.button
     94                                        .addClass( 'wp-picker-clear' )
     95                                        .val( wpColorPickerL10n.clear )
     96                                        .attr( 'aria-label', wpColorPickerL10n.clearAriaLabel );;
    8097                        }
    8198
    82                         el.wrap( '<span class="wp-picker-input-wrap" />' ).after(self.button);
     99                        // Append the Default/Clear button to the input field wrapper element.
     100                        self.inputWrapper.append( self.button );
    83101
    84102                        el.iris( {
    85103                                target: self.pickerContainer,
    … …  
    131149                                }
    132150                        });
    133151
    134                         // open a keyboard-focused closed picker with space or enter
    135                         self.toggler.on( 'keyup', function( event ) {
    136                                 if ( event.keyCode === 13 || event.keyCode === 32 ) {
    137                                         event.preventDefault();
    138                                         self.toggler.trigger( 'click' ).next().focus();
    139                                 }
    140                         });
    141 
    142152                        self.button.click( function( event ) {
    143153                                var me = $( this );
    144154                                if ( me.hasClass( 'wp-picker-clear' ) ) {
    … …  
    153163                        });
    154164                },
    155165                open: function() {
    156                         this.element.show().iris( 'toggle' ).focus();
    157                         this.button.removeClass( 'hidden' );
     166                        this.element.iris( 'toggle' );
     167                        this.inputWrapper.removeClass( 'hidden' );
    158168                        this.wrap.addClass( 'wp-picker-active' );
    159                         this.toggler.addClass( 'wp-picker-open' );
     169                        this.toggler
     170                                .addClass( 'wp-picker-open' )
     171                                .attr( 'aria-expanded', 'true' );
    160172                        $( 'body' ).trigger( 'click.wpcolorpicker' ).on( 'click.wpcolorpicker', this.close );
    161173                },
    162174                close: function() {
    163                         this.element.hide().iris( 'toggle' );
    164                         this.button.addClass( 'hidden' );
     175                        this.element.iris( 'toggle' );
     176                        this.inputWrapper.addClass( 'hidden' );
    165177                        this.wrap.removeClass( 'wp-picker-active' );
    166                         this.toggler.removeClass( 'wp-picker-open' );
     178                        this.toggler
     179                                .removeClass( 'wp-picker-open' )
     180                                .attr( 'aria-expanded', 'false' );
    167181                        $( 'body' ).off( 'click.wpcolorpicker', this.close );
    168182                },
    169183                // $("#input").wpColorPicker('color') returns the current color

  • src/wp-includes/customize/class-wp-customize-color-control.php

     
    103103                        }
    104104                        defaultValue = ' data-default-color=' + defaultValue; // Quotes added automatically.
    105105                } #>
    106                 <label>
    107                         <# if ( data.label ) { #>
    108                                 <span class="customize-control-title">{{{ data.label }}}</span>
    109                         <# } #>
    110                         <# if ( data.description ) { #>
    111                                 <span class="description customize-control-description">{{{ data.description }}}</span>
    112                         <# } #>
    113                         <div class="customize-control-content">
     106                <# if ( data.label ) { #>
     107                        <span class="customize-control-title">{{{ data.label }}}</span>
     108                <# } #>
     109                <# if ( data.description ) { #>
     110                        <span class="description customize-control-description">{{{ data.description }}}</span>
     111                <# } #>
     112                <div class="customize-control-content">
     113                        <div class="wp-picker-input-wrap hidden">
     114                                <label><span class="screen-reader-text">{{{ data.label }}}</span>
    114115                                <# if ( isHueSlider ) { #>
    115116                                        <input class="color-picker-hue" type="text" data-type="hue" />
    116117                                <# } else { #>
    117118                                        <input class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e( 'Hex Value' ); ?>" {{ defaultValue }} />
    118119                                <# } #>
     120                                </label>
    119121                        </div>
    120                 </label>
     122                </div>
    121123                <?php
    122124        }
    123125}

  • src/wp-includes/script-loader.php

     
    715715                $scripts->add( 'iris', '/wp-admin/js/iris.min.js', array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ), '1.0.7', 1 );
    716716                $scripts->add( 'wp-color-picker', "/wp-admin/js/color-picker$suffix.js", array( 'iris' ), false, 1 );
    717717                did_action( 'init' ) && $scripts->localize( 'wp-color-picker', 'wpColorPickerL10n', array(
    718                         'clear' => __( 'Clear' ),
    719                         'defaultString' => __( 'Default' ),
    720                         'pick' => __( 'Select Color' ),
    721                         'current' => __( 'Current Color' ),
     718                        'clear'            => __( 'Clear' ),
     719                        'clearAriaLabel'   => __( 'Clear color' ),
     720                        'defaultString'    => __( 'Default' ),
     721                        'defaultAriaLabel' => __( 'Select default color' ),
     722                        'pick'             => __( 'Select Color' ),
    722723                ) );
    723724
    724725                $scripts->add( 'dashboard', "/wp-admin/js/dashboard$suffix.js", array( 'jquery', 'admin-comments', 'postbox' ), false, 1 );