Changeset 20497

Timestamp:

04/17/2012 10:58:58 PM (13 years ago)

Author:

koopersmith

Message:

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

Location:

trunk/wp-includes

Files:

• class-wp-customize-control.php (modified) (1 diff)
• css/customize-controls.dev.css (modified) (2 diffs)
• js/customize-controls.dev.js (modified) (1 diff)

trunk/wp-includes/class-wp-customize-control.php

@@ -216 +216 @@
                 <label>
                     <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
-                    <div class="color-picker">
-                        <input type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); ?> />
-                        <a href="#"></a>
-                        <div class="color-picker-controls">
-                            <div class="farbtastic-placeholder"></div>
-                            <div class="color-picker-details">
-                                <div class="color-picker-hex">
-                                    <span>#</span>
-                                    <input type="text" <?php $this->link(); ?> />
-                                </div>
+                    <a href="#" class="color-picker-toggle">
+                        <div class="color-picker-spot"></div>
+                        <div class="color-picker-dropdown"></div>
+                    </a>
+                    <div class="color-picker-controls">
+                        <div class="farbtastic-placeholder"></div>
+                        <div class="color-picker-details">
+                            <div class="color-picker-hex">
+                                <span>#</span>
+                                <input type="text" <?php $this->link(); ?> />
                             </div>
                         </div>

trunk/wp-includes/css/customize-controls.dev.css

@@ -198 +198 @@
  * Color Picker
  */
-.customize-section .color-picker a {
-    display: block;
-    height: 20px;
-    width: 40px;
-    border: solid 3px rgba( 0, 0, 0, 0.1 );
-    background-color: #fff;
+.customize-section .color-picker-toggle {
+    float: left;
+    display: block;
 
     -webkit-border-radius: 3px;
@@ -209 +206 @@
 }
 
-.customize-section .color-picker .color-picker-controls {
+.customize-section .color-picker-spot,
+.customize-section .color-picker-dropdown {
+    float: left;
+    height: 24px;
+    line-height: 24px;
+}
+
+.customize-section .color-picker-spot {
+    min-width: 30px;
+    padding: 0 5px;
+    background-color: #fff;
+    border: 1px solid rgba( 0, 0, 0, 0.15 );
+    -webkit-border-radius: 3px 0 0 3px;
+    border-radius: 3px 0 0 3px;
+}
+
+.customize-section .color-picker-dropdown {
+    position: relative;
+    width: 15px;
+
+    border-color: #ccc;
+    border-style: solid;
+    border-width: 1px 1px 1px 0;
+    -webkit-border-radius: 0 3px 3px 0;
+    border-radius: 0 3px 3px 0;
+}
+
+.customize-section .color-picker-dropdown:after {
+    content: '';
+    width: 0;
+    height: 0;
+    border-color: #ccc transparent transparent transparent;
+    border-style: solid;
+    border-width: 4px;
+    position: absolute;
+    top: 11px;
+    right: 4px;
+    z-index: 1;
+}
+.customize-section .color-picker-toggle.open .color-picker-dropdown:after {
+    border-color: transparent transparent #ccc transparent;
+    top: 6px;
+}
+
+.customize-section .color-picker-controls {
     display: none;
-}
-
-.customize-section .color-picker .farbtastic-placeholder {
+    float: left;
+    margin-top: 10px;
+}
+
+.customize-section .color-picker-controls .farbtastic-placeholder {
     height: 195px;
     width: 195px;

trunk/wp-includes/js/customize-controls.dev.js

@@ -98 +98 @@
         ready: function() {
             var control = this,
-                picker, ui, text, toggle, update;
-
-            picker = this.container.find( '.color-picker' );
-            ui     = picker.find( '.color-picker-controls' );
-            toggle = picker.find( 'a' );
+                toggle, spot, ui, text, update;
+
+            toggle = this.container.find( '.color-picker-toggle' );
+            spot   = toggle.find('.color-picker-spot');
+            ui     = this.container.find( '.color-picker-controls' );
             update = function( color ) {
                 color = '#' + color;
-                toggle.css( 'background', color );
+                spot.css( 'background', color );
                 control.farbtastic.setColor( color );
             };
 
-            picker.on( 'click', 'a', function() {
+            toggle.on( 'click', function( event ) {
                 ui.toggle();
-            });
-
-            this.farbtastic = $.farbtastic( picker.find('.farbtastic-placeholder'), function( color ) {
+                toggle.toggleClass( 'open' );
+                event.preventDefault();
+            });
+
+            this.farbtastic = $.farbtastic( this.container.find('.farbtastic-placeholder'), function( color ) {
                 control.setting.set( color.replace( '#', '' ) );
             });