WordPress.org

Make WordPress Core

Changeset 20497


Ignore:
Timestamp:
04/17/2012 10:58:58 PM (7 years ago)
Author:
koopersmith
Message:

Theme Customizer: Improve color picker toggle styles and markup. see #19910.

Location:
trunk/wp-includes
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-includes/class-wp-customize-control.php

    r20349 r20497  
    216216                <label>
    217217                    <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    218                     <div class="color-picker">
    219                         <input type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); ?> />
    220                         <a href="#"></a>
    221                         <div class="color-picker-controls">
    222                             <div class="farbtastic-placeholder"></div>
    223                             <div class="color-picker-details">
    224                                 <div class="color-picker-hex">
    225                                     <span>#</span>
    226                                     <input type="text" <?php $this->link(); ?> />
    227                                 </div>
     218                    <a href="#" class="color-picker-toggle">
     219                        <div class="color-picker-spot"></div>
     220                        <div class="color-picker-dropdown"></div>
     221                    </a>
     222                    <div class="color-picker-controls">
     223                        <div class="farbtastic-placeholder"></div>
     224                        <div class="color-picker-details">
     225                            <div class="color-picker-hex">
     226                                <span>#</span>
     227                                <input type="text" <?php $this->link(); ?> />
    228228                            </div>
    229229                        </div>
  • trunk/wp-includes/css/customize-controls.dev.css

    r20476 r20497  
    198198 * Color Picker
    199199 */
    200 .customize-section .color-picker a {
    201     display: block;
    202     height: 20px;
    203     width: 40px;
    204     border: solid 3px rgba( 0, 0, 0, 0.1 );
    205     background-color: #fff;
     200.customize-section .color-picker-toggle {
     201    float: left;
     202    display: block;
    206203
    207204    -webkit-border-radius: 3px;
     
    209206}
    210207
    211 .customize-section .color-picker .color-picker-controls {
     208.customize-section .color-picker-spot,
     209.customize-section .color-picker-dropdown {
     210    float: left;
     211    height: 24px;
     212    line-height: 24px;
     213}
     214
     215.customize-section .color-picker-spot {
     216    min-width: 30px;
     217    padding: 0 5px;
     218    background-color: #fff;
     219    border: 1px solid rgba( 0, 0, 0, 0.15 );
     220    -webkit-border-radius: 3px 0 0 3px;
     221    border-radius: 3px 0 0 3px;
     222}
     223
     224.customize-section .color-picker-dropdown {
     225    position: relative;
     226    width: 15px;
     227
     228    border-color: #ccc;
     229    border-style: solid;
     230    border-width: 1px 1px 1px 0;
     231    -webkit-border-radius: 0 3px 3px 0;
     232    border-radius: 0 3px 3px 0;
     233}
     234
     235.customize-section .color-picker-dropdown:after {
     236    content: '';
     237    width: 0;
     238    height: 0;
     239    border-color: #ccc transparent transparent transparent;
     240    border-style: solid;
     241    border-width: 4px;
     242    position: absolute;
     243    top: 11px;
     244    right: 4px;
     245    z-index: 1;
     246}
     247.customize-section .color-picker-toggle.open .color-picker-dropdown:after {
     248    border-color: transparent transparent #ccc transparent;
     249    top: 6px;
     250}
     251
     252.customize-section .color-picker-controls {
    212253    display: none;
    213 }
    214 
    215 .customize-section .color-picker .farbtastic-placeholder {
     254    float: left;
     255    margin-top: 10px;
     256}
     257
     258.customize-section .color-picker-controls .farbtastic-placeholder {
    216259    height: 195px;
    217260    width: 195px;
  • trunk/wp-includes/js/customize-controls.dev.js

    r20476 r20497  
    9898        ready: function() {
    9999            var control = this,
    100                 picker, ui, text, toggle, update;
    101 
    102             picker = this.container.find( '.color-picker' );
    103             ui     = picker.find( '.color-picker-controls' );
    104             toggle = picker.find( 'a' );
     100                toggle, spot, ui, text, update;
     101
     102            toggle = this.container.find( '.color-picker-toggle' );
     103            spot   = toggle.find('.color-picker-spot');
     104            ui     = this.container.find( '.color-picker-controls' );
    105105            update = function( color ) {
    106106                color = '#' + color;
    107                 toggle.css( 'background', color );
     107                spot.css( 'background', color );
    108108                control.farbtastic.setColor( color );
    109109            };
    110110
    111             picker.on( 'click', 'a', function() {
     111            toggle.on( 'click', function( event ) {
    112112                ui.toggle();
    113             });
    114 
    115             this.farbtastic = $.farbtastic( picker.find('.farbtastic-placeholder'), function( color ) {
     113                toggle.toggleClass( 'open' );
     114                event.preventDefault();
     115            });
     116
     117            this.farbtastic = $.farbtastic( this.container.find('.farbtastic-placeholder'), function( color ) {
    116118                control.setting.set( color.replace( '#', '' ) );
    117119            });
Note: See TracChangeset for help on using the changeset viewer.