Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #8358 from justinshreve/colorpicker-integration 

Implement the new color picker input and preview for integrations
This commit is contained in:
Mike Jolley 2015-06-12 11:08:08 +01:00
parent 6d3ea23fac 3dc0df16e0
commit 59d3fb5224
4 changed files with 6 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/admin.css
View File

File diff suppressed because one or more lines are too long

39
assets/css/admin.scss
View File

@ -2158,45 +2158,6 @@ img.help_tip {
}
}
.color_box {
float: left;
width: 90px;
padding: 4px 6px;
margin: 0 10px 0 0;
border: 1px solid #ccc;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
strong {
display: block;
text-align: left;
padding: 0 0 2px;
font-size: 0.92em;
img {
float: right;
margin: 1px 0 0 0;
}
}
input.colorpick {
margin: 0;
width: 100%;
font-family: monospace;
box-sizing: border-box;
}
.iris-picker {
margin: 15px 0 0 -7px;
}
}
.color_box_clear {
clear: both;
display: block;
padding-bottom: 10px;
}
.iris-picker {
z-index: 100;
display: none;

4
assets/js/admin/settings.js
View File

@ -19,14 +19,14 @@ jQuery( window ).load( function() {
border: true
}).click( function() {
jQuery( '.iris-picker' ).hide();
jQuery( this ).closest( '.color_box, td' ).find( '.iris-picker' ).show();
jQuery( this ).closest( 'td' ).find( '.iris-picker' ).show();
});
jQuery( 'body' ).click( function() {
jQuery( '.iris-picker' ).hide();
});
jQuery( '.color_box, .colorpick' ).click( function( event ) {
jQuery( '.colorpick' ).click( function( event ) {
event.stopPropagation();
});

7
includes/abstracts/abstract-wc-settings-api.php
View File

@ -486,10 +486,9 @@ abstract class WC_Settings_API {
<td class="forminp">
<fieldset>
<legend class="screen-reader-text"><span><?php echo wp_kses_post( $data['title'] ); ?></span></legend>
<div class="color_box">
<input class="colorpick <?php echo esc_attr( $data['class'] ); ?>" type="text" name="<?php echo esc_attr( $field ); ?>" id="<?php echo esc_attr( $field ); ?>" style="<?php echo esc_attr( $data['css'] ); ?>" value="<?php echo esc_attr( $this->get_option( $key ) ); ?>" placeholder="<?php echo esc_attr( $data['placeholder'] ); ?>" <?php disabled( $data['disabled'], true ); ?> <?php echo $this->get_custom_attribute_html( $data ); ?> />
<div id="colorPickerDiv_<?php echo esc_attr( $field ); ?>" class="colorpickdiv" style="z-index: 100; background: #eee; border: 1px solid #ccc; position: absolute; display: none;"></div>
</div>
<span class="colorpickpreview" style="background:<?php echo esc_attr( $this->get_option( $key ) ); ?>;"></span>
<input class="colorpick <?php echo esc_attr( $data['class'] ); ?>" type="text" name="<?php echo esc_attr( $field ); ?>" id="<?php echo esc_attr( $field ); ?>" style="<?php echo esc_attr( $data['css'] ); ?>" value="<?php echo esc_attr( $this->get_option( $key ) ); ?>" placeholder="<?php echo esc_attr( $data['placeholder'] ); ?>" <?php disabled( $data['disabled'], true ); ?> <?php echo $this->get_custom_attribute_html( $data ); ?> />
<div id="colorPickerDiv_<?php echo esc_attr( $field ); ?>" class="colorpickdiv" style="z-index: 100; background: #eee; border: 1px solid #ccc; position: absolute; display: none;"></div>
<?php echo $this->get_description_html( $data ); ?>
</fieldset>
</td>