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

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

@ -134,3 +134,10 @@
0 0 0 1px #5b9dd9,
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() {
?>
<# var defaultValue = '',
<# var defaultValue = '#RRGGBB', defaultValueAttr = '',
isHueSlider = data.mode === 'hue';
if ( data.defaultValue && ! isHueSlider ) {
@ -101,7 +101,7 @@ class WP_Customize_Color_Control extends WP_Customize_Control {
} else {
defaultValue = data.defaultValue;
}
defaultValue = ' data-default-color=' + defaultValue; // Quotes added automatically.
defaultValueAttr = ' data-default-color=' + defaultValue; // Quotes added automatically.
} #>
<label>
<# if ( data.label ) { #>
@ -114,7 +114,7 @@ class WP_Customize_Color_Control extends WP_Customize_Control {
<# if ( isHueSlider ) { #>
<input class="color-picker-hue" type="text" data-type="hue" />
<# } 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>
</label>