Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-06-28 07:45:02 +02:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
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>
<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>
</div>

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

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

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

@ -97,22 +97,24 @@
api.ColorControl = api.Control.extend({
ready: function() {
var control = this,
picker, ui, text, toggle, update;
toggle, spot, ui, text, update;
picker = this.container.find( '.color-picker' );
ui = picker.find( '.color-picker-controls' );
toggle = picker.find( 'a' );
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();
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( '#', '' ) );
});