sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Customize: Use fixed-width illustrative placeholder for hex field in color picker to prevent truncation.

Browse Source 
Props stormrockwell, sagarprajapati, Presskopp, afercia, tejas5989, westonruter, mayurk for testing.
Fixes #39096.


git-svn-id: https://develop.svn.wordpress.org/trunk@40471 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Weston Ruter 2017-04-18 00:30:07 +00:00
parent 417e3945d2
commit f5f0aea2a9
2 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/wp-admin/css/color-picker.css
View File

@ -133,4 +133,11 @@
box-shadow: box-shadow:
0 0 0 1px #5b9dd9, 0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8); 0 0 2px 1px rgba(30, 140, 190, .8);
} }
@media screen and ( max-width: 782px ) {
.wp-picker-container input[type="text"].wp-color-picker {
margin-right: 6px;
padding: 3px 5px;
}
}

6
src/wp-includes/customize/class-wp-customize-color-control.php
View File

@ -92,7 +92,7 @@ class WP_Customize_Color_Control extends WP_Customize_Control {
*/ */
public function content_template() { public function content_template() {
?> ?>
<# var defaultValue = '', <# var defaultValue = '#RRGGBB', defaultValueAttr = '',
isHueSlider = data.mode === 'hue'; isHueSlider = data.mode === 'hue';
if ( data.defaultValue && ! isHueSlider ) { if ( data.defaultValue && ! isHueSlider ) {
@ -101,7 +101,7 @@ class WP_Customize_Color_Control extends WP_Customize_Control {
} else { } else {
defaultValue = data.defaultValue; defaultValue = data.defaultValue;
} }
defaultValue = ' data-default-color=' + defaultValue; // Quotes added automatically. defaultValueAttr = ' data-default-color=' + defaultValue; // Quotes added automatically.
} #> } #>
<label> <label>
<# if ( data.label ) { #> <# if ( data.label ) { #>
@ -114,7 +114,7 @@ class WP_Customize_Color_Control extends WP_Customize_Control {
<# if ( isHueSlider ) { #> <# if ( isHueSlider ) { #>
<input class="color-picker-hue" type="text" data-type="hue" /> <input class="color-picker-hue" type="text" data-type="hue" />
<# } else { #> <# } else { #>
<input class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e( 'Hex Value' ); ?>" {{ defaultValue }} /> <input class="color-picker-hex" type="text" maxlength="7" placeholder="{{ defaultValue }}" {{ defaultValueAttr }} />
<# } #> <# } #>
</div> </div>
</label> </label>