Merge pull request #8356 from justinshreve/color-picker-preview

Improve the color picker preview visibility by moving the preview to its own element (#8355)
This commit is contained in:
Mike Jolley 2015-06-11 10:29:59 +01:00
commit d50a2d4456
3 changed files with 17 additions and 3 deletions

View File

@ -2218,6 +2218,17 @@ img.help_tip {
}
}
.colorpickpreview {
padding: 3px;
padding-left: 20px;
border: 1px solid #ddd;
border-right: 0;
}
.colorpick {
border-left: 0;
}
.image_width_settings {
vertical-align: middle;

View File

@ -13,12 +13,10 @@ jQuery( window ).load( function() {
// Color picker
jQuery( '.colorpick' ).iris({
change: function( event, ui ) {
jQuery( this ).css({ backgroundColor: ui.color.toString() });
jQuery( this ).parent().find( '.colorpickpreview' ).css({ backgroundColor: ui.color.toString() });
},
hide: true,
border: true
}).each( function() {
jQuery( this ).css({ backgroundColor: jQuery( this ).val() });
}).click( function() {
jQuery( '.iris-picker' ).hide();
jQuery( this ).closest( '.color_box, td' ).find( '.iris-picker' ).show();

View File

@ -296,6 +296,11 @@ class WC_Admin_Settings {
<?php echo $tooltip_html; ?>
</th>
<td class="forminp forminp-<?php echo sanitize_title( $value['type'] ) ?>">
<?php
if ( 'color' == $value['type'] ) {
echo '<span class="colorpickpreview" style="background: ' . esc_attr( $option_value ) . ';"></span>';
}
?>
<input
name="<?php echo esc_attr( $value['id'] ); ?>"
id="<?php echo esc_attr( $value['id'] ); ?>"