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:
commit
d50a2d4456
|
@ -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;
|
||||
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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'] ); ?>"
|
||||
|
|
Loading…
Reference in New Issue