Changeset 40471

Timestamp:

04/18/2017 12:30:07 AM (9 years ago)

Author:

westonruter

Message:

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

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

Location:

trunk/src

Files:

• wp-admin/css/color-picker.css (modified) (1 diff)
• wp-includes/customize/class-wp-customize-color-control.php (modified) (3 diffs)

trunk/src/wp-admin/css/color-picker.css

@@ -135 +135 @@
                 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;
+        }
+}

trunk/src/wp-includes/customize/class-wp-customize-color-control.php

@@ -93 +93 @@
         public function content_template() {
                 ?>
-                <# var defaultValue = '',
+                <# var defaultValue = '#RRGGBB', defaultValueAttr = '',
                         isHueSlider = data.mode === 'hue';
 
@@ -102 +102 @@
                                 defaultValue = data.defaultValue;
                         }
-                        defaultValue = ' data-default-color=' + defaultValue; // Quotes added automatically.
+                        defaultValueAttr = ' data-default-color=' + defaultValue; // Quotes added automatically.
                 } #>
                 <label>
@@ -115 +115 @@
                                         <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>