WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

git-svn-id: http://svn.automattic.com/wordpress/trunk@20497 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
koopersmith 2012-04-17 22:58:58 +00:00
parent 9df0620d89
commit 1c19b69eeb
3 changed files with 70 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
wp-includes/class-wp-customize-control.php
View File

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

59
wp-includes/css/customize-controls.dev.css
View File

@ -197,22 +197,65 @@ body {
/* /*
* Color Picker * Color Picker
*/ */
.customize-section .color-picker a { .customize-section .color-picker-toggle {
float: left;
display: block; display: block;
height: 20px;
width: 40px;
border: solid 3px rgba( 0, 0, 0, 0.1 );
background-color: #fff;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
} }
.customize-section .color-picker .color-picker-controls { .customize-section .color-picker-spot,
display: none; .customize-section .color-picker-dropdown {
float: left;
height: 24px;
line-height: 24px;
} }
.customize-section .color-picker .farbtastic-placeholder { .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;
float: left;
margin-top: 10px;
}
.customize-section .color-picker-controls .farbtastic-placeholder {
height: 195px; height: 195px;
width: 195px; width: 195px;
border: 4px solid #fff; border: 4px solid #fff;

16
wp-includes/js/customize-controls.dev.js
View File

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